body {
    background: #F8F3EB;
    color: #1F211D;
    margin: 0;
}

a {
    color: inherit;
}

/* =========================
   HEADER
========================= */

.site-header {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    background: transparent;
}

.site-header__inner {
    max-width: 1350px;
    margin: 0 auto;
    padding: 32px 80px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 40px;
}

.site-nav a,
.nav-dropdown__trigger {
    text-decoration: none;
    color: #1F211D;
}

.nav-dropdown {
    position: relative;
}

.nav-dropdown__menu {
    display: none;
    position: absolute;
    top: calc(100% + 16px);
    left: 0;

    min-width: 280px;
    padding: 16px;

    background: #F8F3EB;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.nav-dropdown__menu a {
    display: block;
    padding: 10px 12px;
}

.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown:focus-within .nav-dropdown__menu {
    display: block;
}

.site-header__actions {
    display: flex;
    align-items: center;
}

.header-cta {
    text-decoration: none;
    background: #3F4937;
    color: #F8F3EB;
    padding: 14px 24px;
    border-radius: 6px;
    box-shadow:
    0 8px 18px rgba(31, 33, 29, 0.14);

transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.menu-toggle {
    display: none;
}
.site-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.site-logo img {
    display: block;
    width: 220px;
    height: auto;
    filter: drop-shadow(0 3px 4px rgba(31, 33, 29, 0.14));
}
.site-nav,
.site-nav a,
.nav-dropdown__trigger,
.header-cta {
    font-family: "Inter", sans-serif;
}
/* =========================
   FOOTER — DESKTOP
========================= */

.site-footer {
    background: #F8F3EB;
    color: #1F211D;
    padding: 56px 80px 32px;
    font-family: "Inter", sans-serif;
    box-shadow:
    inset 0 16px 24px -22px rgba(31, 33, 29, 0.18);
}

.site-footer__main {
    max-width: 1350px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 260px 180px 150px 180px 250px;
    justify-content: space-between;
    gap: 40px;
}

.site-footer__brand img {
    width: 230px;
    height: auto;
    display: block;
}

.site-footer h4 {
    margin: 0 0 16px;

    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 600;
}

.site-footer__column a,
.site-footer__connect > a {
    display: block;

    margin-bottom: 12px;

    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 400;

    color: #1F211D;
    text-decoration: none;
}

.site-footer__connect {
    border-left: 1px solid rgba(31, 33, 29, 0.15);
    padding-left: 48px;
}

.site-footer__socials {
    display: flex;
    gap: 16px;
    margin: 16px 0 24px;
}

.site-footer__socials a {
    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 0;

    text-decoration: none;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}
.site-footer__socials img {
    display: block;
    width: 32px;
    height: 32px;
    object-fit: contain;
    filter: drop-shadow(0 3px 4px rgba(31, 33, 29, 0.12));
}
@media (hover: hover) {
    .site-footer__socials a:hover {
        transform: translateY(-2px) scale(1.05);
        opacity: 0.75;
    }

    .site-footer__socials a:active {
        transform: translateY(0) scale(0.98);
    }
}

.site-footer__discovery {
    display: inline-flex !important;
    align-items: center;

    width: fit-content;

    padding: 13px 16px;

    border: 1px solid rgba(31, 33, 29, 0.7);
    border-radius: 6px;

    font-weight: 500 !important;
    background: #fefdfb;
    box-shadow:
    0 8px 18px rgba(31, 33, 29, 0.14);

transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
@media (hover: hover) {
    .site-footer__discovery:hover {
        transform: translateY(-2px);

        box-shadow:
            0 12px 24px rgba(31, 33, 29, 0.18),
            0 4px 8px rgba(31, 33, 29, 0.08);
    }

    .site-footer__discovery:active {
        transform: translateY(0);
    }
}

.site-footer__bottom {
    max-width: 1280px;
    margin: 40px auto 0;
    padding-top: 32px;

    border-top: 1px solid rgba(31, 33, 29, 0.15);

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-footer__bottom p {
    margin: 0;

    font-size: 13px;
    line-height: 1.4;
}

.site-footer__legal {
    display: flex;
    align-items: center;
    gap: 28px;
}

.site-footer__legal a {
    font-size: 13px;
    line-height: 1.4;

    color: #1F211D;
    text-decoration: none;
}
/* =========================
   TABLET — 1024px AND BELOW
========================= */

@media (max-width: 1024px) {

    /* HEADER */

    .site-header__inner {
        padding: 28px 48px;

        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .site-logo img {
        width: 120px;
        height: auto;
    }

    .site-nav {
        display: none;
    }

    .site-header__actions {
        display: flex;
        align-items: center;
        gap: 24px;
    }

    .header-cta {
        display: inline-flex;
        align-items: center;

        padding: 10px 16px;

        font-size: 12px;
        border-radius: 6px;
    }

    .menu-toggle {
        display: block;

        border: 0;
        background: transparent;

        color: #1F211D;

        font-size: 28px;
        line-height: 1;

        padding: 0;
        cursor: pointer;
    }
    
}
/* GLOBAL HEADER CTA — preserved shared interaction */
@media (hover: hover) {
    .header-cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(31,33,29,.12), 0 4px 8px rgba(31,33,29,.08);
    }
    .header-cta:active { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}
/* =========================
   HEADER NAV — UNDERLINE HOVER
========================= */

.site-nav a {
    position: relative;
    text-decoration: none;
    text-shadow: 0 2px 3px rgba(31, 33, 29, 0.10);
}

.site-nav a::after {
    content: "";
    position: absolute;

    left: 0;
    bottom: -8px;

    width: 100%;
    height: 2px;

    background: #C96743;

    transform: scaleX(0);
    transform-origin: left;

    transition: transform 0.25s ease;
}

@media (hover: hover) {
    .site-nav a:hover::after {
        transform: scaleX(1);
    }
}
/* =========================
   FRAYORA — TEXT CTA
========================= */

.frayora-text-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;

    text-decoration: none;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}

.frayora-text-cta::after {
    content: "";
    position: absolute;

    left: 0;
    bottom: -6px;

    width: 100%;
    height: 2px;

    background: #C96743;

    transform: scaleX(0);
    transform-origin: left;

    transition: transform 0.25s ease;
}

.frayora-text-cta .cta-arrow {
    display: inline-block;
    transition: transform 0.2s ease;
}

@media (hover: hover) {

    .frayora-text-cta:hover {
        transform: translateY(-2px);
    }

    .frayora-text-cta:hover::after {
        transform: scaleX(1);
    }

    .frayora-text-cta:hover .cta-arrow {
        transform: translateX(4px);
    }
}
/* =========================
   FRAYORA — NAV LINK
========================= */

.frayora-nav-link {
    position: relative;
    text-decoration: none;
}

.frayora-nav-link::after {
    content: "";
    position: absolute;

    left: 0;
    bottom: -8px;

    width: 100%;
    height: 2px;

    background: #C96743;

    transform: scaleX(0);
    transform-origin: left;

    transition: transform 0.25s ease;
}

@media (hover: hover) {

    .frayora-nav-link:hover::after {
        transform: scaleX(1);
    }
}
/* =========================
   FRAYORA — TEXT CTA SYSTEM
========================= */

.frayora-text-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;

    text-decoration: none;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}

.frayora-text-cta::after {
    content: "";
    position: absolute;

    left: 0;
    bottom: -6px;

    width: 100%;
    height: 2px;

    background: #C96743;

    transform: scaleX(0);
    transform-origin: left;

    transition: transform 0.25s ease;
}

.frayora-text-cta .cta-arrow {
    display: inline-block;
    transition: transform 0.2s ease;
}

@media (hover: hover) {

    .frayora-text-cta:hover {
        transform: translateY(-2px);
    }

    .frayora-text-cta:hover::after {
        transform: scaleX(1);
    }

    .frayora-text-cta:hover .cta-arrow {
        transform: translateX(4px);
    }

    .frayora-text-cta:active {
        transform: translateY(0);
    }
}
    @media (max-width: 1024px) {
/* ===== FOOTER — TABLET ===== */

.site-footer {
    padding: 64px 40px 32px;
}

.site-footer__main {
    max-width: none;

    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr 1.15fr;
    gap: 40px;

    align-items: start;
}

.site-footer__brand img {
    width: 150px;
}

.site-footer__connect {
    border-left: none;
    padding-left: 0;
}

.site-footer__bottom {
    max-width: none;

    margin-top: 40px;
    padding-top: 24px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;

    text-align: center;
}

.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 24px;
}
.site-footer__column a,
.site-footer__connect > a {
    font-size: 13px;
}

.site-footer h4 {
    font-size: 13px;
}
/* ===== FOOTER — TABLET REFINEMENT ===== */

.site-footer__main {
    grid-template-columns: 1.1fr 1fr 1fr;
    grid-template-areas:
        "brand services company"
        "brand connect resources";
    gap: 40px 48px;
}

.site-footer__brand {
    grid-area: brand;
}

.site-footer__column:nth-of-type(2) {
    grid-area: services;
}

.site-footer__column:nth-of-type(3) {
    grid-area: company;
}

.site-footer__column:nth-of-type(4) {
    grid-area: resources;
}

.site-footer__connect {
    grid-area: connect;
    margin-top: 0;
}
.site-footer__discovery {
    white-space: nowrap;

    padding: 12px 16px;
    font-size: 13px;
}
}
/* =========================================
   HERO — RESPONSIVE IMAGE FIX
========================================= */



/* MOBILE — 600px AND BELOW */

@media (max-width: 600px) {

/* MOBILE HEADER */

.site-header__inner {
    padding: 18px 24px;
}

.site-logo img {
    width: 100px;
}

.header-cta {
    display: none;
}

.site-header__actions {
    gap: 0;
}

.menu-toggle {
    font-size: 24px;
}


/* =========================
   FOOTER — MOBILE
========================= */

.site-footer {
    padding: 48px 24px 24px;
}

.site-footer__main {
    width: 100%;
    max-width: none;
    margin: 0;

    display: flex;
    flex-direction: column;
    gap: 40px;
}

.site-footer__brand {
    width: 100%;
}

.site-footer__brand img {
    width: 150px;
    height: auto;
}

.site-footer__column,
.site-footer__connect {
    width: 100%;
}

.site-footer__connect {
    border-left: 0;
    padding-left: 0;
}

.site-footer h4 {
    margin-bottom: 16px;
    font-size: 13px;
}

.site-footer__column a,
.site-footer__connect > a {
    margin-bottom: 12px;

    font-size: 13px;
    line-height: 1.4;
}

.site-footer__socials {
    margin: 16px 0 24px;
}

.site-footer__discovery {
    padding: 12px 16px;
    font-size: 12px;
}


/* FOOTER BOTTOM */

.site-footer__bottom {
    width: 100%;
    max-width: none;

    margin: 40px 0 0;
    padding-top: 24px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.site-footer__bottom p {
    width: 100%;
    font-size: 11px;
    text-align: center;
}

.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.site-footer__legal a {
    font-size: 11px;
}
}






/* =========================================================
   FRAYORA — OUR APPROACH
   SECTION 01 — FULL-WIDTH PHOTOGRAPHIC HERO
   DESKTOP ONLY — 1101px+

   CONSOLIDATED LUMINOUS EDITION
   Bond-inspired composition
   About Us typography: Manrope + Inter

   Hero height: 600px
   Full-width photo
   Luminous olive overlay
   Terracotta pill button
   Existing hero entrances preserved
========================================================= */

@media screen and (min-width: 1101px) {

    /* =========================================
       01 — HERO SECTION
    ========================================= */

    body .our-approach-page .oa-hero {
        position: relative;
        isolation: isolate;

        display: flex;
        align-items: center;

        width: 100vw;
        max-width: none;

        height: 600px;
        min-height: 600px;

        margin: 0 0 0 calc(50% - 50vw);
        padding: 0;

        overflow: hidden;
        box-sizing: border-box;

        background-color: #20251F;

        background-image:
            url("../images/Our Approach/newdesktopheropic.png");

        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;

        border: 0;
        border-radius: 0;
    }

    body .our-approach-page .oa-hero *,
    body .our-approach-page .oa-hero *::before,
    body .our-approach-page .oa-hero *::after {
        box-sizing: border-box;
    }

    /* =========================================
       02 — LUMINOUS OLIVE PHOTO OVERLAY

       Layer 1: Soft warm light at the upper right
       Layer 2: Subtle muted-olive luminosity
       Layer 3: Dark olive left-to-right gradient

       All integrated into ONE pseudo-element.
    ========================================= */

    body .our-approach-page .oa-hero::before {
        content: "";

        display: block;

        position: absolute;
        inset: 0;
        z-index: 1;

        background:
    /* Soft olive luminosity across the upper left */
    radial-gradient(
        ellipse 85% 110% at 8% 15%,
        rgba(88, 105, 78, 0.18) 0%,
        rgba(88, 105, 78, 0.08) 60%,
        transparent 100%
    ),

    /* Balanced olive depth through center */
    radial-gradient(
        ellipse 85% 115% at 43% 55%,
        rgba(77, 95, 70, 0.15) 0%,
        rgba(77, 95, 70, 0.06) 65%,
        transparent 100%
    ),

    /* Gentle illumination across lower-left */
    radial-gradient(
        ellipse 90% 105% at 12% 100%,
        rgba(103, 121, 91, 0.16) 0%,
        rgba(103, 121, 91, 0.06) 60%,
        transparent 100%
    ),

    /* Preserve strong dark olive readability gradient */
    linear-gradient(
        90deg,
        rgba(20, 27, 19, 0.98) 0%,
        rgba(20, 27, 19, 0.96) 22%,
        rgba(20, 27, 19, 0.90) 35%,
        rgba(20, 27, 19, 0.75) 45%,
        rgba(20, 27, 19, 0.42) 60%,
        rgba(20, 27, 19, 0.12) 75%,
        rgba(20, 27, 19, 0) 88%
    );

        background-repeat: no-repeat;

        pointer-events: none;
    }

    /* No separate decorative photo panel */

    body .our-approach-page .oa-hero::after {
        content: none !important;
        display: none !important;
        animation: none !important;
    }

    /* =========================================
       03 — REMOVE OLD DECORATIONS
    ========================================= */

    body .our-approach-page .oa-hero__accent,
    body .our-approach-page .oa-hero__star,
    body .our-approach-page .oa-hero__line,
    body .our-approach-page .oa-hero__accent-line,
    body .our-approach-page .oa-hero__decoration,
    body .our-approach-page .oa-hero__decor {
        display: none !important;
    }

    body .our-approach-page .oa-hero__content::before,
    body .our-approach-page .oa-hero__content::after {
        content: none !important;
        display: none !important;
    }

    /* =========================================
       04 — CONTENT CONTAINER
       Retains approved alignment
    ========================================= */

    body .our-approach-page .oa-hero__inner {
        position: relative;
        z-index: 2;

        display: flex;
        align-items: center;
        justify-content: flex-start;

        width: 100%;
        max-width: 1600px;

        height: 600px;
        min-height: 600px;

        margin: 0 auto;
        padding: 45px 80px;

        box-sizing: border-box;
    }

    body .our-approach-page .oa-hero__content {
        position: relative;
        z-index: 3;

        width: 100%;
        max-width: 620px;
        min-width: 0;

        margin: 0;
        padding: 0;

        text-align: left;
    }

    /* =========================================
       05 — EYEBROW
       Inter / Terracotta
    ========================================= */

    body .our-approach-page .oa-hero__eyebrow {
        display: block;

        margin: 0 0 15px;
        padding: 0;

        font-family: "Inter", sans-serif !important;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.4;
        letter-spacing: 0.11em;
        text-transform: uppercase;

        color: #E99572;
        text-align: left;

        animation:
            oaHeroTextIn 0.8s
            cubic-bezier(.22, 1, .36, 1)
            0.10s both;
    }

    body .our-approach-page .oa-hero__eyebrow::before,
    body .our-approach-page .oa-hero__eyebrow::after {
        content: none !important;
        display: none !important;
    }

    /* =========================================
       06 — HERO HEADING
       Manrope / About Us typography
    ========================================= */

    body .our-approach-page .oa-hero__title {
        width: 100%;
        max-width: 680px;

        margin: 0;
        padding: 0;

        font-family: "Manrope", sans-serif !important;
        font-size: clamp(58px, 4.9vw, 76px);
        font-weight: 600;
        line-height: 1.05;
        letter-spacing: -0.055em;

        color: #F8F3EB;
        text-align: left;
        text-wrap: balance;

        text-shadow:
            0 3px 18px rgba(0, 0, 0, 0.25);

        animation:
            oaHeroTextIn 1s
            cubic-bezier(.22, 1, .36, 1)
            0.22s both;
    }

    /* =========================================
       07 — BODY COPY
       Inter / Ivory
    ========================================= */

    body .our-approach-page .oa-hero__copy {
        width: 100%;
        max-width: 520px;

        margin: 23px 0 0;
        padding: 0;

        animation:
            oaHeroTextIn 0.95s
            cubic-bezier(.22, 1, .36, 1)
            0.36s both;
    }

    body .our-approach-page .oa-hero__copy p {
        margin: 0;
        padding: 0;

        font-family: "Inter", sans-serif !important;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.65;
        letter-spacing: 0;

        color: rgba(248, 243, 235, 0.92);
        text-align: left;
    }

    body .our-approach-page .oa-hero__copy p + p {
        margin-top: 15px;
    }

    /* =========================================
       08 — PRIMARY PILL BUTTON
    ========================================= */

    body .our-approach-page .oa-hero__button {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        width: fit-content;
        min-height: 52px;

        margin: 23px 0 0;
        padding: 0 30px;
        gap: 16px;

        border: 0;
        border-radius: 999px;

        background-color: #C96743;
        color: #FFFFFF;

        font-family: "Manrope", sans-serif !important;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.3;
        letter-spacing: -0.015em;
        text-decoration: none;

        box-shadow:
            0 9px 24px rgba(0, 0, 0, 0.20);

        transition:
            background-color 0.35s ease,
            transform 0.35s ease,
            box-shadow 0.35s ease;

        animation:
            oaHeroTextIn 0.9s
            cubic-bezier(.22, 1, .36, 1)
            0.50s both;
    }

    body .our-approach-page .oa-hero__button:hover {
        background-color: #B95635;
        color: #FFFFFF;

        transform: translateY(-3px);

        box-shadow:
            0 14px 28px rgba(0, 0, 0, 0.25);
    }

    body .our-approach-page .oa-hero__button:focus-visible {
        outline: 2px solid #F8F3EB;
        outline-offset: 4px;
    }

    /* =========================================
       09 — BUTTON ARROW
    ========================================= */

    body .our-approach-page .oa-hero__arrow {
        display: inline-block;

        font-family: "Inter", sans-serif;
        font-size: 19px;
        font-weight: 400;
        line-height: 1;

        transition:
            transform 0.35s cubic-bezier(.22, 1, .36, 1);
    }

    body .our-approach-page
    .oa-hero__button:hover
    .oa-hero__arrow {
        transform: translateX(5px);
    }

    /* =========================================
       10 — HERO TEXT ENTRANCE
    ========================================= */

    @keyframes oaHeroTextIn {
        from {
            opacity: 0;
            transform: translateY(24px);
            filter: blur(4px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
            filter: blur(0);
        }
    }

    /* =========================================
       11 — SMALLER DESKTOP
       1101px–1350px
    ========================================= */

    @media (max-width: 1350px) {

        body .our-approach-page .oa-hero__inner {
            padding-left: 60px;
            padding-right: 60px;
        }

        body .our-approach-page .oa-hero__content {
            max-width: 570px;
        }

        body .our-approach-page .oa-hero__title {
            font-size: clamp(56px, 5vw, 68px);
        }
    }

    /* =========================================
       12 — ACCESSIBILITY
    ========================================= */

    @media (prefers-reduced-motion: reduce) {

        body .our-approach-page .oa-hero__eyebrow,
        body .our-approach-page .oa-hero__title,
        body .our-approach-page .oa-hero__copy,
        body .our-approach-page .oa-hero__button {
            animation: none !important;
            opacity: 1 !important;
            transform: none !important;
            filter: none !important;
        }

        body .our-approach-page .oa-hero__button,
        body .our-approach-page .oa-hero__arrow {
            transition: none !important;
        }
    }

} /* END OUR APPROACH HERO — DESKTOP */



/* =====================================================
   FRAYORA — OUR APPROACH
   SECTION 01 — EXACT ABOUT FRAYORA HERO

   Reuses the existing About Frayora hero classes.

   The only CSS differences are the photographs.

   Inherits automatically:
   - All overlay effects
   - Hero heights and curves
   - Typography and positioning
   - Shadows and animations
   - Desktop, tablet and mobile rules
===================================================== */


/* DESKTOP — 1101px+ */

@media screen and (min-width: 1101px) {

    body .our-approach-page
    .about-us-page .about-hero__media {

        background-image:
            url("../images/Our Approach/newdesktopheropic.png");

    }

}


/* TABLET — 600px–1100px */

@media screen and (min-width: 600px)
and (max-width: 1100px) {

    body .our-approach-page
    .about-us-page .about-hero__media {

        background-image:
            url("../images/Our Approach/newherotabletnew.png");

    }

}


/* MOBILE — 0px–599px */

@media screen and (max-width: 599px) {

    body .our-approach-page
    .about-us-page .about-hero__media {

        background-image:
            url("../images/Our Approach/newheromobilenew.png");

    }

}


/* =====================================================
   FRAYORA — OUR APPROACH
   SECTION 01 — MOBILE HERO REFINEMENT

   - Reduce excessive hero height
   - Vertically center heading
   - Remove inherited 65px downward offset
   - Preserve About Frayora visual design
===================================================== */

@media screen and (max-width: 599px) {

    /* HERO HEIGHT */

    body .our-approach-page
    .about-us-page .about-hero {

        height: 390px;
        min-height: 390px;

    }


    /* CENTER HERO CONTENT */

    body .our-approach-page
    .about-us-page .about-hero__inner {

        display: flex;
        align-items: center;
        justify-content: center;

        height: 100%;

        padding: 24px;

        text-align: center;

    }


    /* REMOVE ORIGINAL DOWNWARD TITLE OFFSET */

    body .our-approach-page
    .about-us-page .about-hero__title {

        animation:
            oaMobileCenteredTitle 1.05s
            cubic-bezier(.22, 1, .36, 1)
            0.25s both;

    }

}


/* =====================================================
   SMALL MOBILE — 390px AND BELOW
===================================================== */

@media screen and (max-width: 390px) {

    body .our-approach-page
    .about-us-page .about-hero {

        height: 380px;
        min-height: 380px;

    }

}


/* =====================================================
   CENTERED TITLE ANIMATION
===================================================== */

@keyframes oaMobileCenteredTitle {

    from {
        opacity: 0;
        transform: translateY(20px);
        filter: blur(3px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }

}


/* =====================================================
   REDUCED MOTION
===================================================== */

@media screen and (max-width: 599px)
and (prefers-reduced-motion: reduce) {

    body .our-approach-page
    .about-us-page .about-hero__title {

        animation: none !important;
        transform: none !important;
        filter: none !important;
        opacity: 1 !important;

    }

}







/* =========================================================
   FRAYORA — OUR APPROACH
   SECTION 03 — THE FRAYORA METHOD
   DESKTOP ONLY — 1101px+

   LUMINOUS WARM-STONE EDITION
   Base: #F5EDE4
   Typography: Manrope + Inter

   Preserves:
   - Five-step journey
   - Animated wavy SVG
   - Original number and dot positioning
   - Hover and entrance effects
   - Italic second closing sentence
   - Terracotta star
========================================================= */

@media screen and (min-width: 1101px) {

    /* =========================================
       01 — LUMINOUS WARM-STONE SECTION
    ========================================= */

    body .our-approach-page .oa-method {
        position: relative;
        isolation: isolate;

        width: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;

        background-color: #F5EDE4;

        
background-image:

    /* Broad ivory illumination across the left and center */
    radial-gradient(
        ellipse 100% 120% at 20% 40%,
        rgba(255, 255, 255, 0.40) 0%,
        rgba(255, 255, 255, 0.20) 58%,
        transparent 100%
    ),

    /* Matching soft illumination across the RIGHT */
    radial-gradient(
        ellipse 95% 115% at 95% 45%,
        rgba(255, 255, 255, 0.38) 0%,
        rgba(255, 255, 255, 0.17) 60%,
        transparent 100%
    ),

    /* Warm-stone depth through the center */
    radial-gradient(
        ellipse 95% 105% at 55% 60%,
        rgba(218, 203, 189, 0.18) 0%,
        rgba(218, 203, 189, 0.07) 65%,
        transparent 100%
    ),

    /* Gentle ivory lift across the bottom */
    radial-gradient(
        ellipse 110% 90% at 50% 105%,
        rgba(255, 255, 255, 0.25) 0%,
        rgba(255, 255, 255, 0.10) 65%,
        transparent 100%
    );

background-repeat: no-repeat;

        box-sizing: border-box;
    }

    body .our-approach-page .oa-method__inner {
        position: relative;

        width: 100%;
        max-width: 1440px;

        margin: 0 auto;
        padding: 105px 80px 110px;

        box-sizing: border-box;
    }

    /* =========================================
       02 — CENTERED INTRO
    ========================================= */

    body .our-approach-page .oa-method__intro {
        width: 100%;
        max-width: 950px;

        margin: 0 auto;
        text-align: center;
    }

    body .our-approach-page .oa-method__eyebrow {
        margin: 0 0 18px;

        font-family: "Inter", sans-serif !important;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.4;
        letter-spacing: 0.11em;
        text-transform: uppercase;

        color: #C96743;
        text-align: center;
    }

    body .our-approach-page .oa-method__title {
        margin: 0;

        font-family: "Manrope", sans-serif !important;
        font-size: clamp(36px, 3vw, 46px);
        font-weight: 600;
        line-height: 1.14;
        letter-spacing: -0.045em;

        color: #1F211D;
        text-align: center;
        text-wrap: balance;
    }

    body .our-approach-page .oa-method__description {
        width: 100%;
        max-width: 790px;

        margin: 23px auto 0;

        font-family: "Inter", sans-serif !important;
        font-size: 15px;
        font-weight: 400;
        line-height: 1.75;

        color: rgba(31, 33, 29, 0.78);
        text-align: center;
    }

    /* =========================================
       03 — FIVE-STEP JOURNEY
    ========================================= */

    body .our-approach-page .oa-method__journey {
        position: relative;

        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        column-gap: 30px;

        width: 100%;
        margin: 82px auto 0;
        padding: 0;

        box-sizing: border-box;
    }

    /* =========================================
       04 — CURVED CONNECTING LINE
       Existing PHP SVG unchanged
    ========================================= */

    body .our-approach-page .oa-method__path {
        display: block !important;

        position: absolute;
        z-index: 1;

        left: 0;
        top: -9.5px;

        width: 104%;
        height: 90px;

        overflow: visible;
        pointer-events: none;
    }

    body .our-approach-page .oa-method__path svg {
        display: block;

        width: 100%;
        height: 90px;

        overflow: visible;
    }

    body .our-approach-page .oa-method__path path {
        fill: none;

        stroke: #C96743;
        stroke-width: 1.35;
        stroke-linecap: round;
        stroke-linejoin: round;

        opacity: 0.72;
        vector-effect: non-scaling-stroke;

        stroke-dasharray: 1600;
        stroke-dashoffset: 1600;

        animation:
            oaMethodDraw 1.8s
            cubic-bezier(.22, .61, .36, 1)
            .35s forwards;
    }

    /* =========================================
       05 — INDIVIDUAL STEPS
    ========================================= */

    body .our-approach-page .oa-method__step {
        position: relative;
        z-index: 3;

        min-width: 0;
        margin: 0;
        padding: 0 4px 10px;

        text-align: center;
        opacity: 0;

        animation:
            oaMethodStepReveal .7s ease forwards;

        transition: transform .35s ease;
    }

    body .our-approach-page .oa-method__step--1 {
        animation-delay: .38s;
    }

    body .our-approach-page .oa-method__step--2 {
        animation-delay: .48s;
    }

    body .our-approach-page .oa-method__step--3 {
        animation-delay: .58s;
    }

    body .our-approach-page .oa-method__step--4 {
        animation-delay: .68s;
    }

    body .our-approach-page .oa-method__step--5 {
        animation-delay: .78s;
    }

    /* =========================================
       06 — NUMBER AND DOT
    ========================================= */

    body .our-approach-page .oa-method__marker {
        position: relative;
        z-index: 4;

        display: flex;
        flex-direction: column;
        align-items: center;

        height: 58px;
        pointer-events: none;
    }

    body .our-approach-page .oa-method__number {
        position: relative;
        z-index: 5;

        font-family: "Manrope", sans-serif !important;
        font-size: 20px;
        font-weight: 600;
        font-style: normal;
        line-height: 1.15;
        letter-spacing: -0.03em;

        color: #C96743;

        transition: color .35s ease;
    }

    body .our-approach-page .oa-method__dot {
        position: absolute;
        z-index: 6;

        left: 50%;
        top: 32px;

        width: 7px;
        height: 7px;

        border-radius: 50%;
        background: #C96743;

        transform: translateX(-50%);

        /* Retain the warm-stone halo */

        box-shadow: 0 0 0 4px #F5EDE4;

        transition:
            transform .35s ease,
            box-shadow .35s ease;
    }

    /* =========================================
       07 — STEP TYPOGRAPHY
    ========================================= */

    body .our-approach-page .oa-method__step-title {
        margin: 5px 0 0;

        font-family: "Manrope", sans-serif !important;
        font-size: clamp(19px, 1.45vw, 23px);
        font-weight: 600;
        line-height: 1.28;
        letter-spacing: -0.03em;

        color: #1F211D;
        text-align: center;
    }

    body .our-approach-page .oa-method__step-text {
        width: 100%;
        max-width: 225px;

        margin: 16px auto 0;

        font-family: "Inter", sans-serif !important;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.7;

        color: rgba(31, 33, 29, 0.78);
        text-align: center;
    }

    /* =========================================
       08 — HOVER EFFECTS
    ========================================= */

    @media (hover: hover) {

        body .our-approach-page .oa-method__step:hover {
            transform: translateY(-5px);
        }

        body .our-approach-page
        .oa-method__step:hover
        .oa-method__dot {
            transform: translateX(-50%) scale(1.3);

            box-shadow:
                0 0 0 4px #F5EDE4,
                0 0 0 11px rgba(201, 103, 67, 0.10);
        }

        body .our-approach-page
        .oa-method__step:hover
        .oa-method__number {
            color: #B95836;
        }
    }

    /* =========================================
       09 — CENTERED CLOSING
    ========================================= */

    body .our-approach-page .oa-method__closing {
        display: flex;
        flex-direction: column;
        align-items: center;

        width: 100%;
        max-width: 900px;

        margin: 50px auto 0;
        padding: 0;

        text-align: center;
        opacity: 0;

        animation:
            oaMethodReveal .8s ease .88s forwards;
    }

    /* First sentence regular */

    body .our-approach-page .oa-method__statement {
        margin: 0;

        font-family: "Manrope", sans-serif !important;
        font-size: 21px;
        font-weight: 400;
        font-style: normal;
        line-height: 1.5;
        letter-spacing: -0.025em;

        color: #68704E;
        text-align: center;
    }

    /* Second sentence italic (existing PHP <em>) */

    body .our-approach-page .oa-method__statement em {
        font-style: italic;
        font-weight: 600;
        color: #68704E;
    }

    /* Terracotta star below the statement */

    body .our-approach-page .oa-method__statement::after {
        content: "✦";

        display: block;
        margin: 24px auto 12px;

        font-family: "Inter", sans-serif;
        font-size: 24px;
        font-style: normal;
        font-weight: 400;
        line-height: 1;

        color: #C96743;
        text-align: center;
    }

    /* Supporting sentence */

    body .our-approach-page .oa-method__fineprint {
        width: 100%;
        max-width: 760px;

        margin: 0 auto;

        font-family: "Inter", sans-serif !important;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.7;

        color: rgba(31, 33, 29, 0.76);
        text-align: center;
    }

    /* =========================================
       10 — INTRO AND STEP ANIMATIONS
    ========================================= */

    body .our-approach-page .oa-method__eyebrow,
    body .our-approach-page .oa-method__title,
    body .our-approach-page .oa-method__description {
        opacity: 0;

        animation: oaMethodReveal .75s ease forwards;
    }

    body .our-approach-page .oa-method__eyebrow {
        animation-delay: .05s;
    }

    body .our-approach-page .oa-method__title {
        animation-delay: .14s;
    }

    body .our-approach-page .oa-method__description {
        animation-delay: .23s;
    }

    /* =========================================
       11 — KEYFRAMES
    ========================================= */

    @keyframes oaMethodReveal {
        from {
            opacity: 0;
            transform: translateY(14px);
        }

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

    @keyframes oaMethodStepReveal {
        from {
            opacity: 0;
            transform: translateY(17px);
        }

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

    @keyframes oaMethodDraw {
        from {
            stroke-dashoffset: 1600;
        }

        to {
            stroke-dashoffset: 0;
        }
    }

    /* =========================================
       12 — SMALLER DESKTOP
       1101px–1350px
    ========================================= */

    @media (max-width: 1350px) {

        body .our-approach-page .oa-method__inner {
            padding: 90px 55px 95px;
        }

        body .our-approach-page .oa-method__journey {
            column-gap: 20px;
            margin-top: 75px;
        }

        body .our-approach-page .oa-method__step-title {
            font-size: 20px;
        }

        body .our-approach-page .oa-method__step-text {
            font-size: 12.5px;
            line-height: 1.65;
        }

        body .our-approach-page .oa-method__closing {
            margin-top: 45px;
        }
    }

    /* =========================================
       13 — REDUCED MOTION
    ========================================= */

    @media (prefers-reduced-motion: reduce) {

        body .our-approach-page .oa-method__eyebrow,
        body .our-approach-page .oa-method__title,
        body .our-approach-page .oa-method__description,
        body .our-approach-page .oa-method__step,
        body .our-approach-page .oa-method__closing {
            opacity: 1 !important;
            animation: none !important;
            transform: none !important;
        }

        body .our-approach-page .oa-method__path path {
            stroke-dasharray: none;
            stroke-dashoffset: 0;
            animation: none !important;
        }

        body .our-approach-page .oa-method__step {
            transition: none !important;
        }
    }

} /* END OUR APPROACH SECTION 03 — DESKTOP */



/* =========================================================
   FRAYORA — OUR APPROACH
   SECTION 04 — WHY OUR APPROACH IS DIFFERENT
   DESKTOP ONLY — 1101px+

   UPDATED FRAYORA DESIGN SYSTEM
   Manrope + Inter
   New editorial photograph
   Original comparison structure preserved
========================================================= */

@media screen and (min-width: 1101px) {

    /* =========================================
       01 — SECTION
    ========================================= */

    body .our-approach-page .oa-difference {
        position: relative;
        isolation: isolate;

        width: 100%;
        min-height: 0;

        margin: 0;
        padding: 0;

        overflow: hidden;

        
/* Subtle luminous ivory — Section 04 */

background-color: #F8F3EB;
background-image:
    radial-gradient(
        ellipse 95% 78% at 18% 16%,
        rgba(255,255,255,0.40) 0%,
        rgba(255,255,255,0.16) 45%,
        rgba(255,255,255,0.00) 100%
    ),
    radial-gradient(
        ellipse 82% 70% at 52% 30%,
        rgba(255,255,255,0.16) 0%,
        rgba(255,255,255,0.06) 48%,
        rgba(255,255,255,0.00) 100%
    ),
    radial-gradient(
        ellipse 105% 88% at 24% 82%,
        rgba(255,255,255,0.22) 0%,
        rgba(255,255,255,0.09) 50%,
        rgba(255,255,255,0.00) 100%
    ),
    radial-gradient(
        ellipse 92% 78% at 68% 86%,
        rgba(255,255,255,0.16) 0%,
        rgba(255,255,255,0.06) 50%,
        rgba(255,255,255,0.00) 100%
    ),
    radial-gradient(
        ellipse 120% 95% at 50% 100%,
        rgba(245,237,228,0.20) 0%,
        rgba(245,237,228,0.08) 52%,
        rgba(245,237,228,0.00) 100%
    );
background-repeat: no-repeat;
        box-sizing: border-box;
    }

    body .our-approach-page .oa-difference *,
    body .our-approach-page .oa-difference *::before,
    body .our-approach-page .oa-difference *::after {
        box-sizing: border-box;
    }

    body .our-approach-page .oa-difference::before {
        content: none;
        display: none;
    }

    /* =========================================
       02 — RIGHT PHOTOGRAPH
       Full-height editorial image
    ========================================= */

    body .our-approach-page .oa-difference::after {
    content: "";

    position: absolute;
    z-index: 1;

    top: 0;
    right: 0;
    bottom: 0;

    width: 38%;

    background-color: #D9CBB9;
    background-image: url("../images/Our Approach/newimage.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 38% center;

    pointer-events: none;

    animation:
        oaDifferenceImageReveal
        1.1s cubic-bezier(.22, .61, .36, 1)
        both;
}

    /* =========================================
       03 — MAIN LAYOUT
    ========================================= */

    body .our-approach-page .oa-difference__inner {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: minmax(0, 60%) minmax(0, 40%);
    grid-template-rows: auto auto auto;
    align-items: start;

    width: 100%;
    max-width: 1540px;

    min-height: 790px;

    margin: 0 auto;
    padding: 95px 56px 95px;

    box-sizing: border-box;
}

    /* =========================================
       04 — INTRODUCTION
    ========================================= */

    body .our-approach-page .oa-difference__intro {
        position: relative;

        grid-column: 1;
        grid-row: 1;

        width: 100%;
        max-width: 760px;

        margin: 0;
        padding: 0 34px 0 0;

        text-align: left;

        animation:
            oaDifferenceTextReveal
            0.85s ease-out both;
    }

    /* EYEBROW */

    body .our-approach-page .oa-difference__eyebrow {
        margin: 0 0 20px;

        font-family: "Inter", sans-serif !important;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.4;
        letter-spacing: 0.11em;
        text-transform: uppercase;

        color: #C96743;
    }

    /* MAIN HEADING */

    body .our-approach-page .oa-difference__title {
        width: 100%;
        max-width: 730px;

        margin: 0;

        font-family: "Manrope", sans-serif !important;
        font-size: clamp(35px, 3vw, 46px);
        font-weight: 600;
        line-height: 1.14;
        letter-spacing: -0.045em;

        color: #1F211D;
        text-align: left;
    }

    /* BODY DESCRIPTION */

    body .our-approach-page .oa-difference__description {
        width: 100%;
        max-width: 690px;

        margin: 24px 0 0;

        font-family: "Inter", sans-serif !important;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.75;

        color: rgba(31, 33, 29, 0.76);
        text-align: left;
    }

    /* =========================================
       05 — COMPARISON GRID
    ========================================= */

    body .our-approach-page .oa-difference__comparison {
        position: relative;

        grid-column: 1;
        grid-row: 2;

        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));

        column-gap: 32px;
        align-items: start;

        width: 100%;
        max-width: 750px;

        margin: 54px 0 0;
        padding: 0 34px 0 0;

        background: transparent;

        animation:
            oaDifferenceTextReveal
            0.95s ease-out 0.12s both;
    }

    body .our-approach-page
    .oa-difference__comparison::before,
    body .our-approach-page
    .oa-difference__comparison::after {
        content: none !important;
        display: none !important;
    }

    /* =========================================
       06 — COMPARISON PANELS
       Preserve original clean columns
    ========================================= */

    body .our-approach-page .oa-difference__panel {
        position: relative;

        width: 100%;
        min-width: 0;

        margin: 0;
        padding: 0;

        border: 0;
        border-radius: 0;

        background: transparent;
        box-shadow: none;

        overflow: visible;
    }

    body .our-approach-page
    .oa-difference__panel--frayora {
        border-left:
            1px solid rgba(57, 66, 53, 0.18);

        padding-left: 27px;
    }

    body .our-approach-page
    .oa-difference__panel::before,
    body .our-approach-page
    .oa-difference__panel::after {
        content: none !important;
        display: none !important;
    }

    /* =========================================
       07 — PANEL LABELS
    ========================================= */

    body .our-approach-page
    .oa-difference__panel-label,
    body .our-approach-page
    .oa-difference__panel-eyebrow {
        margin: 0 0 14px;

        font-family: "Inter", sans-serif !important;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.4;
        letter-spacing: 0.09em;
        text-transform: uppercase;

        color: #C96743;
    }

    body .our-approach-page
    .oa-difference__panel--frayora
    .oa-difference__panel-label,
    body .our-approach-page
    .oa-difference__panel--frayora
    .oa-difference__panel-eyebrow {
        color: #68704E;
    }

    /* =========================================
       08 — PANEL HEADINGS
    ========================================= */

    body .our-approach-page
    .oa-difference__panel-title {
        margin: 0 0 25px;

        font-family: "Manrope", sans-serif !important;
        font-size: clamp(20px, 1.6vw, 24px);
        font-weight: 600;
        line-height: 1.3;
        letter-spacing: -0.035em;

        color: #1F211D;

        transition: color 0.35s ease;
    }

    body .our-approach-page
    .oa-difference__panel--usual:hover
    .oa-difference__panel-title {
        color: #B65E41;
    }

    body .our-approach-page
    .oa-difference__panel--frayora:hover
    .oa-difference__panel-title {
        color: #566449;
    }

    /* =========================================
       09 — COMPARISON LISTS
    ========================================= */

    body .our-approach-page
    .oa-difference__panel ul {
        width: 100%;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }

    body .our-approach-page
    .oa-difference__panel li {
        position: relative;

        width: 100%;

        margin: 0 !important;
        padding: 16px 0 16px 25px !important;

        border: 0;
        border-bottom:
            1px solid rgba(57, 66, 53, 0.14);

        background: transparent;

        font-family: "Inter", sans-serif !important;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.65;

        color: rgba(31, 33, 29, 0.77);

        list-style: none !important;

        transition:
            background-color .35s ease,
            color .35s ease,
            border-color .35s ease;
    }

    body .our-approach-page
    .oa-difference__panel li:last-child {
        border-bottom: 0;
    }

    /* =========================================
       10 — STAR MARKERS
    ========================================= */

    body .our-approach-page
    .oa-difference__panel li::before {
        content: "✦";

        position: absolute;

        left: 0;
        top: 16px;

        font-family: "Inter", sans-serif;
        font-size: 12px;
        line-height: 1.65;

        transform: scale(1) rotate(0);
        transform-origin: center;

        transition:
            transform .4s cubic-bezier(.22, .61, .36, 1),
            color .35s ease;
    }

    body .our-approach-page
    .oa-difference__panel--usual li::before {
        color: #C96743;
    }

    body .our-approach-page
    .oa-difference__panel--frayora li::before {
        color: #69735C;
    }

    /* =========================================
       11 — HOVER EFFECTS
    ========================================= */

    @media (hover: hover) {

        body .our-approach-page
        .oa-difference__panel li:hover {
            background-color:
                rgba(255, 255, 255, 0.35);

            color: #302F2A;

            border-bottom-color:
                rgba(198, 101, 67, 0.38);
        }

        body .our-approach-page
        .oa-difference__panel--frayora li:hover {
            background-color:
                rgba(105, 115, 92, 0.055);

            border-bottom-color:
                rgba(105, 115, 92, 0.38);
        }

        body .our-approach-page
        .oa-difference__panel li:hover::before {
            transform: scale(1.2) rotate(45deg);
        }
    }

    /* =========================================
       12 — CLOSING STATEMENT
    ========================================= */

    body .our-approach-page
    .oa-difference__closing {
        position: relative;

        grid-column: 1;
        grid-row: 3;

        width: 100%;
        max-width: 740px;

        margin: 48px 0 0;
        padding: 0 34px 0 0;

        text-align: left;

        animation:
            oaDifferenceTextReveal
            0.95s ease-out 0.22s both;
    }

    body .our-approach-page
    .oa-difference__statement {
        margin: 0;

        font-family: "Manrope", sans-serif !important;
        font-size: 20px;
        font-weight: 500;
        font-style: normal;
        line-height: 1.5;
        letter-spacing: -0.025em;

        color: #68704E;
    }

    body .our-approach-page
    .oa-difference__fineprint {
        margin: 17px 0 0;

        font-family: "Inter", sans-serif !important;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.7;

        color: rgba(31, 33, 29, 0.76);
    }

    /* =========================================
       13 — SMALLER DESKTOP
    ========================================= */

    @media (max-width: 1350px) {

        body .our-approach-page
        .oa-difference__inner {
            padding: 85px 55px 90px;
        }

        body .our-approach-page
        .oa-difference__title {
            font-size: 37px;
        }

        body .our-approach-page
        .oa-difference__comparison {
            column-gap: 22px;
        }

        body .our-approach-page
        .oa-difference__panel--frayora {
            padding-left: 20px;
        }

        body .our-approach-page
        .oa-difference__panel li {
            font-size: 12px;
        }

        body .our-approach-page
        .oa-difference__statement {
            font-size: 19px;
        }
    }

    /* =========================================
       14 — ENTRANCE ANIMATIONS
    ========================================= */

    @keyframes oaDifferenceTextReveal {
        from {
            opacity: 0;
            transform: translateY(18px);
        }

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

    @keyframes oaDifferenceImageReveal {
        from {
            opacity: 0;
            transform: translateX(25px);
        }

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

    /* =========================================
       15 — REDUCED MOTION
    ========================================= */

    @media (prefers-reduced-motion: reduce) {

        body .our-approach-page
        .oa-difference__intro,
        body .our-approach-page
        .oa-difference__comparison,
        body .our-approach-page
        .oa-difference__closing,
        body .our-approach-page
        .oa-difference::after {
            animation: none !important;
            opacity: 1;
            transform: none;
        }

        body .our-approach-page
        .oa-difference__panel li,
        body .our-approach-page
        .oa-difference__panel li::before,
        body .our-approach-page
        .oa-difference__panel-title {
            transition: none !important;
        }
    }
}






/* =========================================================
   FRAYORA — OUR APPROACH
   SECTION 05 — FINAL CTA
   DESKTOP ONLY — 1101px+

   BOND-INSPIRED SOFT LUMINOUS BACKGROUND
   FRAYORA BRAND COLORS
   MANROPE + INTER
========================================================= */

@media screen and (min-width: 1101px) {

    /* =========================================
       01 — SECTION BACKGROUND
    ========================================= */

    body .our-approach-page .oa-final {
        position: relative;
        isolation: isolate;

        width: 100%;
        min-height: 590px;

        margin: 0;
        padding: 0;

        overflow: hidden;
        box-sizing: border-box;

        background-color: #F8F3EB !important;

        background-image:
            radial-gradient(
                ellipse 42% 68% at 80% 45%,
                rgba(201, 103, 67, 0.12) 0%,
                rgba(201, 103, 67, 0.045) 48%,
                transparent 100%
            ),
            radial-gradient(
                ellipse 38% 65% at 17% 85%,
                rgba(139, 154, 126, 0.17) 0%,
                rgba(139, 154, 126, 0.05) 52%,
                transparent 100%
            ),
            radial-gradient(
                ellipse 42% 60% at 53% 12%,
                rgba(255, 255, 255, 0.92) 0%,
                transparent 100%
            ) !important;

        background-repeat: no-repeat;
        animation: none;
    }

    body .our-approach-page .oa-final *,
    body .our-approach-page .oa-final *::before,
    body .our-approach-page .oa-final *::after {
        box-sizing: border-box;
    }

    /* SOFT TRANSLUCENT LIGHT LAYER */

    body .our-approach-page .oa-final::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;

        background:
            linear-gradient(
                115deg,
                rgba(255, 255, 255, 0.28) 0%,
                rgba(255, 255, 255, 0.02) 43%,
                rgba(255, 255, 255, 0.19) 100%
            );

        pointer-events: none;
    }

    body .our-approach-page .oa-final::after {
        content: none;
        display: none;
    }

    /* =========================================
       02 — CENTERED CONTENT LAYOUT
    ========================================= */

    body .our-approach-page .oa-final__inner {
        position: relative;
        z-index: 2;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        width: 100%;
        max-width: 1440px;
        min-height: 590px;

        margin: 0 auto;
        padding: 100px 80px 105px;

        text-align: center;
    }

    body .our-approach-page .oa-final__content {
        display: flex;
        flex-direction: column;
        align-items: center;

        width: 100%;
        max-width: 1050px;

        margin: 0;
        padding: 0;

        animation:
            oaFinalEditorialReveal
            0.9s cubic-bezier(.22, .61, .36, 1)
            both;
    }

    /* =========================================
       03 — MAIN HEADING
       MANROPE / ABOUT US TYPOGRAPHY
    ========================================= */

    body .our-approach-page .oa-final__title {
        width: 100%;
        max-width: 1100px;

        margin: 0;
        padding: 0;

        font-family: "Manrope", sans-serif !important;
        font-size: clamp(48px, 4.4vw, 66px);
        font-weight: 600;
        font-style: normal;
        line-height: 1.15;
        letter-spacing: -0.055em;

        color: #1F211D !important;
        text-align: center;
        text-wrap: balance;
    }

    /* SECOND LINE — OLIVE ACCENT
       Preserve copy, modernize styling */

    body .our-approach-page .oa-final__title em {
        display: inline;

        font-family: "Manrope", sans-serif !important;
        font-size: inherit;
        font-weight: 600;
        font-style: normal;
        line-height: inherit;
        letter-spacing: inherit;

        color: #566449 !important;
    }

    /* =========================================
       04 — DESCRIPTION
    ========================================= */

    body .our-approach-page .oa-final__description {
        width: 100%;
        max-width: 790px;

        margin: 28px auto 0;
        padding: 0;

        font-family: "Inter", sans-serif !important;
        font-size: 15px;
        font-weight: 400;
        line-height: 1.75;

        color: rgba(31, 33, 29, 0.78) !important;
        text-align: center;
    }

    /* =========================================
       05 — SUPPORTING STATEMENT
    ========================================= */

    body .our-approach-page .oa-final__note {
        width: 100%;
        max-width: 790px;

        margin: 18px auto 0;

        font-family: "Inter", sans-serif !important;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.7;

        color: rgba(31, 33, 29, 0.67) !important;
        text-align: center;
    }

    /* =========================================
       06 — CTA ACTION
    ========================================= */

    body .our-approach-page .oa-final__action {
        display: flex;
        flex-direction: column;
        align-items: center;

        width: 100%;
        max-width: 500px;

        margin: 40px 0 0;
        padding: 0;

        animation:
            oaFinalEditorialReveal
            0.9s cubic-bezier(.22, .61, .36, 1)
            0.15s both;
    }

    /* =========================================
       07 — TERRACOTTA PILL BUTTON
    ========================================= */

    body .our-approach-page .oa-final__button {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        gap: 17px;

        width: fit-content;
        min-width: 238px;
        min-height: 54px;

        margin: 0;
        padding: 0 30px;

        background: #C96743 !important;
        background-image: none !important;

        color: #FFFFFF !important;

        border: 1px solid #C96743;
        border-radius: 999px;

        font-family: "Manrope", sans-serif !important;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.3;
        letter-spacing: -0.015em;

        text-decoration: none !important;

        box-shadow:
            0 8px 22px rgba(103, 58, 39, 0.14),
            0 2px 6px rgba(103, 58, 39, 0.06);

        transform: translateY(0);

        transition:
            background-color 0.3s ease,
            border-color 0.3s ease,
            transform 0.35s ease,
            box-shadow 0.35s ease;
    }

    body .our-approach-page .oa-final__button::before,
    body .our-approach-page .oa-final__button::after {
        content: none;
        display: none;
    }

    body .our-approach-page .oa-final__button:hover {
        background: #B95635 !important;
        border-color: #B95635;

        color: #FFFFFF !important;

        transform: translateY(-3px);

        box-shadow:
            0 13px 28px rgba(103, 58, 39, 0.20);
    }

    body .our-approach-page .oa-final__button:focus-visible {
        outline: 2px solid #394235;
        outline-offset: 4px;
    }

    /* =========================================
       08 — BUTTON ARROW
    ========================================= */

    body .our-approach-page .oa-final__arrow {
        display: inline-block;

        font-family: "Inter", sans-serif !important;
        font-size: 19px;
        line-height: 1;

        color: inherit;

        transition:
            transform 0.35s cubic-bezier(.22, .61, .36, 1);
    }

    body .our-approach-page
    .oa-final__button:hover
    .oa-final__arrow {
        transform: translateX(5px);
    }

    /* =========================================
       09 — SMALL TEXT BELOW BUTTON
    ========================================= */

    body .our-approach-page .oa-final__aside {
        width: 100%;
        max-width: 420px;

        margin: 20px auto 0;

        font-family: "Inter", sans-serif !important;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.7;

        color: rgba(31, 33, 29, 0.65) !important;
        text-align: center;
    }

    /* =========================================
       10 — ENTRANCE ANIMATION
    ========================================= */

    @keyframes oaFinalEditorialReveal {
        from {
            opacity: 0;
            transform: translateY(15px);
        }

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

    /* =========================================
       11 — SMALLER DESKTOP
    ========================================= */

    @media (max-width: 1350px) {

        body .our-approach-page .oa-final__inner {
            padding: 90px 60px 95px;
        }

        body .our-approach-page .oa-final__title {
            font-size: clamp(45px, 4.2vw, 58px);
        }

        body .our-approach-page .oa-final__description {
            max-width: 750px;
        }
    }

    /* =========================================
       12 — REDUCED MOTION
    ========================================= */

    @media (prefers-reduced-motion: reduce) {

        body .our-approach-page .oa-final__content,
        body .our-approach-page .oa-final__action {
            animation: none !important;
            opacity: 1 !important;
            transform: none !important;
        }

        body .our-approach-page .oa-final__button,
        body .our-approach-page .oa-final__arrow {
            transition: none !important;
        }
    }

} /* END SECTION 05 — DESKTOP */




/* =========================================================
   FRAYORA — OUR APPROACH
   SECTION 01 — TABLET HERO
   TABLET ONLY: 600px–1100px

   Full-bleed photographic hero
   Dark luminous olive overlay
   Manrope + Inter typography
   Terracotta pill button
   Staggered hero entrance animations
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    /* =========================================
       01 — MAIN HERO
    ========================================= */

    body .our-approach-page .oa-hero {
        position: relative;
        isolation: isolate;

        display: flex;
        align-items: center;

        width: 100vw;
        max-width: none;

        min-height: 850px;
        height: auto;

        margin: 0 0 0 calc(50% - 50vw);
        padding: 0;

        overflow: hidden;
        box-sizing: border-box;

        background-color: #20251F;
        background-image:
            url("../images/Our Approach/newherotabletnew.png");

        background-repeat: no-repeat;
        background-size: cover;
        background-position: 56% center;

        border: 0;
        border-radius: 0;
    }

    body .our-approach-page .oa-hero *,
    body .our-approach-page .oa-hero *::before,
    body .our-approach-page .oa-hero *::after {
        box-sizing: border-box;
    }

    /* =========================================
       02 — DARK LUMINOUS OLIVE OVERLAY
       No diagonal or split photo
    ========================================= */

    body .our-approach-page .oa-hero::before {
        content: "";

        position: absolute;
        inset: 0;
        z-index: 1;

        display: block;

        background:
            radial-gradient(
                ellipse 68% 65% at 15% 18%,
                rgba(99, 119, 89, 0.15) 0%,
                transparent 78%
            ),

            radial-gradient(
                ellipse 65% 72% at 75% 65%,
                rgba(91, 110, 81, 0.09) 0%,
                transparent 80%
            ),

            radial-gradient(
                ellipse 78% 55% at 22% 95%,
                rgba(103, 121, 91, 0.12) 0%,
                transparent 80%
            ),

            linear-gradient(
                90deg,
                rgba(20, 27, 19, 0.94) 0%,
                rgba(20, 27, 19, 0.88) 28%,
                rgba(20, 27, 19, 0.72) 53%,
                rgba(20, 27, 19, 0.38) 78%,
                rgba(20, 27, 19, 0.20) 100%
            );

        background-repeat: no-repeat;

        pointer-events: none;
    }

    body .our-approach-page .oa-hero::after {
        content: none !important;
        display: none !important;
    }

    /* =========================================
       03 — REMOVE OLD DECORATIONS
    ========================================= */

    body .our-approach-page .oa-hero__accent,
    body .our-approach-page .oa-hero__star,
    body .our-approach-page .oa-hero__line,
    body .our-approach-page .oa-hero__accent-line,
    body .our-approach-page .oa-hero__decoration,
    body .our-approach-page .oa-hero__decor {
        display: none !important;
    }

    body .our-approach-page .oa-hero__content::before,
    body .our-approach-page .oa-hero__content::after {
        content: none !important;
        display: none !important;
    }

    /* =========================================
       04 — CONTENT CONTAINER
    ========================================= */

    body .our-approach-page .oa-hero__inner {
        position: relative;
        z-index: 2;

        display: flex;
        align-items: center;
        justify-content: flex-start;

        width: 100%;
        max-width: 1100px;

        min-height: 850px;
        height: auto;

        margin: 0 auto;
        padding: 90px 60px;

        box-sizing: border-box;
    }

    body .our-approach-page .oa-hero__content {
        position: relative;
        z-index: 3;

        width: 100%;
        max-width: 650px;
        min-width: 0;

        margin: 0;
        padding: 0;

        text-align: left;
    }

    /* =========================================
       05 — EYEBROW
    ========================================= */

    body .our-approach-page .oa-hero__eyebrow {
        display: block;

        margin: 0 0 18px;
        padding: 0;

        font-family: "Inter", sans-serif !important;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.4;
        letter-spacing: 0.11em;
        text-transform: uppercase;

        color: #E99572;
        text-align: left;

        animation:
            oaTabletHeroReveal 0.8s
            cubic-bezier(.22, 1, .36, 1)
            0.10s both;
    }

    /* =========================================
       06 — MANROPE HEADING
    ========================================= */

    body .our-approach-page .oa-hero__title {
        width: 100%;
        max-width: 650px;

        margin: 0;
        padding: 0;

        font-family: "Manrope", sans-serif !important;
        font-size: clamp(46px, 6.4vw, 68px);
        font-weight: 600;
        line-height: 1.08;
        letter-spacing: -0.055em;

        color: #F8F3EB;
        text-align: left;
        text-wrap: balance;

        text-shadow:
            0 3px 18px rgba(0, 0, 0, 0.24);

        animation:
            oaTabletHeroReveal 1s
            cubic-bezier(.22, 1, .36, 1)
            0.20s both;
    }

    /* =========================================
       07 — BODY COPY
    ========================================= */

    body .our-approach-page .oa-hero__copy {
        width: 100%;
        max-width: 580px;

        margin: 27px 0 0;
        padding: 0;

        animation:
            oaTabletHeroReveal 0.95s
            cubic-bezier(.22, 1, .36, 1)
            0.35s both;
    }

    body .our-approach-page .oa-hero__copy p {
        margin: 0;
        padding: 0;

        font-family: "Inter", sans-serif !important;
        font-size: 15px;
        font-weight: 400;
        line-height: 1.75;
        letter-spacing: 0;

        color: rgba(248, 243, 235, 0.93);
        text-align: left;
    }

    body .our-approach-page .oa-hero__copy p + p {
        margin-top: 20px;
    }

    /* =========================================
       08 — TERRACOTTA PILL BUTTON
    ========================================= */

    body .our-approach-page .oa-hero__button {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        gap: 18px;

        width: fit-content;
        min-height: 56px;

        margin: 32px 0 0;
        padding: 0 31px;

        border: 0;
        border-radius: 999px;

        background-color: #C96743;
        color: #FFFFFF;

        font-family: "Manrope", sans-serif !important;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.3;
        letter-spacing: -0.015em;
        text-decoration: none;

        box-shadow:
            0 9px 24px rgba(0, 0, 0, 0.20);

        transition:
            background-color 0.35s ease,
            box-shadow 0.35s ease,
            translate 0.35s ease;

        animation:
            oaTabletHeroReveal 0.9s
            cubic-bezier(.22, 1, .36, 1)
            0.50s both;
    }

    body .our-approach-page .oa-hero__button:hover {
        background-color: #B95635;
        color: #FFFFFF;

        translate: 0 -3px;

        box-shadow:
            0 14px 28px rgba(0, 0, 0, 0.25);
    }

    body .our-approach-page .oa-hero__button:focus-visible {
        outline: 2px solid #F8F3EB;
        outline-offset: 4px;
    }

    /* =========================================
       09 — BUTTON ARROW
    ========================================= */

    body .our-approach-page .oa-hero__arrow {
        display: inline-block;

        font-size: 20px;
        line-height: 1;

        transition:
            transform 0.35s cubic-bezier(.22, 1, .36, 1);
    }

    body .our-approach-page
    .oa-hero__button:hover
    .oa-hero__arrow {
        transform: translateX(5px);
    }

    /* =========================================
       10 — ENTRANCE ANIMATION
    ========================================= */

    @keyframes oaTabletHeroReveal {
        from {
            opacity: 0;
            transform: translateY(24px);
            filter: blur(4px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
            filter: blur(0);
        }
    }

    /* =========================================
       11 — SMALLER TABLETS
    ========================================= */

    @media (max-width: 750px) {

        body .our-approach-page .oa-hero,
        body .our-approach-page .oa-hero__inner {
            min-height: 790px;
        }

        body .our-approach-page .oa-hero__inner {
    padding-left: 60px;
    padding-right: 36px;
}

        body .our-approach-page .oa-hero__title {
            font-size: clamp(42px, 7vw, 54px);
        }

        body .our-approach-page .oa-hero__copy p {
            font-size: 14px;
        }
    }

    /* =========================================
       12 — REDUCED MOTION
    ========================================= */

    @media (prefers-reduced-motion: reduce) {

        body .our-approach-page .oa-hero__eyebrow,
        body .our-approach-page .oa-hero__title,
        body .our-approach-page .oa-hero__copy,
        body .our-approach-page .oa-hero__button {
            animation: none !important;
            opacity: 1 !important;
            transform: none !important;
            filter: none !important;
        }

        body .our-approach-page .oa-hero__button,
        body .our-approach-page .oa-hero__arrow {
            transition: none !important;
        }
    }

}




/* =========================================================
   FRAYORA — OUR APPROACH
   SECTION 03 — THE FRAYORA METHOD
   TABLET ONLY: 600px–1100px

   Luminous warm-stone background
   Manrope + Inter typography
   Editorial five-step vertical timeline
   Terracotta connecting line and markers
   Centered closing statement
   Scroll reveal and hover animations
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    /* =========================================
       01 — SECTION BACKGROUND
    ========================================= */

    body .our-approach-page .oa-method {
        position: relative;
        isolation: isolate;

        display: block;

        width: 100%;
        height: auto;
        min-height: 0;

        margin: 0;
        padding: 0;

        overflow: hidden;
        box-sizing: border-box;

        background-color: #F5EDE4;

        background-image:
            radial-gradient(
                ellipse 95% 110% at 12% 18%,
                rgba(255,255,255,0.40) 0%,
                rgba(255,255,255,0.15) 58%,
                transparent 100%
            ),
            radial-gradient(
                ellipse 95% 115% at 92% 40%,
                rgba(255,255,255,0.38) 0%,
                rgba(255,255,255,0.14) 60%,
                transparent 100%
            ),
            radial-gradient(
                ellipse 95% 105% at 50% 65%,
                rgba(218,203,189,0.15) 0%,
                transparent 100%
            ),
            radial-gradient(
                ellipse 110% 95% at 50% 105%,
                rgba(255,255,255,0.26) 0%,
                transparent 100%
            );

        background-repeat: no-repeat;
    }

    body .our-approach-page .oa-method,
    body .our-approach-page .oa-method *,
    body .our-approach-page .oa-method *::before,
    body .our-approach-page .oa-method *::after {
        box-sizing: border-box;
    }

    /* =========================================
       02 — MAIN CONTAINER
    ========================================= */

    body .our-approach-page .oa-method__inner {
        position: relative;
        z-index: 1;

        width: 100%;
        max-width: 1000px;

        margin: 0 auto;
        padding: 100px 54px 105px;
    }

    /* =========================================
       03 — CENTERED INTRODUCTION
    ========================================= */

    body .our-approach-page .oa-method__intro {
        width: 100%;
        max-width: 820px;

        margin: 0 auto;
        padding: 0;

        text-align: center;
    }

    body .our-approach-page .oa-method__eyebrow {
        display: block;

        margin: 0 0 18px;

        font-family: "Inter", sans-serif !important;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.4;
        letter-spacing: 0.11em;
        text-transform: uppercase;

        color: #C96743;
        text-align: center;
    }

    body .our-approach-page .oa-method__title {
        width: 100%;
        max-width: 820px;

        margin: 0;

        font-family: "Manrope", sans-serif !important;
        font-size: clamp(34px, 4.5vw, 44px);
        font-weight: 600;
        line-height: 1.15;
        letter-spacing: -0.045em;

        color: #1F211D;
        text-align: center;
        text-wrap: balance;
    }

    body .our-approach-page .oa-method__description {
        width: 100%;
        max-width: 740px;

        margin: 24px auto 0;

        font-family: "Inter", sans-serif !important;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.8;

        color: rgba(31,33,29,0.78);
        text-align: center;
    }

    /* =========================================
       04 — FIVE-STEP JOURNEY
       Vertical tablet adaptation
    ========================================= */

    body .our-approach-page .oa-method__journey {
        position: relative;

        display: flex;
        flex-direction: column;

        width: 100%;
        max-width: 780px;

        margin: 75px auto 0;
        padding: 0;

        gap: 0;
    }

    /* =========================================
       05 — REPLACE WAVY SVG WITH VERTICAL LINE
       Tablet-specific presentation
    ========================================= */

    body .our-approach-page .oa-method__path {
        display: none !important;
    }

    body .our-approach-page .oa-method__journey::before {
        content: "";

        position: absolute;
        z-index: 0;

        left: 25px;
        top: 29px;
        bottom: 65px;

        width: 1px;

        background: rgba(201,103,67,0.48);

        pointer-events: none;
    }

    /* =========================================
       06 — INDIVIDUAL STEPS
    ========================================= */

    body .our-approach-page .oa-method__step {
        position: relative;
        z-index: 1;

        display: grid;
        grid-template-columns: 52px minmax(0,1fr);
        grid-template-rows: auto auto;

        align-items: start;
        column-gap: 28px;
        row-gap: 10px;

        width: 100%;
        min-width: 0;

        margin: 0;
        padding: 22px 12px 30px 0;

        text-align: left;

        border: 0;
        border-bottom: 1px solid rgba(57,66,53,0.12);

        background-color: transparent;

        transition:
            background-color 0.35s ease,
            box-shadow 0.35s ease;
    }

    body .our-approach-page .oa-method__step + .oa-method__step {
        margin-top: 8px;
    }

    /* =========================================
       07 — NUMBER AND TERRACOTTA DOT
    ========================================= */

    body .our-approach-page .oa-method__marker {
        position: relative;
        z-index: 2;

        grid-column: 1;
        grid-row: 1 / span 2;

        display: flex;
        flex-direction: column;
        align-items: center;

        width: 52px;
        height: 65px;

        margin: 0;
        padding: 0;

        pointer-events: none;
    }

    body .our-approach-page .oa-method__number {
        display: block;

        margin: 0;

        font-family: "Manrope", sans-serif !important;
        font-size: 21px;
        font-weight: 600;
        font-style: normal;
        line-height: 1.2;
        letter-spacing: -0.035em;

        color: #C96743;

        transition: color 0.35s ease;
    }

    body .our-approach-page .oa-method__dot {
        position: absolute;
        z-index: 3;

        left: 50%;
        top: 40px;

        width: 8px;
        height: 8px;

        border-radius: 50%;

        background-color: #C96743;

        transform: translateX(-50%);

        box-shadow: 0 0 0 5px #F5EDE4;

        transition:
            transform 0.35s ease,
            box-shadow 0.35s ease;
    }

    /* =========================================
       08 — STEP TITLES
    ========================================= */

    body .our-approach-page .oa-method__step-title {
        grid-column: 2;
        grid-row: 1;

        margin: 0;
        padding: 0;

        font-family: "Manrope", sans-serif !important;
        font-size: clamp(21px, 2.8vw, 25px);
        font-weight: 600;
        line-height: 1.3;
        letter-spacing: -0.035em;

        color: #1F211D;
        text-align: left;
    }

    /* =========================================
       09 — STEP DESCRIPTIONS
    ========================================= */

    body .our-approach-page .oa-method__step-text {
        grid-column: 2;
        grid-row: 2;

        width: 100%;
        max-width: 580px;

        margin: 0;
        padding: 0;

        font-family: "Inter", sans-serif !important;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.8;

        color: rgba(31,33,29,0.78);
        text-align: left;
    }

    /* =========================================
       10 — HOVER EFFECTS
    ========================================= */

    @media (hover: hover) {

        body .our-approach-page .oa-method__step:hover {
            background-color: rgba(255,255,255,0.28);

            box-shadow:
                0 12px 30px rgba(31,33,29,0.035);
        }

        body .our-approach-page
        .oa-method__step:hover
        .oa-method__dot {
            transform: translateX(-50%) scale(1.3);

            box-shadow:
                0 0 0 5px #F5EDE4,
                0 0 0 12px rgba(201,103,67,0.10);
        }

        body .our-approach-page
        .oa-method__step:hover
        .oa-method__number {
            color: #B95836;
        }
    }

    /* =========================================
       11 — CENTERED CLOSING
    ========================================= */

    body .our-approach-page .oa-method__closing {
        display: flex;
        flex-direction: column;
        align-items: center;

        width: 100%;
        max-width: 780px;

        margin: 65px auto 0;
        padding: 0;

        text-align: center;
    }

    /* First sentence regular */

    body .our-approach-page .oa-method__statement {
        width: 100%;
        margin: 0;

        font-family: "Manrope", sans-serif !important;
        font-size: 20px;
        font-weight: 400;
        font-style: normal;
        line-height: 1.55;
        letter-spacing: -0.025em;

        color: #68704E;
        text-align: center;
    }

    /* Only the second sentence italic */

    body .our-approach-page .oa-method__statement em {
        font-family: "Manrope", sans-serif !important;
        font-size: inherit;
        font-weight: 600;
        font-style: italic;

        color: #68704E;
    }

    /* Terracotta star */

    body .our-approach-page .oa-method__statement::after {
        content: "✦";

        display: block;

        margin: 24px auto 13px;

        font-family: "Inter", sans-serif;
        font-size: 25px;
        line-height: 1;
        font-style: normal;

        color: #C96743;
        text-align: center;
    }

    /* Supporting sentence */

    body .our-approach-page .oa-method__fineprint {
        width: 100%;
        max-width: 700px;

        margin: 0 auto;

        font-family: "Inter", sans-serif !important;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.75;

        color: rgba(31,33,29,0.76);
        text-align: center;
    }

    /* =========================================
       12 — SCROLL REVEAL ANIMATIONS
       Supported browsers only
    ========================================= */

    @keyframes oaTabletMethodReveal {
        from {
            opacity: 0;
            translate: 0 22px;
            filter: blur(3px);
        }

        to {
            opacity: 1;
            translate: 0 0;
            filter: blur(0);
        }
    }

    @supports (animation-timeline: view()) {

        body .our-approach-page .oa-method__intro,
        body .our-approach-page .oa-method__step,
        body .our-approach-page .oa-method__closing {
            animation: oaTabletMethodReveal linear both;

            animation-timeline: view();
            animation-range: entry 0% entry 65%;
        }

        body .our-approach-page .oa-method__closing {
            animation-range: entry 0% entry 75%;
        }
    }

    /* =========================================
       13 — SMALLER TABLETS
       600px–799px
    ========================================= */

    @media (max-width: 799px) {

        body .our-approach-page .oa-method__inner {
            padding: 85px 36px 95px;
        }

        body .our-approach-page .oa-method__title {
            font-size: clamp(31px, 4.8vw, 38px);
        }

        body .our-approach-page .oa-method__description {
            font-size: 13px;
        }

        body .our-approach-page .oa-method__journey {
            margin-top: 60px;
        }

        body .our-approach-page .oa-method__step {
            column-gap: 20px;
            padding-top: 24px;
            padding-bottom: 26px;
        }

        body .our-approach-page .oa-method__step-title {
            font-size: 21px;
        }

        body .our-approach-page .oa-method__step-text {
            font-size: 13px;
        }

        body .our-approach-page .oa-method__closing {
            margin-top: 55px;
        }

        body .our-approach-page .oa-method__statement {
            font-size: 18px;
        }
    }

    /* =========================================
       14 — REDUCED MOTION
    ========================================= */

    @media (prefers-reduced-motion: reduce) {

        body .our-approach-page .oa-method__intro,
        body .our-approach-page .oa-method__step,
        body .our-approach-page .oa-method__closing {
            opacity: 1 !important;
            animation: none !important;
            translate: none !important;
            transform: none !important;
            filter: none !important;
        }

        body .our-approach-page .oa-method__step,
        body .our-approach-page .oa-method__dot {
            transition: none !important;
        }
    }

} /* END SECTION 03 — TABLET */



/* =========================================================
   FRAYORA — OUR APPROACH
   SECTION 04 — WHY OUR APPROACH IS DIFFERENT
   TABLET ONLY: 600px–1100px

   Manrope + Inter typography
   Luminous ivory background
   Two-column comparison
   Full-width editorial photograph below content
   Subtle scroll animations
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    /* =========================================
       01 — SECTION
    ========================================= */

    body .our-approach-page .oa-difference {
        position: relative;
        isolation: isolate;

        width: 100%;
        min-height: 0;

        margin: 0;
        padding: 0;
        overflow: hidden;

        box-sizing: border-box;

        background-color: #F8F3EB;

        background-image:
            radial-gradient(
                ellipse 95% 85% at 15% 15%,
                rgba(255,255,255,0.43) 0%,
                rgba(255,255,255,0.15) 55%,
                transparent 100%
            ),
            radial-gradient(
                ellipse 95% 90% at 92% 40%,
                rgba(255,255,255,0.37) 0%,
                rgba(255,255,255,0.13) 58%,
                transparent 100%
            ),
            radial-gradient(
                ellipse 100% 95% at 50% 75%,
                rgba(225,214,201,0.10) 0%,
                transparent 100%
            ),
            radial-gradient(
                ellipse 100% 85% at 50% 100%,
                rgba(255,255,255,0.22) 0%,
                transparent 100%
            );

        background-repeat: no-repeat;
    }

    body .our-approach-page .oa-difference,
    body .our-approach-page .oa-difference *,
    body .our-approach-page .oa-difference *::before,
    body .our-approach-page .oa-difference *::after {
        box-sizing: border-box;
    }

    /* =========================================
       02 — EDITORIAL PHOTO
       Full-width image at bottom
    ========================================= */

    body .our-approach-page .oa-difference::before {
        content: none !important;
        display: none !important;
    }

    body .our-approach-page .oa-difference::after {
        content: "";

        position: absolute;
        z-index: 1;

        left: 0;
        right: 0;
        bottom: 0;

        width: 100%;
        height: clamp(340px, 46vw, 490px);

        background-color: #D9CBB9;
        background-image:
            url("../images/Our Approach/newimage.png");

        background-repeat: no-repeat;
        background-size: cover;
        background-position: center 48%;

        border: 0;
        border-radius: 0;

        pointer-events: none;
    }

    /* =========================================
       03 — CONTENT CONTAINER
    ========================================= */

    body .our-approach-page .oa-difference__inner {
        position: relative;
        z-index: 2;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        width: 100%;
        max-width: 1000px;
        min-height: 0;

        margin: 0 auto;

        /* Bottom padding reserves the photo area */
        padding:
            95px 54px
            calc(clamp(340px, 46vw, 490px) + 85px);

        box-sizing: border-box;
    }

    /* =========================================
       04 — INTRODUCTION
    ========================================= */

    body .our-approach-page .oa-difference__intro {
        position: relative;

        width: 100%;
        max-width: 780px;

        margin: 0;
        padding: 0;

        text-align: left;
    }

    body .our-approach-page .oa-difference__eyebrow {
        display: block;

        margin: 0 0 18px;

        font-family: "Inter", sans-serif !important;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.4;
        letter-spacing: 0.11em;
        text-transform: uppercase;

        color: #C96743;
    }

    body .our-approach-page .oa-difference__title {
        width: 100%;
        max-width: 760px;

        margin: 0;

        font-family: "Manrope", sans-serif !important;
        font-size: clamp(34px, 4.5vw, 45px);
        font-weight: 600;
        line-height: 1.16;
        letter-spacing: -0.045em;

        color: #1F211D;

        text-align: left;
        text-wrap: balance;
    }

    body .our-approach-page .oa-difference__description {
        width: 100%;
        max-width: 720px;

        margin: 25px 0 0;

        font-family: "Inter", sans-serif !important;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.8;

        color: rgba(31,33,29,0.76);
        text-align: left;
    }

    /* =========================================
       05 — TWO-COLUMN COMPARISON
    ========================================= */

    body .our-approach-page .oa-difference__comparison {
        position: relative;

        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 34px;
        align-items: start;

        width: 100%;
        max-width: 850px;

        margin: 62px 0 0;
        padding: 0;

        background: transparent;
    }

    body .our-approach-page
    .oa-difference__comparison::before,
    body .our-approach-page
    .oa-difference__comparison::after {
        content: none !important;
        display: none !important;
    }

    /* =========================================
       06 — PANELS
    ========================================= */

    body .our-approach-page .oa-difference__panel {
        position: relative;

        display: block;

        width: 100%;
        min-width: 0;

        margin: 0;
        padding: 0;

        border: 0;
        border-radius: 0;

        background: transparent;
        box-shadow: none;

        overflow: visible;
    }

    body .our-approach-page
    .oa-difference__panel--frayora {
        padding-left: 28px;

        border-left:
            1px solid rgba(57,66,53,0.18);
    }

    body .our-approach-page
    .oa-difference__panel::before,
    body .our-approach-page
    .oa-difference__panel::after {
        content: none !important;
        display: none !important;
    }

    /* =========================================
       07 — PANEL LABELS
    ========================================= */

    body .our-approach-page
    .oa-difference__panel-label,
    body .our-approach-page
    .oa-difference__panel-eyebrow {
        display: block;

        margin: 0 0 15px;

        font-family: "Inter", sans-serif !important;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.4;
        letter-spacing: 0.09em;
        text-transform: uppercase;

        color: #C96743;
    }

    body .our-approach-page
    .oa-difference__panel--frayora
    .oa-difference__panel-label,
    body .our-approach-page
    .oa-difference__panel--frayora
    .oa-difference__panel-eyebrow {
        color: #68704E;
    }

    /* =========================================
       08 — PANEL HEADINGS
    ========================================= */

    body .our-approach-page
    .oa-difference__panel-title {
        margin: 0 0 24px;

        font-family: "Manrope", sans-serif !important;
        font-size: clamp(19px, 2.5vw, 24px);
        font-weight: 600;
        line-height: 1.35;
        letter-spacing: -0.035em;

        color: #1F211D;

        transition: color 0.35s ease;
    }

    /* =========================================
       09 — COMPARISON LISTS
    ========================================= */

    body .our-approach-page
    .oa-difference__panel ul {
        width: 100%;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }

    body .our-approach-page
    .oa-difference__panel li {
        position: relative;

        width: 100%;

        margin: 0 !important;
        padding: 17px 0 17px 23px !important;

        border: 0;
        border-bottom:
            1px solid rgba(57,66,53,0.14);

        background: transparent;

        font-family: "Inter", sans-serif !important;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.65;

        color: rgba(31,33,29,0.77);

        list-style: none !important;

        transition:
            background-color 0.35s ease,
            color 0.35s ease,
            border-color 0.35s ease;
    }

    body .our-approach-page
    .oa-difference__panel li:last-child {
        border-bottom: 0;
    }

    /* =========================================
       10 — TERRACOTTA / OLIVE STAR MARKERS
    ========================================= */

    body .our-approach-page
    .oa-difference__panel li::before {
        content: "✦";

        position: absolute;

        top: 17px;
        left: 0;

        font-family: "Inter", sans-serif;
        font-size: 12px;
        line-height: 1.65;

        transform: scale(1) rotate(0);

        transition:
            transform 0.35s ease,
            color 0.35s ease;
    }

    body .our-approach-page
    .oa-difference__panel--usual li::before {
        color: #C96743;
    }

    body .our-approach-page
    .oa-difference__panel--frayora li::before {
        color: #69735C;
    }

    /* =========================================
       11 — CLOSING STATEMENT
    ========================================= */

    body .our-approach-page .oa-difference__closing {
        position: relative;

        width: 100%;
        max-width: 760px;

        margin: 58px 0 0;
        padding: 0;

        text-align: left;
    }

    body .our-approach-page .oa-difference__statement {
        margin: 0;

        font-family: "Manrope", sans-serif !important;
        font-size: 20px;
        font-weight: 500;
        font-style: normal;
        line-height: 1.55;
        letter-spacing: -0.025em;

        color: #68704E;
    }

    body .our-approach-page .oa-difference__fineprint {
        margin: 17px 0 0;

        font-family: "Inter", sans-serif !important;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.75;

        color: rgba(31,33,29,0.76);
    }

    /* =========================================
       12 — HOVER EFFECTS
    ========================================= */

    @media (hover: hover) {

        body .our-approach-page
        .oa-difference__panel li:hover {
            background-color:
                rgba(255,255,255,0.36);

            border-bottom-color:
                rgba(201,103,67,0.36);
        }

        body .our-approach-page
        .oa-difference__panel--frayora li:hover {
            background-color:
                rgba(105,115,92,0.055);

            border-bottom-color:
                rgba(105,115,92,0.35);
        }

        body .our-approach-page
        .oa-difference__panel li:hover::before {
            transform: scale(1.2) rotate(45deg);
        }

        body .our-approach-page
        .oa-difference__panel--usual:hover
        .oa-difference__panel-title {
            color: #B65E41;
        }

        body .our-approach-page
        .oa-difference__panel--frayora:hover
        .oa-difference__panel-title {
            color: #566449;
        }
    }

    /* =========================================
       13 — SCROLL ENTRANCE ANIMATIONS
       Blur → sharpen + gentle movement
    ========================================= */

    @keyframes oaDifferenceTabletReveal {
        from {
            opacity: 0;
            translate: 0 20px;
            filter: blur(3px);
        }

        to {
            opacity: 1;
            translate: 0 0;
            filter: blur(0);
        }
    }

    @supports (animation-timeline: view()) {

        body .our-approach-page
        .oa-difference__intro {
            animation: oaDifferenceTabletReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 70%;
        }

        body .our-approach-page
        .oa-difference__comparison {
            animation: oaDifferenceTabletReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 65%;
        }

        body .our-approach-page
        .oa-difference__closing {
            animation: oaDifferenceTabletReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 75%;
        }
    }

    /* =========================================
       14 — NARROW TABLETS
       600px–799px
    ========================================= */

    @media (max-width: 799px) {

        body .our-approach-page
        .oa-difference__inner {
            padding:
                85px 36px
                calc(clamp(340px, 46vw, 490px) + 75px);
        }

        body .our-approach-page
        .oa-difference__title {
            font-size: clamp(31px, 4.8vw, 38px);
        }

        body .our-approach-page
        .oa-difference__description {
            font-size: 13px;
        }

        body .our-approach-page
        .oa-difference__comparison {
            column-gap: 22px;
            margin-top: 50px;
        }

        body .our-approach-page
        .oa-difference__panel--frayora {
            padding-left: 20px;
        }

        body .our-approach-page
        .oa-difference__panel-title {
            font-size: 19px;
        }

        body .our-approach-page
        .oa-difference__panel li {
            font-size: 12px;
            padding-top: 15px !important;
            padding-bottom: 15px !important;
        }

        body .our-approach-page
        .oa-difference__closing {
            margin-top: 48px;
        }

        body .our-approach-page
        .oa-difference__statement {
            font-size: 18px;
        }
    }

    /* =========================================
       15 — REDUCED MOTION
    ========================================= */

    @media (prefers-reduced-motion: reduce) {

        body .our-approach-page
        .oa-difference__intro,
        body .our-approach-page
        .oa-difference__comparison,
        body .our-approach-page
        .oa-difference__closing {
            animation: none !important;
            opacity: 1 !important;
            translate: none !important;
            filter: none !important;
        }

        body .our-approach-page
        .oa-difference__panel li,
        body .our-approach-page
        .oa-difference__panel li::before,
        body .our-approach-page
        .oa-difference__panel-title {
            transition: none !important;
        }
    }

} /* END SECTION 04 — TABLET */


/* =========================================================
   FRAYORA — OUR APPROACH
   SECTION 05 — FINAL CTA
   TABLET ONLY: 600px–1100px

   Approved desktop design adapted for tablet
   Manrope + Inter typography
   Bond-inspired luminous ivory
   Olive heading accent
   Terracotta pill CTA
   Scroll entrance and hover animations
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    /* =========================================
       01 — LUMINOUS SECTION BACKGROUND
    ========================================= */

    body .our-approach-page .oa-final {
        position: relative;
        isolation: isolate;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        min-height: 610px;
        height: auto;

        margin: 0;
        padding: 0;

        overflow: hidden;
        box-sizing: border-box;

        background-color: #F8F3EB;

        background-image:
            radial-gradient(
                ellipse 70% 75% at 82% 42%,
                rgba(201, 103, 67, 0.12) 0%,
                rgba(201, 103, 67, 0.045) 50%,
                transparent 100%
            ),
            radial-gradient(
                ellipse 72% 80% at 15% 84%,
                rgba(139, 154, 126, 0.16) 0%,
                rgba(139, 154, 126, 0.05) 55%,
                transparent 100%
            ),
            radial-gradient(
                ellipse 78% 68% at 48% 12%,
                rgba(255, 255, 255, 0.85) 0%,
                transparent 100%
            ),
            radial-gradient(
                ellipse 85% 60% at 75% 100%,
                rgba(255, 255, 255, 0.32) 0%,
                transparent 100%
            );

        background-repeat: no-repeat;
    }

    body .our-approach-page .oa-final,
    body .our-approach-page .oa-final *,
    body .our-approach-page .oa-final *::before,
    body .our-approach-page .oa-final *::after {
        box-sizing: border-box;
    }

    /* =========================================
       02 — SOFT TRANSLUCENT LIGHT LAYER
    ========================================= */

    body .our-approach-page .oa-final::before {
        content: "";

        position: absolute;
        inset: 0;
        z-index: 0;

        display: block;

        background:
            linear-gradient(
                115deg,
                rgba(255, 255, 255, 0.24) 0%,
                rgba(255, 255, 255, 0.02) 45%,
                rgba(255, 255, 255, 0.16) 100%
            );

        pointer-events: none;
    }

    body .our-approach-page .oa-final::after {
        content: none;
        display: none;
    }

    /* =========================================
       03 — CENTERED INNER CONTAINER
    ========================================= */

    body .our-approach-page .oa-final__inner {
        position: relative;
        z-index: 2;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        width: 100%;
        max-width: 1100px;
        min-height: 610px;

        margin: 0 auto;
        padding: 110px 54px 115px;

        text-align: center;
    }

    /* =========================================
       04 — CONTENT GROUP
    ========================================= */

    body .our-approach-page .oa-final__content {
        display: flex;
        flex-direction: column;
        align-items: center;

        width: 100%;
        max-width: 900px;

        margin: 0;
        padding: 0;

        text-align: center;
    }

    /* =========================================
       05 — HEADING
    ========================================= */

    body .our-approach-page .oa-final__title {
        width: 100%;
        max-width: 900px;

        margin: 0;
        padding: 0;

        font-family: "Manrope", sans-serif !important;
        font-size: clamp(39px, 5.2vw, 56px);
        font-weight: 600;
        font-style: normal;
        line-height: 1.16;
        letter-spacing: -0.055em;

        color: #1F211D !important;

        text-align: center;
        text-wrap: balance;
    }

    /* Second line — olive, NOT italic */

    body .our-approach-page .oa-final__title em {
        display: inline;

        font-family: "Manrope", sans-serif !important;
        font-size: inherit;
        font-weight: 600;
        font-style: normal !important;
        line-height: inherit;
        letter-spacing: inherit;

        color: #566449 !important;
    }

    /* =========================================
       06 — MAIN DESCRIPTION
    ========================================= */

    body .our-approach-page .oa-final__description {
        width: 100%;
        max-width: 750px;

        margin: 29px auto 0;
        padding: 0;

        font-family: "Inter", sans-serif !important;
        font-size: 15px;
        font-weight: 400;
        line-height: 1.8;

        color: rgba(31, 33, 29, 0.78) !important;

        text-align: center;
    }

    /* =========================================
       07 — SUPPORTING STATEMENT
    ========================================= */

    body .our-approach-page .oa-final__note {
        width: 100%;
        max-width: 750px;

        margin: 20px auto 0;
        padding: 0;

        font-family: "Inter", sans-serif !important;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.75;

        color: rgba(31, 33, 29, 0.68) !important;

        text-align: center;
    }

    /* =========================================
       08 — CTA ACTION AREA
    ========================================= */

    body .our-approach-page .oa-final__action {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        width: 100%;
        max-width: 500px;

        margin: 43px auto 0;
        padding: 0;

        text-align: center;
    }

    /* =========================================
       09 — TERRACOTTA PILL BUTTON
    ========================================= */

    body .our-approach-page .oa-final__button {
        position: relative;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        gap: 18px;

        width: fit-content;
        min-width: 245px;
        min-height: 56px;

        margin: 0;
        padding: 0 32px;

        border: 1px solid #C96743;
        border-radius: 999px;

        background: #C96743 !important;
        background-image: none !important;

        color: #FFFFFF !important;

        font-family: "Manrope", sans-serif !important;
        font-size: 14px;
        font-weight: 600;
        font-style: normal;
        line-height: 1.3;
        letter-spacing: -0.015em;

        text-decoration: none !important;

        box-shadow:
            0 9px 24px rgba(103, 58, 39, 0.16),
            0 2px 7px rgba(103, 58, 39, 0.06);

        transform: translateY(0);

        transition:
            background-color 0.35s ease,
            border-color 0.35s ease,
            transform 0.35s cubic-bezier(.22, 1, .36, 1),
            box-shadow 0.35s ease;
    }

    body .our-approach-page .oa-final__button::before,
    body .our-approach-page .oa-final__button::after {
        content: none;
        display: none;
    }

    /* =========================================
       10 — BUTTON HOVER
    ========================================= */

    @media (hover: hover) {

        body .our-approach-page .oa-final__button:hover {
            background: #B95635 !important;
            border-color: #B95635;

            color: #FFFFFF !important;

            transform: translateY(-3px);

            box-shadow:
                0 14px 30px rgba(103, 58, 39, 0.23);
        }
    }

    body .our-approach-page .oa-final__button:focus-visible {
        outline: 2px solid #394235;
        outline-offset: 4px;
    }

    /* =========================================
       11 — BUTTON ARROW
    ========================================= */

    body .our-approach-page .oa-final__arrow {
        display: inline-block;

        font-family: "Inter", sans-serif !important;
        font-size: 19px;
        line-height: 1;

        color: inherit;

        transform: translateX(0);

        transition:
            transform 0.35s cubic-bezier(.22, 1, .36, 1);
    }

    @media (hover: hover) {

        body .our-approach-page
        .oa-final__button:hover
        .oa-final__arrow {
            transform: translateX(5px);
        }
    }

    /* =========================================
       12 — SMALL TEXT BELOW BUTTON
    ========================================= */

    body .our-approach-page .oa-final__aside {
        width: 100%;
        max-width: 430px;

        margin: 21px auto 0;

        font-family: "Inter", sans-serif !important;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.75;

        color: rgba(31, 33, 29, 0.65) !important;

        text-align: center;
    }

    /* =========================================
       13 — SCROLL ENTRANCE ANIMATIONS
       Blur → sharpen + soft upward reveal
    ========================================= */

    @keyframes oaFinalTabletReveal {
        from {
            opacity: 0;
            translate: 0 20px;
            filter: blur(3px);
        }

        to {
            opacity: 1;
            translate: 0 0;
            filter: blur(0);
        }
    }

    @supports (animation-timeline: view()) {

        body .our-approach-page .oa-final__content {
            animation: oaFinalTabletReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 62%;
        }

        body .our-approach-page .oa-final__action {
            animation: oaFinalTabletReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 75%;
        }
    }

    /* =========================================
       14 — NARROW TABLET ADJUSTMENTS
       600px–799px
    ========================================= */

    @media (max-width: 799px) {

        body .our-approach-page .oa-final,
        body .our-approach-page .oa-final__inner {
            min-height: 590px;
        }

        body .our-approach-page .oa-final__inner {
            padding: 95px 38px 105px;
        }

        body .our-approach-page .oa-final__title {
            font-size: clamp(34px, 5.4vw, 43px);
            line-height: 1.18;
        }

        body .our-approach-page .oa-final__description {
            font-size: 14px;
        }

        body .our-approach-page .oa-final__note {
            font-size: 13px;
        }

        body .our-approach-page .oa-final__action {
            margin-top: 36px;
        }

        body .our-approach-page .oa-final__button {
            min-height: 54px;
        }

        body .our-approach-page .oa-final__aside {
            font-size: 12px;
        }
    }

    /* =========================================
       15 — REDUCED MOTION
    ========================================= */

    @media (prefers-reduced-motion: reduce) {

        body .our-approach-page .oa-final__content,
        body .our-approach-page .oa-final__action {
            animation: none !important;
            opacity: 1 !important;
            translate: none !important;
            filter: none !important;
        }

        body .our-approach-page .oa-final__button,
        body .our-approach-page .oa-final__arrow {
            transition: none !important;
        }

        body .our-approach-page .oa-final__button:hover {
            transform: none !important;
        }
    }

} /* END SECTION 05 — TABLET */


/* ==================================================
   FRAYORA — GLOBAL DESKTOP HEADER
   Bond-inspired proportions
   DESKTOP ONLY: 1101px+
================================================== */

@media (min-width: 1101px) {

    /* HEADER */

    .site-header {
        position: sticky;
        top: 0;
        left: auto;

        width: 100%;
        height: 76px;
        z-index: 1000;

        background-color: #F8F7F3;

background-image:
    /* Soft ivory illumination across left */
    radial-gradient(
        ellipse 75% 130% at 8% 45%,
        rgba(255, 255, 255, 0.75) 0%,
        rgba(255, 255, 255, 0.28) 60%,
        transparent 100%
    ),

    /* Soft white illumination across right */
    radial-gradient(
        ellipse 75% 130% at 92% 45%,
        rgba(255, 255, 255, 0.65) 0%,
        rgba(255, 255, 255, 0.25) 60%,
        transparent 100%
    ),

    /* Gentle neutral depth near center */
    radial-gradient(
        ellipse 85% 130% at 50% 100%,
        rgba(220, 216, 208, 0.09) 0%,
        transparent 100%
    );

background-repeat: no-repeat;

        box-shadow:
            0 2px 14px rgba(31,33,29,0.045);
    }

    /* HEADER CONTAINER */

    .site-header__inner {
        box-sizing: border-box;

        width: 100%;
        max-width: 1440px;
        height: 100%;

        margin: 0 auto;
        padding: 0 80px;

        display: grid;
        grid-template-columns: 200px minmax(0, 1fr) auto;

        align-items: center;
        column-gap: 36px;
    }

    /* LOGO */

    .site-logo {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 200px;
    }

    .site-logo img {
        display: block;
        width: 190px;
        max-width: 100%;
        height: auto;

        filter: none;

        transition:
            opacity 250ms ease,
            transform 350ms ease;
    }

    /* NAVIGATION */

    .site-nav {
        display: flex;
        align-items: center;
        justify-content: center;

        gap: 32px;
        min-width: 0;
        height: 100%;
    }

    .site-nav > a,
    .site-nav > .nav-dropdown > .nav-dropdown__trigger {
        position: relative;

        display: inline-flex;
        align-items: center;

        height: 100%;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 15px;
        font-weight: 500;
        line-height: 1.2;
        letter-spacing: -0.015em;

        color: #1F211D;
        text-decoration: none;
        text-shadow: none;

        white-space: nowrap;

        transition: color 250ms ease;
    }

    /* REMOVE OLD UNDERLINE POSITIONING */

    .site-nav > a::after,
    .site-nav > .nav-dropdown > .nav-dropdown__trigger::after {
        bottom: 0;
        height: 3px;

        background: #C96743;

        transform: scaleX(0);
        transform-origin: center;

        transition:
            transform 300ms cubic-bezier(.22,1,.36,1);
    }

    .site-nav > a:hover::after,
    .site-nav > .nav-dropdown:hover
    > .nav-dropdown__trigger::after,
    .site-nav > .nav-dropdown:focus-within
    > .nav-dropdown__trigger::after {
        transform: scaleX(1);
    }

    /* DROPDOWN */

    .nav-dropdown {
        position: relative;
        display: flex;
        align-items: center;
        height: 100%;
    }

    .nav-dropdown__trigger {
        gap: 6px;
    }

    .nav-dropdown__trigger span {
        font-size: 13px;
        line-height: 1;
        transition: transform 250ms ease;
    }

    .nav-dropdown:hover
    .nav-dropdown__trigger span {
        transform: rotate(180deg);
    }

    .nav-dropdown__menu {
        position: absolute;

        top: 100%;
        left: -18px;

        min-width: 300px;
        padding: 18px;

        background: #F8F3EB;

        border: 1px solid rgba(31,33,29,.06);
        border-radius: 0 0 6px 6px;

        box-shadow:
            0 12px 28px rgba(31,33,29,.10),
            0 5px 10px rgba(31,33,29,.04);
    }

    .nav-dropdown__menu a {
        display: block;

        height: auto;
        padding: 12px 14px;

        font-family: "Inter", sans-serif;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.4;

        color: #1F211D;
        text-decoration: none;
        text-shadow: none;

        transition:
            background 250ms ease,
            color 250ms ease;
    }

    /* NO DECORATIVE LINES INSIDE DROPDOWN */

    .nav-dropdown__menu a::after {
        display: none;
    }

    .nav-dropdown__menu a:hover {
        color: #C96743;
        background: rgba(201,103,67,.055);
    }

    /* HEADER ACTIONS */

    .site-header__actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;

        min-width: 0;
    }

    /* CTA BUTTON */

    .header-cta {
        box-sizing: border-box;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        width: auto;
        height: 44px;
        min-height: 44px;

        padding: 0 20px;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        font-weight: 600;
        line-height: 1;
        letter-spacing: -0.01em;

        white-space: nowrap;
        text-decoration: none;

        background: #394235;
        color: #F8F3EB;

        border: 0;
        border-radius: 22px;

        box-shadow:
            0 5px 12px rgba(31,33,29,.12);

        transition:
            background-color 300ms ease,
            transform 300ms ease,
            box-shadow 300ms ease;
    }

    /* HOVER INTERACTIONS */

    @media (hover: hover) {

        .site-logo:hover img {
            opacity: .85;
        }

        .site-nav > a:hover,
        .nav-dropdown__trigger:hover {
            color: #C96743;
        }

        .header-cta:hover {
            background: #46523F;
            color: #F8F3EB;

            transform: translateY(-2px);

            box-shadow:
                0 9px 20px rgba(31,33,29,.16);
        }

        .header-cta:active {
            transform: translateY(0);
        }
    }

    /* KEEP HAMBURGER HIDDEN ON DESKTOP */

    .menu-toggle {
        display: none;
    }
}

/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {

    .site-header *,
    .site-header *::before,
    .site-header *::after {
        transition: none !important;
        animation: none !important;
    }
    
    
}



/* =========================================================
   FRAYORA — OUR APPROACH
   SECTION 01 — MOBILE HERO
   MOBILE ONLY: 0px–599px

   Full-width photographic background
   Dark luminous olive overlay
   Manrope + Inter typography
   Terracotta pill button
   Staggered entrance animations
========================================================= */

@media screen and (max-width: 599px) {

    /* =========================================
       01 — MAIN HERO
    ========================================= */

    body .our-approach-page .oa-hero {
        position: relative;
        isolation: isolate;

        display: flex;
        align-items: center;
        justify-content: flex-start;

        width: 100vw;
        max-width: none;

        min-height: 0;
height: auto;

        margin: 0 0 0 calc(50% - 50vw);
        padding: 0;

        box-sizing: border-box;
        overflow: hidden;

        background-color: #20251F;

        background-image:
            url("../images/Our Approach/newheromobilenew.png");

        background-repeat: no-repeat;
        background-size: cover;
        background-position: 55% center;

        border: none;
        border-radius: 0;
    }

    body .our-approach-page .oa-hero *,
    body .our-approach-page .oa-hero *::before,
    body .our-approach-page .oa-hero *::after {
        box-sizing: border-box;
    }

    /* =========================================
       02 — DARK LUMINOUS OLIVE OVERLAY
       Stronger shading for mobile readability
    ========================================= */

    body .our-approach-page .oa-hero::before {
        content: "";

        position: absolute;
        inset: 0;

        display: block;

        width: 100%;
        height: 100%;

        z-index: 1;

        background-image:

            /* Upper-left olive illumination */
            radial-gradient(
                ellipse 95% 55% at 15% 12%,
                rgba(105, 123, 94, 0.15) 0%,
                transparent 85%
            ),

            /* Soft right-side atmosphere */
            radial-gradient(
                ellipse 90% 65% at 90% 48%,
                rgba(88, 108, 80, 0.10) 0%,
                transparent 85%
            ),

            /* Lower illumination */
            radial-gradient(
                ellipse 95% 55% at 20% 95%,
                rgba(103, 120, 90, 0.12) 0%,
                transparent 85%
            ),

            /* Uniform readability veil */
            linear-gradient(
                180deg,
                rgba(20, 27, 19, 0.82) 0%,
                rgba(20, 27, 19, 0.73) 30%,
                rgba(20, 27, 19, 0.73) 65%,
                rgba(20, 27, 19, 0.65) 100%
            );

        background-repeat: no-repeat;

        pointer-events: none;
    }

    body .our-approach-page .oa-hero::after {
        content: none !important;
        display: none !important;
    }

    /* =========================================
       03 — REMOVE OLD DECORATIVE ELEMENTS
    ========================================= */

    body .our-approach-page .oa-hero__accent,
    body .our-approach-page .oa-hero__star,
    body .our-approach-page .oa-hero__line,
    body .our-approach-page .oa-hero__accent-line,
    body .our-approach-page .oa-hero__decoration,
    body .our-approach-page .oa-hero__decor {
        display: none !important;
    }

    body .our-approach-page .oa-hero__content::before,
    body .our-approach-page .oa-hero__content::after {
        content: none !important;
        display: none !important;
    }

    /* =========================================
       04 — CONTENT CONTAINER
       Responsive horizontal alignment
    ========================================= */

    body .our-approach-page .oa-hero__inner {
        position: relative;
        z-index: 2;

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;

        width: 100%;
        max-width: 599px;

        min-height: 0;
height: auto;

margin: 0 auto;

padding: 58px 52px 65px;

        box-sizing: border-box;
    }

    body .our-approach-page .oa-hero__content {
        position: relative;
        z-index: 3;

        display: flex;
        flex-direction: column;
        align-items: flex-start;

        width: 100%;
        max-width: 480px;
        min-width: 0;

        margin: 0;
        padding: 0;

        text-align: left;
    }

    /* =========================================
       05 — EYEBROW
    ========================================= */

    body .our-approach-page .oa-hero__eyebrow {
        display: block;

        margin: 0 0 20px;
        padding: 0;

        font-family: "Inter", sans-serif !important;

        font-size: 11px;
        font-weight: 600;
        line-height: 1.4;
        letter-spacing: 0.11em;

        text-transform: uppercase;
        text-align: left;

        color: #E99572;

        animation:
            oaMobileHeroReveal
            0.8s cubic-bezier(.22, 1, .36, 1)
            0.10s both;
    }

    /* =========================================
       06 — MAIN HEADING
       MANROPE — NO SERIF
    ========================================= */

    body .our-approach-page .oa-hero__title {
        display: block;

        width: 100%;
        max-width: 480px;

        margin: 0;
        padding: 0;

        font-family: "Manrope", sans-serif !important;

        font-size: clamp(36px, 9.3vw, 52px);
        font-weight: 600;
        font-style: normal;

        line-height: 1.12;
        letter-spacing: -0.055em;

        color: #F8F3EB !important;

        text-align: left;
        text-wrap: balance;

        text-shadow:
            0 3px 16px rgba(0, 0, 0, 0.22);

        animation:
            oaMobileHeroReveal
            0.95s cubic-bezier(.22, 1, .36, 1)
            0.20s both;
    }

    /* =========================================
       07 — BODY COPY
    ========================================= */

    body .our-approach-page .oa-hero__copy {
        width: 100%;
        max-width: 470px;

        margin: 26px 0 0;
        padding: 0;

        text-align: left;

        animation:
            oaMobileHeroReveal
            0.95s cubic-bezier(.22, 1, .36, 1)
            0.35s both;
    }

    body .our-approach-page .oa-hero__copy p {
        display: block;

        margin: 0;
        padding: 0;

        font-family: "Inter", sans-serif !important;

        font-size: 13px;
        font-weight: 400;
        line-height: 1.8;
        letter-spacing: 0;

        color: rgba(248, 243, 235, 0.94) !important;

        text-align: left;
    }

    body .our-approach-page .oa-hero__copy p + p {
        margin-top: 20px;
    }

    /* =========================================
       08 — TERRACOTTA PILL BUTTON
    ========================================= */

    body .our-approach-page .oa-hero__button {
        position: relative;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        gap: 16px;

        width: fit-content;
        max-width: 100%;

        min-height: 53px;

        margin: 30px 0 0;
        padding: 0 25px;

        border: 1px solid #C96743;
        border-radius: 999px;

        background: #C96743 !important;
        background-image: none !important;

        color: #FFFFFF !important;

        font-family: "Manrope", sans-serif !important;

        font-size: 13px;
        font-weight: 600;
        line-height: 1.3;
        letter-spacing: -0.015em;

        text-decoration: none !important;
        white-space: nowrap;

        box-shadow:
            0 9px 25px rgba(0, 0, 0, 0.21),
            0 3px 9px rgba(0, 0, 0, 0.09);

        transition:
            background-color 0.35s ease,
            border-color 0.35s ease,
            box-shadow 0.35s ease,
            translate 0.35s ease;

        animation:
            oaMobileHeroReveal
            0.9s cubic-bezier(.22, 1, .36, 1)
            0.50s both;
    }

    body .our-approach-page .oa-hero__button::before,
    body .our-approach-page .oa-hero__button::after {
        content: none !important;
        display: none !important;
    }

    body .our-approach-page .oa-hero__button:hover {
        background: #B95635 !important;
        border-color: #B95635;

        color: #FFFFFF !important;

        translate: 0 -2px;

        box-shadow:
            0 13px 29px rgba(0, 0, 0, 0.25);
    }

    body .our-approach-page .oa-hero__button:active {
        translate: 0 0;
    }

    body .our-approach-page .oa-hero__button:focus-visible {
        outline: 2px solid #F8F3EB;
        outline-offset: 4px;
    }

    /* =========================================
       09 — BUTTON ARROW
    ========================================= */

    body .our-approach-page .oa-hero__arrow {
        display: inline-block;

        font-family: "Inter", sans-serif !important;
        font-size: 19px;
        line-height: 1;

        color: inherit;

        transform: translateX(0);

        transition:
            transform 0.35s cubic-bezier(.22, 1, .36, 1);
    }

    body .our-approach-page
    .oa-hero__button:hover
    .oa-hero__arrow {
        transform: translateX(5px);
    }

    /* =========================================
       10 — STAGGERED ENTRANCE ANIMATION
       Fade + blur-to-sharp + soft movement
    ========================================= */

    @keyframes oaMobileHeroReveal {
        from {
            opacity: 0;
            transform: translateY(22px);
            filter: blur(4px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
            filter: blur(0);
        }
    }

    /* =========================================
       11 — SMALLER MOBILE SCREENS
       0px–374px
    ========================================= */

    @media (max-width: 374px) {

        body .our-approach-page .oa-hero,
body .our-approach-page .oa-hero__inner {
    min-height: 0;
    height: auto;
}

body .our-approach-page .oa-hero__inner {
    padding: 58px 32px 65px;
}

        body .our-approach-page .oa-hero__title {
            font-size: clamp(33px, 9.2vw, 38px);
        }

        body .our-approach-page .oa-hero__copy p {
            font-size: 12.5px;
        }

        body .our-approach-page .oa-hero__button {
            min-height: 51px;
            padding: 0 22px;
        }
    }

    /* =========================================
       12 — REDUCED MOTION
    ========================================= */

    @media (prefers-reduced-motion: reduce) {

        body .our-approach-page .oa-hero__eyebrow,
        body .our-approach-page .oa-hero__title,
        body .our-approach-page .oa-hero__copy,
        body .our-approach-page .oa-hero__button {
            animation: none !important;
            opacity: 1 !important;
            transform: none !important;
            filter: none !important;
        }

        body .our-approach-page .oa-hero__button,
        body .our-approach-page .oa-hero__arrow {
            transition: none !important;
        }
    }

} /* END OUR APPROACH — MOBILE HERO */





/* =========================================================
   FRAYORA — OUR APPROACH
   SECTION 03 — THE FRAYORA METHOD
   MOBILE ONLY: 0px–599px

   Luminous warm-stone surface
   Manrope / Inter typography
   Five-step vertical timeline
   Terracotta markers
   Gentle scroll reveals
========================================================= */

@media screen and (max-width: 599px) {

    /* =========================================
       01 — SECTION BACKGROUND
    ========================================= */

    body .our-approach-page .oa-method {
        position: relative;
        isolation: isolate;

        width: 100%;
        height: auto;
        min-height: 0;
        margin: 0;
        padding: 0;

        box-sizing: border-box;
        overflow: hidden;

        background-color: #F5EDE4;

        background-image:
            radial-gradient(
                ellipse 100% 60% at 5% 10%,
                rgba(255,255,255,.43),
                transparent 100%
            ),
            radial-gradient(
                ellipse 100% 65% at 95% 45%,
                rgba(255,255,255,.36),
                transparent 100%
            ),
            radial-gradient(
                ellipse 100% 60% at 15% 78%,
                rgba(220,204,189,.12),
                transparent 100%
            ),
            radial-gradient(
                ellipse 100% 55% at 95% 100%,
                rgba(255,255,255,.33),
                transparent 100%
            );

        background-repeat: no-repeat;
    }

    body .our-approach-page .oa-method,
    body .our-approach-page .oa-method *,
    body .our-approach-page .oa-method *::before,
    body .our-approach-page .oa-method *::after {
        box-sizing: border-box;
    }

    /* =========================================
       02 — CONTENT CONTAINER
    ========================================= */

    body .our-approach-page .oa-method__inner {
        position: relative;
        z-index: 1;

        display: block;

        width: 100%;
        max-width: 599px;
        margin: 0 auto;

        padding: 72px 25px 80px;
    }

    /* =========================================
       03 — INTRODUCTION
    ========================================= */

    body .our-approach-page .oa-method__intro {
        width: 100%;
        max-width: 480px;

        margin: 0 auto;
        padding: 0;

        text-align: center;
    }

    body .our-approach-page .oa-method__eyebrow {
        display: block;
        margin: 0 0 15px;

        font-family: "Inter", sans-serif !important;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.4;
        letter-spacing: .10em;
        text-transform: uppercase;

        color: #C96743;
        text-align: center;
    }

    body .our-approach-page .oa-method__title {
        width: 100%;
        max-width: 480px;

        margin: 0;
        padding: 0;

        font-family: "Manrope", sans-serif !important;
        font-size: clamp(29px, 7.8vw, 40px);
        font-weight: 600;
        font-style: normal;
        line-height: 1.18;
        letter-spacing: -.05em;

        color: #1F211D;
        text-align: center;
        text-wrap: balance;
    }

    body .our-approach-page .oa-method__description {
        width: 100%;
        max-width: 440px;

        margin: 22px auto 0;

        font-family: "Inter", sans-serif !important;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.75;

        color: rgba(31,33,29,.77);
        text-align: center;
    }

    /* =========================================
       04 — VERTICAL TIMELINE
    ========================================= */

    body .our-approach-page .oa-method__journey {
        position: relative;

        display: flex;
        flex-direction: column;

        width: 100%;
        max-width: 480px;

        margin: 51px auto 0;
        padding: 0;

        gap: 0;
    }

    /* Hide the black, desktop-style SVG waves */

    body .our-approach-page .oa-method__path,
    body .our-approach-page .oa-method__path svg {
        display: none !important;
    }

    /* Vertical terracotta line */

    body .our-approach-page .oa-method__journey::before {
        content: "";

        position: absolute;
        z-index: 0;

        left: 21px;
        top: 43px;
        bottom: 45px;

        width: 1px;

        background: rgba(201,103,67,.48);
        pointer-events: none;
    }

    /* =========================================
       05 — INDIVIDUAL STEPS
    ========================================= */

    body .our-approach-page .oa-method__step {
        position: relative;
        z-index: 1;

        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        grid-template-rows: auto auto;

        column-gap: 17px;
        row-gap: 9px;
        align-items: start;

        width: 100%;
        min-width: 0;

        margin: 0;
        padding: 23px 0 27px;

        border: 0;
        border-bottom: 1px solid rgba(57,66,53,.13);

        background: transparent;
        text-align: left;

        transition:
            background-color .35s ease,
            box-shadow .35s ease;
    }

    body .our-approach-page
    .oa-method__step:last-child {
        border-bottom: 0;
    }

    /* =========================================
       06 — STEP NUMBER + DOT
    ========================================= */

    body .our-approach-page .oa-method__marker {
        position: relative;
        z-index: 2;

        grid-column: 1;
        grid-row: 1 / span 2;

        display: flex;
        flex-direction: column;
        align-items: center;

        width: 44px;
        height: 60px;

        margin: 0;
        padding: 0;

        pointer-events: none;
    }

    body .our-approach-page .oa-method__number {
        display: block;
        margin: 0;

        font-family: "Manrope", sans-serif !important;
        font-size: 19px;
        font-weight: 600;
        font-style: normal;
        line-height: 1.2;
        letter-spacing: -.035em;

        color: #C96743;
    }

    body .our-approach-page .oa-method__dot {
        position: absolute;
        z-index: 3;

        top: 35px;
        left: 50%;

        width: 8px;
        height: 8px;

        border-radius: 50%;
        background: #C96743;

        transform: translateX(-50%);

        box-shadow:
            0 0 0 4px #F5EDE4;

        transition:
            transform .35s ease,
            box-shadow .35s ease;
    }

    /* =========================================
       07 — STEP TITLE
    ========================================= */

    body .our-approach-page .oa-method__step-title {
        grid-column: 2;
        grid-row: 1;

        margin: 0;
        padding: 0;

        font-family: "Manrope", sans-serif !important;
        font-size: 18px;
        font-weight: 600;
        font-style: normal;
        line-height: 1.35;
        letter-spacing: -.035em;

        color: #1F211D;
        text-align: left;
    }

    /* =========================================
       08 — STEP DESCRIPTION
    ========================================= */

    body .our-approach-page .oa-method__step-text {
        grid-column: 2;
        grid-row: 2;

        width: 100%;
        max-width: none;

        margin: 0;
        padding: 0;

        font-family: "Inter", sans-serif !important;
        font-size: 12.5px;
        font-weight: 400;
        line-height: 1.75;

        color: rgba(31,33,29,.77);
        text-align: left;
    }

    /* =========================================
       09 — INTERACTION
    ========================================= */

    @media (hover: hover) {

        body .our-approach-page
        .oa-method__step:hover {
            background: rgba(255,255,255,.20);
        }

        body .our-approach-page
        .oa-method__step:hover
        .oa-method__dot {
            transform:
                translateX(-50%) scale(1.25);

            box-shadow:
                0 0 0 4px #F5EDE4,
                0 0 0 10px rgba(201,103,67,.10);
        }
    }

    /* =========================================
       10 — CLOSING STATEMENT
    ========================================= */

    body .our-approach-page .oa-method__closing {
        display: flex;
        flex-direction: column;
        align-items: center;

        width: 100%;
        max-width: 460px;

        margin: 48px auto 0;
        padding: 0;

        text-align: center;
    }

    body .our-approach-page .oa-method__statement {
        width: 100%;
        margin: 0;

        font-family: "Manrope", sans-serif !important;
        font-size: 18px;
        font-weight: 400;
        font-style: normal;
        line-height: 1.5;
        letter-spacing: -.025em;

        color: #68704E;
        text-align: center;
    }

    /* Only the second sentence is italic */

    body .our-approach-page .oa-method__statement em {
        font-family: "Manrope", sans-serif !important;
        font-size: inherit;
        font-weight: 600;
        font-style: italic;

        color: #68704E;
    }

    /* Terracotta star */

    body .our-approach-page
    .oa-method__statement::after {
        content: "✦";

        display: block;

        margin: 22px auto 14px;

        font-family: "Inter", sans-serif;
        font-size: 23px;
        font-style: normal;
        line-height: 1;

        color: #C96743;
        text-align: center;
    }

    body .our-approach-page .oa-method__fineprint {
        width: 100%;
        max-width: 430px;

        margin: 0 auto;

        font-family: "Inter", sans-serif !important;
        font-size: 12px;
        font-weight: 400;
        line-height: 1.75;

        color: rgba(31,33,29,.72);
        text-align: center;
    }

    /* =========================================
       11 — SCROLL ENTRANCE ANIMATIONS
    ========================================= */

    @keyframes oaMobileMethodReveal {
        from {
            opacity: 0;
            translate: 0 18px;
            filter: blur(3px);
        }

        to {
            opacity: 1;
            translate: 0 0;
            filter: blur(0);
        }
    }

    @supports (animation-timeline: view()) {

        body .our-approach-page .oa-method__intro,
        body .our-approach-page .oa-method__step,
        body .our-approach-page .oa-method__closing {
            animation: oaMobileMethodReveal linear both;

            animation-timeline: view();
            animation-range: entry 0% entry 65%;
        }

        body .our-approach-page .oa-method__closing {
            animation-range: entry 0% entry 75%;
        }
    }

    /* =========================================
       12 — SMALL MOBILE: 0–374px
    ========================================= */

    @media (max-width: 374px) {

        body .our-approach-page .oa-method__inner {
            padding: 65px 21px 75px;
        }

        body .our-approach-page .oa-method__title {
            font-size: 29px;
        }

        body .our-approach-page .oa-method__step {
            column-gap: 13px;
        }

        body .our-approach-page .oa-method__step-title {
            font-size: 17px;
        }

        body .our-approach-page .oa-method__step-text {
            font-size: 12px;
        }

        body .our-approach-page .oa-method__statement {
            font-size: 17px;
        }
    }

    /* =========================================
       13 — REDUCED MOTION
    ========================================= */

    @media (prefers-reduced-motion: reduce) {

        body .our-approach-page .oa-method__intro,
        body .our-approach-page .oa-method__step,
        body .our-approach-page .oa-method__closing {
            animation: none !important;
            opacity: 1 !important;
            translate: none !important;
            transform: none !important;
            filter: none !important;
        }

        body .our-approach-page .oa-method__step,
        body .our-approach-page .oa-method__dot {
            transition: none !important;
        }
    }

} /* END SECTION 03 — MOBILE */



/* =========================================================
   FRAYORA — OUR APPROACH
   SECTION 04 — WHY OUR APPROACH IS DIFFERENT
   MOBILE ONLY: 0px–599px

   Luminous ivory background
   Manrope + Inter typography
   Stacked editorial comparison
   Terracotta and olive accents
   Responsive photo
   Scroll reveal animations
========================================================= */

@media screen and (max-width: 599px) {

    /* =========================================
       01 — SECTION
    ========================================= */

    body .our-approach-page .oa-difference {
        position: relative;
        isolation: isolate;

        display: block;

        width: 100%;
        height: auto;
        min-height: 0;

        margin: 0;
        padding: 0;

        box-sizing: border-box;
        overflow: hidden;

        background-color: #F8F3EB;

        background-image:
            radial-gradient(
                ellipse 115% 55% at 10% 10%,
                rgba(255,255,255,.52) 0%,
                transparent 100%
            ),
            radial-gradient(
                ellipse 120% 65% at 95% 43%,
                rgba(255,255,255,.42) 0%,
                transparent 100%
            ),
            radial-gradient(
                ellipse 110% 65% at 12% 78%,
                rgba(224,210,196,.12) 0%,
                transparent 100%
            ),
            radial-gradient(
                ellipse 110% 50% at 88% 100%,
                rgba(255,255,255,.36) 0%,
                transparent 100%
            );

        background-repeat: no-repeat;
    }

    body .our-approach-page .oa-difference,
    body .our-approach-page .oa-difference *,
    body .our-approach-page .oa-difference *::before,
    body .our-approach-page .oa-difference *::after {
        box-sizing: border-box;
    }

    /* =========================================
       02 — FULL-WIDTH PHOTO AT BOTTOM
    ========================================= */

    body .our-approach-page .oa-difference::before {
        content: none !important;
        display: none !important;
    }

    body .our-approach-page .oa-difference::after {
        content: "";

        position: absolute;
        z-index: 0;

        left: 0;
        right: 0;
        bottom: 0;

        display: block;

        width: 100%;
        height: 300px;

        background-color: #D9CBB9;
        background-image:
            url("../images/Our Approach/newimage.png");

        background-size: cover;
        background-position: 63% center;
        background-repeat: no-repeat;

        pointer-events: none;
    }

    /* =========================================
       03 — INNER CONTENT
    ========================================= */

    body .our-approach-page .oa-difference__inner {
        position: relative;
        z-index: 1;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        width: 100%;
        max-width: 599px;

        margin: 0 auto;

        /* Space for bottom photograph */
        padding: 72px 25px 370px;
    }

    /* =========================================
       04 — INTRODUCTION
    ========================================= */

    body .our-approach-page .oa-difference__intro {
        width: 100%;
        max-width: 480px;

        margin: 0;
        padding: 0;

        text-align: left;
    }

    body .our-approach-page .oa-difference__eyebrow {
        display: block;

        margin: 0 0 17px;
        padding: 0;

        font-family: "Inter", sans-serif !important;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.4;
        letter-spacing: .1em;
        text-transform: uppercase;

        color: #C96743;
        text-align: left;
    }

    body .our-approach-page .oa-difference__title {
        width: 100%;
        max-width: 480px;

        margin: 0;
        padding: 0;

        font-family: "Manrope", sans-serif !important;
        font-size: clamp(31px, 7.7vw, 42px);
        font-weight: 600;
        font-style: normal;
        line-height: 1.16;
        letter-spacing: -.05em;

        color: #1F211D;
        text-align: left;
        text-wrap: balance;
    }

    body .our-approach-page .oa-difference__description {
        width: 100%;
        max-width: 460px;

        margin: 24px 0 0;
        padding: 0;

        font-family: "Inter", sans-serif !important;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.8;

        color: rgba(31,33,29,.78);
        text-align: left;
    }

    /* =========================================
       05 — STACKED COMPARISON
    ========================================= */

    body .our-approach-page .oa-difference__comparison {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        width: 100%;
        max-width: 480px;

        margin: 48px 0 0;
        padding: 0;

        gap: 37px;

        background: transparent;
    }

    body .our-approach-page
    .oa-difference__comparison::before,
    body .our-approach-page
    .oa-difference__comparison::after {
        content: none !important;
        display: none !important;
    }

    /* =========================================
       06 — COMPARISON PANELS
    ========================================= */

    body .our-approach-page .oa-difference__panel {
        position: relative;

        display: block;

        width: 100%;
        min-width: 0;

        margin: 0;
        padding: 0;

        border: 0;
        border-radius: 0;

        background: transparent;
        box-shadow: none;
        overflow: visible;
    }

    /* Olive panel gets a subtle separator */

    body .our-approach-page
    .oa-difference__panel--frayora {
        padding-top: 32px;

        border-top:
            1px solid rgba(57,66,53,.19);

        border-left: 0;
    }

    body .our-approach-page
    .oa-difference__panel::before,
    body .our-approach-page
    .oa-difference__panel::after {
        content: none !important;
        display: none !important;
    }

    /* =========================================
       07 — PANEL LABELS
    ========================================= */

    body .our-approach-page
    .oa-difference__panel-label,
    body .our-approach-page
    .oa-difference__panel-eyebrow {
        display: block;

        margin: 0 0 13px;
        padding: 0;

        font-family: "Inter", sans-serif !important;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.4;
        letter-spacing: .09em;
        text-transform: uppercase;

        color: #C96743;
    }

    body .our-approach-page
    .oa-difference__panel--frayora
    .oa-difference__panel-label,
    body .our-approach-page
    .oa-difference__panel--frayora
    .oa-difference__panel-eyebrow {
        color: #68704E;
    }

    /* =========================================
       08 — PANEL HEADINGS
    ========================================= */

    body .our-approach-page
    .oa-difference__panel-title {
        margin: 0 0 18px;
        padding: 0;

        font-family: "Manrope", sans-serif !important;
        font-size: 22px;
        font-weight: 600;
        font-style: normal;
        line-height: 1.3;
        letter-spacing: -.04em;

        color: #1F211D;
        text-align: left;
    }

    /* =========================================
       09 — COMPARISON LISTS
    ========================================= */

    body .our-approach-page
    .oa-difference__panel ul {
        display: block;

        width: 100%;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }

    body .our-approach-page
    .oa-difference__panel li {
        position: relative;

        display: block;

        width: 100%;
        min-width: 0;

        margin: 0 !important;
        padding: 15px 0 15px 24px !important;

        border: 0;
        border-bottom:
            1px solid rgba(57,66,53,.14);

        background: transparent;

        font-family: "Inter", sans-serif !important;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.7;

        color: rgba(31,33,29,.78);

        list-style: none !important;

        transition:
            background-color .35s ease,
            border-color .35s ease;
    }

    body .our-approach-page
    .oa-difference__panel li:last-child {
        border-bottom: none;
    }

    /* =========================================
       10 — STAR MARKERS
    ========================================= */

    body .our-approach-page
    .oa-difference__panel li::before {
        content: "✦";

        position: absolute;

        top: 15px;
        left: 0;

        display: block;

        font-family: "Inter", sans-serif;
        font-size: 12px;
        line-height: 1.7;

        color: #C96743;

        transition: transform .35s ease;
    }

    body .our-approach-page
    .oa-difference__panel--frayora li::before {
        color: #68704E;
    }

    /* =========================================
       11 — CLOSING STATEMENT
    ========================================= */

    body .our-approach-page .oa-difference__closing {
        width: 100%;
        max-width: 480px;

        margin: 44px 0 0;
        padding: 0;

        text-align: left;
    }

    body .our-approach-page .oa-difference__statement {
        margin: 0;

        font-family: "Manrope", sans-serif !important;
        font-size: 19px;
        font-weight: 500;
        font-style: normal;
        line-height: 1.55;
        letter-spacing: -.025em;

        color: #68704E;
    }

    body .our-approach-page .oa-difference__fineprint {
        margin: 18px 0 0;

        font-family: "Inter", sans-serif !important;
        font-size: 12px;
        font-weight: 400;
        line-height: 1.75;

        color: rgba(31,33,29,.76);
    }

    /* =========================================
       12 — INTERACTIONS
    ========================================= */

    @media (hover: hover) {

        body .our-approach-page
        .oa-difference__panel li:hover {
            background: rgba(255,255,255,.3);
            border-bottom-color: rgba(201,103,67,.32);
        }

        body .our-approach-page
        .oa-difference__panel--frayora li:hover {
            background: rgba(105,115,92,.05);
            border-bottom-color: rgba(105,115,92,.32);
        }

        body .our-approach-page
        .oa-difference__panel li:hover::before {
            transform: scale(1.2) rotate(45deg);
        }
    }

    /* =========================================
       13 — SCROLL REVEAL ANIMATIONS
    ========================================= */

    @keyframes oaDifferenceMobileReveal {
        from {
            opacity: 0;
            translate: 0 18px;
            filter: blur(3px);
        }

        to {
            opacity: 1;
            translate: 0 0;
            filter: blur(0);
        }
    }

    @supports (animation-timeline: view()) {

        body .our-approach-page
        .oa-difference__intro,
        body .our-approach-page
        .oa-difference__panel,
        body .our-approach-page
        .oa-difference__closing {
            animation: oaDifferenceMobileReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 65%;
        }

        body .our-approach-page
        .oa-difference__closing {
            animation-range: entry 0% entry 75%;
        }
    }

    /* =========================================
       14 — SMALL MOBILE
    ========================================= */

    @media (max-width: 374px) {

        body .our-approach-page .oa-difference__inner {
            padding: 65px 21px 355px;
        }

        body .our-approach-page .oa-difference__title {
            font-size: 29px;
        }

        body .our-approach-page .oa-difference__description {
            font-size: 12.5px;
        }

        body .our-approach-page .oa-difference__comparison {
            margin-top: 43px;
        }

        body .our-approach-page
        .oa-difference__panel-title {
            font-size: 20px;
        }

        body .our-approach-page
        .oa-difference__panel li {
            font-size: 12.5px;
        }

        body .our-approach-page
        .oa-difference__statement {
            font-size: 18px;
        }

        body .our-approach-page .oa-difference::after {
            height: 280px;
        }
    }

    /* =========================================
       15 — REDUCED MOTION
    ========================================= */

    @media (prefers-reduced-motion: reduce) {

        body .our-approach-page
        .oa-difference__intro,
        body .our-approach-page
        .oa-difference__panel,
        body .our-approach-page
        .oa-difference__closing {
            animation: none !important;
            opacity: 1 !important;
            translate: none !important;
            filter: none !important;
        }

        body .our-approach-page
        .oa-difference__panel li,
        body .our-approach-page
        .oa-difference__panel li::before {
            transition: none !important;
        }
    }

} /* END SECTION 04 — MOBILE */



/* =========================================================
   FRAYORA — OUR APPROACH
   SECTION 05 — FINAL CTA
   MOBILE ONLY: 0px–599px

   Luminous ivory background
   Manrope + Inter typography
   Olive heading accent
   Terracotta pill CTA
   Soft entrance animations
========================================================= */

@media screen and (max-width: 599px) {

    /* =========================================
       01 — LUMINOUS BACKGROUND
    ========================================= */

    body .our-approach-page .oa-final {
        position: relative;
        isolation: isolate;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        height: auto;
        min-height: 0;

        margin: 0;
        padding: 0;
        overflow: hidden;

        box-sizing: border-box;

        background-color: #F8F3EB;

        background-image:
            radial-gradient(
                ellipse 95% 55% at 85% 23%,
                rgba(201,103,67,0.12) 0%,
                rgba(201,103,67,0.04) 55%,
                transparent 100%
            ),
            radial-gradient(
                ellipse 100% 55% at 12% 78%,
                rgba(139,154,126,0.16) 0%,
                rgba(139,154,126,0.04) 55%,
                transparent 100%
            ),
            radial-gradient(
                ellipse 90% 50% at 35% 5%,
                rgba(255,255,255,0.88) 0%,
                transparent 100%
            ),
            radial-gradient(
                ellipse 95% 50% at 92% 100%,
                rgba(255,255,255,0.40) 0%,
                transparent 100%
            );

        background-repeat: no-repeat;
    }

    body .our-approach-page .oa-final,
    body .our-approach-page .oa-final *,
    body .our-approach-page .oa-final *::before,
    body .our-approach-page .oa-final *::after {
        box-sizing: border-box;
    }

    /* Soft, seamless illumination */

    body .our-approach-page .oa-final::before {
        content: "";

        position: absolute;
        inset: 0;
        z-index: 0;

        display: block;

        background: linear-gradient(
            115deg,
            rgba(255,255,255,0.20) 0%,
            rgba(255,255,255,0.02) 45%,
            rgba(255,255,255,0.15) 100%
        );

        pointer-events: none;
    }

    body .our-approach-page .oa-final::after {
        content: none;
        display: none;
    }

    /* =========================================
       02 — CENTERED CONTENT
    ========================================= */

    body .our-approach-page .oa-final__inner {
        position: relative;
        z-index: 2;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        width: 100%;
        max-width: 599px;
        min-height: 0;

        margin: 0 auto;
        padding: 85px 25px 95px;

        text-align: center;
    }

    body .our-approach-page .oa-final__content {
        display: flex;
        flex-direction: column;
        align-items: center;

        width: 100%;
        max-width: 480px;

        margin: 0;
        padding: 0;

        text-align: center;
    }

    /* =========================================
       03 — MANROPE HEADING
    ========================================= */

    body .our-approach-page .oa-final__title {
        width: 100%;
        max-width: 480px;

        margin: 0;
        padding: 0;

        font-family: "Manrope", sans-serif !important;
        font-size: clamp(31px, 8.2vw, 43px);
        font-weight: 600;
        font-style: normal;
        line-height: 1.17;
        letter-spacing: -0.052em;

        color: #1F211D !important;

        text-align: center;
        text-wrap: balance;
    }

    /* SECOND LINE — OLIVE, NOT ITALIC */

    body .our-approach-page .oa-final__title em {
        display: inline;

        font-family: "Manrope", sans-serif !important;
        font-size: inherit;
        font-weight: 600;
        font-style: normal !important;
        line-height: inherit;
        letter-spacing: inherit;

        color: #566449 !important;
    }

    /* =========================================
       04 — DESCRIPTION
    ========================================= */

    body .our-approach-page .oa-final__description {
        width: 100%;
        max-width: 450px;

        margin: 24px auto 0;
        padding: 0;

        font-family: "Inter", sans-serif !important;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.8;

        color: rgba(31,33,29,0.78) !important;

        text-align: center;
    }

    /* =========================================
       05 — SUPPORTING STATEMENT
    ========================================= */

    body .our-approach-page .oa-final__note {
        width: 100%;
        max-width: 430px;

        margin: 19px auto 0;
        padding: 0;

        font-family: "Inter", sans-serif !important;
        font-size: 12.5px;
        font-weight: 400;
        line-height: 1.75;

        color: rgba(31,33,29,0.68) !important;

        text-align: center;
    }

    /* =========================================
       06 — BUTTON GROUP
    ========================================= */

    body .our-approach-page .oa-final__action {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        width: 100%;
        max-width: 430px;

        margin: 33px auto 0;
        padding: 0;

        text-align: center;
    }

    /* =========================================
       07 — TERRACOTTA PILL BUTTON
    ========================================= */

    body .our-approach-page .oa-final__button {
        position: relative;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        gap: 17px;

        width: fit-content;
        max-width: 100%;
        min-width: 230px;
        min-height: 54px;

        margin: 0;
        padding: 0 28px;

        border: 1px solid #C96743;
        border-radius: 999px;

        background: #C96743 !important;
        background-image: none !important;

        color: #FFFFFF !important;

        font-family: "Manrope", sans-serif !important;
        font-size: 13px;
        font-weight: 600;
        font-style: normal;
        line-height: 1.3;
        letter-spacing: -0.015em;

        text-decoration: none !important;
        white-space: nowrap;

        box-shadow:
            0 9px 23px rgba(103,58,39,0.17),
            0 2px 6px rgba(103,58,39,0.06);

        transform: translateY(0);

        transition:
            background-color 0.3s ease,
            border-color 0.3s ease,
            transform 0.35s ease,
            box-shadow 0.35s ease;
    }

    body .our-approach-page .oa-final__button::before,
    body .our-approach-page .oa-final__button::after {
        content: none !important;
        display: none !important;
    }

    body .our-approach-page .oa-final__button:hover {
        background: #B95635 !important;
        border-color: #B95635;

        transform: translateY(-3px);

        box-shadow:
            0 14px 28px rgba(103,58,39,0.22);
    }

    body .our-approach-page .oa-final__button:active {
        transform: translateY(0);
    }

    body .our-approach-page .oa-final__button:focus-visible {
        outline: 2px solid #394235;
        outline-offset: 4px;
    }

    /* =========================================
       08 — BUTTON ARROW
    ========================================= */

    body .our-approach-page .oa-final__arrow {
        display: inline-block;

        font-family: "Inter", sans-serif !important;
        font-size: 19px;
        line-height: 1;

        color: inherit;

        transform: translateX(0);

        transition:
            transform 0.35s cubic-bezier(.22,1,.36,1);
    }

    body .our-approach-page
    .oa-final__button:hover
    .oa-final__arrow {
        transform: translateX(5px);
    }

    /* =========================================
       09 — SMALL TEXT BELOW BUTTON
    ========================================= */

    body .our-approach-page .oa-final__aside {
        width: 100%;
        max-width: 320px;

        margin: 19px auto 0;
        padding: 0;

        font-family: "Inter", sans-serif !important;
        font-size: 12px;
        font-weight: 400;
        line-height: 1.75;

        color: rgba(31,33,29,0.65) !important;

        text-align: center;
    }

    /* =========================================
       10 — SCROLL ENTRANCE ANIMATIONS
    ========================================= */

    @keyframes oaFinalMobileReveal {
        from {
            opacity: 0;
            translate: 0 20px;
            filter: blur(3px);
        }

        to {
            opacity: 1;
            translate: 0 0;
            filter: blur(0);
        }
    }

    @supports (animation-timeline: view()) {

        body .our-approach-page .oa-final__content {
            animation: oaFinalMobileReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 60%;
        }

        body .our-approach-page .oa-final__action {
            animation: oaFinalMobileReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 75%;
        }
    }

    /* =========================================
       11 — SMALL MOBILE: 0px–374px
    ========================================= */

    @media (max-width: 374px) {

        body .our-approach-page .oa-final__inner {
            padding: 72px 21px 82px;
        }

        body .our-approach-page .oa-final__title {
            font-size: clamp(28px, 8.5vw, 32px);
        }

        body .our-approach-page .oa-final__description {
            font-size: 12.5px;
        }

        body .our-approach-page .oa-final__note {
            font-size: 12px;
        }

        body .our-approach-page .oa-final__action {
            margin-top: 30px;
        }

        body .our-approach-page .oa-final__button {
            min-width: 215px;
            min-height: 52px;
            padding: 0 24px;
        }

        body .our-approach-page .oa-final__aside {
            font-size: 11.5px;
        }
    }

    /* =========================================
       12 — ACCESSIBILITY
    ========================================= */

    @media (prefers-reduced-motion: reduce) {

        body .our-approach-page .oa-final__content,
        body .our-approach-page .oa-final__action {
            animation: none !important;
            opacity: 1 !important;
            translate: none !important;
            filter: none !important;
        }

        body .our-approach-page .oa-final__button,
        body .our-approach-page .oa-final__arrow {
            transition: none !important;
        }

        body .our-approach-page .oa-final__button:hover {
            transform: none !important;
        }
    }

} /* END SECTION 05 — MOBILE */



/* ==========================================
   FRAYORA — GLOBAL HEADER WIDTH REFINEMENT
   BOND-INSPIRED DESKTOP SPACING
   1101px+
========================================== */

@media (min-width: 1101px) {

    /* WIDER HEADER CONTENT AREA */

    .site-header .site-header__inner {
        width: 100%;
        max-width: 1600px !important;

        margin-left: auto;
        margin-right: auto;

        padding-left: 48px !important;
        padding-right: 48px !important;

        grid-template-columns:
            minmax(190px, 1fr)
            auto
            minmax(190px, 1fr) !important;

        column-gap: 24px;
    }

    /* LEFT — LOGO */

    .site-header .site-logo {
        justify-self: start;
    }

    /* CENTER — NAVIGATION */

    .site-header .site-nav {
        justify-self: center;
        justify-content: center;
        gap: 32px;
    }

    /* RIGHT — CTA */

    .site-header .site-header__actions {
        justify-self: end;
        justify-content: flex-end;
    }

    /* MEDIUM DESKTOP */

    @media (max-width: 1250px) {

        .site-header .site-header__inner {
            padding-left: 32px !important;
            padding-right: 32px !important;

            grid-template-columns:
                170px
                minmax(0, 1fr)
                auto !important;

            column-gap: 18px;
        }

        .site-header .site-nav {
            gap: 20px;
        }

        .site-header .site-logo img {
            width: 165px;
        }

        .site-header .header-cta {
            padding-left: 16px;
            padding-right: 16px;
        }
    }
}


/* =====================================================
   FRAYORA — GLOBAL TABLET & MOBILE HEADER
   0px–1100px

   Solid ivory navigation
   Improved logo readability
   Balanced spacing
   Modern editorial styling
   All pages
===================================================== */

@media (max-width: 1100px) {

    /* MAIN HEADER */

    .site-header {
        position: relative;
        top: auto;
        left: auto;
        z-index: 1000;

        width: 100%;
        height: 76px;

        margin: 0;
        padding: 0;

        
/* Clean ivory with subtle luminous depth */

background-color: #F8F7F3;

background-image:
    radial-gradient(
        ellipse 42% 160% at 12% 45%,
        rgba(255, 255, 255, 0.75) 0%,
        rgba(255, 255, 255, 0.22) 55%,
        transparent 85%
    ),
    radial-gradient(
        ellipse 48% 160% at 88% 55%,
        rgba(255, 255, 255, 0.65) 0%,
        rgba(255, 255, 255, 0.18) 55%,
        transparent 85%
    ),
    radial-gradient(
        ellipse 38% 150% at 50% 100%,
        rgba(214, 210, 202, 0.10) 0%,
        transparent 85%
    );

background-repeat: no-repeat;


        box-shadow:
            0 2px 12px rgba(31, 33, 29, 0.045);
    }

    /* HEADER CONTENT */

    .site-header .site-header__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;

        width: 100%;
        max-width: 1100px;
        height: 100%;

        margin: 0 auto;
        padding: 0 40px;

        box-sizing: border-box;
    }

    /* LOGO */

    .site-header .site-logo {
        display: flex;
        align-items: center;
        justify-content: flex-start;

        flex-shrink: 0;
        margin: 0;
    }

    .site-header .site-logo img {
        display: block;

        width: 175px;
        max-width: 100%;
        height: auto;

        filter: none;
    }

    /* DESKTOP NAVIGATION */

    .site-header .site-nav {
        display: none;
    }

    /* RIGHT CONTROLS */

    .site-header .site-header__actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;

        gap: 25px;
        margin: 0;
    }

    /* CTA BUTTON */

    
/* ==========================================
   FRAYORA — COMPACT HEADER CTA
   TABLET
========================================== */

.site-header .header-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: auto;
    height: 40px;
    min-height: 40px;

    margin: 0;
    padding: 0 18px;

    box-sizing: border-box;

    border: 0;
    border-radius: 22px;

    background: #394235;
    color: #F8F3EB;

    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.01em;

    text-decoration: none;
    white-space: nowrap;

    box-shadow:
        0 4px 12px rgba(31, 33, 29, 0.10);

    transition:
        background-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


    /* HAMBURGER */

    .site-header .menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 38px;
        height: 42px;

        margin: 0;
        padding: 0;

        border: 0;
        background: transparent;

        color: #303B32;

        font-size: 28px;
        line-height: 1;

        cursor: pointer;
    }

    @media (hover: hover) {

        .site-header .header-cta:hover {
            background: #46523F;
            transform: translateY(-2px);

            box-shadow:
                0 8px 18px rgba(31, 33, 29, 0.13);
        }
    }
}


/* =====================================================
   FRAYORA — MOBILE HEADER
   0px–599px
===================================================== */

@media (max-width: 599px) {

    /* MOBILE HEADER HEIGHT */

    .site-header {
        height: 68px;
    }

    /* MOBILE CONTENT */

    .site-header .site-header__inner {
        height: 100%;
        padding: 0 22px;
    }

    /* MOBILE LOGO */

    .site-header .site-logo img {
        width: 145px;
        height: auto;
    }

    /* HIDE CTA ON MOBILE */

    .site-header .header-cta {
        display: none;
    }

    /* MOBILE CONTROLS */

    .site-header .site-header__actions {
        gap: 0;
    }

    /* MOBILE HAMBURGER */

    .site-header .menu-toggle {
        width: 38px;
        height: 40px;

        font-size: 26px;
        color: #303B32;
    }
}


/* =====================================================
   ACCESSIBILITY
===================================================== */

@media (max-width: 1100px) and
       (prefers-reduced-motion: reduce) {

    .site-header .header-cta {
        transition: none;
    }
}

/* SERVICES — REMOVE DROPDOWN ARROW */

.site-header .nav-dropdown__trigger span {
    display: none;
}


/* =====================================================
   FRAYORA — GLOBAL MOBILE NAVIGATION
   TABLET + MOBILE: 0px–1100px

   Clean ivory dropdown
   Logo-aligned navigation
   Smaller mobile typography
   Functional Services submenu
===================================================== */

@media (max-width: 1100px) {

    .site-header {
        z-index: 1000;
    }

    /* CLOSED MENU */

    .site-header .site-nav {
        display: none;
    }

    /* OPEN MENU */

    .site-header.menu-open .site-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 1001;

        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;

        width: 100%;
        max-height: calc(100dvh - 76px);

        gap: 0;
        margin: 0;
        padding: 12px 40px 25px;

        box-sizing: border-box;
        overflow-y: auto;

        background: #F8F3EB;

        box-shadow:
            0 18px 30px rgba(31,33,29,0.10);

        animation: frayoraMenuOpen 0.3s ease both;
    }

    /* NAVIGATION LINKS */

    .site-header.menu-open .site-nav > a,
    .site-header.menu-open .nav-dropdown__trigger {
        display: flex;
        align-items: center;

        width: 100%;
        min-height: 0;
        height: auto;

        padding: 19px 0;
        margin: 0;

        font-family: "Manrope", sans-serif;
        font-size: 19px;
        font-weight: 500;
        line-height: 1.4;
        letter-spacing: -0.02em;

        color: #1F211D;
        text-decoration: none;
        text-shadow: none;

        border-bottom:
            1px solid rgba(31,33,29,0.10);
    }

    /* REMOVE DECORATIVE LINK UNDERLINES */

    .site-header.menu-open .site-nav > a::after,
    .site-header.menu-open .nav-dropdown__trigger::after {
        display: none;
    }

    /* SERVICES DROPDOWN */

    .site-header.menu-open .nav-dropdown {
        display: block;
        width: 100%;
        height: auto;
    }

    .site-header .nav-dropdown__menu {
        display: none;
    }

    .site-header.menu-open
    .nav-dropdown.is-open .nav-dropdown__menu {
        position: static;

        display: flex;
        flex-direction: column;

        width: 100%;
        min-width: 0;

        margin: 0;
        padding: 8px 0 12px 16px;

        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .site-header.menu-open .nav-dropdown__menu a {
        display: block;
        height: auto;

        padding: 11px 0;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1.5;

        color: #394235;
    }

    /* PREVENT HOVER FROM FORCING THE SUBMENU OPEN */

    .site-header.menu-open
    .nav-dropdown:not(.is-open) .nav-dropdown__menu {
        display: none;
    }

    /* HAMBURGER */

    .site-header .menu-toggle {
        cursor: pointer;
        color: #303B32;
    }

    .site-header .menu-toggle:focus-visible,
    .site-header .nav-dropdown__trigger:focus-visible {
        outline: 2px solid #D66A43;
        outline-offset: 4px;
    }

    /* MENU ANIMATION */

    @keyframes frayoraMenuOpen {
        from {
            opacity: 0;
            transform: translateY(-8px);
        }

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


/* =====================================================
   TABLET NAVIGATION: 600px–1100px
===================================================== */

@media (min-width: 600px) and (max-width: 1100px) {

    .site-header.menu-open .site-nav {
        padding: 12px 76px 25px;
    }

    .site-header.menu-open .site-nav > a,
    .site-header.menu-open .nav-dropdown__trigger {
        padding: 19px 0;
        font-size: 19px;
    }
}


/* =====================================================
   MOBILE NAVIGATION: 0px–599px
===================================================== */

@media (max-width: 599px) {

    .site-header.menu-open .site-nav {
        max-height: calc(100dvh - 68px);
        padding: 12px 76px 25px;
    }

    .site-header.menu-open .site-nav > a,
    .site-header.menu-open .nav-dropdown__trigger {
        min-height: 0;
        padding: 16px 0;

        font-family: "Manrope", sans-serif;
        font-size: 15px;
        font-weight: 500;
        line-height: 1.4;
    }

    .site-header.menu-open
    .nav-dropdown.is-open .nav-dropdown__menu {
        padding: 5px 0 10px 12px;
    }

    .site-header.menu-open .nav-dropdown__menu a {
        font-size: 13px;
        padding: 10px 0;
    }
}


/* =====================================================
   REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {

    .site-header.menu-open .site-nav {
        animation: none;
    }
}


/* ==========================================================
   FRAYORA — GLOBAL FOOTER
   FINAL REDESIGN

   Design: Bond-inspired, Frayora identity
   Background: Deep olive #394235
   Typography: Poppins
   Desktop container: 1600px
   Desktop side padding: 48px

   Desktop: 1101px+
   Tablet: 600px–1100px
   Mobile: 599px and below
========================================================== */


/* ==========================================================
   01 — GLOBAL FOUNDATION
========================================================== */

.site-footer {
    --footer-bg: #242E26;
    --footer-ivory: #F8F3EB;
    --footer-accent: #D66A43;
    --footer-button: #D66A43;
    --footer-muted: #D5D8CF;

    position: relative;

    width: 100%;
    margin: 0;
    padding: 0;

    
/* DARK OLIVE — MONOCHROMATIC LUMINOUS BACKGROUND */

background-color: #242E26;

background-image:
    /* Localized soft olive illumination — upper left */
    radial-gradient(
        ellipse 38% 65% at 16% 22%,
        rgba(113, 135, 103, 0.20) 0%,
        rgba(113, 135, 103, 0.07) 46%,
        transparent 78%
    ),

    /* Second soft light source — center-right */
    radial-gradient(
        ellipse 42% 72% at 76% 48%,
        rgba(113, 135, 103, 0.17) 0%,
        rgba(113, 135, 103, 0.06) 48%,
        transparent 80%
    ),

    /* Subtle lower illumination */
    radial-gradient(
        ellipse 40% 55% at 45% 100%,
        rgba(105, 127, 98, 0.12) 0%,
        transparent 78%
    ),

    /* Deep olive stays dominant throughout */
    linear-gradient(
        135deg,
        #242E26 0%,
        #202A22 55%,
        #1D271F 100%
    );

background-repeat: no-repeat;

    color: var(--footer-ivory);

    font-family: "Poppins", "Inter", sans-serif;
    font-weight: 400;

    box-sizing: border-box;
    isolation: isolate;
}

.site-footer *,
.site-footer *::before,
.site-footer *::after {
    box-sizing: border-box;
}

.site-footer a {
    text-decoration: none;
}

.site-footer a:focus-visible {
    outline: 2px solid var(--footer-accent);
    outline-offset: 4px;
}


/* ==========================================================
   02 — MAIN FOOTER CONTAINER
========================================================== */

.site-footer .site-footer__main {
    width: 100%;
    max-width: 1600px;

    margin: 0 auto;

    display: grid;
    align-items: start;

    box-sizing: border-box;
}


/* ==========================================================
   03 — LEFT CONTACT AREA
========================================================== */

.site-footer .site-footer__intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    min-width: 0;
}

.site-footer .site-footer__headline {
    margin: 0;
    padding: 0;

    font-family: "Poppins", "Inter", sans-serif;
    font-weight: 600;

    color: var(--footer-ivory);

    text-align: left;
    text-transform: none;
}

.site-footer .site-footer__headline span {
    display: block;

    color: var(--footer-accent);
}


/* LET'S CONNECT */

.site-footer .site-footer__connect-label {
    margin: 26px 0 0;
    padding: 0;

    font-family: "Poppins", "Inter", sans-serif;

    font-size: 17px;
    font-weight: 500;
    line-height: 1.5;

    color: var(--footer-ivory);
}


/* ==========================================================
   04 — SOCIAL MEDIA BUTTONS
========================================================== */

.site-footer .site-footer__socials {
    display: flex;
    align-items: center;

    gap: 16px;

    margin: 26px 0 0;
    padding: 0;
}

.site-footer .site-footer__socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 54px;
    height: 54px;

    margin: 0;
    padding: 0;

    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.12);

    background: #D9784F;

    box-shadow:
        0 8px 20px rgba(0,0,0,0.18),
        0 2px 6px rgba(0,0,0,0.10);

    transition:
        background-color 300ms ease,
        transform 350ms cubic-bezier(.22,1,.36,1),
        box-shadow 350ms ease;
}

.site-footer .site-footer__socials img {
    display: block;

    width: 24px;
    height: 24px;

    max-width: none;

    object-fit: contain;

    /* Convert existing dark PNG icons to ivory */

    filter:
        brightness(0)
        saturate(100%)
        invert(96%)
        sepia(10%)
        saturate(145%)
        hue-rotate(325deg)
        brightness(103%)
        contrast(95%);

    opacity: 1;
}

@media (hover: hover) {

    .site-footer .site-footer__socials a:hover {
        background: #E68B66;

        transform: translateY(-3px);

        box-shadow:
            0 12px 28px rgba(0,0,0,0.22),
            0 4px 10px rgba(0,0,0,0.12);
    }
}


/* ==========================================================
   05 — BOOK A CALL BUTTON
========================================================== */

.site-footer .site-footer__book {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    width: max-content;
    min-height: 48px;

    margin: 28px 0 0;
    padding: 0 24px;

    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 25px;

    background: var(--footer-button);

    color: #FFFFFF;

    font-family: "Poppins", "Inter", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;

    white-space: nowrap;

    box-shadow:
        0 8px 20px rgba(0,0,0,0.18),
        0 2px 5px rgba(0,0,0,0.10);

    transition:
        background-color 300ms ease,
        transform 300ms ease,
        box-shadow 300ms ease;
}

.site-footer .site-footer__book span {
    display: inline-block;

    font-size: 20px;
    font-weight: 400;
    line-height: 1;

    transition: transform 300ms ease;
}

@media (hover: hover) {

    .site-footer .site-footer__book:hover {
        background: #D87955;
        color: #FFFFFF;

        transform: translateY(-2px);

        box-shadow:
            0 12px 26px rgba(0,0,0,0.22);
    }

    .site-footer .site-footer__book:hover span {
        transform: translateX(4px);
    }
}


/* ==========================================================
   06 — CONTACT EMAIL
========================================================== */

.site-footer .site-footer__email {
    display: inline-block;

    margin: 20px 0 0;
    padding: 0;

    font-family: "Poppins", "Inter", sans-serif;

    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;

    color: var(--footer-muted);

    transition: color 250ms ease;
}

.site-footer .site-footer__email:hover {
    color: #FFFFFF;
}


/* ==========================================================
   07 — NAVIGATION COLUMNS
========================================================== */

.site-footer .site-footer__column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    min-width: 0;

    margin: 0;
    padding: 0;
}

.site-footer .site-footer__column h3 {
    margin: 0 0 22px;
    padding: 0;

    font-family: "Poppins", "Inter", sans-serif;

    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.075em;

    text-transform: uppercase;

    color: var(--footer-accent);
}

.site-footer .site-footer__column > a {
    display: block;

    width: fit-content;
    max-width: 100%;

    margin: 0 0 15px;
    padding: 0;

    font-family: "Poppins", "Inter", sans-serif;

    font-size: 14px;
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: -0.012em;

    color: var(--footer-ivory);

    white-space: normal;
    overflow-wrap: break-word;

    transition:
        color 250ms ease,
        transform 300ms ease;
}

@media (hover: hover) {

    .site-footer .site-footer__column > a:hover {
        color: var(--footer-accent);

        transform: translateX(3px);
    }
}


/* ==========================================================
   08 — BOTTOM BAR
========================================================== */

.site-footer .site-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 32px;

    width: 100%;
    max-width: 1600px;

    margin: 0 auto;

    border-top:
        1px solid rgba(248,243,235,0.24);
}

.site-footer .site-footer__bottom p {
    margin: 0;
    padding: 0;

    font-family: "Poppins", "Inter", sans-serif;

    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;

    color: var(--footer-muted);
}

.site-footer .site-footer__legal {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    flex-wrap: wrap;

    gap: 0;
}

.site-footer .site-footer__legal a {
    display: inline-block;

    margin: 0;
    padding: 0 16px;

    font-family: "Poppins", "Inter", sans-serif;

    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;

    color: var(--footer-muted);

    white-space: nowrap;

    transition: color 250ms ease;
}

.site-footer .site-footer__legal a + a {
    border-left:
        1px solid rgba(248,243,235,0.22);
}

.site-footer .site-footer__legal a:first-child {
    padding-left: 0;
}

.site-footer .site-footer__legal a:last-child {
    padding-right: 0;
}

.site-footer .site-footer__legal a:hover {
    color: #FFFFFF;
}


/* ==========================================================
   09 — DESKTOP LAYOUT
   1101px+
========================================================== */

@media (min-width: 1101px) {

    .site-footer .site-footer__main {
        grid-template-columns:
            minmax(0, 2.2fr)
            minmax(0, 1.2fr)
            minmax(0, .75fr)
            minmax(0, .75fr);

        column-gap: 48px;
        row-gap: 0;

        padding: 92px 48px 94px;
    }

    /* EXPLICIT GRID PLACEMENT */

    .site-footer .site-footer__intro {
        grid-column: 1;
        grid-row: 1;
    }

    .site-footer .site-footer__services {
        grid-column: 2;
        grid-row: 1;
    }

    .site-footer .site-footer__resources {
        grid-column: 3;
        grid-row: 1;
    }

    .site-footer .site-footer__company {
        grid-column: 4;
        grid-row: 1;
    }

    /* DESKTOP HEADLINE */

    .site-footer .site-footer__headline {
        font-size: clamp(34px, 2.8vw, 46px);
        line-height: 1.2;
        letter-spacing: -0.045em;
    }

    /* BOTTOM BAR */

    .site-footer .site-footer__bottom {
        padding: 34px 48px 48px;
    }
}


/* ==========================================================
   10 — SMALLER DESKTOP
   1101px–1350px
========================================================== */

@media (min-width: 1101px) and (max-width: 1350px) {

    .site-footer .site-footer__main {
        grid-template-columns:
            minmax(0, 1.7fr)
            minmax(0, 1.2fr)
            minmax(0, .7fr)
            minmax(0, .7fr);

        column-gap: 24px;

        padding-left: 32px;
        padding-right: 32px;
    }

    .site-footer .site-footer__headline {
        font-size: 33px;
    }

    .site-footer .site-footer__column > a {
        font-size: 13px;
    }

    .site-footer .site-footer__bottom {
        padding-left: 32px;
        padding-right: 32px;
    }

    .site-footer .site-footer__legal a {
        padding-left: 10px;
        padding-right: 10px;
    }
}


/* ==========================================================
   11 — TABLET
   600px–1100px
========================================================== */

@media (min-width: 600px) and (max-width: 1100px) {

    .site-footer .site-footer__main {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        column-gap: 32px;
        row-gap: 58px;

        padding: 72px 48px;
    }

    .site-footer .site-footer__intro {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .site-footer .site-footer__services {
        grid-column: 1;
        grid-row: 2;
    }

    .site-footer .site-footer__resources {
        grid-column: 2;
        grid-row: 2;
    }

    .site-footer .site-footer__company {
        grid-column: 3;
        grid-row: 2;
    }

    .site-footer .site-footer__headline {
        font-size: clamp(36px, 5vw, 44px);
        line-height: 1.18;
        letter-spacing: -0.04em;
    }

    .site-footer .site-footer__column h3 {
        font-size: 12px;
    }

    .site-footer .site-footer__column > a {
        font-size: 13px;
    }

    .site-footer .site-footer__bottom {
        flex-direction: column;
        align-items: flex-start;

        gap: 22px;

        padding: 30px 48px 42px;
    }

    .site-footer .site-footer__legal {
        justify-content: flex-start;

        gap: 12px 20px;
    }

    .site-footer .site-footer__legal a {
        padding: 0;
        border-left: 0 !important;
    }
}


/* ==========================================================
   12 — MOBILE
   599px AND BELOW
========================================================== */

@media (max-width: 599px) {

    .site-footer .site-footer__main {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        column-gap: 24px;
        row-gap: 46px;

        padding: 58px 24px 56px;
    }

    /* FULL-WIDTH CONTACT AREA */

    .site-footer .site-footer__intro {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    /* SERVICES */

    .site-footer .site-footer__services {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    /* RESOURCES */

    .site-footer .site-footer__resources {
        grid-column: 1;
        grid-row: 3;
    }

    /* COMPANY */

    .site-footer .site-footer__company {
        grid-column: 2;
        grid-row: 3;
    }

    /* HEADLINE */

    .site-footer .site-footer__headline {
        font-size: clamp(29px, 8vw, 37px);
        line-height: 1.2;
        letter-spacing: -0.04em;
    }

    /* CONNECT LABEL */

    .site-footer .site-footer__connect-label {
        font-size: 16px;
        margin-top: 24px;
    }

    /* SOCIALS */

    .site-footer .site-footer__socials {
        margin-top: 22px;
    }

    .site-footer .site-footer__socials a {
        width: 50px;
        height: 50px;
    }

    .site-footer .site-footer__socials img {
        width: 22px;
        height: 22px;
    }

    /* BOOK A CALL */

    .site-footer .site-footer__book {
        min-height: 46px;
        padding: 0 21px;

        font-size: 13px;
    }

    /* NAVIGATION */

    .site-footer .site-footer__column h3 {
        font-size: 12px;
        margin-bottom: 17px;
    }

    .site-footer .site-footer__column > a {
        font-size: 13px;
        margin-bottom: 13px;
    }

    /* BOTTOM BAR */

    .site-footer .site-footer__bottom {
        flex-direction: column;
        align-items: flex-start;

        gap: 20px;

        padding: 28px 24px 38px;
    }

    
.site-footer .site-footer__bottom p {
    width: 100%;
    margin: 0;
    padding: 0;

    font-size: 11px;
    line-height: 1.6;

    text-align: left;
}


    .site-footer .site-footer__legal {
        justify-content: flex-start;

        gap: 12px 18px;
    }

    .site-footer .site-footer__legal a {
        padding: 0;

        border-left: 0 !important;

        font-size: 11px;
        white-space: normal;
    }
}


/* ==========================================================
   13 — ANIMATIONS
========================================================== */

/* Subtle appearance without moving the layout */

@keyframes frayoraFooterReveal {
    from {
        opacity: 0.45;
        transform: translateY(18px);
    }

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

@media (min-width: 1101px) {

    @supports (animation-timeline: view()) {

        .site-footer .site-footer__intro,
        .site-footer .site-footer__column {
            animation-name: frayoraFooterReveal;
            animation-duration: 1s;
            animation-timing-function: linear;
            animation-fill-mode: both;

            animation-timeline: view();
            animation-range: entry 0% entry 65%;
        }
    }
}


/* ==========================================================
   14 — REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .site-footer *,
    .site-footer *::before,
    .site-footer *::after {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}


/* =========================================================
   FRAYORA — GLOBAL FOOTER
   COMPANY + RESOURCES COLUMN ORDER FIX

   Desktop: Services | Company | Resources
   Tablet:  Services | Company | Resources
   Mobile:  Services, then Company | Resources

   Preserves all existing footer styling.
========================================================= */


/* =========================================================
   DESKTOP — 1101px+
========================================================= */

@media screen and (min-width: 1101px) {

    .site-footer .site-footer__company {
        grid-column: 3;
        grid-row: 1;
    }

    .site-footer .site-footer__resources {
        grid-column: 4;
        grid-row: 1;
    }

}


/* =========================================================
   TABLET — 600px–1100px
========================================================= */

@media screen and (min-width: 600px)
and (max-width: 1100px) {

    .site-footer .site-footer__company {
        grid-column: 2;
        grid-row: 2;
    }

    .site-footer .site-footer__resources {
        grid-column: 3;
        grid-row: 2;
    }

}


/* =========================================================
   MOBILE — 599px AND BELOW
========================================================= */

@media screen and (max-width: 599px) {

    .site-footer .site-footer__company {
        grid-column: 1;
        grid-row: 3;
    }

    .site-footer .site-footer__resources {
        grid-column: 2;
        grid-row: 3;
    }

}


/* ==================================================================
   FRAYORA — ABOUT US — SECTION 01: PHOTOGRAPHIC HERO
   RESPONSIVE RULES GROUPED: DESKTOP / TABLET / MOBILE
   Existing declarations preserved without design changes.
================================================================== */

/* =====================================================
   FRAYORA — ABOUT US HERO
   DESKTOP ONLY: 1101px+
   BOND-INSPIRED PROPORTIONS & MOTION
===================================================== */

@media (min-width: 1101px) {

    /* ------------------------------------------
       MAIN HERO
    ------------------------------------------ */

    .about-us-page .about-hero {
        position: relative;
        isolation: isolate;

        display: flex;
        justify-content: center;
        align-items: center;

        width: 100vw;
        max-width: none;

        height: 600px;
min-height: 600px;

        margin: 0 0 0 calc(50% - 50vw);
        padding: 0;

        overflow: hidden;

        background: #394235;

        border-radius:
            0 0 50% 50% /
            0 0 6% 6%;

        box-shadow:
            0 24px 48px rgba(20, 25, 19, 0.12);
    }

    /* ------------------------------------------
       FULL-WIDTH BACKGROUND IMAGE
    ------------------------------------------ */

    .about-us-page .about-hero__media {
        position: absolute;
        inset: 0;

        width: 100%;
        height: 100%;

        background-image: url("../images/About Us/Warm Collaborative Coworking Conversationnewdesktop.png");
    background-size: cover;
    background-position: center 42%;
    background-repeat: no-repeat;

        transform: scale(1.055);

        animation:
            frayoraAboutPhotoIn 1.9s
            cubic-bezier(.22, 1, .36, 1) both;

        will-change: transform;
    }

    /* ------------------------------------------
       UNIFORM OLIVE PHOTO TINT
       NO GRADIENTS OR SIDE FADES
    ------------------------------------------ */

    
/* ------------------------------------------
   DARK OLIVE LUMINOUS PHOTO OVERLAY
   Soft cinematic depth across entire hero
------------------------------------------ */

.about-us-page .about-hero__overlay {
    position: absolute;
    inset: 0;

    background-color: rgba(20, 27, 19, 0.43);

    background-image:
        /* Soft olive illumination — upper left */
        radial-gradient(
            ellipse 45% 85% at 12% 18%,
            rgba(111, 130, 99, 0.16) 0%,
            rgba(111, 130, 99, 0.055) 48%,
            transparent 80%
        ),

        /* Gentle illumination — center */
        radial-gradient(
            ellipse 48% 95% at 52% 55%,
            rgba(103, 121, 91, 0.12) 0%,
            rgba(103, 121, 91, 0.04) 52%,
            transparent 82%
        ),

        /* Soft olive lighting — right */
        radial-gradient(
            ellipse 42% 85% at 92% 38%,
            rgba(111, 130, 99, 0.14) 0%,
            rgba(111, 130, 99, 0.05) 48%,
            transparent 80%
        ),

        /* Slightly deeper atmosphere toward bottom */
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(15, 22, 16, 0.05) 100%
        );

    background-repeat: no-repeat;

    pointer-events: none;
    z-index: 1;
}


    /* ------------------------------------------
       CENTERED CONTENT
    ------------------------------------------ */

    .about-us-page .about-hero__inner {
        position: relative;
        z-index: 2;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        max-width: 1440px;
        height: 100%;

        margin: 0 auto;
        padding: 80px;

        box-sizing: border-box;

        text-align: center;
    }

    /* ------------------------------------------
       HERO TYPOGRAPHY
    ------------------------------------------ */

    .about-us-page .about-hero__title {
        margin: 0;
        padding: 0;

        font-family: "Cardo", Georgia, serif;
        font-size: clamp(76px, 7.5vw, 112px);
        font-weight: 400;
        line-height: 1.05;
        letter-spacing: -0.035em;

        color: #F8F3EB;

        text-align: center;

        text-shadow:
            0 3px 18px rgba(0, 0, 0, 0.25);

        transform: translateY(24px);
        opacity: 0;

        animation:
            frayoraAboutTitleIn 1s
            cubic-bezier(.22, 1, .36, 1)
            0.3s both;
    }

    /* ------------------------------------------
       PHOTO ENTRANCE
    ------------------------------------------ */

    @keyframes frayoraAboutPhotoIn {
        from {
            opacity: 0.65;
            transform: scale(1.055);
        }

        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    /* ------------------------------------------
       TITLE REVEAL
    ------------------------------------------ */

    @keyframes frayoraAboutTitleIn {
        from {
            opacity: 0;
            transform: translateY(24px);
            filter: blur(4px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
            filter: blur(0);
        }
    }

    /* ------------------------------------------
       HOVER — SUBTLE PHOTO DEPTH
    ------------------------------------------ */

    .about-us-page .about-hero__media {
        transition: transform 1.2s
            cubic-bezier(.22, 1, .36, 1);
    }

    .about-us-page .about-hero:hover .about-hero__media {
        transform: scale(1.025);
    }

    /* ------------------------------------------
       ACCESSIBILITY
    ------------------------------------------ */

    @media (prefers-reduced-motion: reduce) {

        .about-us-page .about-hero__media,
        .about-us-page .about-hero__title {
            animation: none !important;
            transition: none !important;
            transform: none !important;
            filter: none !important;
            opacity: 1 !important;
        }
    }
}




/* =====================================================
   FRAYORA — ABOUT US HERO
   TABLET ONLY: 600px–1100px

   Full-bleed photographic hero
   Centered Manrope typography
   Soft curved bottom edge
   Refined entrance animations
===================================================== */

@media (min-width: 600px) and (max-width: 1100px) {

    /* ==========================================
       01 — MAIN HERO
    ========================================== */

    .about-us-page .about-hero {
        position: relative;
        isolation: isolate;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 100vw;
        max-width: none;

        height: 580px;
        min-height: 580px;

        margin: 0 0 0 calc(50% - 50vw);
        padding: 0;

        box-sizing: border-box;
        overflow: hidden;

        background: #394235;

        border-radius:
            0 0 50% 50% /
            0 0 5% 5%;

        box-shadow:
            0 18px 38px rgba(20, 25, 19, 0.10);
    }

    /* ==========================================
       02 — FULL-WIDTH BACKGROUND PHOTO
    ========================================== */

    .about-us-page .about-hero__media {
        position: absolute;
        inset: 0;

        width: 100%;
        height: 100%;

        background-image: url("../images/About Us/Warm Collaborative Coworking Conversationnewdesktop.png");
        background-size: cover;
        background-position: 58% 42%;
        background-repeat: no-repeat;

        z-index: 0;

        animation:
            frayoraAboutTabletPhotoIn 1.8s
            cubic-bezier(.22, 1, .36, 1) both;

        transition:
            transform 1.2s cubic-bezier(.22, 1, .36, 1);
    }

    /* ==========================================
       03 — UNIFORM PHOTO TINT
       NO GRADIENTS
    ========================================== */

    .about-us-page .about-hero__overlay {
        position: absolute;
        inset: 0;

        display: block;

        width: 100%;
        height: 100%;

        background:
            radial-gradient(circle at 18% 20%,
                rgba(248, 243, 235, 0.14) 0%,
                rgba(248, 243, 235, 0.08) 16%,
                rgba(248, 243, 235, 0.00) 34%),
            radial-gradient(circle at 78% 18%,
                rgba(214, 188, 148, 0.10) 0%,
                rgba(214, 188, 148, 0.00) 30%),
            radial-gradient(circle at 74% 72%,
                rgba(120, 134, 104, 0.10) 0%,
                rgba(120, 134, 104, 0.00) 28%),
            radial-gradient(circle at 24% 82%,
                rgba(248, 243, 235, 0.06) 0%,
                rgba(248, 243, 235, 0.00) 24%),
            linear-gradient(
                180deg,
                rgba(18, 24, 18, 0.32) 0%,
                rgba(18, 24, 18, 0.30) 42%,
                rgba(18, 24, 18, 0.36) 100%
            ),
            rgba(20, 27, 19, 0.26);

        z-index: 1;
        pointer-events: none;
    }


    /* ==========================================
       04 — HERO CONTENT
    ========================================== */

    .about-us-page .about-hero__inner {
        position: relative;
        z-index: 2;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        height: 100%;
        max-width: 1100px;

        margin: 0 auto;
        padding: 50px 48px;

        box-sizing: border-box;
        text-align: center;
    }

    /* ==========================================
       05 — HERO TITLE
    ========================================== */

    .about-us-page .about-hero__title {
        margin: 0;
        padding: 0;

        font-family: "Manrope", sans-serif;
        font-size: clamp(64px, 8vw, 90px);
        font-weight: 600;
        line-height: 1.08;
        letter-spacing: -0.055em;

        color: #F8F3EB;

        text-align: center;

        text-shadow:
            0 4px 18px rgba(0, 0, 0, 0.22);

        opacity: 0;

        animation:
            frayoraAboutTabletTitleIn 1.05s
            cubic-bezier(.22, 1, .36, 1)
            0.25s both;
    }

    /* ==========================================
       06 — PHOTO HOVER DEPTH
    ========================================== */

    .about-us-page .about-hero:hover
    .about-hero__media {
        transform: scale(1.025);
    }

    /* ==========================================
       07 — ENTRANCE ANIMATIONS
    ========================================== */

    @keyframes frayoraAboutTabletPhotoIn {
        from {
            opacity: 0.6;
            transform: scale(1.055);
        }

        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    @keyframes frayoraAboutTabletTitleIn {
        from {
            opacity: 0;
            transform: translateY(28px);
            filter: blur(4px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
            filter: blur(0);
        }
    }

    /* ==========================================
       08 — SMALLER TABLETS
       600px–767px
    ========================================== */

    @media (max-width: 767px) {

        .about-us-page .about-hero {
            height: 500px;
            min-height: 500px;
        }

        .about-us-page .about-hero__inner {
            padding: 40px 30px;
        }

        .about-us-page .about-hero__title {
            font-size: clamp(54px, 8vw, 66px);
        }

        .about-us-page .about-hero__media {
            background-position: 58% 42%;
        }
    }

    /* ==========================================
       09 — ACCESSIBILITY
    ========================================== */

    @media (prefers-reduced-motion: reduce) {

        .about-us-page .about-hero__media,
        .about-us-page .about-hero__title {
            animation: none !important;
            transition: none !important;

            transform: none !important;
            filter: none !important;
            opacity: 1 !important;
        }
    }
}




/* =====================================================
   FRAYORA — ABOUT US HERO
   MOBILE ONLY: 0px–599px

   Correct mobile photograph
   Full-width image with subtle zoom
   Refined image positioning
   Centered Manrope heading
   Curved bottom edge
   Smooth entrance animations
===================================================== */

@media (max-width: 599px) {

    /* ==========================================
       01 — MAIN HERO
    ========================================== */

    .about-us-page .about-hero {
        position: relative;
        isolation: isolate;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 100vw;
        max-width: none;

        height: 430px;
        min-height: 430px;

        margin: 0 0 0 calc(50% - 50vw);
        padding: 0;

        box-sizing: border-box;
        overflow: hidden;

        background: #394235;

        border-radius:
            0 0 50% 50% /
            0 0 4% 4%;

        box-shadow:
            0 12px 26px rgba(20, 25, 19, 0.08);
    }

    /* ==========================================
       02 — BACKGROUND PHOTOGRAPH
    ========================================== */

    .about-us-page .about-hero__media {
        position: absolute;
        inset: 0;

        display: block;

        width: 100%;
        height: 100%;

        margin: 0;
        padding: 0;

        background-image: url("../images/About Us/newnewnewmobile.png");
        background-size: cover;
        background-position: center 80%;
        background-repeat: no-repeat;

        z-index: 0;

        transform: scale(1.10);
        transform-origin: center center;

        animation:
            frayoraAboutMobilePhotoIn 1.8s
            cubic-bezier(.22, 1, .36, 1) both;

        transition:
            transform 1.2s cubic-bezier(.22, 1, .36, 1);
    }

    /* ==========================================
       03 — UNIFORM OLIVE PHOTO TINT
       NO GRADIENTS
    ========================================== */

    .about-us-page .about-hero__overlay {
        position: absolute;
        inset: 0;

        display: block;

        width: 100%;
        height: 100%;

        background:
            radial-gradient(circle at 18% 20%,
                rgba(248, 243, 235, 0.14) 0%,
                rgba(248, 243, 235, 0.08) 16%,
                rgba(248, 243, 235, 0.00) 34%),
            radial-gradient(circle at 78% 18%,
                rgba(214, 188, 148, 0.10) 0%,
                rgba(214, 188, 148, 0.00) 30%),
            radial-gradient(circle at 74% 72%,
                rgba(120, 134, 104, 0.10) 0%,
                rgba(120, 134, 104, 0.00) 28%),
            radial-gradient(circle at 24% 82%,
                rgba(248, 243, 235, 0.06) 0%,
                rgba(248, 243, 235, 0.00) 24%),
            linear-gradient(
                180deg,
                rgba(18, 24, 18, 0.32) 0%,
                rgba(18, 24, 18, 0.30) 42%,
                rgba(18, 24, 18, 0.36) 100%
            ),
            rgba(20, 27, 19, 0.26);

        z-index: 1;
        pointer-events: none;
    }


    /* ==========================================
       04 — HERO CONTENT
    ========================================== */

    .about-us-page .about-hero__inner {
        position: relative;
        z-index: 2;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        max-width: 599px;
        height: 100%;

        margin: 0 auto;
        padding: 45px 24px 85px;

        box-sizing: border-box;
        text-align: center;
    }

    /* ==========================================
       05 — HERO TITLE
    ========================================== */

    .about-us-page .about-hero__title {
        width: 100%;
        max-width: 500px;

        margin: 0;
        padding: 0;

        font-family: "Manrope", sans-serif;
        font-size: clamp(44px, 10vw, 62px);
        font-weight: 600;
        line-height: 1.08;
        letter-spacing: -0.055em;

        color: #F8F3EB;

        text-align: center;

        text-shadow:
            0 3px 16px rgba(0, 0, 0, 0.23);

        opacity: 0;

        animation:
            frayoraAboutMobileTitleIn 1.05s
            cubic-bezier(.22, 1, .36, 1)
            0.25s both;
    }

    /* ==========================================
       06 — SUBTLE PHOTO HOVER
    ========================================== */

    @media (hover: hover) {

        .about-us-page .about-hero:hover
        .about-hero__media {
            transform: scale(1.13);
        }
    }

    /* ==========================================
       07 — PHOTO ENTRANCE ANIMATION
    ========================================== */

    @keyframes frayoraAboutMobilePhotoIn {
        from {
            opacity: 0.70;
            transform: scale(1.16);
        }

        to {
            opacity: 1;
            transform: scale(1.10);
        }
    }

    /* ==========================================
       08 — TITLE ENTRANCE ANIMATION
    ========================================== */

    @keyframes frayoraAboutMobileTitleIn {
    from {
        opacity: 0;
        transform: translateY(85px);
        filter: blur(3px);
    }

    to {
        opacity: 1;
        transform: translateY(65px);
        filter: blur(0);
    }
}

    /* ==========================================
       09 — SMALL PHONES
       0px–390px
    ========================================== */

    @media (max-width: 390px) {

        .about-us-page .about-hero {
            height: 410px;
            min-height: 410px;
        }

        .about-us-page .about-hero__media {
            background-position: center 80%;
        }

        .about-us-page .about-hero__inner {
            padding: 40px 20px 75px;
        }

        .about-us-page .about-hero__title {
            font-size: clamp(42px, 10vw, 50px);
        }
    }

    /* ==========================================
       10 — REDUCED MOTION
    ========================================== */

    @media (prefers-reduced-motion: reduce) {

        .about-us-page .about-hero__media {
            animation: none !important;
            transition: none !important;
            transform: scale(1.10) !important;
            opacity: 1 !important;
        }

        .about-us-page .about-hero__title {
            animation: none !important;
            transition: none !important;
            transform: translateY(65px) !important;
            filter: none !important;
            opacity: 1 !important;
        }
    }
}



/* =====================================================
   FRAYORA — ABOUT US
   SECTION 01 — MOBILE HERO HEIGHT REFINEMENT

   Mobile only: 0px–599px

   - Reduces excessive hero height
   - Preserves image and overlay
   - Preserves centered heading
   - Preserves curved bottom edge
   - Desktop and tablet unchanged
===================================================== */

@media screen and (max-width: 599px) {

    body .about-us-page .about-hero {
        height: 370px !important;
        min-height: 370px !important;
    }

    body .about-us-page .about-hero__inner {
        height: 100%;
        min-height: 0;

        padding: 35px 24px !important;

        display: flex;
        align-items: center;
        justify-content: center;
    }

    body .about-us-page .about-hero__title {
        transform: none;
        text-align: center;
    }

}

@media screen and (max-width: 380px) {

    body .about-us-page .about-hero {
        height: 350px !important;
        min-height: 350px !important;
    }

}



/* =====================================================
   FRAYORA — ABOUT US
   SECTION 01 — MOBILE HERO TEXT CENTERING

   Mobile: 0px–599px
   - Centers heading horizontally and vertically
   - Removes old 65px downward animation offset
   - Preserves hero height, image and overlay
===================================================== */

@media screen and (max-width: 599px) {

    body .about-us-page .about-hero__inner {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        height: 100% !important;
        min-height: 0 !important;

        padding: 0 24px !important;
        text-align: center !important;
    }

    body .about-us-page .about-hero__title {
        margin: 0 auto !important;

        text-align: center !important;

        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
        filter: none !important;
    }

}


/* ==================================================================
   FRAYORA — ABOUT US — SECTION 02: ABOUT FRAYORA SUMMARY
   RESPONSIVE RULES GROUPED: DESKTOP / TABLET / MOBILE
   Existing declarations preserved without design changes.
================================================================== */

/* =====================================================
   FRAYORA — ABOUT US SECTION 02
   CENTERED BRAND STATEMENT
   DESKTOP ONLY: 1101px+
===================================================== */

@media (min-width: 1101px) {

    /* SECTION */

    .about-us-page .about-summary {
        position: relative;
        isolation: isolate;

        width: 100vw;
        max-width: none;

        margin: 0 0 0 calc(50% - 50vw);
        padding: 0;

        min-height: 470px;

        display: flex;
        align-items: center;
        justify-content: center;

        background-color: #F8F3EB;

background-image:
    /* Soft illumination from the left */
    radial-gradient(
        ellipse 75% 140% at 5% 40%,
        rgba(255, 255, 255, 0.55) 0%,
        rgba(255, 255, 255, 0.20) 55%,
        transparent 100%
    ),

    /* Matching illumination on the right */
    radial-gradient(
        ellipse 75% 140% at 95% 45%,
        rgba(255, 255, 255, 0.48) 0%,
        rgba(255, 255, 255, 0.18) 55%,
        transparent 100%
    ),

    /* Very subtle warm-ivory depth through the center */
    radial-gradient(
        ellipse 90% 130% at 50% 65%,
        rgba(225, 214, 201, 0.12) 0%,
        rgba(225, 214, 201, 0.045) 60%,
        transparent 100%
    );

background-repeat: no-repeat;

        box-sizing: border-box;
    }

    /* INNER CONTENT */

    .about-us-page .about-summary__inner {
        width: 100%;
        max-width: 1120px;

        margin: 0 auto;
        padding: 100px 60px 105px;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        box-sizing: border-box;
        text-align: center;
    }

    /* MAIN QUOTE */

    .about-us-page .about-summary__quote {
        margin: 0;
        padding: 0;

        max-width: 1040px;

        font-family: "Cardo", Georgia, serif;
        font-size: clamp(34px, 3.15vw, 47px);
        font-weight: 400;
        line-height: 1.32;
        letter-spacing: -0.028em;

        color: #1F211D;
        text-align: center;
        text-wrap: balance;
    }

    /* TERRACOTTA EMPHASIS */

    .about-us-page .about-summary__quote em {
        font-style: italic;
        font-weight: 400;
        color: #C96743;
    }

    /* SUBTLE SCROLL REVEAL */

    @keyframes frayoraSummaryReveal {
        from {
            opacity: 0;
            transform: translateY(28px);
            filter: blur(3px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
            filter: blur(0);
        }
    }

    @supports (animation-timeline: view()) {

        .about-us-page .about-summary__inner {
            animation: frayoraSummaryReveal linear both;

            animation-timeline: view();
            animation-range: entry 10% entry 85%;
        }
    }
}

/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {

    .about-us-page .about-summary__inner {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}



/* ==========================================
   ABOUT US — SECTION 02 COMPACT REFINEMENT
   DESKTOP ONLY
========================================== */

@media (min-width: 1101px) {

    .about-us-page .about-summary {
        min-height: 0;
        height: auto;
    }

    .about-us-page .about-summary__inner {
        padding-top: 45px;
        padding-bottom: 50px;
    }

}




/* =====================================================
   FRAYORA — ABOUT US / SECTION 02
   CENTERED BRAND STATEMENT
   TABLET ONLY: 600px–1100px

   Manrope typography
   Warm ivory background
   Centered editorial composition
   Subtle scroll reveal
===================================================== */

@media (min-width: 600px) and (max-width: 1100px) {

    /* ==========================================
       01 — SECTION
    ========================================== */

    .about-us-page .about-summary {
        position: relative;
        isolation: isolate;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 100vw;
        max-width: none;
        min-height: 0;
        height: auto;

        margin: 0 0 0 calc(50% - 50vw);
        padding: 0;

        box-sizing: border-box;
        background-color: #F8F3EB;

background-image:
    /* Soft illumination from the left */
    radial-gradient(
        ellipse 75% 140% at 5% 40%,
        rgba(255, 255, 255, 0.55) 0%,
        rgba(255, 255, 255, 0.20) 55%,
        transparent 100%
    ),

    /* Matching illumination on the right */
    radial-gradient(
        ellipse 75% 140% at 95% 45%,
        rgba(255, 255, 255, 0.48) 0%,
        rgba(255, 255, 255, 0.18) 55%,
        transparent 100%
    ),

    /* Very subtle warm-ivory depth through the center */
    radial-gradient(
        ellipse 90% 130% at 50% 65%,
        rgba(225, 214, 201, 0.12) 0%,
        rgba(225, 214, 201, 0.045) 60%,
        transparent 100%
    );

background-repeat: no-repeat;
        overflow: hidden;
    }

    /* ==========================================
       02 — INNER CONTENT
    ========================================== */

    .about-us-page .about-summary__inner {
        width: 100%;
        max-width: 1000px;

        margin: 0 auto;
        padding: 85px 55px 90px;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        box-sizing: border-box;
        text-align: center;
    }

    /* ==========================================
       03 — MAIN QUOTE
    ========================================== */

    .about-us-page .about-summary__quote {
        width: 100%;
        max-width: 900px;

        margin: 0;
        padding: 0;

        font-family: "Manrope", sans-serif;
        font-size: clamp(28px, 3.5vw, 39px);
        font-weight: 500;
        line-height: 1.42;
        letter-spacing: -0.04em;

        color: #1F211D;

        text-align: center;
        text-wrap: balance;
    }

    /* ==========================================
       04 — TERRACOTTA EMPHASIS
    ========================================== */

    .about-us-page .about-summary__quote em {
        font-family: "Manrope", sans-serif;
        font-style: italic;
        font-weight: 500;

        color: #C96743;
    }

    /* ==========================================
       05 — SCROLL REVEAL ANIMATION
    ========================================== */

    @keyframes frayoraSummaryTabletReveal {
        from {
            opacity: 0;
            transform: translateY(26px);
            filter: blur(3px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
            filter: blur(0);
        }
    }

    @supports (animation-timeline: view()) {

        .about-us-page .about-summary__inner {
            animation: frayoraSummaryTabletReveal linear both;

            animation-timeline: view();
            animation-range: entry 0% entry 80%;
        }
    }

    /* ==========================================
       06 — SMALLER TABLETS
       600px–767px
    ========================================== */

    @media (max-width: 767px) {

        .about-us-page .about-summary__inner {
            padding: 65px 32px 70px;
        }

        .about-us-page .about-summary__quote {
            font-size: clamp(25px, 4.2vw, 30px);
            line-height: 1.45;
            letter-spacing: -0.035em;
        }
    }

    /* ==========================================
       07 — REDUCED MOTION
    ========================================== */

    @media (prefers-reduced-motion: reduce) {

        .about-us-page .about-summary__inner {
            animation: none !important;
            opacity: 1 !important;
            transform: none !important;
            filter: none !important;
        }
    }
}




/* =====================================================
   FRAYORA — ABOUT US / SECTION 02
   CENTERED BRAND STATEMENT
   MOBILE ONLY: 0px–599px

   Manrope typography
   Warm ivory background
   Centered editorial composition
   Terracotta emphasis
   Subtle scroll animations
===================================================== */

@media (max-width: 599px) {

    /* ==========================================
       01 — FULL-WIDTH SECTION
    ========================================== */

    .about-us-page .about-summary {
        position: relative;
        isolation: isolate;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 100vw;
        max-width: none;
        min-height: 0;
        height: auto;

        margin: 0 0 0 calc(50% - 50vw);
        padding: 0;

        box-sizing: border-box;

        background-color: #F8F3EB;

background-image:
    /* Soft illumination from the left */
    radial-gradient(
        ellipse 75% 140% at 5% 40%,
        rgba(255, 255, 255, 0.55) 0%,
        rgba(255, 255, 255, 0.20) 55%,
        transparent 100%
    ),

    /* Matching illumination on the right */
    radial-gradient(
        ellipse 75% 140% at 95% 45%,
        rgba(255, 255, 255, 0.48) 0%,
        rgba(255, 255, 255, 0.18) 55%,
        transparent 100%
    ),

    /* Very subtle warm-ivory depth through the center */
    radial-gradient(
        ellipse 90% 130% at 50% 65%,
        rgba(225, 214, 201, 0.12) 0%,
        rgba(225, 214, 201, 0.045) 60%,
        transparent 100%
    );

background-repeat: no-repeat;
        overflow: hidden;
    }

    /* ==========================================
       02 — INNER CONTENT
    ========================================== */

    .about-us-page .about-summary__inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        width: 100%;
        max-width: 599px;

        margin: 0 auto;
        padding: 70px 28px 75px;

        box-sizing: border-box;
        text-align: center;
    }

    /* ==========================================
       03 — MAIN QUOTE
    ========================================== */

    .about-us-page .about-summary__quote {
        width: 100%;
        max-width: 490px;

        margin: 0;
        padding: 0;

        font-family: "Manrope", sans-serif;
        font-size: clamp(24px, 5.7vw, 31px);
        font-weight: 500;
        line-height: 1.48;
        letter-spacing: -0.04em;

        color: #1F211D;

        text-align: center;
        text-wrap: balance;
        overflow-wrap: normal;
    }

    /* ==========================================
       04 — TERRACOTTA EMPHASIS
    ========================================== */

    .about-us-page .about-summary__quote em {
        font-family: "Manrope", sans-serif;
        font-style: italic;
        font-weight: 500;

        color: #C96743;
    }

    /* ==========================================
       05 — SCROLL REVEAL
    ========================================== */

    @keyframes frayoraSummaryMobileReveal {
        from {
            opacity: 0;
            transform: translateY(22px);
            filter: blur(2px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
            filter: blur(0);
        }
    }

    @supports (animation-timeline: view()) {

        .about-us-page .about-summary__inner {
            animation: frayoraSummaryMobileReveal linear both;

            animation-timeline: view();
            animation-range: entry 0% entry 65%;
        }
    }

    /* ==========================================
       06 — SMALL PHONES
       0px–390px
    ========================================== */

    @media (max-width: 390px) {

        .about-us-page .about-summary__inner {
            padding: 58px 22px 65px;
        }

        .about-us-page .about-summary__quote {
            font-size: clamp(22px, 5.8vw, 25px);
            line-height: 1.5;
            letter-spacing: -0.035em;
        }
    }

    /* ==========================================
       07 — REDUCED MOTION
    ========================================== */

    @media (prefers-reduced-motion: reduce) {

        .about-us-page .about-summary__inner {
            animation: none !important;
            opacity: 1 !important;
            transform: none !important;
            filter: none !important;
        }
    }
}




/* =========================================================
   FRAYORA — ABOUT US
   SECTION 03 — WHY WE EXIST

   COMPLETE RESPONSIVE CSS REPLACEMENT

   BOND-INSPIRED EDITORIAL DESIGN

   Desktop: Four editorial columns
   Tablet:  Two-column layout
   Mobile:  Horizontal swipe-through

   - Centered introduction
   - Warm ivory background
   - Olive and terracotta icons
   - Fine editorial separators
   - Subtle dimensional shadows
   - No unnecessary card containers
   - Accessible reduced motion
========================================================= */


/* =========================================================
   01 — SECTION FOUNDATION
========================================================= */

body .about-us-page .about-why {
    position: relative;
    isolation: isolate;

    width: 100%;
    margin: 0;
    padding: 100px 0 110px;

    background: #F8F3EB;

    overflow: hidden;
    box-sizing: border-box;
}


/* =========================================================
   02 — CONTENT CONTAINER
========================================================= */

body .about-us-page .about-why__inner {
    width: 100%;
    max-width: 1600px;

    margin: 0 auto;
    padding: 0 80px;

    box-sizing: border-box;
}


/* =========================================================
   03 — CENTERED INTRODUCTION
========================================================= */

body .about-us-page .about-why__heading {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
    max-width: 1150px;

    margin: 0 auto 65px;
    padding: 0;

    text-align: center;
}


/* EYEBROW */

body .about-us-page .about-why__eyebrow {
    margin: 0 0 17px;
    padding: 0;

    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 700;

    line-height: 1.4;
    letter-spacing: 0.15em;

    color: #C96743;

    text-transform: uppercase;
    text-align: center;
}


/* MAIN HEADING */

body .about-us-page .about-why__title {
    width: 100%;
    max-width: 1150px;

    margin: 0;
    padding: 0;

    font-family: "Manrope", sans-serif;
    font-size: clamp(34px, 3.15vw, 48px);
    font-weight: 600;

    line-height: 1.22;
    letter-spacing: -0.048em;

    color: #242B25;

    text-align: center;
    text-wrap: balance;
}


/* =========================================================
   04 — FOUR-COLUMN EDITORIAL GRID
========================================================= */

body .about-us-page .about-why__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 0;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;
}


/* =========================================================
   05 — INDIVIDUAL PRINCIPLES
========================================================= */

body .about-us-page .about-why__card {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    min-width: 0;
    min-height: 0;

    margin: 0;
    padding: 10px 30px 10px;

    background: transparent;

    border: 0;
    border-radius: 0;
    box-shadow: none;

    box-sizing: border-box;

    transition:
        transform 0.4s cubic-bezier(.22,1,.36,1);
}

body .about-us-page .about-why__card:first-child {
    padding-left: 0;
}

body .about-us-page .about-why__card:last-child {
    padding-right: 0;
}


/* VERTICAL SEPARATORS */

body .about-us-page .about-why__card:not(:first-child)::before {
    content: "";

    position: absolute;

    top: 12px;
    bottom: 12px;
    left: 0;

    width: 1px;

    background: rgba(48, 59, 50, 0.15);

    pointer-events: none;
}


/* =========================================================
   06 — CIRCULAR ICONS
========================================================= */

body .about-us-page .about-why__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 70px;
    height: 70px;

    flex: 0 0 70px;

    margin: 0 0 24px;

    border-radius: 50%;

    background: #DCE6D5;
    color: #334F38;

    border: 1px solid rgba(64,91,65,0.20);

    box-shadow:
        0 5px 12px rgba(47,67,48,0.07),
        0 14px 28px rgba(47,67,48,0.09),
        inset 0 1px 0 rgba(255,255,255,0.9);

    transition:
        transform 0.4s cubic-bezier(.22,1,.36,1),
        box-shadow 0.4s ease;
}

body .about-us-page .about-why__icon svg {
    display: block;

    width: 30px;
    height: 30px;

    flex-shrink: 0;
}


/* TERRACOTTA ICONS — ITEMS 02 AND 04 */

body .about-us-page
.about-why__card:nth-child(2) .about-why__icon,

body .about-us-page
.about-why__card:nth-child(4) .about-why__icon {
    background: #F3D9C9;
    color: #BC603F;

    border-color: rgba(194,104,68,0.23);

    box-shadow:
        0 5px 12px rgba(163,86,56,0.065),
        0 14px 28px rgba(163,86,56,0.10),
        inset 0 1px 0 rgba(255,255,255,0.9);
}


/* =========================================================
   07 — ITEM TYPOGRAPHY
========================================================= */

body .about-us-page .about-why__card-title {
    width: 100%;

    margin: 0 0 12px;
    padding: 0;

    font-family: "Manrope", sans-serif;
    font-size: 20px;
    font-weight: 600;

    line-height: 1.35;
    letter-spacing: -0.035em;

    color: #252B25;
}

body .about-us-page .about-why__card-copy {
    width: 100%;

    margin: 0;
    padding: 0;

    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 400;

    line-height: 1.75;
    letter-spacing: 0;

    color: #626960;
}


/* =========================================================
   08 — SUBTLE HOVER MOTION
========================================================= */

@media (hover: hover) {

    body .about-us-page .about-why__card:hover .about-why__icon {
        transform: translateY(-4px);
    }

}


/* =========================================================
   09 — DESKTOP ADJUSTMENT
   1101px–1350px
========================================================= */

@media screen and (min-width: 1101px)
and (max-width: 1350px) {

    body .about-us-page .about-why__inner {
        padding: 0 55px;
    }

    body .about-us-page .about-why__card {
        padding-left: 22px;
        padding-right: 22px;
    }

    body .about-us-page .about-why__card-title {
        font-size: 18px;
    }

    body .about-us-page .about-why__card-copy {
        font-size: 13px;
    }

}


/* =========================================================
   10 — TABLET
   600px–1100px

   Two columns, two rows
========================================================= */

@media screen and (min-width: 600px)
and (max-width: 1100px) {

    body .about-us-page .about-why {
        padding: 78px 0 90px;
    }

    body .about-us-page .about-why__inner {
        padding: 0 48px;
    }

    body .about-us-page .about-why__heading {
        max-width: 850px;
        margin-bottom: 48px;
    }

    body .about-us-page .about-why__title {
        font-size: clamp(32px, 4.3vw, 43px);
        line-height: 1.25;
    }

    body .about-us-page .about-why__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 35px 0;
    }

    body .about-us-page .about-why__card {
        padding: 10px 25px 20px;
    }

    body .about-us-page .about-why__card:nth-child(odd) {
        padding-left: 0;
    }

    body .about-us-page .about-why__card:nth-child(even) {
        padding-right: 0;
    }

    /* Dividers only between columns */

    body .about-us-page
    .about-why__card:nth-child(odd)::before {
        display: none;
    }

    body .about-us-page
    .about-why__card:nth-child(even)::before {
        display: block;
    }

    body .about-us-page .about-why__icon {
        width: 64px;
        height: 64px;
        flex-basis: 64px;

        margin-bottom: 21px;
    }

    body .about-us-page .about-why__card-title {
        font-size: 19px;
    }

}


/* =========================================================
   11 — SMALL TABLET
   600px–767px
========================================================= */

@media screen and (min-width: 600px)
and (max-width: 767px) {

    body .about-us-page .about-why__inner {
        padding: 0 30px;
    }

    body .about-us-page .about-why__title {
        font-size: clamp(29px, 4.5vw, 35px);
    }

    body .about-us-page .about-why__card {
        padding-left: 20px;
        padding-right: 20px;
    }

    body .about-us-page .about-why__card-title {
        font-size: 17px;
    }

    body .about-us-page .about-why__card-copy {
        font-size: 13px;
    }

}


/* =========================================================
   12 — MOBILE
   0px–599px

   Horizontal editorial swipe-through
========================================================= */

@media screen and (max-width: 599px) {

    body .about-us-page .about-why {
        padding: 60px 0 68px;
    }

    body .about-us-page .about-why__inner {
        max-width: none;
        padding: 0 24px;
    }

    body .about-us-page .about-why__heading {
        margin-bottom: 32px;
    }

    body .about-us-page .about-why__eyebrow {
        font-size: 11px;
        margin-bottom: 13px;
    }

    body .about-us-page .about-why__title {
        font-size: clamp(27px, 7.2vw, 36px);
        line-height: 1.23;
    }

    /* Let mobile lines wrap naturally */

    body .about-us-page .about-why__title br {
        display: none;
    }


    /* SWIPEABLE TRACK */

    body .about-us-page .about-why__grid {
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;

        grid-template-columns: none;

        gap: 0;

        width: 100%;
        min-width: 0;

        overflow-x: auto;
        overflow-y: hidden;

        scroll-snap-type: x mandatory;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;

        padding: 9px 0 23px;

        scrollbar-width: thin;
        scrollbar-color:
            #A8B09F rgba(48,59,50,0.1);
    }


    /* VISIBLE SCROLL INDICATOR */

    body .about-us-page
    .about-why__grid::-webkit-scrollbar {
        height: 5px;
    }

    body .about-us-page
    .about-why__grid::-webkit-scrollbar-track {
        background: rgba(48,59,50,0.1);
        border-radius: 20px;
    }

    body .about-us-page
    .about-why__grid::-webkit-scrollbar-thumb {
        background: #A8B09F;
        border-radius: 20px;
    }


    /* SWIPEABLE EDITORIAL ITEMS */

    body .about-us-page .about-why__card {
        flex: 0 0 86%;
        width: 86%;

        min-width: 0;

        padding: 10px 24px 12px;

        scroll-snap-align: start;
    }

    body .about-us-page .about-why__card:first-child {
        padding-left: 0;
    }

    body .about-us-page .about-why__card:last-child {
        padding-right: 0;
    }


    /* THIN SEPARATORS */

    body .about-us-page
    .about-why__card:not(:first-child)::before {
        display: block;

        top: 10px;
        bottom: 10px;
        left: 0;
    }


    /* ICONS */

    body .about-us-page .about-why__icon {
        width: 62px;
        height: 62px;

        flex-basis: 62px;

        margin-bottom: 20px;
    }


    /* TYPOGRAPHY */

    body .about-us-page .about-why__card-title {
        font-size: 19px;
        margin-bottom: 11px;
    }

    body .about-us-page .about-why__card-copy {
        font-size: 14px;
        line-height: 1.7;
    }

}


/* =========================================================
   13 — SMALL MOBILE
   0px–380px
========================================================= */

@media screen and (max-width: 380px) {

    body .about-us-page .about-why__inner {
        padding: 0 20px;
    }

    body .about-us-page .about-why__title {
        font-size: 26px;
    }

    body .about-us-page .about-why__card {
        flex-basis: 88%;
        width: 88%;

        padding-right: 20px;
        padding-left: 20px;
    }

    body .about-us-page .about-why__card:first-child {
        padding-left: 0;
    }

}


/* =========================================================
   14 — ENTRANCE ANIMATION
========================================================= */

@media (prefers-reduced-motion: no-preference) {

    body .about-us-page .about-why__heading {
        animation:
            aboutWhyReveal 0.85s
            cubic-bezier(.22,1,.36,1) both;
    }

    body .about-us-page .about-why__card {
        animation:
            aboutWhyReveal 0.85s
            cubic-bezier(.22,1,.36,1) both;
    }

    body .about-us-page .about-why__card:nth-child(2) {
        animation-delay: 0.08s;
    }

    body .about-us-page .about-why__card:nth-child(3) {
        animation-delay: 0.16s;
    }

    body .about-us-page .about-why__card:nth-child(4) {
        animation-delay: 0.24s;
    }

}

@keyframes aboutWhyReveal {

    from {
        opacity: 0.75;
        transform: translateY(12px);
    }

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

}


/* =========================================================
   15 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body .about-us-page .about-why__heading,
    body .about-us-page .about-why__card,
    body .about-us-page .about-why__icon {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }

    body .about-us-page .about-why__grid {
        scroll-behavior: auto;
    }

}



/* =========================================================
   FRAYORA — ABOUT US
   SECTION 03 — WHY WE EXIST

   RESPONSIVE ALIGNMENT + TABLET SCROLL OVERRIDE

   Desktop:
   - Centered eyebrow and heading
   - Original four-column layout

   Tablet:
   - Centered eyebrow and heading
   - Horizontal editorial swipe-through
   - Visible scrollbar
   - No card backgrounds

   Mobile:
   - Left-aligned eyebrow and heading
   - Existing swipe-through unchanged
========================================================= */


/* =========================================================
   01 — DESKTOP + TABLET HEADING
   600px AND ABOVE
========================================================= */

@media screen and (min-width: 600px) {

    body .about-us-page .about-why__heading {
        display: flex;
        flex-direction: column;
        align-items: center;

        margin-left: auto;
        margin-right: auto;

        text-align: center;
    }

    body .about-us-page .about-why__eyebrow,
    body .about-us-page .about-why__title {
        text-align: center;
    }
}


/* =========================================================
   02 — TABLET HORIZONTAL SCROLL
   600px–1100px
========================================================= */

@media screen and (min-width: 600px)
and (max-width: 1100px) {

    body .about-us-page .about-why__grid {
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;

        grid-template-columns: none;

        gap: 0;

        width: 100%;
        min-width: 0;

        overflow-x: auto;
        overflow-y: hidden;

        scroll-snap-type: x mandatory;
        scroll-padding-inline: 0;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;

        padding: 10px 0 25px;

        scrollbar-width: thin;
        scrollbar-color:
            #A8B09F rgba(48, 59, 50, 0.12);
    }

    /* VISIBLE SCROLLBAR */

    body .about-us-page
    .about-why__grid::-webkit-scrollbar {
        height: 5px;
    }

    body .about-us-page
    .about-why__grid::-webkit-scrollbar-track {
        background: rgba(48, 59, 50, 0.12);
        border-radius: 999px;
    }

    body .about-us-page
    .about-why__grid::-webkit-scrollbar-thumb {
        background: #A8B09F;
        border-radius: 999px;
    }

    /* SWIPEABLE EDITORIAL COLUMNS */

    body .about-us-page .about-why__card,
    body .about-us-page .about-why__card:nth-child(odd),
    body .about-us-page .about-why__card:nth-child(even) {
        position: relative;

        flex: 0 0 43%;
        width: 43%;
        min-width: 0;

        grid-column: auto;

        padding: 10px 26px 15px;

        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;

        scroll-snap-align: start;
    }

    body .about-us-page .about-why__card:first-child {
        padding-left: 0;
    }

    /* THIN VERTICAL DIVIDERS */

    body .about-us-page
    .about-why__card::before {
        display: none;
    }

    body .about-us-page
    .about-why__card:not(:first-child)::before {
        content: "";
        display: block;

        position: absolute;
        top: 10px;
        bottom: 10px;
        left: 0;

        width: 1px;
        height: auto;

        background: rgba(48, 59, 50, 0.15);
    }
}


/* =========================================================
   03 — NARROW TABLET
   600px–767px
========================================================= */

@media screen and (min-width: 600px)
and (max-width: 767px) {

    body .about-us-page .about-why__card,
    body .about-us-page .about-why__card:nth-child(odd),
    body .about-us-page .about-why__card:nth-child(even) {
        flex-basis: 68%;
        width: 68%;

        padding-left: 23px;
        padding-right: 23px;
    }

    body .about-us-page .about-why__card:first-child {
        padding-left: 0;
    }
}


/* =========================================================
   04 — MOBILE HEADING ALIGNMENT
   0px–599px
========================================================= */

@media screen and (max-width: 599px) {

    body .about-us-page .about-why__heading {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        margin-left: 0;
        margin-right: 0;

        text-align: left;
    }

    body .about-us-page .about-why__eyebrow,
    body .about-us-page .about-why__title {
        text-align: left;
    }
}


/* =========================================================
   FRAYORA — ABOUT US — SECTION 04: FOUNDER STORY
   COMPLETE REPLACEMENT CSS — DESKTOP / TABLET / MOBILE

   Replace your entire existing Founder Story CSS group with this file.
   Layout widths:
     Desktop 1101px+:  max-width 1600px; side padding 80px
     Small desktop:    side padding 48px
     Tablet 768–1100: side padding 48px
     Tablet 600–767:  side padding 30px
     Mobile 391–599:  side padding 24px
     Mobile <=390:    side padding 20px

   Keeps founder portrait, typography, animation and centered
   tablet/mobile eyebrow + heading.
========================================================= */


/* ==================================================================
   FRAYORA — ABOUT US — SECTION 04: FOUNDER STORY
   RESPONSIVE RULES GROUPED: DESKTOP / TABLET / MOBILE
   Existing declarations preserved without design changes.
================================================================== */

/* =====================================================
   FRAYORA — ABOUT US SECTION 04
   FOUNDER STORY

   DESKTOP ONLY: 1101px+
   EDITORIAL SPLIT / PORTRAIT / ANIMATIONS
===================================================== */

@media (min-width: 1101px) {

    /* ------------------------------------------
       SECTION BACKGROUND
    ------------------------------------------ */

    .about-us-page .about-founder {
        position: relative;
        isolation: isolate;

        width: 100vw;
        max-width: none;

        margin: 0 0 0 calc(50% - 50vw);
        padding: 0;

        min-height: 780px;

        
/* ==========================================
   FOUNDER STORY — LUMINOUS IVORY
   ALL VIEWPORTS
========================================== */

background-color: #F8F3EB;

background-image:
    /* Soft ivory illumination — upper left */
    radial-gradient(
        ellipse 80% 100% at 12% 18%,
        rgba(255, 255, 255, 0.48) 0%,
        rgba(255, 255, 255, 0.18) 55%,
        transparent 100%
    ),

    /* Gentle ivory illumination — right side */
    radial-gradient(
        ellipse 85% 105% at 90% 35%,
        rgba(255, 255, 255, 0.42) 0%,
        rgba(255, 255, 255, 0.16) 60%,
        transparent 100%
    ),

    /* Warm-neutral depth near the portrait */
    radial-gradient(
        ellipse 60% 90% at 85% 75%,
        rgba(221, 209, 195, 0.16) 0%,
        rgba(221, 209, 195, 0.055) 60%,
        transparent 100%
    ),

    /* Soft lower-left luminosity */
    radial-gradient(
        ellipse 85% 100% at 15% 100%,
        rgba(255, 255, 255, 0.28) 0%,
        rgba(255, 255, 255, 0.10) 60%,
        transparent 100%
    );

background-repeat: no-repeat;


        box-sizing: border-box;
    }

    /* ------------------------------------------
       MAIN TWO-COLUMN GRID
    ------------------------------------------ */

    .about-us-page .about-founder__inner {
        display: grid;

        grid-template-columns:
            minmax(0, 1.15fr)
            minmax(0, 0.85fr);

        align-items: center;
        gap: clamp(64px, 6vw, 112px);

        width: 100%;
        max-width: 1600px;

        margin: 0 auto;
        padding: 110px 80px 120px;

        box-sizing: border-box;
    }

    /* ------------------------------------------
       LEFT STORY CONTENT
    ------------------------------------------ */

    .about-us-page .about-founder__content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        min-width: 0;
        max-width: 730px;
    }

   
/* ============================================
   FRAYORA — FOUNDER STORY
   TYPOGRAPHY REFINEMENT
   DESKTOP ONLY: 1101px+
============================================ */

@media (min-width: 1101px) {

    /* EYEBROW */

    .about-us-page .about-founder__eyebrow {
        margin: 0 0 18px;

        font-family: "Inter", sans-serif;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.12em;
        line-height: 1.4;

        color: #C96743;
    }

    /* EDITORIAL HEADING */

    .about-us-page .about-founder__title {
        margin: 0 0 28px;

        font-family: "Cardo", Georgia, serif;
        font-size: clamp(38px, 3vw, 46px);
        font-weight: 400;
        line-height: 1.12;
        letter-spacing: -0.035em;

        color: #1F211D;
    }

    /* BODY PARAGRAPH SPACING */

    .about-us-page .about-founder__body {
        display: flex;
        flex-direction: column;
        gap: 19px;
    }

    /* BODY TYPOGRAPHY */

    .about-us-page .about-founder__body p {
        margin: 0;

        font-family: "Inter", sans-serif;
        font-size: 15px;
        font-weight: 400;
        line-height: 1.75;
        letter-spacing: -0.005em;

        color: #373B35;
    }

    /* SUPPORTING STATEMENT */

    .about-us-page .about-founder__statement {
        margin: 31px 0 0;
        padding: 21px 0 0;

        border-top: 1px solid rgba(57,66,53,.20);

        font-family: "Inter", sans-serif;
        font-size: 17px;
        font-weight: 600;
        line-height: 1.55;
        letter-spacing: -0.02em;

        color: #394235;
    }

    /* SIGNATURE AREA */

    .about-us-page .about-founder__signature {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        gap: 0;
        margin-top: 22px;
    }

    /* HANDWRITTEN SIGNATURE */

    .about-us-page .about-founder__name {
    margin:0;
    font-family: "Parisienne", cursive;
    font-size: 48px;
        line-height: 1.1;
    font-weight: 400;
    letter-spacing: 0;
    color: #394235;
    display: block;
}

.about-us-page .about-founder__caption {
    margin-top: 6px;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 500;
    color: #646961;
}

}

    /* ------------------------------------------
       RIGHT PORTRAIT
    ------------------------------------------ */

    .about-us-page .about-founder__visual {
        position: relative;

        width: 100%;
        margin: 0;
        padding: 0;

        align-self: center;
        min-width: 0;
    }

    .about-us-page .about-founder__image-wrap {
        position: relative;

        width: 100%;
        aspect-ratio: 4 / 5;

        overflow: hidden;

        border-radius: 8px;

        background: #E7E1D9;

        box-shadow:
            0 16px 35px rgba(31,33,29,.11),
            0 34px 75px rgba(31,33,29,.07);

        transition:
            transform .7s cubic-bezier(.22,1,.36,1),
            box-shadow .7s ease;
    }

    .about-us-page .about-founder__image {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center 25%;

        transition:
            transform 1.2s cubic-bezier(.22,1,.36,1);
    }

    /* ------------------------------------------
       PHOTO HOVER
    ------------------------------------------ */

    @media (hover: hover) {

        .about-us-page .about-founder__image-wrap:hover {
            transform: translateY(-5px);

            box-shadow:
                0 24px 48px rgba(31,33,29,.13),
                0 40px 85px rgba(31,33,29,.09);
        }

        .about-us-page .about-founder__image-wrap:hover
        .about-founder__image {
            transform: scale(1.035);
        }
    }

    /* ------------------------------------------
       SCROLL REVEAL ANIMATIONS
    ------------------------------------------ */

    @keyframes frayoraFounderContentIn {
        from {
            opacity: 0;
            transform: translateY(30px);
        }

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

    @keyframes frayoraFounderImageIn {
        from {
            opacity: 0;
            transform: translateX(40px) scale(.97);
        }

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

    @supports (animation-timeline: view()) {

        .about-us-page .about-founder__content {
            animation: frayoraFounderContentIn linear both;

            animation-timeline: view();
            animation-range: entry 0% entry 45%;
        }

        .about-us-page .about-founder__visual {
            animation: frayoraFounderImageIn linear both;

            animation-timeline: view();
            animation-range: entry 0% entry 45%;
        }
    }

    /* ------------------------------------------
       SMALLER DESKTOP
    ------------------------------------------ */

    @media (max-width: 1350px) {

        .about-us-page .about-founder__inner {
            grid-template-columns:
                minmax(0, 1.2fr)
                minmax(0, .8fr);

            gap: 48px;

            padding: 90px 48px 100px;
        }

        .about-us-page .about-founder__title {
            font-size: 40px;
        }

        .about-us-page .about-founder__body p {
            font-size: 13.5px;
        }
    }
}

/* ------------------------------------------
   REDUCED MOTION
------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

    .about-us-page .about-founder__content,
    .about-us-page .about-founder__visual,
    .about-us-page .about-founder__image,
    .about-us-page .about-founder__image-wrap {
        animation: none !important;
        transition: none !important;

        opacity: 1 !important;
        transform: none !important;
    }
}


/* ============================================
   FRAYORA — FOUNDER STORY
   COMPACT SPACING REFINEMENT
   DESKTOP ONLY: 1101px+
============================================ */

@media (min-width: 1101px) {

    /* Allow content to determine section height */
    .about-us-page .about-founder {
        min-height: 0;
        height: auto;
    }

    /* Reduce outer spacing */
    .about-us-page .about-founder__inner {
        padding-top: 75px;
        padding-bottom: 80px;
    }

    /* Tighten heading spacing */
    .about-us-page .about-founder__title {
        margin-bottom: 25px;
    }

    /* Preserve all paragraphs while reducing gaps */
    .about-us-page .about-founder__body {
        gap: 15px;
    }

    /* Tighten supporting statement spacing */
    .about-us-page .about-founder__statement {
        margin-top: 25px;
        padding-top: 18px;
    }

    /* Keep the signature understated */
    .about-us-page .about-founder__signature {
        margin-top: 20px;
    }

    /* Preserve portrait proportions and shadows */
    .about-us-page .about-founder__visual {
        align-self: center;
    }

}

/* Smaller desktop */
@media (min-width: 1101px) and (max-width: 1350px) {

    .about-us-page .about-founder__inner {
        padding-top: 70px;
        padding-bottom: 75px;
    }
}




/* =====================================================
   FRAYORA — ABOUT US / SECTION 04
   FOUNDER STORY
   TABLET ONLY: 600px–1100px

   ORDER:
   01 — Centered eyebrow
   02 — Centered heading
   03 — Centered portrait
   04 — Left-aligned story paragraphs
   05 — Closing statement
   06 — Founder signature

   Preserves desktop PHP and layout
===================================================== */

@media (min-width: 600px) and (max-width: 1100px) {

    /* ==========================================
       01 — SECTION
    ========================================== */

    .about-us-page .about-founder {
        position: relative;
        isolation: isolate;

        width: 100vw;
        max-width: none;
        height: auto;
        min-height: 0;

        margin: 0 0 0 calc(50% - 50vw);
        padding: 0;

        
/* ==========================================
   FOUNDER STORY — LUMINOUS IVORY
   ALL VIEWPORTS
========================================== */

background-color: #F8F3EB;

background-image:
    /* Soft ivory illumination — upper left */
    radial-gradient(
        ellipse 80% 100% at 12% 18%,
        rgba(255, 255, 255, 0.48) 0%,
        rgba(255, 255, 255, 0.18) 55%,
        transparent 100%
    ),

    /* Gentle ivory illumination — right side */
    radial-gradient(
        ellipse 85% 105% at 90% 35%,
        rgba(255, 255, 255, 0.42) 0%,
        rgba(255, 255, 255, 0.16) 60%,
        transparent 100%
    ),

    /* Warm-neutral depth near the portrait */
    radial-gradient(
        ellipse 60% 90% at 85% 75%,
        rgba(221, 209, 195, 0.16) 0%,
        rgba(221, 209, 195, 0.055) 60%,
        transparent 100%
    ),

    /* Soft lower-left luminosity */
    radial-gradient(
        ellipse 85% 100% at 15% 100%,
        rgba(255, 255, 255, 0.28) 0%,
        rgba(255, 255, 255, 0.10) 60%,
        transparent 100%
    );

background-repeat: no-repeat;

        box-sizing: border-box;
        overflow: hidden;
    }

    /* ==========================================
       02 — TABLET LAYOUT
    ========================================== */

    .about-us-page .about-founder__inner {
        display: grid;

        grid-template-columns: minmax(0, 1fr);

        grid-template-areas:
            "eyebrow"
            "heading"
            "portrait"
            "body"
            "statement"
            "signature";

        justify-items: stretch;
        align-items: start;

        width: 100%;
        max-width: 1100px;

        margin: 0 auto;
        padding: 80px 48px 90px;

        box-sizing: border-box;
    }

    /*
       Allow the existing content children
       to participate in the tablet grid.

       The HTML and desktop layout remain intact.
    */

    .about-us-page .about-founder__content {
        display: contents;
    }

    /* ==========================================
       03 — CENTERED EYEBROW
    ========================================== */

    .about-us-page .about-founder__eyebrow {
        grid-area: eyebrow;

        margin: 0 0 17px;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.4;
        letter-spacing: 0.12em;
        text-transform: uppercase;

        color: #C96743;
        text-align: center;
    }

    /* ==========================================
       04 — CENTERED HEADING
    ========================================== */

    .about-us-page .about-founder__title {
        grid-area: heading;

        width: 100%;
        max-width: 790px;

        margin: 0 auto 38px;
        padding: 0;

        font-family: "Manrope", sans-serif;
        font-size: clamp(33px, 4.3vw, 46px);
        font-weight: 600;
        line-height: 1.17;
        letter-spacing: -0.045em;

        color: #1F211D;

        text-align: center;
        text-wrap: balance;
    }

    /* ==========================================
       05 — CENTERED PORTRAIT
    ========================================== */

    .about-us-page .about-founder__visual {
        grid-area: portrait;

        position: relative;
        display: block;

        width: 100%;
        max-width: 420px;
        min-width: 0;

        margin: 0 auto 35px;
        padding: 0;

        justify-self: center;
        align-self: start;
    }

    .about-us-page .about-founder__image-wrap {
        position: relative;

        display: block;

        width: 100%;
        aspect-ratio: 4 / 5;

        margin: 0;
        padding: 0;

        overflow: hidden;

        background: #E7E1D9;
        border-radius: 8px;

        box-shadow:
            0 14px 32px rgba(31, 33, 29, 0.10),
            0 28px 60px rgba(31, 33, 29, 0.06);

        transition:
            transform 0.7s cubic-bezier(.22,1,.36,1),
            box-shadow 0.7s ease;
    }

    .about-us-page .about-founder__image {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center 25%;

        transition:
            transform 1.1s cubic-bezier(.22,1,.36,1);
    }

    /* PORTRAIT HOVER */

    @media (hover: hover) {

        .about-us-page .about-founder__image-wrap:hover {
            transform: translateY(-4px);

            box-shadow:
                0 20px 42px rgba(31,33,29,0.12),
                0 35px 72px rgba(31,33,29,0.08);
        }

        .about-us-page .about-founder__image-wrap:hover
        .about-founder__image {
            transform: scale(1.035);
        }
    }

    /* ==========================================
       06 — LEFT-ALIGNED BODY COPY
    ========================================== */

    .about-us-page .about-founder__body {
    grid-area: body;

    display: flex;
    flex-direction: column;

    width: 100%;
    max-width: 100%;
    min-width: 0;
    justify-self: center;

    gap: 17px;
    margin: 0;
    padding: 0;

    text-align: left;
}

    .about-us-page .about-founder__body p {
        margin: 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 15px;
        font-weight: 400;
        line-height: 1.8;
        letter-spacing: -0.005em;

        color: #373B35;
        text-align: left;
    }

    /* ==========================================
       07 — CLOSING STATEMENT
    ========================================== */

    .about-us-page .about-founder__statement {
        grid-area: statement;

        width: 100%;

        margin: 30px 0 0;
        padding: 20px 0 0;

        border-top: 1px solid rgba(57,66,53,0.20);

        font-family: "Inter", sans-serif;
        font-size: 16px;
        font-weight: 600;
        line-height: 1.65;
        letter-spacing: -0.015em;

        color: #394235;
        text-align: left;
    }

    /* ==========================================
       08 — FOUNDER SIGNATURE
    ========================================== */

    .about-us-page .about-founder__signature {
        grid-area: signature;

        display: flex;
        flex-direction: column;
        align-items: flex-start;

        width: 100%;

        gap: 0;
        margin: 24px 0 0;
        padding: 0;
    }

    .about-us-page .about-founder__name {
        display: block;

        margin: 0;
        padding: 0;

        font-family: "Parisienne", cursive;
        font-size: 49px;
        font-weight: 400;
        font-style: normal;
        line-height: 1.15;
        letter-spacing: 0;

        color: #394235;
    }

    .about-us-page .about-founder__caption {
        margin: 5px 0 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.45;

        color: #646961;
    }

    /* ==========================================
       09 — SMALLER TABLETS
       600px–767px
    ========================================== */

    @media (max-width: 767px) {

        .about-us-page .about-founder__inner {
            padding: 65px 30px 75px;
        }

        .about-us-page .about-founder__title {
            font-size: clamp(30px, 4.8vw, 36px);
            margin-bottom: 30px;
        }

        .about-us-page .about-founder__visual {
            max-width: 360px;
            margin-bottom: 35px;
        }

        .about-us-page .about-founder__body {
            gap: 15px;
        }

        .about-us-page .about-founder__body p {
            font-size: 14px;
            line-height: 1.75;
        }

        .about-us-page .about-founder__statement {
            font-size: 14px;
            margin-top: 25px;
        }

        .about-us-page .about-founder__name {
            font-size: 46px;
        }
    }

    /* ==========================================
       10 — SCROLL REVEAL ANIMATIONS
    ========================================== */

    @keyframes frayoraFounderTabletFadeUp {
        from {
            opacity: 0;
            transform: translateY(25px);
        }

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

    @keyframes frayoraFounderTabletPortraitIn {
        from {
            opacity: 0;
            transform: translateY(35px) scale(0.98);
        }

        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    @supports (animation-timeline: view()) {

        .about-us-page .about-founder__title {
            animation: frayoraFounderTabletFadeUp linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 75%;
        }

        .about-us-page .about-founder__visual {
            animation: frayoraFounderTabletPortraitIn linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 65%;
        }

        .about-us-page .about-founder__body {
            animation: frayoraFounderTabletFadeUp linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 40%;
        }

        .about-us-page .about-founder__statement {
            animation: frayoraFounderTabletFadeUp linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 75%;
        }

        .about-us-page .about-founder__signature {
            animation: frayoraFounderTabletFadeUp linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 75%;
        }
    }

    /* ==========================================
       11 — ACCESSIBILITY
    ========================================== */

    @media (prefers-reduced-motion: reduce) {

        .about-us-page .about-founder__title,
        .about-us-page .about-founder__visual,
        .about-us-page .about-founder__body,
        .about-us-page .about-founder__statement,
        .about-us-page .about-founder__signature,
        .about-us-page .about-founder__image,
        .about-us-page .about-founder__image-wrap {
            animation: none !important;
            transition: none !important;

            opacity: 1 !important;
            transform: none !important;
            filter: none !important;
        }
    }
}





/* =====================================================
   FRAYORA — ABOUT US / SECTION 04
   FOUNDER STORY
   MOBILE ONLY: 0px–599px

   Centered eyebrow and heading
   Centered founder portrait
   Left-aligned story paragraphs
   Closing statement and Parisienne signature
   Soft shadows and scroll animations
===================================================== */

@media (max-width: 599px) {

    /* ==========================================
       01 — MAIN SECTION
    ========================================== */

    .about-us-page .about-founder {
        position: relative;
        isolation: isolate;

        display: block;

        width: 100vw;
        max-width: none;
        min-height: 0;
        height: auto;

        margin: 0 0 0 calc(50% - 50vw);
        padding: 0;

        box-sizing: border-box;

        
/* ==========================================
   FOUNDER STORY — LUMINOUS IVORY
   ALL VIEWPORTS
========================================== */

background-color: #F8F3EB;

background-image:
    /* Soft ivory illumination — upper left */
    radial-gradient(
        ellipse 80% 100% at 12% 18%,
        rgba(255, 255, 255, 0.48) 0%,
        rgba(255, 255, 255, 0.18) 55%,
        transparent 100%
    ),

    /* Gentle ivory illumination — right side */
    radial-gradient(
        ellipse 85% 105% at 90% 35%,
        rgba(255, 255, 255, 0.42) 0%,
        rgba(255, 255, 255, 0.16) 60%,
        transparent 100%
    ),

    /* Warm-neutral depth near the portrait */
    radial-gradient(
        ellipse 60% 90% at 85% 75%,
        rgba(221, 209, 195, 0.16) 0%,
        rgba(221, 209, 195, 0.055) 60%,
        transparent 100%
    ),

    /* Soft lower-left luminosity */
    radial-gradient(
        ellipse 85% 100% at 15% 100%,
        rgba(255, 255, 255, 0.28) 0%,
        rgba(255, 255, 255, 0.10) 60%,
        transparent 100%
    );

background-repeat: no-repeat;

        overflow: hidden;
    }

    /* ==========================================
       02 — MOBILE CONTENT LAYOUT
    ========================================== */

    .about-us-page .about-founder__inner {
        display: grid;

        grid-template-columns: minmax(0, 1fr);

        grid-template-areas:
            "eyebrow"
            "heading"
            "portrait"
            "body"
            "statement"
            "signature";

        align-items: start;
        justify-items: stretch;

        width: 100%;
        max-width: 599px;

        margin: 0 auto;
        padding: 70px 24px 80px;

        box-sizing: border-box;
    }

    /*
       Allow existing content elements to sit
       directly in the mobile grid.

       No PHP or HTML changes needed.
    */

    .about-us-page .about-founder__content {
        display: contents;
    }

    /* ==========================================
       03 — CENTERED EYEBROW
    ========================================== */

    .about-us-page .about-founder__eyebrow {
        grid-area: eyebrow;

        margin: 0 0 15px;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.4;
        letter-spacing: 0.12em;
        text-transform: uppercase;

        color: #C96743;
        text-align: center;
    }

    /* ==========================================
       04 — CENTERED HEADING
    ========================================== */

    .about-us-page .about-founder__title {
        grid-area: heading;

        width: 100%;
        max-width: 500px;

        margin: 0 auto 30px;
        padding: 0;

        font-family: "Manrope", sans-serif;
        font-size: clamp(29px, 7.5vw, 39px);
        font-weight: 600;
        line-height: 1.2;
        letter-spacing: -0.045em;

        color: #1F211D;

        text-align: center;
        text-wrap: balance;
    }

    /* ==========================================
       05 — CENTERED FOUNDER PORTRAIT
    ========================================== */

    .about-us-page .about-founder__visual {
        grid-area: portrait;

        position: relative;
        display: block;

        width: 100%;
        max-width: 340px;
        min-width: 0;

        margin: 0 auto 35px;
        padding: 0;

        justify-self: center;
        align-self: start;
    }

    .about-us-page .about-founder__image-wrap {
        position: relative;
        display: block;

        width: 100%;
        aspect-ratio: 4 / 5;

        margin: 0;
        padding: 0;

        box-sizing: border-box;

        overflow: hidden;
        border-radius: 8px;

        background: #E7E1D9;

        box-shadow:
            0 10px 25px rgba(31, 33, 29, 0.07),
            0 22px 45px rgba(31, 33, 29, 0.045);

        transition:
            transform 0.65s cubic-bezier(.22, 1, .36, 1),
            box-shadow 0.65s ease;
    }

    .about-us-page .about-founder__image {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center 25%;

        transition:
            transform 1s cubic-bezier(.22, 1, .36, 1);
    }

    /* ==========================================
       06 — LEFT-ALIGNED STORY
    ========================================== */

    .about-us-page .about-founder__body {
        grid-area: body;

        display: flex;
        flex-direction: column;

        width: 100%;
        min-width: 0;

        gap: 17px;
        margin: 0;
        padding: 0;

        text-align: left;
    }

    .about-us-page .about-founder__body p {
        margin: 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.8;
        letter-spacing: -0.005em;

        color: #373B35;
        text-align: left;
        overflow-wrap: break-word;
    }

    /* ==========================================
       07 — CLOSING STATEMENT
    ========================================== */

    .about-us-page .about-founder__statement {
        grid-area: statement;

        width: 100%;

        margin: 27px 0 0;
        padding: 19px 0 0;

        border-top: 1px solid rgba(57, 66, 53, 0.20);

        font-family: "Inter", sans-serif;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.65;
        letter-spacing: -0.015em;

        color: #394235;
        text-align: left;
    }

    /* ==========================================
       08 — FOUNDER SIGNATURE
    ========================================== */

    .about-us-page .about-founder__signature {
        grid-area: signature;

        display: flex;
        flex-direction: column;
        align-items: flex-start;

        width: 100%;

        gap: 0;
        margin: 23px 0 0;
        padding: 0;

        text-align: left;
    }

    .about-us-page .about-founder__name {
        display: block;

        margin: 0;
        padding: 0;

        font-family: "Parisienne", cursive;
        font-size: 47px;
        font-weight: 400;
        font-style: normal;
        line-height: 1.18;
        letter-spacing: 0;

        color: #394235;
    }

    .about-us-page .about-founder__caption {
        margin: 5px 0 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.45;

        color: #646961;
    }

    /* ==========================================
       09 — SUBTLE PORTRAIT INTERACTION
    ========================================== */

    @media (hover: hover) {

        .about-us-page .about-founder__image-wrap:hover {
            transform: translateY(-3px);

            box-shadow:
                0 15px 30px rgba(31, 33, 29, 0.09),
                0 28px 50px rgba(31, 33, 29, 0.055);
        }

        .about-us-page .about-founder__image-wrap:hover
        .about-founder__image {
            transform: scale(1.03);
        }
    }

    /* ==========================================
       10 — SCROLL REVEAL ANIMATIONS
    ========================================== */

    @keyframes frayoraFounderMobileReveal {
        from {
            opacity: 0;
            translate: 0 22px;
        }

        to {
            opacity: 1;
            translate: 0 0;
        }
    }

    @keyframes frayoraFounderMobilePortrait {
        from {
            opacity: 0;
            translate: 0 30px;
            scale: 0.98;
        }

        to {
            opacity: 1;
            translate: 0 0;
            scale: 1;
        }
    }

    @supports (animation-timeline: view()) {

        .about-us-page .about-founder__eyebrow,
        .about-us-page .about-founder__title {
            animation: frayoraFounderMobileReveal linear both;

            animation-timeline: view();
            animation-range: entry 0% entry 75%;
        }

        .about-us-page .about-founder__visual {
            animation: frayoraFounderMobilePortrait linear both;

            animation-timeline: view();
            animation-range: entry 0% entry 70%;
        }

        /*
           Reveal individual paragraphs as they
           enter the viewport, instead of animating
           the entire long story at once.
        */

        .about-us-page .about-founder__body p {
            animation: frayoraFounderMobileReveal linear both;

            animation-timeline: view();
            animation-range: entry 0% entry 70%;
        }

        .about-us-page .about-founder__statement,
        .about-us-page .about-founder__signature {
            animation: frayoraFounderMobileReveal linear both;

            animation-timeline: view();
            animation-range: entry 0% entry 75%;
        }
    }

    /* ==========================================
       11 — SMALL PHONES
       0px–390px
    ========================================== */

    @media (max-width: 390px) {

        .about-us-page .about-founder__inner {
            padding: 60px 20px 70px;
        }

        .about-us-page .about-founder__title {
            font-size: clamp(27px, 7.5vw, 31px);
            margin-bottom: 27px;
        }

        .about-us-page .about-founder__visual {
            max-width: 310px;
            margin-bottom: 32px;
        }

        .about-us-page .about-founder__body {
            gap: 15px;
        }

        .about-us-page .about-founder__body p {
            font-size: 13.5px;
            line-height: 1.75;
        }

        .about-us-page .about-founder__statement {
            font-size: 13.5px;
            margin-top: 24px;
        }

        .about-us-page .about-founder__name {
            font-size: 45px;
        }
    }

    /* ==========================================
       12 — REDUCED MOTION
    ========================================== */

    @media (prefers-reduced-motion: reduce) {

        .about-us-page .about-founder__eyebrow,
        .about-us-page .about-founder__title,
        .about-us-page .about-founder__visual,
        .about-us-page .about-founder__body p,
        .about-us-page .about-founder__statement,
        .about-us-page .about-founder__signature,
        .about-us-page .about-founder__image,
        .about-us-page .about-founder__image-wrap {
            animation: none !important;
            transition: none !important;

            opacity: 1 !important;
            transform: none !important;
            translate: none !important;
            scale: 1 !important;
            filter: none !important;
        }
    }
}



/* =====================================================
   FRAYORA — ABOUT US
   SECTION 04 — FOUNDER STORY

   CENTER ALIGNMENT OVERRIDE

   Tablet: 600px–1100px
   Mobile: 0px–599px

   Desktop remains unchanged.
===================================================== */

@media screen and (max-width: 1100px) {

    /* EYEBROW + HEADING CONTAINER */

    body .about-us-page .about-founder__heading {
        display: flex;
        flex-direction: column;
        align-items: center;

        margin-left: auto;
        margin-right: auto;

        text-align: center;
    }

    /* EYEBROW */

    body .about-us-page .about-founder__eyebrow {
        margin-left: auto;
        margin-right: auto;

        text-align: center;
    }

    /* MAIN HEADING */

    body .about-us-page .about-founder__title {
        margin-left: auto;
        margin-right: auto;

        text-align: center;
    }

}



/* =====================================================
   FRAYORA — ABOUT US
   SECTION 04 — FOUNDER STORY
   TABLET READING WIDTH CORRECTION

   Align story text with The Missing Layer.
   Keep portrait and heading unchanged.
   Desktop and mobile unchanged.
===================================================== */

@media screen and (min-width: 600px) and (max-width: 1100px) {

    body .about-us-page .about-founder__body,
    body .about-us-page .about-founder__statement,
    body .about-us-page .about-founder__signature {
        width: calc(100% - 20px);
        max-width: none;

        min-width: 0;

        margin-left: auto;
        margin-right: auto;

        justify-self: center;
        box-sizing: border-box;
    }

    /* Preserve the existing signature alignment */

    body .about-us-page .about-founder__signature {
        align-items: flex-start;
    }

}


/* =========================================================
   FRAYORA — ABOUT US
   SECTION 05 — THE MISSING LAYER

   COMPLETE RESPONSIVE CSS REPLACEMENT

   BOND-INSPIRED EDITORIAL DESIGN

   Desktop: Editorial copy + comparison
   Tablet: Responsive two-column / stacked
   Mobile: Stacked content + scrolling process

   - Warm ivory solid surface
   - Softly raised comparison panels
   - Delicate architectural separators
   - Olive and terracotta accents
   - No conspicuous background gradients
   - No unnecessary decorative elements
   - Reduced-motion accessible
========================================================= */


/* =========================================================
   01 — SECTION FOUNDATION
========================================================= */

body .about-us-page .about-layer {
    position: relative;
    isolation: isolate;

    width: 100%;
    margin: 0;
    padding: 100px 0 110px;

    background: #F5EDE4;

    box-sizing: border-box;
}

body .about-us-page .about-layer,
body .about-us-page .about-layer * {
    box-sizing: border-box;
}


/* =========================================================
   02 — MAIN EDITORIAL LAYOUT
========================================================= */

body .about-us-page .about-layer__inner {
    display: grid;

    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(0, 1.05fr);

    gap: clamp(40px, 4vw, 70px);

    align-items: start;

    width: 100%;
    max-width: 1600px;

    margin: 0 auto;
    padding: 0 80px;
}


/* =========================================================
   03 — LEFT EDITORIAL COPY
========================================================= */

body .about-us-page .about-layer__copy {
    min-width: 0;
    max-width: 640px;
}

body .about-us-page .about-layer__eyebrow {
    margin: 0 0 16px;

    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;

    letter-spacing: 0.15em;
    text-transform: uppercase;

    color: #B95F40;
}

body .about-us-page .about-layer__title {
    max-width: 650px;

    margin: 0 0 26px;
    padding: 0;

    font-family: "Manrope", sans-serif;
    font-size: clamp(32px, 2.65vw, 43px);
    font-weight: 600;

    line-height: 1.2;
    letter-spacing: -0.048em;

    color: #252B25;
}

body .about-us-page .about-layer__body {
    max-width: 600px;
}

body .about-us-page .about-layer__body p {
    margin: 0 0 19px;

    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-weight: 400;

    line-height: 1.8;

    color: #626960;
}

body .about-us-page .about-layer__body p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   04 — RIGHT EXPLANATORY COLUMN
========================================================= */

body .about-us-page .about-layer__visual {
    position: relative;

    min-width: 0;

    padding-left: clamp(30px, 3vw, 50px);

    border-left: 1px solid rgba(48, 59, 50, 0.16);
}

body .about-us-page .about-layer__intro {
    margin: 0 0 22px;

    font-family: "Manrope", sans-serif;
    font-size: 17px;
    font-weight: 600;

    line-height: 1.5;
    letter-spacing: -0.025em;

    color: #303B32;
}


/* =========================================================
   05 — COMPARISON GRID
========================================================= */

body .about-us-page .about-layer__comparison {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    align-items: stretch;
    gap: 16px;
}


/* =========================================================
   06 — COMPARISON PANELS
========================================================= */

body .about-us-page .about-layer__panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    min-width: 0;
    min-height: 255px;

    margin: 0;
    padding: 24px 22px 25px;

    border: 1px solid rgba(48, 59, 50, 0.075);
    border-radius: 15px;

    background: #FFFCF8;

    box-shadow:
        0 5px 13px rgba(48, 59, 50, 0.025),
        0 15px 32px rgba(48, 59, 50, 0.045),
        0 28px 55px rgba(48, 59, 50, 0.025),
        inset 0 1px 0 rgba(255,255,255,0.9);

    transition:
        transform 0.4s cubic-bezier(.22,1,.36,1),
        box-shadow 0.4s ease;
}

body .about-us-page .about-layer__panel--old {
    background: #F7F2EC;
}

body .about-us-page .about-layer__panel--new {
    background: #FFFCF8;
}


/* PANEL LABELS */

body .about-us-page .about-layer__panel-label {
    margin: 0 0 23px;

    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 700;

    line-height: 1.5;
    letter-spacing: 0.12em;

    color: #687064;
}



/* =========================================================
   07 — COMPARISON SYMBOLS
   OLD WAY — APP LOGOS
   FRAYORA APPROACH — CONNECTED OLIVE ICONS
========================================================= */

/* SHARED ICON ROW */

body .about-us-page .about-layer__symbols {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;

    gap: 9px;
    max-width: 100%;

    margin-bottom: 23px;
}

/* SHARED ICON CONTAINER */

body .about-us-page .about-layer__symbol {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;
    flex: 0 0 40px;

    border-radius: 50%;

    background: #F1EEE6;
    color: #334F38;

    border: 1px solid rgba(64, 91, 65, 0.10);

    box-shadow:
        0 2px 7px rgba(48, 59, 50, 0.035),
        inset 0 1px 0 rgba(255,255,255,0.9);
}

body .about-us-page .about-layer__symbol svg {
    display: block;
    width: 20px;
    height: 20px;
}

/* THE OLD WAY — APP LOGOS */

body .about-us-page .about-layer__symbols--apps {
    gap: 8px;
}

body .about-us-page .about-layer__symbol--app {
    width: 40px;
    height: 40px;
    flex-basis: 40px;

    border-radius: 10px;

    background: #F2EDE6;
    border-color: rgba(88, 82, 72, 0.08);
}

body .about-us-page .about-layer__symbol--app img {
    display: block;

    width: 25px;
    height: 25px;

    object-fit: contain;
}

body .about-us-page .about-layer__symbol--dots svg {
    width: 21px;
    height: 21px;
    fill: #6F6A62;
}

/* FRAYORA APPROACH — CONNECTED ICONS */

body .about-us-page .about-layer__symbols--connected {
    position: relative;
    gap: 7px;
}

body .about-us-page
.about-layer__symbols--connected::before {
    content: "";

    position: absolute;
    top: 50%;
    left: 20px;
    right: 20px;

    height: 1.5px;

    background: #D8D6CB;

    transform: translateY(-50%);

    z-index: 0;
}

body .about-us-page .about-layer__symbol--approach {
    position: relative;
    z-index: 1;

    width: 40px;
    height: 40px;
    flex-basis: 40px;

    border-radius: 50%;

    background: #F1EEE6;
    color: #405840;

    border: 1px solid rgba(86, 104, 82, 0.12);
}

body .about-us-page .about-layer__symbol--approach svg {
    width: 21px;
    height: 21px;
}

/* KEEP ALL APPROACH ICONS THE SAME OLIVE */

body .about-us-page
.about-layer__symbols--connected
.about-layer__symbol:nth-child(2),

body .about-us-page
.about-layer__symbols--connected
.about-layer__symbol:nth-child(4) {
    background: #F1EEE6;
    color: #405840;

    border-color: rgba(86, 104, 82, 0.12);
}



/* =========================================================
   08 — COMPARISON TYPOGRAPHY
========================================================= */

body .about-us-page .about-layer__panel-title {
    margin: 0 0 10px;

    font-family: "Manrope", sans-serif;
    font-size: 18px;
    font-weight: 600;

    line-height: 1.35;
    letter-spacing: -0.035em;

    color: #252B25;
}

body .about-us-page .about-layer__panel-description {
    margin: 0;

    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 400;

    line-height: 1.7;

    color: #626960;
}


/* =========================================================
   09 — PROCESS SEQUENCE
========================================================= */

body .about-us-page .about-layer__process {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    width: 100%;

    margin: 27px 0 0;
    padding: 0 0 25px;

    border-bottom: 1px solid rgba(185, 95, 64, 0.35);
}

body .about-us-page .about-layer__process-step {
    flex: 0 0 auto;

    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 600;

    line-height: 1.5;

    color: #303B32;

    white-space: nowrap;
}

body .about-us-page .about-layer__process-arrow {
    flex: 0 0 auto;

    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 400;

    line-height: 1;

    color: #C77A59;
}


/* =========================================================
   10 — BOTTOM SUPPORTING STATEMENT
========================================================= */

body .about-us-page .about-layer__bottom {
    padding-top: 22px;
}

body .about-us-page .about-layer__bottom-title {
    margin: 0 0 9px;

    font-family: "Manrope", sans-serif;
    font-size: 19px;
    font-weight: 600;

    line-height: 1.4;
    letter-spacing: -0.03em;

    color: #252B25;
}

body .about-us-page .about-layer__bottom-description {
    margin: 0;

    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 400;

    line-height: 1.75;

    color: #626960;
}


/* =========================================================
   11 — DESKTOP HOVER EFFECT
========================================================= */

@media (hover: hover) {

    body .about-us-page .about-layer__panel:hover {
        transform: translateY(-4px);

        box-shadow:
            0 8px 18px rgba(48,59,50,0.035),
            0 20px 42px rgba(48,59,50,0.07),
            0 35px 65px rgba(48,59,50,0.04);
    }

}


/* =========================================================
   12 — MEDIUM DESKTOP
   1101px–1350px
========================================================= */

@media screen and (min-width: 1101px)
and (max-width: 1350px) {

    body .about-us-page .about-layer__inner {
        padding: 0 55px;
        gap: 36px;
    }

    body .about-us-page .about-layer__visual {
        padding-left: 30px;
    }

    body .about-us-page .about-layer__title {
        font-size: clamp(31px, 2.55vw, 37px);
    }

    body .about-us-page .about-layer__panel {
        padding: 21px 17px 23px;
    }

    body .about-us-page .about-layer__panel-title {
        font-size: 17px;
    }

    body .about-us-page .about-layer__symbols {
        gap: 5px;
    }


    body .about-us-page .about-layer__process {
        gap: 6px;
    }

    body .about-us-page .about-layer__process-step {
        font-size: 11px;
    }

}


/* =========================================================
   13 — TABLET
   768px–1100px
========================================================= */

@media screen and (min-width: 768px)
and (max-width: 1100px) {

    body .about-us-page .about-layer {
        padding: 80px 0 90px;
    }

    body .about-us-page .about-layer__inner {
        grid-template-columns: minmax(0, 1fr);

        gap: 45px;
        padding: 0 48px;
    }

    body .about-us-page .about-layer__copy {
        max-width: 800px;
    }

    body .about-us-page .about-layer__title {
        max-width: 820px;

        font-size: clamp(33px, 4.2vw, 43px);
    }

    body .about-us-page .about-layer__visual {
        padding-left: 0;
        border-left: 0;
    }

    body .about-us-page .about-layer__comparison {
        gap: 18px;
    }

    body .about-us-page .about-layer__panel {
        min-height: 225px;
    }

    body .about-us-page .about-layer__process {
        justify-content: flex-start;
        gap: clamp(14px, 2.6vw, 30px);
    }

}


/* =========================================================
   14 — NARROW TABLET
   600px–767px
========================================================= */

@media screen and (min-width: 600px)
and (max-width: 767px) {

    body .about-us-page .about-layer {
        padding: 75px 0 85px;
    }

    body .about-us-page .about-layer__inner {
        grid-template-columns: minmax(0, 1fr);

        gap: 38px;
        padding: 0 30px;
    }

    body .about-us-page .about-layer__visual {
        padding-left: 0;
        border-left: 0;
    }

    body .about-us-page .about-layer__title {
        font-size: clamp(30px, 4.8vw, 36px);
    }

    body .about-us-page .about-layer__comparison {
        gap: 14px;
    }

    body .about-us-page .about-layer__panel {
        min-height: 240px;
        padding: 21px 18px;
    }

    body .about-us-page .about-layer__panel-title {
        font-size: 17px;
    }

    body .about-us-page .about-layer__process {
        justify-content: flex-start;

        gap: 16px;

        overflow-x: auto;
        overflow-y: hidden;

        padding: 5px 0 20px;

        scrollbar-width: thin;
        scrollbar-color: #A8B09F transparent;
    }

}


/* =========================================================
   15 — MOBILE
   0px–599px
========================================================= */

@media screen and (max-width: 599px) {

    body .about-us-page .about-layer {
        padding: 60px 0 70px;
    }

    body .about-us-page .about-layer__inner {
        grid-template-columns: minmax(0, 1fr);

        gap: 34px;
        padding: 0 24px;
    }

    body .about-us-page .about-layer__copy {
        max-width: 100%;
    }

    body .about-us-page .about-layer__eyebrow {
        margin-bottom: 13px;
        font-size: 11px;
    }

    body .about-us-page .about-layer__title {
        font-size: clamp(29px, 7.2vw, 36px);

        line-height: 1.2;
        margin-bottom: 22px;
    }

    body .about-us-page .about-layer__title br {
        display: none;
    }

    body .about-us-page .about-layer__body p {
        font-size: 14px;
        line-height: 1.75;

        margin-bottom: 16px;
    }

    body .about-us-page .about-layer__visual {
        padding-left: 0;
        border-left: 0;
    }

    body .about-us-page .about-layer__intro {
        font-size: 16px;
        line-height: 1.5;

        margin-bottom: 18px;
    }

    /* STACK COMPARISON PANELS */

    body .about-us-page .about-layer__comparison {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    body .about-us-page .about-layer__panel {
        min-height: 0;
        padding: 23px 21px;

        border-radius: 14px;
    }

    body .about-us-page .about-layer__panel-label {
        margin-bottom: 17px;
    }

    body .about-us-page .about-layer__symbols {
    gap: 7px;
    margin-bottom: 18px;
}

body .about-us-page .about-layer__symbol,
body .about-us-page .about-layer__symbol--app,
body .about-us-page .about-layer__symbol--approach {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
}

body .about-us-page
.about-layer__symbols--connected::before {
    left: 19px;
    right: 19px;
}

    body .about-us-page .about-layer__panel-title {
        font-size: 18px;
    }

    body .about-us-page .about-layer__panel-description {
        font-size: 13px;
    }

    /* HORIZONTAL SCROLLING PROCESS */

    body .about-us-page .about-layer__process {
        justify-content: flex-start;

        gap: 17px;

        margin-top: 25px;
        padding: 8px 0 21px;

        overflow-x: auto;
        overflow-y: hidden;

        scroll-snap-type: x proximity;
        scroll-padding-inline: 0;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;

        scrollbar-width: thin;
        scrollbar-color: #A8B09F rgba(48,59,50,0.09);
    }

    body .about-us-page .about-layer__process-step {
        font-size: 12px;
        scroll-snap-align: start;
    }

    body .about-us-page .about-layer__process-arrow {
        font-size: 18px;
    }

    body .about-us-page
    .about-layer__process::-webkit-scrollbar {
        height: 4px;
    }

    body .about-us-page
    .about-layer__process::-webkit-scrollbar-track {
        background: rgba(48,59,50,0.09);
        border-radius: 999px;
    }

    body .about-us-page
    .about-layer__process::-webkit-scrollbar-thumb {
        background: #A8B09F;
        border-radius: 999px;
    }

    body .about-us-page .about-layer__bottom {
        padding-top: 21px;
    }

    body .about-us-page .about-layer__bottom-title {
        font-size: 18px;
    }

    body .about-us-page .about-layer__bottom-description {
        font-size: 13px;
        line-height: 1.75;
    }

}


/* =========================================================
   16 — SMALL MOBILE
   0px–380px
========================================================= */

@media screen and (max-width: 380px) {

    body .about-us-page .about-layer__inner {
        padding: 0 20px;
    }

    body .about-us-page .about-layer__title {
        font-size: 28px;
    }

    body .about-us-page .about-layer__symbol {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }

    body .about-us-page .about-layer__symbols {
        gap: 6px;
    }

}


/* =========================================================
   17 — SUBTLE ENTRANCE ANIMATION
========================================================= */

@media (prefers-reduced-motion: no-preference) {

    body .about-us-page .about-layer__copy,
    body .about-us-page .about-layer__visual {
        animation:
            aboutLayerReveal 0.9s
            cubic-bezier(.22,1,.36,1)
            both;
    }

    body .about-us-page .about-layer__visual {
        animation-delay: 0.1s;
    }

}

@keyframes aboutLayerReveal {

    from {
        opacity: 0.75;
        transform: translateY(12px);
    }

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

}


/* =========================================================
   18 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body .about-us-page .about-layer__copy,
    body .about-us-page .about-layer__visual,
    body .about-us-page .about-layer__panel {
        animation: none !important;
        transition: none !important;

        opacity: 1 !important;
        transform: none !important;
    }

    body .about-us-page .about-layer__process {
        scroll-behavior: auto;
    }

}



/* =====================================================
   FRAYORA — ABOUT US
   SECTION 05 — TABLET CENTER ALIGNMENT

   Tablet only: 600px–1100px

   - Centered process sequence
   - Centered supporting heading
   - Centered description
   - Desktop and mobile unchanged
===================================================== */

@media screen and (min-width: 600px)
and (max-width: 1100px) {

    /* PROCESS SEQUENCE */

    body .about-us-page .about-layer__process {
        display: flex;
        align-items: center;
        justify-content: center;

        text-align: center;
    }

    /* SUPPORTING STATEMENT */

    body .about-us-page .about-layer__bottom {
        display: flex;
        flex-direction: column;
        align-items: center;

        width: 100%;
        text-align: center;
    }

    body .about-us-page .about-layer__bottom-title,
    body .about-us-page .about-layer__bottom-description {
        text-align: center;

        margin-left: auto;
        margin-right: auto;
    }

}


/* =====================================================
   FRAYORA — ABOUT US
   SECTION 05 — THE MISSING LAYER

   MOBILE BOTTOM TEXT ALIGNMENT
   Mobile only: 0px–599px

   - Centered supporting heading
   - Centered description
   - Desktop and tablet unchanged
===================================================== */

@media screen and (max-width: 599px) {

    body .about-us-page .about-layer__bottom {
        display: flex;
        flex-direction: column;
        align-items: center;

        width: 100%;
        text-align: center;
    }

    body .about-us-page .about-layer__bottom-title,
    body .about-us-page .about-layer__bottom-description {
        width: 100%;

        margin-left: auto;
        margin-right: auto;

        text-align: center;
    }

}


/* ==================================================================
   FRAYORA — ABOUT US — SECTION 06: THE FRAYORA APPROACH
   RESPONSIVE RULES GROUPED: DESKTOP / TABLET / MOBILE
   Existing declarations preserved without design changes.
================================================================== */

/* =====================================================
   FRAYORA — ABOUT US
   SECTION 06: THE FRAYORA APPROACH

   DESKTOP ONLY — 1101px+

   DESIGN:
   - Editorial three-column layout
   - Cardo headings / Inter body
   - Soft circular number markers
   - Subtle shadows and hover animations
   - Compact, content-led section height
===================================================== */

@media (min-width: 1101px) {

    /* ==========================================
       01 — SECTION BACKGROUND
    ========================================== */

    .about-us-page .about-method {
        position: relative;
        width: 100%;
        height: auto;
        min-height: 0;

        padding: 88px 0 85px;

        
/* ==========================================
   SECTION 06 — LUMINOUS IVORY
   Full-width, full-height lighting
========================================== */

background-color: #F8F3EB;

background-image:
    /* Upper-left ivory illumination */
    radial-gradient(
        ellipse 60% 85% at 12% 15%,
        rgba(255, 255, 255, 0.45) 0%,
        rgba(255, 255, 255, 0.16) 48%,
        transparent 85%
    ),

    /* Upper-right illumination */
    radial-gradient(
        ellipse 60% 85% at 88% 20%,
        rgba(255, 255, 255, 0.42) 0%,
        rgba(255, 255, 255, 0.14) 50%,
        transparent 85%
    ),

    /* Gentle warm-neutral depth across middle */
    radial-gradient(
        ellipse 70% 80% at 50% 55%,
        rgba(225, 214, 201, 0.14) 0%,
        rgba(225, 214, 201, 0.045) 55%,
        transparent 85%
    ),

    /* Lower-left luminosity */
    radial-gradient(
        ellipse 65% 80% at 18% 95%,
        rgba(255, 255, 255, 0.30) 0%,
        rgba(255, 255, 255, 0.10) 50%,
        transparent 85%
    ),

    /* Lower-right luminosity */
    radial-gradient(
        ellipse 65% 80% at 88% 95%,
        rgba(255, 255, 255, 0.28) 0%,
        rgba(255, 255, 255, 0.09) 50%,
        transparent 85%
    );

background-repeat: no-repeat;

        overflow: hidden;
        isolation: isolate;
    }

    .about-us-page .about-method__inner {
        width: min(1440px, calc(100% - 160px));
        margin: 0 auto;
    }

    /* ==========================================
       02 — SECTION INTRODUCTION
    ========================================== */

    .about-us-page .about-method__intro {
        max-width: 1080px;
        margin: 0 auto 55px;
        text-align: center;
    }

    /* EYEBROW */

    .about-us-page .about-method__eyebrow {
        margin: 0 0 15px;

        font-family: "Inter", sans-serif;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.4;

        letter-spacing: 0.11em;
        text-transform: uppercase;

        color: #D66A43;
    }

    /* MAIN HEADING */

    .about-us-page .about-method__heading {
        max-width: 1000px;
        margin: 0 auto 17px;

        font-family: "Cardo", Georgia, serif;
        font-size: clamp(38px, 3.1vw, 48px);
        font-weight: 400;
        line-height: 1.14;
        letter-spacing: -0.025em;

        color: #1F211D;
        text-align: center;
    }

    /* SUPPORTING DESCRIPTION */

    .about-us-page .about-method__description {
        max-width: 780px;
        margin: 0 auto;

        font-family: "Inter", sans-serif;
        font-size: 15px;
        font-weight: 400;
        line-height: 1.7;

        color: rgba(31, 33, 29, 0.76);
        text-align: center;
    }

    /* ==========================================
       03 — THREE COLUMN METHODOLOGY
    ========================================== */

    .about-us-page .about-method__steps {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));

        gap: 35px;
        align-items: start;

        margin: 0 auto;
    }

    /* INDIVIDUAL STEP */

    .about-us-page .about-method__step {
        position: relative;

        display: grid;
        grid-template-columns: 57px minmax(0, 1fr);
        align-items: start;

        column-gap: 16px;

        min-width: 0;
        padding: 22px 12px 28px;

        border-radius: 10px;

        transition:
            background-color 0.4s ease,
            transform 0.5s cubic-bezier(.22,1,.36,1),
            box-shadow 0.5s cubic-bezier(.22,1,.36,1);
    }

    /* SOFT HOVER DEPTH */

    .about-us-page .about-method__step:hover {
        background: rgba(255, 255, 255, 0.56);

        transform: translateY(-5px);

        box-shadow:
            0 15px 36px rgba(31,33,29,0.065),
            0 4px 12px rgba(31,33,29,0.025);
    }

    /* ==========================================
       04 — NUMBER CIRCLES
    ========================================== */

    .about-us-page .about-method__number {
        display: flex;
        justify-content: center;
        align-items: center;

        width: 52px;
        height: 52px;

        border-radius: 50%;

        background: #EADACE;
        border: 1px solid rgba(152,113,89,0.12);

        box-shadow:
            0 7px 18px rgba(70,60,45,0.075),
            inset 0 1px 0 rgba(255,255,255,0.75);

        transition:
            transform 0.5s cubic-bezier(.22,1,.36,1),
            background-color 0.4s ease,
            box-shadow 0.4s ease;
    }

    .about-us-page .about-method__number span {
        font-family: "Inter", sans-serif;
        font-size: 14px;
        font-weight: 600;
        line-height: 1;

        color: #4F5B49;
    }

    /* CIRCLE HOVER */

    .about-us-page .about-method__step:hover
    .about-method__number {
        background: #E4CEBE;

        transform: translateY(-3px) scale(1.05);

        box-shadow:
            0 10px 23px rgba(79,91,73,0.13),
            inset 0 1px 0 rgba(255,255,255,0.65);
    }

    /* ==========================================
       05 — STEP TYPOGRAPHY
    ========================================== */

    .about-us-page .about-method__step-content {
        min-width: 0;
    }

    .about-us-page .about-method__step-title {
        margin: 2px 0 13px;

        font-family: "Cardo", Georgia, serif;
        font-size: clamp(24px, 1.8vw, 28px);
        font-weight: 400;
        line-height: 1.18;
        letter-spacing: -0.02em;

        color: #1F211D;
    }

    .about-us-page .about-method__step-text {
        margin: 0;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.75;

        color: rgba(31,33,29,0.78);
    }

    /* ==========================================
       06 — CLOSING STATEMENT
    ========================================== */

    .about-us-page .about-method__closing {
        max-width: 980px;
        margin: 50px auto 0;

        text-align: center;
    }

    /* HEADING WITH DECORATIVE RULES */

    .about-us-page .about-method__closing-heading {
        display: flex;
        align-items: center;
        justify-content: center;

        gap: 32px;
    }

    .about-us-page .about-method__rule {
        display: block;

        width: 60px;
        height: 2px;
        flex: 0 0 60px;

        background: #D66A43;
        opacity: 0.72;
    }

    .about-us-page .about-method__closing h3 {
        margin: 0;

        font-family: "Cardo", Georgia, serif;
        font-size: clamp(30px, 2.4vw, 37px);
        font-weight: 400;
        line-height: 1.2;

        color: #1F211D;
    }

    .about-us-page .about-method__closing p {
        margin: 12px auto 0;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.65;

        color: rgba(31,33,29,0.76);
    }

    /* ==========================================
       07 — SCROLL ENTRANCE ANIMATIONS
       Progressive enhancement
    ========================================== */

    @supports (animation-timeline: view()) {

        .about-us-page .about-method__intro {
            animation: frayoraMethodIntro 0.8s
                cubic-bezier(.22,1,.36,1) both;

            animation-timeline: view();
            animation-range: entry 0% entry 75%;
        }

        .about-us-page .about-method__step {
            animation: frayoraMethodStep 0.85s
                cubic-bezier(.22,1,.36,1) both;

            animation-timeline: view();
            animation-range: entry 5% entry 85%;
        }

        .about-us-page .about-method__closing {
            animation: frayoraMethodClosing 0.8s
                cubic-bezier(.22,1,.36,1) both;

            animation-timeline: view();
            animation-range: entry 0% entry 80%;
        }
    }

    @keyframes frayoraMethodIntro {
        from {
            opacity: 0;
            transform: translateY(22px);
        }

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

    @keyframes frayoraMethodStep {
        from {
            opacity: 0;
            translate: 0 25px;
        }

        to {
            opacity: 1;
            translate: 0 0;
        }
    }

    @keyframes frayoraMethodClosing {
        from {
            opacity: 0;
            transform: translateY(18px);
        }

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

    /* ==========================================
       08 — SMALLER DESKTOP
       1101px–1350px
    ========================================== */

    @media (max-width: 1350px) {

        .about-us-page .about-method__inner {
            width: calc(100% - 100px);
        }

        .about-us-page .about-method__steps {
            gap: 15px;
        }

        .about-us-page .about-method__step {
            grid-template-columns: 48px minmax(0, 1fr);
            column-gap: 13px;
            padding-left: 8px;
            padding-right: 8px;
        }

        .about-us-page .about-method__number {
            width: 46px;
            height: 46px;
        }

        .about-us-page .about-method__step-text {
            font-size: 13px;
        }
    }

    /* ==========================================
       09 — ACCESSIBILITY
    ========================================== */

    @media (prefers-reduced-motion: reduce) {

        .about-us-page .about-method__intro,
        .about-us-page .about-method__step,
        .about-us-page .about-method__closing {
            animation: none !important;
            opacity: 1 !important;
            transform: none !important;
            translate: none !important;
        }

        .about-us-page .about-method__step,
        .about-us-page .about-method__number {
            transition: none !important;
        }

        .about-us-page .about-method__step:hover {
            transform: none !important;
        }

        .about-us-page .about-method__step:hover
        .about-method__number {
            transform: none !important;
        }
    }
}




/* =====================================================
   FRAYORA — ABOUT US / SECTION 06
   THE FRAYORA APPROACH
   TABLET ONLY: 600px–1100px

   Vertical three-step methodology
   Manrope + Inter
   Editorial spacing, soft shadows, scroll motion
===================================================== */

@media (min-width: 600px) and (max-width: 1100px) {

    /* ==========================================
       01 — SECTION
    ========================================== */

    .about-us-page .about-method {
        position: relative;
        isolation: isolate;

        width: 100vw;
        max-width: none;
        height: auto;
        min-height: 0;

        margin: 0 0 0 calc(50% - 50vw);
        padding: 85px 0 90px;

        box-sizing: border-box;
        
/* ==========================================
   SECTION 06 — LUMINOUS IVORY
   Full-width, full-height lighting
========================================== */

background-color: #F8F3EB;

background-image:
    /* Upper-left ivory illumination */
    radial-gradient(
        ellipse 60% 85% at 12% 15%,
        rgba(255, 255, 255, 0.45) 0%,
        rgba(255, 255, 255, 0.16) 48%,
        transparent 85%
    ),

    /* Upper-right illumination */
    radial-gradient(
        ellipse 60% 85% at 88% 20%,
        rgba(255, 255, 255, 0.42) 0%,
        rgba(255, 255, 255, 0.14) 50%,
        transparent 85%
    ),

    /* Gentle warm-neutral depth across middle */
    radial-gradient(
        ellipse 70% 80% at 50% 55%,
        rgba(225, 214, 201, 0.14) 0%,
        rgba(225, 214, 201, 0.045) 55%,
        transparent 85%
    ),

    /* Lower-left luminosity */
    radial-gradient(
        ellipse 65% 80% at 18% 95%,
        rgba(255, 255, 255, 0.30) 0%,
        rgba(255, 255, 255, 0.10) 50%,
        transparent 85%
    ),

    /* Lower-right luminosity */
    radial-gradient(
        ellipse 65% 80% at 88% 95%,
        rgba(255, 255, 255, 0.28) 0%,
        rgba(255, 255, 255, 0.09) 50%,
        transparent 85%
    );

background-repeat: no-repeat;

        overflow: hidden;
    }

    .about-us-page .about-method__inner {
        width: calc(100% - 96px);
        max-width: 950px;
        margin: 0 auto;
    }

    /* ==========================================
       02 — INTRODUCTION
    ========================================== */

    .about-us-page .about-method__intro {
        max-width: 830px;
        margin: 0 auto 55px;
        text-align: center;
    }

    .about-us-page .about-method__eyebrow {
        margin: 0 0 17px;

        font-family: "Inter", sans-serif;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.4;
        letter-spacing: 0.11em;
        text-transform: uppercase;

        color: #D66A43;
    }

    .about-us-page .about-method__heading {
        max-width: 820px;
        margin: 0 auto 19px;

        font-family: "Manrope", sans-serif;
        font-size: clamp(32px, 4vw, 43px);
        font-weight: 600;
        line-height: 1.18;
        letter-spacing: -0.045em;

        color: #1F211D;
        text-align: center;
        text-wrap: balance;
    }

    .about-us-page .about-method__description {
        max-width: 700px;
        margin: 0 auto;

        font-family: "Inter", sans-serif;
        font-size: 15px;
        font-weight: 400;
        line-height: 1.7;

        color: rgba(31, 33, 29, 0.76);
        text-align: center;
    }

    /* ==========================================
       03 — THREE VERTICAL STEPS
    ========================================== */

    .about-us-page .about-method__steps {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;

        width: 100%;
        max-width: 780px;

        margin: 0 auto;
        padding: 0;
    }

    .about-us-page .about-method__step {
        position: relative;

        display: grid;
        grid-template-columns: 58px minmax(0, 1fr);
        align-items: start;
        column-gap: 22px;

        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 27px 28px;

        box-sizing: border-box;
        border-radius: 12px;

        background: rgba(255, 255, 255, 0.38);
        border: 1px solid rgba(57, 66, 53, 0.055);

        box-shadow:
            0 8px 22px rgba(31, 33, 29, 0.025),
            0 18px 34px rgba(31, 33, 29, 0.025);

        transition:
            transform 0.45s cubic-bezier(.22, 1, .36, 1),
            background-color 0.4s ease,
            border-color 0.4s ease,
            box-shadow 0.4s ease;
    }

    /* ==========================================
       04 — NUMBER CIRCLES
    ========================================== */

    .about-us-page .about-method__number {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 54px;
        height: 54px;
        flex-shrink: 0;

        margin: 0;
        padding: 0;

        border-radius: 50%;
        background: #EADACE;
        border: 1px solid rgba(152, 113, 89, 0.12);

        box-shadow:
            0 7px 18px rgba(70, 60, 45, 0.065),
            inset 0 1px 0 rgba(255, 255, 255, 0.8);

        transition:
            transform 0.4s cubic-bezier(.22, 1, .36, 1),
            background-color 0.4s ease;
    }

    .about-us-page .about-method__number span {
        font-family: "Inter", sans-serif;
        font-size: 14px;
        font-weight: 600;
        line-height: 1;

        color: #4F5B49;
    }

    /* ==========================================
       05 — STEP CONTENT
    ========================================== */

    .about-us-page .about-method__step-content {
        min-width: 0;
    }

    .about-us-page .about-method__step-title {
        margin: 3px 0 12px;

        font-family: "Manrope", sans-serif;
        font-size: clamp(21px, 2.7vw, 26px);
        font-weight: 600;
        line-height: 1.3;
        letter-spacing: -0.035em;

        color: #1F211D;
    }

    .about-us-page .about-method__step-text {
        margin: 0;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.75;

        color: rgba(31, 33, 29, 0.78);
    }

    /* ==========================================
       06 — SUBTLE HOVER DEPTH
    ========================================== */

    @media (hover: hover) {

        .about-us-page .about-method__step:hover {
            transform: translateY(-4px);
            background: rgba(255, 255, 255, 0.72);
            border-color: rgba(201, 103, 67, 0.15);

            box-shadow:
                0 14px 30px rgba(31, 33, 29, 0.045),
                0 24px 45px rgba(31, 33, 29, 0.035);
        }

        .about-us-page .about-method__step:hover
        .about-method__number {
            transform: translateY(-2px) scale(1.045);
            background: #E4CEBE;
        }
    }

    /* ==========================================
       07 — CLOSING STATEMENT
    ========================================== */

    .about-us-page .about-method__closing {
        max-width: 800px;
        margin: 65px auto 0;
        text-align: center;
    }

    .about-us-page .about-method__closing-heading {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }

    .about-us-page .about-method__rule {
        display: block;
        width: 44px;
        height: 2px;
        flex: 0 0 44px;

        background: #D66A43;
        opacity: 0.72;
    }

    .about-us-page .about-method__closing h3 {
        margin: 0;

        font-family: "Manrope", sans-serif;
        font-size: clamp(27px, 3.2vw, 35px);
        font-weight: 500;
        line-height: 1.25;
        letter-spacing: -0.04em;

        color: #1F211D;
        text-align: center;
    }

    .about-us-page .about-method__closing p {
        margin: 15px auto 0;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.7;

        color: rgba(31, 33, 29, 0.76);
        text-align: center;
    }

    /* ==========================================
       08 — SCROLL REVEALS
    ========================================== */

    @keyframes frayoraMethodTabletReveal {
        from {
            opacity: 0;
            translate: 0 26px;
        }

        to {
            opacity: 1;
            translate: 0 0;
        }
    }

    @supports (animation-timeline: view()) {

        .about-us-page .about-method__intro {
            animation: frayoraMethodTabletReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 70%;
        }

        .about-us-page .about-method__step {
            animation: frayoraMethodTabletReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 55%;
        }

        .about-us-page .about-method__closing {
            animation: frayoraMethodTabletReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 75%;
        }
    }

    /* ==========================================
       09 — SMALLER TABLETS
       600px–767px
    ========================================== */

    @media (max-width: 767px) {

        .about-us-page .about-method {
            padding: 70px 0 80px;
        }

        .about-us-page .about-method__inner {
            width: calc(100% - 56px);
        }

        .about-us-page .about-method__intro {
            margin-bottom: 40px;
        }

        .about-us-page .about-method__heading {
            font-size: clamp(29px, 4.7vw, 35px);
        }

        .about-us-page .about-method__description {
            font-size: 14px;
        }

        .about-us-page .about-method__steps {
            gap: 15px;
        }

        .about-us-page .about-method__step {
            grid-template-columns: 48px minmax(0, 1fr);
            column-gap: 16px;

            padding: 23px 20px;
        }

        .about-us-page .about-method__number {
            width: 46px;
            height: 46px;
        }

        .about-us-page .about-method__number span {
            font-size: 13px;
        }

        .about-us-page .about-method__step-title {
            font-size: 21px;
        }

        .about-us-page .about-method__step-text {
            font-size: 13.5px;
            line-height: 1.7;
        }

        .about-us-page .about-method__closing {
            margin-top: 50px;
        }

        .about-us-page .about-method__closing-heading {
            gap: 12px;
        }

        .about-us-page .about-method__rule {
            width: 24px;
            flex-basis: 24px;
        }

        .about-us-page .about-method__closing h3 {
            font-size: clamp(25px, 3.9vw, 30px);
        }

        .about-us-page .about-method__closing p {
            font-size: 13px;
        }
    }

    /* ==========================================
       10 — REDUCED MOTION
    ========================================== */

    @media (prefers-reduced-motion: reduce) {

        .about-us-page .about-method__intro,
        .about-us-page .about-method__step,
        .about-us-page .about-method__closing {
            animation: none !important;
            opacity: 1 !important;
            transform: none !important;
            translate: none !important;
            transition: none !important;
        }

        .about-us-page .about-method__number {
            transition: none !important;
        }

        .about-us-page .about-method__step:hover,
        .about-us-page .about-method__step:hover
        .about-method__number {
            transform: none !important;
        }
    }
}




/* =====================================================
   FRAYORA — ABOUT US / SECTION 06
   THE FRAYORA APPROACH
   MOBILE ONLY: 0px–599px

   Centered editorial introduction
   Three vertically stacked cards
   Manrope + Inter typography
   Soft numbered circles
   Refined shadows and scroll animations
===================================================== */

@media (max-width: 599px) {

    /* ==========================================
       01 — SECTION BACKGROUND
    ========================================== */

    .about-us-page .about-method {
        position: relative;
        isolation: isolate;

        display: block;

        width: 100vw;
        max-width: none;
        min-height: 0;
        height: auto;

        margin: 0 0 0 calc(50% - 50vw);
        padding: 70px 0 75px;

        box-sizing: border-box;

        
/* ==========================================
   SECTION 06 — LUMINOUS IVORY
   Full-width, full-height lighting
========================================== */

background-color: #F8F3EB;

background-image:
    /* Upper-left ivory illumination */
    radial-gradient(
        ellipse 60% 85% at 12% 15%,
        rgba(255, 255, 255, 0.45) 0%,
        rgba(255, 255, 255, 0.16) 48%,
        transparent 85%
    ),

    /* Upper-right illumination */
    radial-gradient(
        ellipse 60% 85% at 88% 20%,
        rgba(255, 255, 255, 0.42) 0%,
        rgba(255, 255, 255, 0.14) 50%,
        transparent 85%
    ),

    /* Gentle warm-neutral depth across middle */
    radial-gradient(
        ellipse 70% 80% at 50% 55%,
        rgba(225, 214, 201, 0.14) 0%,
        rgba(225, 214, 201, 0.045) 55%,
        transparent 85%
    ),

    /* Lower-left luminosity */
    radial-gradient(
        ellipse 65% 80% at 18% 95%,
        rgba(255, 255, 255, 0.30) 0%,
        rgba(255, 255, 255, 0.10) 50%,
        transparent 85%
    ),

    /* Lower-right luminosity */
    radial-gradient(
        ellipse 65% 80% at 88% 95%,
        rgba(255, 255, 255, 0.28) 0%,
        rgba(255, 255, 255, 0.09) 50%,
        transparent 85%
    );

background-repeat: no-repeat;

        overflow: hidden;
    }

    .about-us-page .about-method__inner {
        width: calc(100% - 40px);
        max-width: 540px;

        margin: 0 auto;
        padding: 0;

        box-sizing: border-box;
    }

    /* ==========================================
       02 — CENTERED INTRODUCTION
    ========================================== */

    .about-us-page .about-method__intro {
        width: 100%;
        max-width: 500px;

        margin: 0 auto 38px;
        padding: 0;

        text-align: center;
    }

    /* EYEBROW */

    .about-us-page .about-method__eyebrow {
        margin: 0 0 15px;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.4;

        letter-spacing: 0.12em;
        text-transform: uppercase;

        color: #D66A43;
        text-align: center;
    }

    /* MAIN HEADING */

    .about-us-page .about-method__heading {
        width: 100%;
        max-width: 490px;

        margin: 0 auto 18px;
        padding: 0;

        font-family: "Manrope", sans-serif;
        font-size: clamp(27px, 7vw, 36px);
        font-weight: 600;
        line-height: 1.2;
        letter-spacing: -0.045em;

        color: #1F211D;

        text-align: center;
        text-wrap: balance;
    }

    /* SUPPORTING DESCRIPTION */

    .about-us-page .about-method__description {
        width: 100%;
        max-width: 460px;

        margin: 0 auto;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 13.5px;
        font-weight: 400;
        line-height: 1.75;

        color: rgba(31, 33, 29, 0.76);

        text-align: center;
    }

    /* ==========================================
       03 — THREE STACKED STEPS
    ========================================== */

    .about-us-page .about-method__steps {
        display: grid;
        grid-template-columns: minmax(0, 1fr);

        gap: 16px;

        width: 100%;
        min-width: 0;
        max-width: 500px;

        margin: 0 auto;
        padding: 0;

        box-sizing: border-box;
    }

    /* ==========================================
       04 — INDIVIDUAL STEP CARDS
    ========================================== */

    .about-us-page .about-method__step {
        position: relative;

        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);

        align-items: start;
        column-gap: 15px;

        width: 100%;
        min-width: 0;
        min-height: 0;
        height: auto;

        margin: 0;
        padding: 24px 20px 26px;

        box-sizing: border-box;

        background: rgba(255, 255, 255, 0.50);

        border: 1px solid rgba(57, 66, 53, 0.06);
        border-radius: 11px;

        box-shadow:
            0 6px 17px rgba(31, 33, 29, 0.025),
            0 18px 34px rgba(31, 33, 29, 0.035);

        transition:
            transform 0.45s cubic-bezier(.22,1,.36,1),
            background-color 0.4s ease,
            border-color 0.4s ease,
            box-shadow 0.45s ease;
    }

    /* ==========================================
       05 — NUMBER CIRCLES
    ========================================== */

    .about-us-page .about-method__number {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 46px;
        height: 46px;
        min-width: 46px;
        min-height: 46px;

        margin: 0;
        padding: 0;

        box-sizing: border-box;

        border-radius: 50%;

        background: #EADACE;
        border: 1px solid rgba(152,113,89,0.12);

        box-shadow:
            0 5px 14px rgba(70,60,45,0.055),
            inset 0 1px 0 rgba(255,255,255,0.80);

        transition:
            transform 0.4s cubic-bezier(.22,1,.36,1),
            background-color 0.4s ease;
    }

    .about-us-page .about-method__number span {
        font-family: "Inter", sans-serif;
        font-size: 12px;
        font-weight: 600;
        line-height: 1;

        color: #4F5B49;
    }

    /* ==========================================
       06 — STEP CONTENT
    ========================================== */

    .about-us-page .about-method__step-content {
        display: block;
        min-width: 0;
        width: 100%;

        margin: 0;
        padding: 0;

        text-align: left;
    }

    /* STEP HEADINGS */

    .about-us-page .about-method__step-title {
        margin: 2px 0 11px;
        padding: 0;

        font-family: "Manrope", sans-serif;
        font-size: clamp(18px, 4.8vw, 22px);
        font-weight: 600;
        line-height: 1.32;
        letter-spacing: -0.035em;

        color: #1F211D;

        text-align: left;
    }

    /* STEP DESCRIPTIONS */

    .about-us-page .about-method__step-text {
        margin: 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.75;

        color: rgba(31,33,29,0.78);

        text-align: left;
        overflow-wrap: break-word;
    }

    /* ==========================================
       07 — CLOSING STATEMENT
    ========================================== */

    .about-us-page .about-method__closing {
        width: 100%;
        max-width: 490px;

        margin: 51px auto 0;
        padding: 0;

        text-align: center;
    }

    /* HEADING AND DECORATIVE RULES */

    .about-us-page .about-method__closing-heading {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        gap: 10px;
    }

    .about-us-page .about-method__rule {
        display: block;

        width: 22px;
        height: 1.5px;

        flex: 0 0 22px;

        background: #D66A43;
        opacity: 0.72;
    }

    .about-us-page .about-method__closing h3 {
        min-width: 0;

        margin: 0;
        padding: 0;

        font-family: "Manrope", sans-serif;
        font-size: clamp(23px, 5.9vw, 31px);
        font-weight: 500;
        line-height: 1.27;
        letter-spacing: -0.045em;

        color: #1F211D;

        text-align: center;
        text-wrap: balance;
    }

    .about-us-page .about-method__closing p {
        width: 100%;
        max-width: 420px;

        margin: 15px auto 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.7;

        color: rgba(31,33,29,0.76);

        text-align: center;
    }

    /* ==========================================
       08 — HOVER DEPTH
    ========================================== */

    @media (hover: hover) {

        .about-us-page .about-method__step:hover {
            transform: translateY(-4px);

            background: rgba(255,255,255,0.76);

            border-color: rgba(201,103,67,0.14);

            box-shadow:
                0 12px 27px rgba(31,33,29,0.04),
                0 23px 42px rgba(31,33,29,0.035);
        }

        .about-us-page .about-method__step:hover
        .about-method__number {
            transform: translateY(-2px) scale(1.04);
            background: #E4CEBE;
        }
    }

    /* ==========================================
       09 — SCROLL REVEAL ANIMATIONS
    ========================================== */

    @keyframes frayoraMethodMobileReveal {
        from {
            opacity: 0;
            translate: 0 24px;
        }

        to {
            opacity: 1;
            translate: 0 0;
        }
    }

    @supports (animation-timeline: view()) {

        /* INTRODUCTION */

        .about-us-page .about-method__intro {
            animation: frayoraMethodMobileReveal linear both;

            animation-timeline: view();
            animation-range: entry 0% entry 65%;
        }

        /* EACH CARD REVEALS ON ITS OWN */

        .about-us-page .about-method__step {
            animation: frayoraMethodMobileReveal linear both;

            animation-timeline: view();
            animation-range: entry 0% entry 65%;
        }

        /* CLOSING STATEMENT */

        .about-us-page .about-method__closing {
            animation: frayoraMethodMobileReveal linear both;

            animation-timeline: view();
            animation-range: entry 0% entry 65%;
        }
    }

    /* ==========================================
       10 — SMALL PHONES
       0px–390px
    ========================================== */

    @media (max-width: 390px) {

        .about-us-page .about-method {
            padding: 60px 0 65px;
        }

        .about-us-page .about-method__inner {
            width: calc(100% - 32px);
        }

        .about-us-page .about-method__intro {
            margin-bottom: 33px;
        }

        .about-us-page .about-method__heading {
            font-size: clamp(26px, 7vw, 30px);
        }

        .about-us-page .about-method__description {
            font-size: 13px;
        }

        .about-us-page .about-method__steps {
            gap: 14px;
        }

        .about-us-page .about-method__step {
            grid-template-columns: 42px minmax(0, 1fr);
            column-gap: 12px;

            padding: 21px 16px 23px;
        }

        .about-us-page .about-method__number {
            width: 40px;
            height: 40px;

            min-width: 40px;
            min-height: 40px;
        }

        .about-us-page .about-method__step-title {
            font-size: 18px;
        }

        .about-us-page .about-method__step-text {
            font-size: 12.5px;
            line-height: 1.7;
        }

        .about-us-page .about-method__closing {
            margin-top: 42px;
        }

        .about-us-page .about-method__closing-heading {
            gap: 7px;
        }

        .about-us-page .about-method__rule {
            width: 15px;
            flex-basis: 15px;
        }

        .about-us-page .about-method__closing h3 {
            font-size: clamp(22px, 5.9vw, 26px);
        }

        .about-us-page .about-method__closing p {
            font-size: 12.5px;
        }
    }

    /* ==========================================
       11 — REDUCED MOTION
    ========================================== */

    @media (prefers-reduced-motion: reduce) {

        .about-us-page .about-method__intro,
        .about-us-page .about-method__step,
        .about-us-page .about-method__closing,
        .about-us-page .about-method__number {
            animation: none !important;
            transition: none !important;

            opacity: 1 !important;
            transform: none !important;
            translate: none !important;
        }
    }
}



/* =====================================================
   FRAYORA — ABOUT US
   SECTION 06 — THE FRAYORA APPROACH

   MOBILE LEFT ALIGNMENT — CORRECTED SELECTORS

   Mobile: 0px–599px
   Desktop and tablet unchanged
===================================================== */

@media screen and (max-width: 599px) {

    /* INTRODUCTION CONTAINER */

    body .about-us-page .about-method__intro {
        display: flex !important;
        flex-direction: column;
        align-items: flex-start !important;

        width: 100%;
        margin-left: 0;
        margin-right: 0;

        text-align: left !important;
    }

    /* EYEBROW */

    body .about-us-page .about-method__eyebrow {
        margin-left: 0 !important;
        margin-right: 0 !important;

        text-align: left !important;
    }

    /* HEADING */

    body .about-us-page .about-method__heading {
        margin-left: 0 !important;
        margin-right: 0 !important;

        text-align: left !important;
    }

    /* DESCRIPTION */

    body .about-us-page .about-method__description {
        margin-left: 0 !important;
        margin-right: 0 !important;

        text-align: left !important;
    }

}


/* ==================================================================
   FRAYORA — ABOUT US — SECTION 07: OUR VALUES & OUR MISSION
   RESPONSIVE RULES GROUPED: DESKTOP / TABLET / MOBILE
   Existing declarations preserved without design changes.
================================================================== */

/* =====================================================
   FRAYORA — ABOUT US
   SECTION 07: OUR VALUES & OUR MISSION
   DESKTOP ONLY — 1101px+

   DARK OLIVE EDITORIAL DESIGN
   APPROVED MOCKUP INSPIRED
===================================================== */

@media (min-width: 1101px) {

    /* ==========================================
       01 — SECTION
    ========================================== */

    .about-us-page .about-values-mission {
        position: relative;
        isolation: isolate;

        width: 100%;
        height: auto;
        min-height: 0;

        padding: 95px 0 100px;
        box-sizing: border-box;

        background-color: #303B32;

background-image:
    /* Localized illumination — upper left */
    radial-gradient(
        ellipse 38% 65% at 16% 22%,
        rgba(113, 135, 103, 0.17) 0%,
        rgba(113, 135, 103, 0.06) 46%,
        transparent 78%
    ),

    /* Soft light around the mission column */
    radial-gradient(
        ellipse 42% 72% at 76% 48%,
        rgba(113, 135, 103, 0.14) 0%,
        rgba(113, 135, 103, 0.05) 48%,
        transparent 80%
    ),

    /* Subtle lower-center illumination */
    radial-gradient(
        ellipse 40% 55% at 45% 100%,
        rgba(105, 127, 98, 0.11) 0%,
        transparent 78%
    ),

    /* Preserve deep olive across the whole section */
    linear-gradient(
        135deg,
        #303B32 0%,
        #2B362D 55%,
        #263128 100%
    );

background-repeat: no-repeat;
        color: #F7F0E6;

        overflow: hidden;
    }

    .about-us-page .about-values-mission__inner {
        width: min(1440px, calc(100% - 160px));
        margin: 0 auto;

        display: grid;
        grid-template-columns:
            minmax(0, 1.55fr)
            minmax(0, 0.85fr);

        gap: clamp(55px, 5vw, 90px);
        align-items: center;
    }

    /* ==========================================
       02 — SHARED EYEBROWS
    ========================================== */

    .about-us-page .about-values-mission__eyebrow {
        margin: 0 0 15px;

        font-family: "Inter", sans-serif;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.4;
        letter-spacing: 0.11em;

        text-transform: uppercase;
        color: #E99572;
    }

    /* ==========================================
       03 — VALUES INTRO
    ========================================== */

    .about-us-page .about-values-mission__values {
        min-width: 0;
    }

    .about-us-page .about-values-mission__intro {
        max-width: 740px;
        margin-bottom: 43px;
    }

    .about-us-page .about-values-mission__heading {
        max-width: 690px;
        margin: 0 0 18px;

        font-family: "Cardo", Georgia, serif;
        font-size: clamp(34px, 2.8vw, 45px);
        font-weight: 400;
        line-height: 1.13;
        letter-spacing: -0.025em;

        color: #F7F0E6;
    }

    .about-us-page .about-values-mission__description {
        max-width: 710px;
        margin: 0;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.75;

        color: rgba(247,240,230,0.86);
    }

    /* ==========================================
       04 — VALUES GRID
       OPEN LAYOUT — NO RECTANGULAR CARDS
    ========================================== */

    .about-us-page .about-values-mission__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));

        column-gap: 30px;
        row-gap: 38px;
        align-items: start;
    }

    .about-us-page .about-values-mission__value {
        position: relative;

        display: grid;
        grid-template-columns: 53px minmax(0, 1fr);
        align-items: start;
        column-gap: 16px;

        min-width: 0;
        margin: 0;
        padding: 0;

        background: transparent;
        border: none;
        border-radius: 0;

        box-shadow: none;

        transition:
            transform 0.5s cubic-bezier(.22,1,.36,1);
    }

    .about-us-page .about-values-mission__value:hover {
        transform: translateY(-4px);
        background: transparent;
        box-shadow: none;
    }

    /* ==========================================
       05 — ICONS
    ========================================== */

    .about-us-page .about-values-mission__icon {
        width: 49px;
        height: 49px;

        display: flex;
        align-items: center;
        justify-content: center;

        color: #F7F0E6;

        filter:
            drop-shadow(0 4px 8px rgba(0,0,0,0.14));

        transition:
            color 0.4s ease,
            transform 0.5s cubic-bezier(.22,1,.36,1),
            filter 0.4s ease;
    }

    .about-us-page .about-values-mission__icon svg {
        display: block;
        width: 44px;
        height: 44px;
        overflow: visible;
    }

    .about-us-page .about-values-mission__value:hover
    .about-values-mission__icon {
        color: #E99572;
        transform: translateY(-3px) scale(1.06);

        filter:
            drop-shadow(0 6px 11px rgba(0,0,0,0.18));
    }

    /* ==========================================
       06 — VALUE TYPOGRAPHY
    ========================================== */

    .about-us-page .about-values-mission__value-content {
        min-width: 0;
    }

    .about-us-page .about-values-mission__value-content h3 {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 7px;

        margin: 0 0 11px;

        font-family: "Cardo", Georgia, serif;
        font-size: clamp(19px, 1.45vw, 23px);
        font-weight: 400;
        line-height: 1.26;

        color: #F7F0E6;
    }

    .about-us-page .about-values-mission__value-content h3 span {
        flex: 0 0 auto;

        font-family: "Inter", sans-serif;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.04em;

        color: #E99572;
    }

    .about-us-page .about-values-mission__value-content p {
        margin: 0;

        font-family: "Inter", sans-serif;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.75;

        color: rgba(247,240,230,0.83);
    }

    /* ==========================================
       07 — MISSION COLUMN
    ========================================== */

    .about-us-page .about-values-mission__mission {
        position: relative;
        min-width: 0;

        padding: 18px 0 18px 51px;

        border-left:
            1px solid rgba(247,240,230,0.35);
    }

    /* DIVIDER SOFT DEPTH */

    .about-us-page .about-values-mission__mission::before {
        content: "";
        position: absolute;

        left: -2px;
        top: 16px;

        width: 3px;
        height: 72px;
        border-radius: 3px;

        background: #D66A43;

        box-shadow:
            0 0 15px rgba(214,106,67,0.18);
    }

    .about-us-page .about-values-mission__mission-heading {
        margin: 0 0 26px;

        font-family: "Cardo", Georgia, serif;
        font-size: clamp(32px, 2.55vw, 41px);
        font-weight: 400;
        line-height: 1.15;
        letter-spacing: -0.025em;

        color: #F7F0E6;
    }

    .about-us-page .about-values-mission__mission-description {
        margin: 0;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.8;

        color: rgba(247,240,230,0.87);
    }

    /* SHORT ACCENT RULE */

    .about-us-page .about-values-mission__mission-rule {
        width: 51px;
        height: 2px;

        margin: 26px 0 23px;

        background: #E99572;

        box-shadow:
            0 3px 12px rgba(214,106,67,0.16);
    }

    .about-us-page .about-values-mission__mission-closing {
        margin: 0;

        font-family: "Manrope", sans-serif;
font-size: 26px;
font-weight: 500;
line-height: 1.45;
letter-spacing: -0.025em;

        color: #F7F0E6;
    }

    /* ==========================================
       08 — SCROLL ANIMATIONS
    ========================================== */

    @supports (animation-timeline: view()) {

        .about-us-page .about-values-mission__intro {
            animation: frayoraValuesIn 0.85s
                cubic-bezier(.22,1,.36,1) both;

            animation-timeline: view();
            animation-range: entry 0% entry 75%;
        }

        .about-us-page .about-values-mission__value {
            animation: frayoraValueItemIn 0.8s
                cubic-bezier(.22,1,.36,1) both;

            animation-timeline: view();
            animation-range: entry 0% entry 75%;
        }

        .about-us-page .about-values-mission__mission {
            animation: frayoraMissionIn 0.9s
                cubic-bezier(.22,1,.36,1) both;

            animation-timeline: view();
            animation-range: entry 0% entry 75%;
        }
    }

    @keyframes frayoraValuesIn {
        from {
            opacity: 0;
            translate: 0 24px;
        }

        to {
            opacity: 1;
            translate: 0 0;
        }
    }

    @keyframes frayoraValueItemIn {
        from {
            opacity: 0;
            translate: 0 18px;
        }

        to {
            opacity: 1;
            translate: 0 0;
        }
    }

    @keyframes frayoraMissionIn {
        from {
            opacity: 0;
            translate: 22px 0;
        }

        to {
            opacity: 1;
            translate: 0 0;
        }
    }

    /* ==========================================
       09 — SMALLER DESKTOP
       1101px–1350px
    ========================================== */

    @media (max-width: 1350px) {

        .about-us-page .about-values-mission__inner {
            width: calc(100% - 100px);

            gap: 48px;
            grid-template-columns:
                minmax(0, 1.45fr)
                minmax(0, 0.9fr);
        }

        .about-us-page .about-values-mission__grid {
            column-gap: 18px;
            row-gap: 30px;
        }

        .about-us-page .about-values-mission__value {
            grid-template-columns: 43px minmax(0, 1fr);
            column-gap: 12px;
        }

        .about-us-page .about-values-mission__icon {
            width: 42px;
            height: 42px;
        }

        .about-us-page .about-values-mission__icon svg {
            width: 39px;
            height: 39px;
        }

        .about-us-page .about-values-mission__mission {
            padding-left: 36px;
        }
    }

    /* ==========================================
       10 — ACCESSIBILITY
    ========================================== */

    @media (prefers-reduced-motion: reduce) {

        .about-us-page .about-values-mission__intro,
        .about-us-page .about-values-mission__value,
        .about-us-page .about-values-mission__mission {
            animation: none !important;
            opacity: 1 !important;
            transform: none !important;
            translate: none !important;
        }

        .about-us-page .about-values-mission__value,
        .about-us-page .about-values-mission__icon {
            transition: none !important;
        }

        .about-us-page .about-values-mission__value:hover,
        .about-us-page .about-values-mission__value:hover
        .about-values-mission__icon {
            transform: none !important;
        }
    }
}



/* =====================================================
   FRAYORA — ABOUT US
   MOBILE WIDTH ALIGNMENT — SECTIONS 04 + 06

   Matches The Missing Layer visual alignment.
   Desktop and tablet unchanged.
===================================================== */

@media screen and (max-width: 599px) {

    /* SECTION 04 — FOUNDER STORY */

    body .about-us-page .about-founder__inner {
        width: 100% !important;
        max-width: 599px !important;
        margin-inline: auto !important;

        padding-left: 34px !important;
        padding-right: 34px !important;

        box-sizing: border-box;
    }

    /* Keep story and closing content aligned */

    body .about-us-page .about-founder__body,
    body .about-us-page .about-founder__statement,
    body .about-us-page .about-founder__signature {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    /* SECTION 06 — THE FRAYORA APPROACH */

    body .about-us-page .about-method__inner {
        width: 100% !important;
        max-width: 599px !important;

        margin-inline: auto !important;

        padding-left: 34px !important;
        padding-right: 34px !important;

        box-sizing: border-box;
    }

    body .about-us-page .about-method__intro {
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
        text-align: left !important;
    }

    body .about-us-page .about-method__eyebrow,
    body .about-us-page .about-method__heading,
    body .about-us-page .about-method__description {
        max-width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: left !important;
    }
}

/* SMALL PHONES */

@media screen and (max-width: 390px) {

    body .about-us-page .about-founder__inner,
    body .about-us-page .about-method__inner {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
}


/* =====================================================
   FRAYORA — ABOUT US
   SECTION 07: OUR VALUES & OUR MISSION
   TABLET ONLY: 600px–1100px

   Deep olive background
   2-column values layout
   Full-width mission beneath
   Manrope + Inter
   Editorial dividers and subtle animations
===================================================== */

@media (min-width: 600px) and (max-width: 1100px) {

    /* ==========================================
       01 — MAIN SECTION
    ========================================== */

    .about-us-page .about-values-mission {
        position: relative;
        isolation: isolate;

        width: 100vw;
        max-width: none;
        min-height: 0;
        height: auto;

        margin: 0 0 0 calc(50% - 50vw);
        padding: 85px 0 95px;

        box-sizing: border-box;
        background-color: #303B32;

background-image:
    /* Localized illumination — upper left */
    radial-gradient(
        ellipse 38% 65% at 16% 22%,
        rgba(113, 135, 103, 0.17) 0%,
        rgba(113, 135, 103, 0.06) 46%,
        transparent 78%
    ),

    /* Soft light around the mission column */
    radial-gradient(
        ellipse 42% 72% at 76% 48%,
        rgba(113, 135, 103, 0.14) 0%,
        rgba(113, 135, 103, 0.05) 48%,
        transparent 80%
    ),

    /* Subtle lower-center illumination */
    radial-gradient(
        ellipse 40% 55% at 45% 100%,
        rgba(105, 127, 98, 0.11) 0%,
        transparent 78%
    ),

    /* Preserve deep olive across the whole section */
    linear-gradient(
        135deg,
        #303B32 0%,
        #2B362D 55%,
        #263128 100%
    );

background-repeat: no-repeat;
        color: #F7F0E6;
        overflow: hidden;
    }

    .about-us-page .about-values-mission__inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr);

        width: calc(100% - 100px);
        max-width: 900px;

        margin: 0 auto;
        padding: 0;

        gap: 70px;
        box-sizing: border-box;
    }

    /* ==========================================
       02 — VALUES INTRODUCTION
    ========================================== */

    .about-us-page .about-values-mission__values {
        width: 100%;
        min-width: 0;
    }

    .about-us-page .about-values-mission__intro {
        max-width: 790px;
        margin: 0 auto 48px;

        text-align: center;
    }

    .about-us-page .about-values-mission__eyebrow {
        margin: 0 0 16px;

        font-family: "Inter", sans-serif;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.4;
        letter-spacing: 0.11em;
        text-transform: uppercase;

        color: #E99372;
    }

    .about-us-page .about-values-mission__heading {
        max-width: 760px;
        margin: 0 auto 20px;

        font-family: "Manrope", sans-serif;
        font-size: clamp(32px, 4vw, 43px);
        font-weight: 600;
        line-height: 1.18;
        letter-spacing: -0.045em;

        color: #F7F0E6;
        text-align: center;
        text-wrap: balance;
    }

    .about-us-page .about-values-mission__description {
        max-width: 680px;
        margin: 0 auto;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.75;

        color: rgba(247, 240, 230, 0.82);
        text-align: center;
    }

    /* ==========================================
       03 — FOUR VALUES
       2 × 2 EDITORIAL GRID
    ========================================== */

    .about-us-page .about-values-mission__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 43px 35px;
        align-items: start;

        width: 100%;
        margin: 0;
        padding: 0;
    }

    .about-us-page .about-values-mission__value {
        display: grid;
        grid-template-columns: 43px minmax(0, 1fr);

        align-items: start;
        column-gap: 15px;

        min-width: 0;
        margin: 0;
        padding: 8px 0;

        border: none;
        background: transparent;

        transition:
            transform 0.45s cubic-bezier(.22,1,.36,1);
    }

    /* ==========================================
       04 — OUTLINE ICONS
    ========================================== */

    .about-us-page .about-values-mission__icon {
        display: flex;
        align-items: flex-start;
        justify-content: center;

        width: 42px;
        height: 42px;
        min-width: 42px;
        min-height: 42px;

        margin: 2px 0 0;
        padding: 0;

        background: transparent;
        color: #F7F0E6;

        transition:
            transform 0.45s cubic-bezier(.22,1,.36,1),
            color 0.35s ease;
    }

    .about-us-page .about-values-mission__icon svg {
        display: block;

        width: 38px;
        height: 38px;
        min-width: 38px;
        min-height: 38px;
        max-width: 38px;
        max-height: 38px;

        flex-shrink: 0;

        fill: none;
        stroke: currentColor;
        stroke-width: 1.5;
    }

    /* ==========================================
       05 — VALUE CONTENT
    ========================================== */

    .about-us-page .about-values-mission__value-content {
        min-width: 0;
    }

    .about-us-page .about-values-mission__value-content h3 {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;

        gap: 8px;

        margin: 0 0 11px;

        font-family: "Manrope", sans-serif;
        font-size: clamp(18px, 2.15vw, 22px);
        font-weight: 600;
        line-height: 1.35;
        letter-spacing: -0.035em;

        color: #F7F0E6;
    }

    .about-us-page .about-values-mission__value-content h3 span {
        font-family: "Inter", sans-serif;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.035em;

        color: #E99372;
    }

    .about-us-page .about-values-mission__value-content p {
        margin: 0;

        font-family: "Inter", sans-serif;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.75;

        color: rgba(247, 240, 230, 0.80);
    }

    /* ==========================================
       06 — MISSION
       FULL-WIDTH BELOW VALUES
    ========================================== */

    .about-us-page .about-values-mission__mission {
        position: relative;

        width: 100%;
        max-width: 790px;
        min-width: 0;

        margin: 0 auto;
        padding: 63px 0 0;

        border-left: none;
        border-top: 1px solid rgba(247, 240, 230, 0.25);

        text-align: center;
    }

    /* TERRACOTTA ACCENT ABOVE DIVIDER */

    .about-us-page .about-values-mission__mission::before {
        content: "";

        position: absolute;
        top: -2px;
        left: 50%;

        width: 70px;
        height: 3px;

        background: #D66A43;
        transform: translateX(-50%);
    }

    .about-us-page .about-values-mission__mission-heading {
        max-width: 720px;
        margin: 0 auto 23px;

        font-family: "Manrope", sans-serif;
        font-size: clamp(32px, 4.1vw, 43px);
        font-weight: 600;
        line-height: 1.19;
        letter-spacing: -0.045em;

        color: #F7F0E6;
        text-align: center;
        text-wrap: balance;
    }

    .about-us-page .about-values-mission__mission-description {
        max-width: 680px;
        margin: 0 auto;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.8;

        color: rgba(247, 240, 230, 0.82);
        text-align: center;
    }

    /* ==========================================
       07 — MISSION CLOSING STATEMENT
    ========================================== */

    .about-us-page .about-values-mission__mission-rule {
        width: 55px;
        height: 2px;

        margin: 31px auto 27px;

        background: #E99372;
        border: none;
    }

    .about-us-page .about-values-mission__mission-closing {
        max-width: 650px;
        margin: 0 auto;

        font-family: "Manrope", sans-serif;
        font-size: clamp(21px, 2.7vw, 26px);
        font-weight: 500;
        line-height: 1.5;
        letter-spacing: -0.025em;

        color: #F7F0E6;
        text-align: center;
        text-wrap: balance;
    }

    /* ==========================================
       08 — GENTLE HOVER EFFECTS
    ========================================== */

    @media (hover: hover) {

        .about-us-page .about-values-mission__value:hover {
            transform: translateY(-4px);
        }

        .about-us-page .about-values-mission__value:hover
        .about-values-mission__icon {
            color: #E99372;
            transform: translateY(-2px);
        }
    }

    /* ==========================================
       09 — SCROLL ENTRANCE ANIMATIONS
    ========================================== */

    @keyframes frayoraValuesTabletReveal {
        from {
            opacity: 0;
            translate: 0 25px;
        }

        to {
            opacity: 1;
            translate: 0 0;
        }
    }

    @supports (animation-timeline: view()) {

        .about-us-page .about-values-mission__intro {
            animation: frayoraValuesTabletReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 70%;
        }

        .about-us-page .about-values-mission__value {
            animation: frayoraValuesTabletReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 65%;
        }

        .about-us-page .about-values-mission__value:nth-child(2) {
            animation-range: entry 5% entry 70%;
        }

        .about-us-page .about-values-mission__value:nth-child(3) {
            animation-range: entry 8% entry 73%;
        }

        .about-us-page .about-values-mission__value:nth-child(4) {
            animation-range: entry 12% entry 77%;
        }

        .about-us-page .about-values-mission__mission {
            animation: frayoraValuesTabletReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 60%;
        }
    }

    /* ==========================================
       10 — SMALLER TABLETS
       600px–767px
    ========================================== */

    @media (max-width: 767px) {

        .about-us-page .about-values-mission {
            padding: 70px 0 80px;
        }

        .about-us-page .about-values-mission__inner {
            width: calc(100% - 60px);
            gap: 58px;
        }

        .about-us-page .about-values-mission__intro {
            margin-bottom: 38px;
        }

        .about-us-page .about-values-mission__heading {
            font-size: clamp(29px, 4.7vw, 35px);
        }

        .about-us-page .about-values-mission__grid {
            gap: 32px 22px;
        }

        .about-us-page .about-values-mission__value {
            grid-template-columns: 34px minmax(0, 1fr);
            column-gap: 11px;
        }

        .about-us-page .about-values-mission__icon {
            width: 34px;
            height: 34px;
            min-width: 34px;
            min-height: 34px;
        }

        .about-us-page .about-values-mission__icon svg {
            width: 31px;
            height: 31px;
            min-width: 31px;
            min-height: 31px;
            max-width: 31px;
            max-height: 31px;
        }

        .about-us-page .about-values-mission__value-content h3 {
            font-size: 17px;
        }

        .about-us-page .about-values-mission__value-content p {
            font-size: 12px;
            line-height: 1.7;
        }

        .about-us-page .about-values-mission__mission {
            padding-top: 54px;
        }

        .about-us-page .about-values-mission__mission-heading {
            font-size: clamp(29px, 4.7vw, 35px);
        }

        .about-us-page .about-values-mission__mission-closing {
            font-size: 22px;
        }
    }

    /* ==========================================
       11 — REDUCED MOTION
    ========================================== */

    @media (prefers-reduced-motion: reduce) {

        .about-us-page .about-values-mission__intro,
        .about-us-page .about-values-mission__value,
        .about-us-page .about-values-mission__mission,
        .about-us-page .about-values-mission__icon {
            animation: none !important;
            transition: none !important;
            opacity: 1 !important;
            transform: none !important;
            translate: none !important;
        }
    }
}





/* =====================================================
   FRAYORA — ABOUT US / SECTION 07
   OUR VALUES & OUR MISSION
   MOBILE ONLY: 0px–599px

   Deep olive background
   Centered editorial introductions
   Four vertically stacked values
   Outlined icons
   Terracotta divider
   Manrope + Inter typography
   Subtle scroll animations
===================================================== */

@media (max-width: 599px) {

    /* ==========================================
       01 — MAIN SECTION
    ========================================== */

    .about-us-page .about-values-mission {
        position: relative;
        isolation: isolate;

        display: block;

        width: 100vw;
        max-width: none;
        height: auto;
        min-height: 0;

        margin: 0 0 0 calc(50% - 50vw);
        padding: 70px 0 78px;

        box-sizing: border-box;

        background-color: #303B32;

background-image:
    /* Localized illumination — upper left */
    radial-gradient(
        ellipse 38% 65% at 16% 22%,
        rgba(113, 135, 103, 0.17) 0%,
        rgba(113, 135, 103, 0.06) 46%,
        transparent 78%
    ),

    /* Soft light around the mission column */
    radial-gradient(
        ellipse 42% 72% at 76% 48%,
        rgba(113, 135, 103, 0.14) 0%,
        rgba(113, 135, 103, 0.05) 48%,
        transparent 80%
    ),

    /* Subtle lower-center illumination */
    radial-gradient(
        ellipse 40% 55% at 45% 100%,
        rgba(105, 127, 98, 0.11) 0%,
        transparent 78%
    ),

    /* Preserve deep olive across the whole section */
    linear-gradient(
        135deg,
        #303B32 0%,
        #2B362D 55%,
        #263128 100%
    );

background-repeat: no-repeat;
        color: #F7F0E6;

        overflow: hidden;
    }

    .about-us-page .about-values-mission__inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr);

        width: calc(100% - 44px);
        max-width: 540px;

        margin: 0 auto;
        padding: 0;

        gap: 65px;

        box-sizing: border-box;
    }

    /* ==========================================
       02 — VALUES INTRODUCTION
    ========================================== */

    .about-us-page .about-values-mission__values {
        display: block;

        width: 100%;
        min-width: 0;
    }

    .about-us-page .about-values-mission__intro {
        width: 100%;
        max-width: 500px;

        margin: 0 auto 42px;
        padding: 0;

        text-align: center;
    }

    /* EYEBROW */

    .about-us-page .about-values-mission__eyebrow {
        margin: 0 0 16px;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.4;
        letter-spacing: 0.12em;
        text-transform: uppercase;

        color: #E99372;
        text-align: center;
    }

    /* MAIN HEADING */

    .about-us-page .about-values-mission__heading {
        width: 100%;
        max-width: 490px;

        margin: 0 auto 20px;
        padding: 0;

        font-family: "Manrope", sans-serif;
        font-size: clamp(27px, 7vw, 36px);
        font-weight: 600;
        line-height: 1.22;
        letter-spacing: -0.045em;

        color: #F7F0E6;

        text-align: center;
        text-wrap: balance;
    }

    /* INTRODUCTION DESCRIPTION */

    .about-us-page .about-values-mission__description {
        width: 100%;
        max-width: 465px;

        margin: 0 auto;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 13.5px;
        font-weight: 400;
        line-height: 1.8;

        color: rgba(247, 240, 230, 0.82);

        text-align: center;
    }

    /* ==========================================
       03 — FOUR STACKED VALUES
    ========================================== */

    .about-us-page .about-values-mission__grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);

        align-items: start;
        gap: 33px;

        width: 100%;
        margin: 0;
        padding: 0;
    }

    .about-us-page .about-values-mission__value {
        position: relative;

        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);

        align-items: start;
        column-gap: 15px;

        width: 100%;
        min-width: 0;

        margin: 0;
        padding: 0;

        box-sizing: border-box;

        background: transparent;
        border: none;

        transition:
            transform 0.4s cubic-bezier(.22,1,.36,1);
    }

    /* ==========================================
       04 — OUTLINED VALUE ICONS
    ========================================== */

    .about-us-page .about-values-mission__icon {
        display: flex;
        align-items: flex-start;
        justify-content: center;

        width: 40px;
        height: 40px;

        min-width: 40px;
        min-height: 40px;

        margin: 2px 0 0;
        padding: 0;

        box-sizing: border-box;

        background: transparent;
        color: #F7F0E6;

        transition:
            transform 0.4s cubic-bezier(.22,1,.36,1),
            color 0.35s ease;
    }

    .about-us-page .about-values-mission__icon svg {
        display: block;

        width: 35px;
        height: 35px;

        min-width: 35px;
        min-height: 35px;
        max-width: 35px;
        max-height: 35px;

        flex-shrink: 0;

        fill: none;
        stroke: currentColor;
        stroke-width: 1.5;
    }

    /* ==========================================
       05 — VALUE CONTENT
    ========================================== */

    .about-us-page .about-values-mission__value-content {
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;

        text-align: left;
    }

    /* NUMBER AND HEADING */

    .about-us-page .about-values-mission__value-content h3 {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;

        gap: 7px;

        margin: 0 0 10px;
        padding: 0;

        font-family: "Manrope", sans-serif;
        font-size: clamp(18px, 4.7vw, 21px);
        font-weight: 600;
        line-height: 1.35;
        letter-spacing: -0.035em;

        color: #F7F0E6;
        text-align: left;
    }

    /* TERRACOTTA NUMBER */

    .about-us-page .about-values-mission__value-content h3 span {
        font-family: "Inter", sans-serif;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.4;
        letter-spacing: 0.035em;

        color: #E99372;
    }

    /* VALUE DESCRIPTION */

    .about-us-page .about-values-mission__value-content p {
        margin: 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.75;

        color: rgba(247,240,230,0.80);

        text-align: left;
    }

    /* ==========================================
       06 — OUR MISSION DIVIDER
    ========================================== */

    .about-us-page .about-values-mission__mission {
        position: relative;

        width: 100%;
        max-width: 500px;
        min-width: 0;

        margin: 0 auto;
        padding: 57px 0 0;

        box-sizing: border-box;

        border-left: none;
        border-top: 1px solid rgba(247,240,230,0.25);

        text-align: center;
    }

    /* TERRACOTTA ACCENT */

    .about-us-page .about-values-mission__mission::before {
        content: "";

        position: absolute;
        top: -2px;
        left: 50%;

        width: 60px;
        height: 3px;

        background: #D66A43;

        transform: translateX(-50%);
    }

    /* ==========================================
       07 — MISSION TYPOGRAPHY
    ========================================== */

    .about-us-page .about-values-mission__mission-heading {
        width: 100%;
        max-width: 470px;

        margin: 0 auto 21px;
        padding: 0;

        font-family: "Manrope", sans-serif;
        font-size: clamp(28px, 7.3vw, 37px);
        font-weight: 600;
        line-height: 1.22;
        letter-spacing: -0.045em;

        color: #F7F0E6;

        text-align: center;
        text-wrap: balance;
    }

    .about-us-page .about-values-mission__mission-description {
        width: 100%;
        max-width: 460px;

        margin: 0 auto;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 13.5px;
        font-weight: 400;
        line-height: 1.8;

        color: rgba(247,240,230,0.82);

        text-align: center;
    }

    /* ==========================================
       08 — FINAL MISSION STATEMENT
    ========================================== */

    .about-us-page .about-values-mission__mission-rule {
        display: block;

        width: 48px;
        height: 2px;

        margin: 31px auto 27px;
        padding: 0;

        background: #E99372;
        border: none;
    }

    .about-us-page .about-values-mission__mission-closing {
        width: 100%;
        max-width: 445px;

        margin: 0 auto;
        padding: 0;

        font-family: "Manrope", sans-serif;
        font-size: clamp(20px, 5.3vw, 25px);
        font-weight: 500;
        line-height: 1.5;
        letter-spacing: -0.025em;

        color: #F7F0E6;

        text-align: center;
        text-wrap: balance;
    }

    /* ==========================================
       09 — SUBTLE HOVER EFFECTS
    ========================================== */

    @media (hover: hover) {

        .about-us-page .about-values-mission__value:hover {
            transform: translateY(-3px);
        }

        .about-us-page .about-values-mission__value:hover
        .about-values-mission__icon {
            color: #E99372;
            transform: translateY(-2px);
        }
    }

    /* ==========================================
       10 — SCROLL REVEAL ANIMATIONS
    ========================================== */

    @keyframes frayoraValuesMobileReveal {
        from {
            opacity: 0;
            translate: 0 22px;
        }

        to {
            opacity: 1;
            translate: 0 0;
        }
    }

    @supports (animation-timeline: view()) {

        /* VALUES INTRODUCTION */

        .about-us-page .about-values-mission__intro {
            animation: frayoraValuesMobileReveal linear both;

            animation-timeline: view();
            animation-range: entry 0% entry 65%;
        }

        /* EACH VALUE REVEALS INDIVIDUALLY */

        .about-us-page .about-values-mission__value {
            animation: frayoraValuesMobileReveal linear both;

            animation-timeline: view();
            animation-range: entry 0% entry 65%;
        }

        /* MISSION REVEAL */

        .about-us-page .about-values-mission__mission-heading,
        .about-us-page .about-values-mission__mission-description,
        .about-us-page .about-values-mission__mission-rule,
        .about-us-page .about-values-mission__mission-closing {
            animation: frayoraValuesMobileReveal linear both;

            animation-timeline: view();
            animation-range: entry 0% entry 65%;
        }
    }

    /* ==========================================
       11 — SMALL PHONES
       0px–390px
    ========================================== */

    @media (max-width: 390px) {

        .about-us-page .about-values-mission {
            padding: 60px 0 68px;
        }

        .about-us-page .about-values-mission__inner {
            width: calc(100% - 36px);
            gap: 58px;
        }

        .about-us-page .about-values-mission__intro {
            margin-bottom: 37px;
        }

        .about-us-page .about-values-mission__heading {
            font-size: clamp(26px, 7vw, 30px);
        }

        .about-us-page .about-values-mission__description {
            font-size: 13px;
        }

        .about-us-page .about-values-mission__grid {
            gap: 29px;
        }

        .about-us-page .about-values-mission__value {
            grid-template-columns: 36px minmax(0, 1fr);
            column-gap: 12px;
        }

        .about-us-page .about-values-mission__icon {
            width: 35px;
            height: 35px;

            min-width: 35px;
            min-height: 35px;
        }

        .about-us-page .about-values-mission__icon svg {
            width: 31px;
            height: 31px;

            min-width: 31px;
            min-height: 31px;
            max-width: 31px;
            max-height: 31px;
        }

        .about-us-page .about-values-mission__value-content h3 {
            font-size: 17px;
        }

        .about-us-page .about-values-mission__value-content p {
            font-size: 12.5px;
            line-height: 1.7;
        }

        .about-us-page .about-values-mission__mission {
            padding-top: 52px;
        }

        .about-us-page .about-values-mission__mission-heading {
            font-size: clamp(26px, 7.2vw, 32px);
        }

        .about-us-page .about-values-mission__mission-description {
            font-size: 13px;
        }

        .about-us-page .about-values-mission__mission-closing {
            font-size: clamp(19px, 5.2vw, 22px);
        }
    }

    /* ==========================================
       12 — REDUCED MOTION
    ========================================== */

    @media (prefers-reduced-motion: reduce) {

        .about-us-page .about-values-mission__intro,
        .about-us-page .about-values-mission__value,
        .about-us-page .about-values-mission__mission-heading,
        .about-us-page .about-values-mission__mission-description,
        .about-us-page .about-values-mission__mission-rule,
        .about-us-page .about-values-mission__mission-closing,
        .about-us-page .about-values-mission__icon {
            animation: none !important;
            transition: none !important;

            opacity: 1 !important;
            transform: none !important;
            translate: none !important;
        }
    }
}




/* ==================================================================
   FRAYORA — ABOUT US — SECTION 08: FINAL CTA
   RESPONSIVE RULES GROUPED: DESKTOP / TABLET / MOBILE
   Existing declarations preserved without design changes.
================================================================== */

/* =====================================================
   FRAYORA — ABOUT US
   SECTION 08: FINAL CALL TO ACTION
   DESKTOP ONLY: 1101px+

   TERRACOTTA EDITORIAL CTA
   Subtle shadows and scroll animations
===================================================== */

@media (min-width: 1101px) {

    /* ==========================================
       01 — MAIN SECTION
    ========================================== */

    .about-us-page .about-final-cta {
        position: relative;
        isolation: isolate;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        min-height: 380px;
        height: auto;

        margin: 0;
        padding: 75px 0 80px;
        box-sizing: border-box;

        background-color: #A66B56;

background-color: #A66B56;

background-image:
    /* Soft warm illumination across the left */
    radial-gradient(
        ellipse 75% 130% at 12% 32%,
        rgba(220, 151, 122, 0.23) 0%,
        rgba(220, 151, 122, 0.07) 52%,
        transparent 85%
    ),

    /* Subtle luminous warmth toward the bottom */
    radial-gradient(
        ellipse 75% 110% at 72% 100%,
        rgba(202, 126, 105, 0.15) 0%,
        transparent 80%
    ),

    /* Smooth horizontal transition inspired by Bond */
    linear-gradient(
        105deg,
        #AD735D 0%,
        #A66B56 32%,
        #935D50 65%,
        #634D4D 100%
    );

background-repeat: no-repeat;
        color: #F7F0E6;

        overflow: hidden;
    }

    .about-us-page .about-final-cta__inner {
        position: relative;
        z-index: 1;

        width: min(1100px, calc(100% - 160px));
        margin: 0 auto;

        display: flex;
        flex-direction: column;
        align-items: center;

        text-align: center;
    }

    /* ==========================================
       02 — HEADING
    ========================================== */

    .about-us-page .about-final-cta__heading {
        max-width: 1050px;
        margin: 0 0 18px;
        padding: 0;

        font-family: "Cardo", Georgia, serif;
        font-size: clamp(39px, 3.6vw, 53px);
        font-weight: 400;
        line-height: 1.14;
        letter-spacing: -0.025em;

        color: #FFF9F2;

        text-shadow:
            0 3px 12px rgba(71, 35, 24, 0.12);
    }

    /* ==========================================
       03 — DESCRIPTION
    ========================================== */

    .about-us-page .about-final-cta__description {
        max-width: 710px;
        margin: 0 auto 29px;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 15px;
        font-weight: 400;
        line-height: 1.7;

        color: rgba(255, 249, 242, 0.95);
    }

    /* ==========================================
       04 — BUTTON GROUP
    ========================================== */

    .about-us-page .about-final-cta__actions {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;

        gap: 15px;
        margin: 0;
        padding: 0;
    }

    /* SHARED BUTTON DESIGN */

    .about-us-page .about-final-cta__button {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        gap: 13px;
        min-height: 48px;

        padding: 13px 23px;
        box-sizing: border-box;

        border-radius: 5px;
        border: 1px solid transparent;

        font-family: "Inter", sans-serif;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.3;
        letter-spacing: 0;

        text-decoration: none;
        white-space: nowrap;

        cursor: pointer;

        transition:
            background-color 0.35s ease,
            border-color 0.35s ease,
            color 0.35s ease,
            transform 0.45s cubic-bezier(.22,1,.36,1),
            box-shadow 0.45s cubic-bezier(.22,1,.36,1);
    }

    /* ==========================================
       05 — PRIMARY BUTTON
    ========================================== */

    .about-us-page .about-final-cta__button--primary {
        background: #F7F0E6;
        color: #303B32;

        border-color: #F7F0E6;

        box-shadow:
            0 8px 19px rgba(65, 32, 23, 0.15),
            0 2px 6px rgba(65, 32, 23, 0.07);
    }

    .about-us-page .about-final-cta__button--primary:hover {
        background: #FFFFFF;
        border-color: #FFFFFF;
        color: #303B32;

        transform: translateY(-3px);

        box-shadow:
            0 13px 28px rgba(65, 32, 23, 0.20),
            0 4px 11px rgba(65, 32, 23, 0.10);
    }

    /* ==========================================
       06 — SECONDARY BUTTON
    ========================================== */

    .about-us-page .about-final-cta__button--secondary {
        background: transparent;
        color: #FFF9F2;

        border: 1px solid rgba(255, 249, 242, 0.85);

        box-shadow:
            0 5px 14px rgba(65, 32, 23, 0.07);
    }

    .about-us-page .about-final-cta__button--secondary:hover {
        background: rgba(255, 249, 242, 0.11);
        border-color: #FFF9F2;
        color: #FFFFFF;

        transform: translateY(-3px);

        box-shadow:
            0 11px 25px rgba(65, 32, 23, 0.15);
    }

    /* ==========================================
       07 — BUTTON ARROWS
    ========================================== */

    .about-us-page .about-final-cta__arrow {
        display: inline-block;

        font-family: "Inter", sans-serif;
        font-size: 19px;
        font-weight: 400;
        line-height: 0.8;

        transition:
            transform 0.35s cubic-bezier(.22,1,.36,1);
    }

    .about-us-page .about-final-cta__button:hover
    .about-final-cta__arrow {
        transform: translateX(4px);
    }

    /* KEYBOARD ACCESSIBILITY */

    .about-us-page .about-final-cta__button:focus-visible {
        outline: 3px solid #303B32;
        outline-offset: 4px;
    }

    /* ==========================================
       08 — SCROLL ENTRANCE ANIMATIONS
    ========================================== */

    @supports (animation-timeline: view()) {

        .about-us-page .about-final-cta__heading {
            animation: frayoraCtaHeadingReveal 0.85s
                cubic-bezier(.22,1,.36,1) both;

            animation-timeline: view();
            animation-range: entry 0% entry 65%;
        }

        .about-us-page .about-final-cta__description {
            animation: frayoraCtaDescriptionReveal 0.9s
                cubic-bezier(.22,1,.36,1) both;

            animation-timeline: view();
            animation-range: entry 0% entry 70%;
        }

        .about-us-page .about-final-cta__actions {
            animation: frayoraCtaButtonsReveal 0.9s
                cubic-bezier(.22,1,.36,1) both;

            animation-timeline: view();
            animation-range: entry 0% entry 80%;
        }
    }

    @keyframes frayoraCtaHeadingReveal {
        from {
            opacity: 0;
            translate: 0 24px;
        }

        to {
            opacity: 1;
            translate: 0 0;
        }
    }

    @keyframes frayoraCtaDescriptionReveal {
        from {
            opacity: 0;
            translate: 0 18px;
        }

        to {
            opacity: 1;
            translate: 0 0;
        }
    }

    @keyframes frayoraCtaButtonsReveal {
        from {
            opacity: 0;
            translate: 0 16px;
        }

        to {
            opacity: 1;
            translate: 0 0;
        }
    }

    /* ==========================================
       09 — SMALLER DESKTOP
       1101px–1350px
    ========================================== */

    @media (max-width: 1350px) {

        .about-us-page .about-final-cta {
            min-height: 350px;
            padding: 65px 0 70px;
        }

        .about-us-page .about-final-cta__inner {
            width: calc(100% - 100px);
        }

        .about-us-page .about-final-cta__heading {
            font-size: clamp(38px, 3.5vw, 47px);
        }
    }

    /* ==========================================
       10 — REDUCED MOTION
    ========================================== */

    @media (prefers-reduced-motion: reduce) {

        .about-us-page .about-final-cta__heading,
        .about-us-page .about-final-cta__description,
        .about-us-page .about-final-cta__actions {
            animation: none !important;
            opacity: 1 !important;
            transform: none !important;
            translate: none !important;
        }

        .about-us-page .about-final-cta__button,
        .about-us-page .about-final-cta__arrow {
            transition: none !important;
        }

        .about-us-page .about-final-cta__button:hover,
        .about-us-page .about-final-cta__button:hover
        .about-final-cta__arrow {
            transform: none !important;
        }
    }
}





/* =====================================================
   FRAYORA — ABOUT US
   SECTION 08: FINAL CALL TO ACTION
   TABLET ONLY: 600px–1100px

   Muted clay-brown editorial CTA
   Manrope + Inter
   Refined buttons, soft shadows and scroll reveals
===================================================== */

@media (min-width: 600px) and (max-width: 1100px) {

    /* ==========================================
       01 — MAIN SECTION
    ========================================== */

    .about-us-page .about-final-cta {
        position: relative;
        isolation: isolate;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 100vw;
        max-width: none;
        min-height: 400px;
        height: auto;

        margin: 0 0 0 calc(50% - 50vw);
        padding: 85px 0 90px;

        box-sizing: border-box;

        background-color: #A66B56;

background-color: #A66B56;

background-color: #A66B56;

background-image:
    /* Soft warm illumination across the left */
    radial-gradient(
        ellipse 75% 130% at 12% 32%,
        rgba(220, 151, 122, 0.23) 0%,
        rgba(220, 151, 122, 0.07) 52%,
        transparent 85%
    ),

    /* Subtle luminous warmth toward the bottom */
    radial-gradient(
        ellipse 75% 110% at 72% 100%,
        rgba(202, 126, 105, 0.15) 0%,
        transparent 80%
    ),

    /* Smooth horizontal transition inspired by Bond */
    linear-gradient(
        105deg,
        #AD735D 0%,
        #A66B56 32%,
        #935D50 65%,
        #634D4D 100%
    );

background-repeat: no-repeat;
        color: #F7F0E6;

        overflow: hidden;
    }

    /* ==========================================
       02 — INNER CONTENT
    ========================================== */

    .about-us-page .about-final-cta__inner {
        position: relative;
        z-index: 1;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        width: calc(100% - 100px);
        max-width: 900px;

        margin: 0 auto;
        padding: 0;

        box-sizing: border-box;
        text-align: center;
    }

    /* ==========================================
       03 — HEADING
    ========================================== */

    .about-us-page .about-final-cta__heading {
        width: 100%;
        max-width: 830px;

        margin: 0 0 20px;
        padding: 0;

        font-family: "Manrope", sans-serif;
        font-size: clamp(36px, 4.5vw, 49px);
        font-weight: 600;
        line-height: 1.16;
        letter-spacing: -0.045em;

        color: #FFF9F2;
        text-align: center;
        text-wrap: balance;

        text-shadow:
            0 3px 12px rgba(71, 35, 24, 0.10);
    }

    /* ==========================================
       04 — DESCRIPTION
    ========================================== */

    .about-us-page .about-final-cta__description {
        width: 100%;
        max-width: 680px;

        margin: 0 auto 32px;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 15px;
        font-weight: 400;
        line-height: 1.75;

        color: rgba(255, 249, 242, 0.94);
        text-align: center;
    }

    /* ==========================================
       05 — BUTTON GROUP
    ========================================== */

    .about-us-page .about-final-cta__actions {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;

        width: 100%;
        gap: 15px;

        margin: 0;
        padding: 0;
    }

    /* SHARED BUTTON STYLE */

    .about-us-page .about-final-cta__button {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        gap: 13px;

        min-height: 52px;
        padding: 14px 24px;

        box-sizing: border-box;

        border: 1px solid transparent;
        border-radius: 5px;

        font-family: "Manrope", sans-serif;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.3;
        letter-spacing: -0.015em;

        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;

        transition:
            background-color 0.35s ease,
            border-color 0.35s ease,
            color 0.35s ease,
            transform 0.45s cubic-bezier(.22,1,.36,1),
            box-shadow 0.45s cubic-bezier(.22,1,.36,1);
    }

    /* ==========================================
       06 — PRIMARY BUTTON
    ========================================== */

    .about-us-page .about-final-cta__button--primary {
        background: #F7F0E6;
        color: #303B32;

        border-color: #F7F0E6;

        box-shadow:
            0 7px 17px rgba(65, 32, 23, 0.13),
            0 2px 5px rgba(65, 32, 23, 0.06);
    }

    .about-us-page .about-final-cta__button--primary:hover {
        background: #FFFFFF;
        border-color: #FFFFFF;
        color: #303B32;

        transform: translateY(-3px);

        box-shadow:
            0 12px 25px rgba(65, 32, 23, 0.18),
            0 4px 10px rgba(65, 32, 23, 0.09);
    }

    /* ==========================================
       07 — SECONDARY BUTTON
    ========================================== */

    .about-us-page .about-final-cta__button--secondary {
        background: transparent;
        color: #FFF9F2;

        border-color: rgba(255, 249, 242, 0.82);

        box-shadow:
            0 5px 14px rgba(65, 32, 23, 0.05);
    }

    .about-us-page .about-final-cta__button--secondary:hover {
        background: rgba(255, 249, 242, 0.12);
        border-color: #FFF9F2;
        color: #FFFFFF;

        transform: translateY(-3px);

        box-shadow:
            0 10px 23px rgba(65, 32, 23, 0.12);
    }

    /* ==========================================
       08 — BUTTON ARROWS
    ========================================== */

    .about-us-page .about-final-cta__arrow {
        display: inline-block;

        font-family: "Inter", sans-serif;
        font-size: 19px;
        font-weight: 400;
        line-height: 0.8;

        transition:
            transform 0.35s cubic-bezier(.22,1,.36,1);
    }

    .about-us-page .about-final-cta__button:hover
    .about-final-cta__arrow {
        transform: translateX(4px);
    }

    /* KEYBOARD ACCESSIBILITY */

    .about-us-page .about-final-cta__button:focus-visible {
        outline: 3px solid #303B32;
        outline-offset: 4px;
    }

    /* ==========================================
       09 — SCROLL ENTRANCE ANIMATIONS
    ========================================== */

    @keyframes frayoraTabletCtaReveal {
        from {
            opacity: 0;
            translate: 0 24px;
        }

        to {
            opacity: 1;
            translate: 0 0;
        }
    }

    @supports (animation-timeline: view()) {

        .about-us-page .about-final-cta__heading {
            animation: frayoraTabletCtaReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 65%;
        }

        .about-us-page .about-final-cta__description {
            animation: frayoraTabletCtaReveal linear both;
            animation-timeline: view();
            animation-range: entry 5% entry 70%;
        }

        .about-us-page .about-final-cta__actions {
            animation: frayoraTabletCtaReveal linear both;
            animation-timeline: view();
            animation-range: entry 10% entry 75%;
        }
    }

    /* ==========================================
       10 — SMALLER TABLETS
       600px–767px
    ========================================== */

    @media (max-width: 767px) {

        .about-us-page .about-final-cta {
            min-height: 0;
            padding: 75px 0 80px;
        }

        .about-us-page .about-final-cta__inner {
            width: calc(100% - 60px);
        }

        .about-us-page .about-final-cta__heading {
            font-size: clamp(32px, 5vw, 39px);
            margin-bottom: 18px;
        }

        .about-us-page .about-final-cta__description {
            font-size: 14px;
            margin-bottom: 28px;
        }

        .about-us-page .about-final-cta__actions {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 12px;
}

        .about-us-page .about-final-cta__button {
    width: fit-content;
    max-width: 100%;
    min-height: 48px;
    padding: 12px 20px;
}
    }

    /* ==========================================
       11 — REDUCED MOTION
    ========================================== */

    @media (prefers-reduced-motion: reduce) {

        .about-us-page .about-final-cta__heading,
        .about-us-page .about-final-cta__description,
        .about-us-page .about-final-cta__actions {
            animation: none !important;
            opacity: 1 !important;
            transform: none !important;
            translate: none !important;
            transition: none !important;
        }

        .about-us-page .about-final-cta__button,
        .about-us-page .about-final-cta__arrow {
            transition: none !important;
        }

        .about-us-page .about-final-cta__button:hover,
        .about-us-page .about-final-cta__button:hover
        .about-final-cta__arrow {
            transform: none !important;
        }
    }
}





/* =====================================================
   FRAYORA — ABOUT US / SECTION 08
   FINAL CALL TO ACTION
   MOBILE ONLY: 0px–599px

   Muted clay-brown background
   Manrope + Inter typography
   Two vertically stacked buttons
   Soft shadows and scroll animations
===================================================== */

@media (max-width: 599px) {

    /* ==========================================
       01 — MAIN SECTION
    ========================================== */

    .about-us-page .about-final-cta {
        position: relative;
        isolation: isolate;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 100vw;
        max-width: none;
        min-height: 0;
        height: auto;

        margin: 0 0 0 calc(50% - 50vw);
        padding: 78px 0 82px;

        box-sizing: border-box;

        background-color: #A66B56;

background-color: #A66B56;

background-color: #A66B56;

background-image:
    /* Soft warm illumination across the left */
    radial-gradient(
        ellipse 75% 130% at 12% 32%,
        rgba(220, 151, 122, 0.23) 0%,
        rgba(220, 151, 122, 0.07) 52%,
        transparent 85%
    ),

    /* Subtle luminous warmth toward the bottom */
    radial-gradient(
        ellipse 75% 110% at 72% 100%,
        rgba(202, 126, 105, 0.15) 0%,
        transparent 80%
    ),

    /* Smooth horizontal transition inspired by Bond */
    linear-gradient(
        105deg,
        #AD735D 0%,
        #A66B56 32%,
        #935D50 65%,
        #634D4D 100%
    );

background-repeat: no-repeat;
        color: #F7F0E6;

        overflow: hidden;
    }

    /* ==========================================
       02 — INNER CONTENT
    ========================================== */

    .about-us-page .about-final-cta__inner {
        position: relative;
        z-index: 1;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        width: calc(100% - 40px);
        max-width: 510px;

        margin: 0 auto;
        padding: 0;

        box-sizing: border-box;
        text-align: center;
    }

    /* ==========================================
       03 — HEADING
    ========================================== */

    .about-us-page .about-final-cta__heading {
        width: 100%;
        max-width: 470px;

        margin: 0 0 21px;
        padding: 0;

        font-family: "Manrope", sans-serif;
        font-size: clamp(30px, 7.4vw, 40px);
        font-weight: 600;
        line-height: 1.2;
        letter-spacing: -0.045em;

        color: #FFF9F2;
        text-align: center;
        text-wrap: balance;

        text-shadow:
            0 2px 10px rgba(71, 35, 24, 0.08);
    }

    /* ==========================================
       04 — DESCRIPTION
    ========================================== */

    .about-us-page .about-final-cta__description {
        width: 100%;
        max-width: 450px;

        margin: 0 auto 31px;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 13.5px;
        font-weight: 400;
        line-height: 1.75;

        color: rgba(255, 249, 242, 0.94);
        text-align: center;
    }

    /* ==========================================
       05 — VERTICALLY STACKED BUTTONS
    ========================================== */

    .about-us-page .about-final-cta__actions {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        width: 100%;
        max-width: 230px;

        gap: 12px;
        margin: 0 auto;
        padding: 0;

        box-sizing: border-box;
    }

    /* SHARED BUTTON STYLE */

    .about-us-page .about-final-cta__button {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        min-width: 0;
        min-height: 52px;

        gap: 10px;
        margin: 0;
        padding: 12px 20px;

        box-sizing: border-box;

        border: 1px solid transparent;
        border-radius: 5px;

        font-family: "Manrope", sans-serif;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.35;
        letter-spacing: -0.02em;

        text-align: center;
        text-decoration: none;
        white-space: nowrap;

        cursor: pointer;

        transition:
            background-color 0.35s ease,
            border-color 0.35s ease,
            color 0.35s ease,
            transform 0.4s cubic-bezier(.22,1,.36,1),
            box-shadow 0.4s ease;
    }

    /* ==========================================
       06 — PRIMARY BUTTON
    ========================================== */

    .about-us-page .about-final-cta__button--primary {
        background: #F7F0E6;
        color: #303B32;

        border-color: #F7F0E6;

        box-shadow:
            0 7px 17px rgba(65,32,23,0.12),
            0 2px 5px rgba(65,32,23,0.05);
    }

    .about-us-page .about-final-cta__button--primary:hover {
        background: #FFFFFF;
        border-color: #FFFFFF;
        color: #303B32;

        transform: translateY(-2px);

        box-shadow:
            0 11px 23px rgba(65,32,23,0.16);
    }

    /* ==========================================
       07 — SECONDARY BUTTON
    ========================================== */

    .about-us-page .about-final-cta__button--secondary {
        background: transparent;
        color: #FFF9F2;

        border-color: rgba(255,249,242,0.82);

        box-shadow:
            0 5px 12px rgba(65,32,23,0.04);
    }

    .about-us-page .about-final-cta__button--secondary:hover {
        background: rgba(255,249,242,0.12);
        border-color: #FFF9F2;
        color: #FFFFFF;

        transform: translateY(-2px);
    }

    /* ==========================================
       08 — BUTTON ARROWS
    ========================================== */

    .about-us-page .about-final-cta__arrow {
        display: inline-block;
        flex: 0 0 auto;

        font-family: "Inter", sans-serif;
        font-size: 18px;
        font-weight: 400;
        line-height: 1;

        transition:
            transform 0.35s cubic-bezier(.22,1,.36,1);
    }

    .about-us-page .about-final-cta__button:hover
    .about-final-cta__arrow {
        transform: translateX(4px);
    }

    /* KEYBOARD ACCESSIBILITY */

    .about-us-page .about-final-cta__button:focus-visible {
        outline: 3px solid #303B32;
        outline-offset: 4px;
    }

    /* ==========================================
       09 — SCROLL ANIMATIONS
    ========================================== */

    @keyframes frayoraMobileCtaReveal {
        from {
            opacity: 0;
            translate: 0 22px;
        }

        to {
            opacity: 1;
            translate: 0 0;
        }
    }

    @supports (animation-timeline: view()) {

        .about-us-page .about-final-cta__heading {
            animation: frayoraMobileCtaReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 60%;
        }

        .about-us-page .about-final-cta__description {
            animation: frayoraMobileCtaReveal linear both;
            animation-timeline: view();
            animation-range: entry 5% entry 65%;
        }

        .about-us-page .about-final-cta__actions {
            animation: frayoraMobileCtaReveal linear both;
            animation-timeline: view();
            animation-range: entry 10% entry 70%;
        }
    }

    /* ==========================================
       10 — SMALL PHONES
       0px–390px
    ========================================== */

    @media (max-width: 390px) {

        .about-us-page .about-final-cta {
            padding: 67px 0 72px;
        }

        .about-us-page .about-final-cta__inner {
            width: calc(100% - 32px);
        }

        .about-us-page .about-final-cta__heading {
            font-size: clamp(27px, 7.5vw, 31px);
            margin-bottom: 18px;
        }

        .about-us-page .about-final-cta__description {
            font-size: 13px;
            line-height: 1.7;
            margin-bottom: 27px;
        }

        .about-us-page .about-final-cta__actions {
            max-width: 220px;
            gap: 10px;
        }

        .about-us-page .about-final-cta__button {
            min-height: 50px;
            padding: 11px 16px;
            font-size: 11px;
        }

        .about-us-page .about-final-cta__arrow {
            font-size: 16px;
        }
    }

    /* ==========================================
       11 — REDUCED MOTION
    ========================================== */

    @media (prefers-reduced-motion: reduce) {

        .about-us-page .about-final-cta__heading,
        .about-us-page .about-final-cta__description,
        .about-us-page .about-final-cta__actions {
            animation: none !important;

            opacity: 1 !important;
            transform: none !important;
            translate: none !important;
        }

        .about-us-page .about-final-cta__button,
        .about-us-page .about-final-cta__arrow {
            transition: none !important;
        }

        .about-us-page .about-final-cta__button:hover,
        .about-us-page .about-final-cta__button:hover
        .about-final-cta__arrow {
            transform: none !important;
        }
    }
}




/* ==================================================================
   FRAYORA — ABOUT US — SHARED TYPOGRAPHY REFINEMENTS
   Kept AFTER all eight sections to preserve existing override order.
================================================================== */

/* =====================================================
   FRAYORA — ABOUT US
   UNIFIED MODERN TYPOGRAPHY
   DESKTOP ONLY: 1101px+

   Manrope    — All headings and statements
   Inter      — Body copy, labels and supporting text
   Parisienne — Founder signature

   No Cardo typography on this page
===================================================== */

@media (min-width: 1101px) {

    /* =========================================
       01 — HERO TITLE
    ========================================= */

    .about-us-page .about-hero__title {
        font-family: "Manrope", sans-serif;
        font-size: clamp(70px, 6.5vw, 100px);
        font-weight: 600;
        line-height: 1.05;
        letter-spacing: -0.055em;
    }

    /* =========================================
       02 — LARGE INTRODUCTORY QUOTE
    ========================================= */

    /* MAIN STATEMENT */

    .about-us-page .about-summary__quote,
    .about-us-page .about-summary blockquote,
    .about-us-page .about-summary blockquote p {

        font-family: "Manrope", sans-serif;

        font-size: clamp(28px, 2.2vw, 34px);
        font-weight: 500;

        line-height: 1.48;
        letter-spacing: -0.035em;

        color: #1F211D;

        text-align: center;
        text-wrap: balance;
    }

    /* TERRACOTTA EMPHASIS */

    .about-us-page .about-summary__quote em,
    .about-us-page .about-summary blockquote em {

        font-family: "Manrope", sans-serif;

        font-weight: 500;
        font-style: italic;

        color: #C96743;
    }

    /* =========================================
       03 — ALL MAIN SECTION HEADINGS
    ========================================= */

    .about-us-page .about-why__title,
    .about-us-page .about-founder__title,
    .about-us-page .about-missing-layer__heading,
    .about-us-page .about-method__heading,
    .about-us-page .about-values-mission__heading,
    .about-us-page .about-values-mission__mission-heading,
    .about-us-page .about-final-cta__heading {
        font-family: "Manrope", sans-serif;
        font-weight: 600;
        line-height: 1.14;
        letter-spacing: -0.045em;
    }

    /* SECTION HEADING SIZES */

    .about-us-page .about-why__title {
        font-size: clamp(36px, 3vw, 46px);
    }

    .about-us-page .about-founder__title {
        font-size: clamp(36px, 2.9vw, 45px);
    }

    .about-us-page .about-missing-layer__heading {
        font-size: clamp(36px, 3vw, 46px);
    }

    .about-us-page .about-method__heading {
        font-size: clamp(36px, 2.9vw, 46px);
    }

    .about-us-page .about-values-mission__heading {
        font-size: clamp(34px, 2.75vw, 43px);
    }

    .about-us-page .about-values-mission__mission-heading {
        font-size: clamp(32px, 2.6vw, 41px);
    }

    .about-us-page .about-final-cta__heading {
        font-size: clamp(38px, 3.4vw, 50px);
    }

    /* =========================================
       04 — CARD & METHODOLOGY HEADINGS
    ========================================= */

    .about-us-page .about-why__card-title,
    .about-us-page .about-method__step-title,
    .about-us-page .about-values-mission__value-content h3,
    .about-us-page .about-missing-layer__card-subtitle {
        font-family: "Manrope", sans-serif;
        font-weight: 600;
        line-height: 1.28;
        letter-spacing: -0.03em;
    }

    .about-us-page .about-why__card-title {
        font-size: clamp(19px, 1.5vw, 23px);
    }

    .about-us-page .about-method__step-title {
        font-size: clamp(20px, 1.6vw, 25px);
    }

    .about-us-page .about-values-mission__value-content h3 {
        font-size: clamp(18px, 1.4vw, 21px);
    }

    /* =========================================
       05 — DIAGRAM TYPOGRAPHY
    ========================================= */

    .about-us-page .about-missing-layer__node-label,
    .about-us-page .about-missing-layer__foundation-core span,
    .about-us-page .about-missing-layer__keywords span {
        font-family: "Manrope", sans-serif;
        font-weight: 600;
        letter-spacing: -0.015em;
    }

    /* =========================================
       06 — CLOSING STATEMENTS
    ========================================= */

    .about-us-page .about-missing-layer__closing h3,
    .about-us-page .about-method__closing h3,
    .about-us-page .about-values-mission__mission-closing {
        font-family: "Manrope", sans-serif;
font-size: 26px;
font-weight: 500;
line-height: 1.45;
letter-spacing: -0.025em;
    }

    /* =========================================
       07 — BODY COPY
    ========================================= */

    .about-us-page .about-why__card-copy,
    .about-us-page .about-founder__body p,
    .about-us-page .about-missing-layer__body p,
    .about-us-page .about-method__description,
    .about-us-page .about-method__step-text,
    .about-us-page .about-values-mission__description,
    .about-us-page .about-values-mission__value-content p,
    .about-us-page .about-values-mission__mission-description,
    .about-us-page .about-final-cta__description {
        font-family: "Inter", sans-serif;
        font-weight: 400;
        letter-spacing: 0;
    }

    /* =========================================
       08 — EYEBROWS
    ========================================= */

    .about-us-page .about-method__eyebrow,
    .about-us-page .about-missing-layer__eyebrow,
    .about-us-page .about-values-mission__eyebrow {
        font-family: "Inter", sans-serif;
        font-weight: 600;
        letter-spacing: 0.10em;
    }

    /* =========================================
       09 — CTA BUTTONS
    ========================================= */

    .about-us-page .about-final-cta__button {
        font-family: "Manrope", sans-serif;
        font-weight: 600;
        letter-spacing: -0.015em;
    }

    /* =========================================
       10 — FOUNDER SIGNATURE
       NEVER REPLACE WITH MANROPE
    ========================================= */

    .about-us-page .about-founder__name {
        font-family: "Parisienne", cursive;
        font-weight: 400;
        font-style: normal;
        letter-spacing: 0;
        color: #394235;
    }

    .about-us-page .about-founder__caption {
        font-family: "Inter", sans-serif;
        font-weight: 400;
    }

}



/* ==========================================
   FRAYORA — GLOBAL FOOTER
   TERRACOTTA BUTTONS
   ALL PAGES / ALL SCREEN SIZES
========================================== */

.site-footer {
    --footer-accent: #D66A43;
    --footer-button: #D66A43;
}

/* LINKEDIN & INSTAGRAM BUTTONS */

.site-footer .site-footer__socials a {
    background-color: #D66A43;
}

/* BOOK A CALL BUTTON */

.site-footer .site-footer__book {
    background-color: #D66A43;
}

/* HOVER — SUBTLE DEPTH */

@media (hover: hover) {

    .site-footer .site-footer__socials a:hover,
    .site-footer .site-footer__book:hover {
        background-color: #D66A43;
        filter: brightness(1.08);
    }
}




/* =====================================================
   FRAYORA — GLOBAL REVEAL SYSTEM
   ALL PAGES / ALL SCREEN SIZES
===================================================== */

.frayora-reveal {
    --reveal-blur: 3px;
    --reveal-move: 22px;
    --reveal-speed: 850ms;
}

/* Only hide elements prepared by JavaScript */

.frayora-reveal.frayora-reveal--ready:not(
    .frayora-reveal--visible
) {
    opacity: 0;
    filter: blur(var(--reveal-blur));
    translate: 0 var(--reveal-move);
}

.frayora-reveal.frayora-reveal--ready {
    transition:
        opacity var(--reveal-speed)
            cubic-bezier(.22,1,.36,1),
        filter var(--reveal-speed)
            cubic-bezier(.22,1,.36,1),
        translate var(--reveal-speed)
            cubic-bezier(.22,1,.36,1);
}

.frayora-reveal.frayora-reveal--visible {
    opacity: 1;
    filter: blur(0);
    translate: 0 0;
}

/* TABLET */

@media (min-width: 600px) and (max-width: 1100px) {
    .frayora-reveal {
        --reveal-blur: 2.5px;
        --reveal-move: 18px;
        --reveal-speed: 800ms;
    }
}

/* MOBILE */

@media (max-width: 599px) {
    .frayora-reveal {
        --reveal-blur: 2px;
        --reveal-move: 14px;
        --reveal-speed: 700ms;
    }
}

/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {
    .frayora-reveal,
    .frayora-reveal.frayora-reveal--ready {
        opacity: 1 !important;
        filter: none !important;
        translate: none !important;
        transition: none !important;
    }
}

/* Recovery: preserve legacy animation rules; retain latest global reveal overrides. */
/* =====================================================
   FRAYORA — ONE SITEWIDE SCROLL REVEAL
   Section 02 onward / desktop, tablet, mobile
   Controlled only by the global footer script.
===================================================== */
.frayora-reveal {
    --fr-blur: 3px;
    --fr-shift: 22px;
    --fr-time: 850ms;
}
.frayora-reveal.frayora-reveal--ready {
    transition:
        opacity var(--fr-time) cubic-bezier(.22,1,.36,1),
        translate var(--fr-time) cubic-bezier(.22,1,.36,1),
        filter var(--fr-time) cubic-bezier(.22,1,.36,1) !important;
}
/* Use specificity to beat old page-specific opacity rules. */
.frayora-reveal.frayora-reveal--ready:not(.frayora-reveal--visible) {
    opacity: 0 !important;
    translate: 0 var(--fr-shift);
}
.frayora-reveal--text.frayora-reveal--ready:not(.frayora-reveal--visible) {
    filter: blur(var(--fr-blur)) !important;
}
.frayora-reveal.frayora-reveal--visible {
    opacity: 1 !important;
    translate: 0 0;
}
.frayora-reveal--text.frayora-reveal--visible {
    filter: blur(0) !important;
}
@media (min-width:600px) and (max-width:1100px) {
    .frayora-reveal { --fr-blur:2.5px; --fr-shift:18px; --fr-time:800ms; }
}
@media (max-width:599px) {
    .frayora-reveal { --fr-blur:2px; --fr-shift:14px; --fr-time:700ms; }
}
@media (prefers-reduced-motion:reduce) {
    .frayora-reveal.frayora-reveal--ready {
        opacity:1 !important; translate:none !important;
        transition:none !important;
    }
    .frayora-reveal--text.frayora-reveal--ready { filter:none !important; }
}



/* =========================================================
   FRAYORA — HOMEPAGE
   SECTION 01 — ROLLING HILLS HERO
   DESKTOP ONLY: 1101px+

   Bond-inspired 720px hero
   Full-width editorial landscape
   Directional olive overlay
   Soft luminous atmosphere
   Manrope + Inter typography
   Staggered entrance animations
========================================================= */

@media (min-width: 1101px) {

    /* =========================================
       01 — HERO CONTAINER
    ========================================= */

    body .frayora-home-hero {
        position: relative;
        isolation: isolate;

        display: flex;
        align-items: center;

        width: 100vw;
        max-width: none;

        height: 720px;
        min-height: 720px;

        margin: 0 0 0 calc(50% - 50vw);
        padding: 0;

        overflow: hidden;
        box-sizing: border-box;

        background-color: #283327;
        border: 0;
        border-radius: 0;
    }

    body .frayora-home-hero *,
    body .frayora-home-hero *::before,
    body .frayora-home-hero *::after {
        box-sizing: border-box;
    }

    /* =========================================
       02 — FULL-WIDTH LANDSCAPE IMAGE
    ========================================= */

    body .frayora-home-hero__media {
        position: absolute;
        inset: 0;
        z-index: 0;

        display: block;

        width: 100%;
        height: 100%;

        background-image:
            url("../images/Homepage/homepage-hero-desktop-rolling-hills.png");

        background-size: cover;
        background-position: center 52%;
        background-repeat: no-repeat;

        transform: scale(1.045);
        transform-origin: center center;

        animation:
            frayoraHomeHillsPhotoIn 1.8s
            cubic-bezier(.22, 1, .36, 1) both;

        transition:
            transform 1.4s cubic-bezier(.22, 1, .36, 1);
    }

    /* =========================================
       03 — DARK OLIVE GRADIENT
       More contrast on left, brighter on right
    ========================================= */

    body .frayora-home-hero__overlay {
        position: absolute;
        inset: 0;
        z-index: 1;

        display: block;

        width: 100%;
        height: 100%;

        background-color: transparent;

        background-image:
            linear-gradient(
                90deg,
                rgba(17, 28, 21, 0.78) 0%,
                rgba(17, 28, 21, 0.69) 22%,
                rgba(17, 28, 21, 0.51) 43%,
                rgba(17, 28, 21, 0.25) 66%,
                rgba(17, 28, 21, 0.07) 100%
            );

        background-repeat: no-repeat;
        pointer-events: none;
    }

    
/* =========================================
   FRAYORA — HOMEPAGE HERO
   ENHANCED LUMINOUS EFFECT
   DESKTOP ONLY
========================================= */

@media (min-width: 1101px) {

    body .frayora-home-hero__overlay::after {
        content: "";

        position: absolute;
        inset: 0;

        background-image:

            /* Soft olive illumination on left */
            radial-gradient(
                ellipse 80% 100% at 12% 45%,
                rgba(142, 165, 124, 0.16) 0%,
                rgba(142, 165, 124, 0.06) 50%,
                transparent 85%
            ),

            /* Sunlit atmospheric glow on right */
            radial-gradient(
                ellipse 75% 95% at 90% 25%,
                rgba(255, 221, 165, 0.13) 0%,
                rgba(255, 221, 165, 0.045) 55%,
                transparent 90%
            ),

            /* Very soft lower landscape illumination */
            radial-gradient(
                ellipse 100% 80% at 52% 100%,
                rgba(157, 170, 125, 0.075) 0%,
                transparent 85%
            );

        background-repeat: no-repeat;
        pointer-events: none;
    }
}


    /* =========================================
       05 — INNER CONTENT
    ========================================= */

    body .frayora-home-hero__inner {
        position: relative;
        z-index: 2;

        display: flex;
        align-items: center;
        justify-content: flex-start;

        width: 100%;
        max-width: 1600px;

        height: 100%;
        min-height: 720px;

        margin: 0 auto;
        padding: 88px 80px 84px 80px;

        text-align: left;
    }

    body .frayora-home-hero__content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        width: 100%;
        max-width: 900px;

        margin: 0;
        padding: 0;

        text-align: left;
    }

    /* =========================================
       06 — HERO HEADING
    ========================================= */

    body .frayora-home-hero__title {
        width: 100%;
        max-width: 900px;

        margin: 0;
        padding: 0;

        font-family: "Manrope", sans-serif !important;
        font-size: clamp(68px, 5.4vw, 100px);
        font-weight: 600;
        font-style: normal;

        line-height: 1.04;
        letter-spacing: -0.058em;

        color: #F8F3EB !important;

        text-align: left;
        text-wrap: balance;

        text-shadow:
            0 3px 20px rgba(0, 0, 0, 0.13);

        animation:
            frayoraHomeHillsReveal 1s
            cubic-bezier(.22, 1, .36, 1)
            0.18s both;
    }

    /* =========================================
       07 — BODY DESCRIPTION
    ========================================= */

    body .frayora-home-hero__description {
        width: 100%;
        max-width: 610px;

        margin: 28px 0 0;
        padding: 0;

        font-family: "Inter", sans-serif !important;
        font-size: 15px;
        font-weight: 400;

        line-height: 1.75;
        letter-spacing: 0;

        color: rgba(248, 243, 235, 0.94) !important;

        text-align: left;

        animation:
            frayoraHomeHillsReveal 0.95s
            cubic-bezier(.22, 1, .36, 1)
            0.35s both;
    }

    /* =========================================
       08 — CTA CONTAINER
    ========================================= */

    body .frayora-home-hero__actions {
        display: flex;
        align-items: center;
        justify-content: flex-start;

        flex-wrap: wrap;
        gap: 16px;

        width: 100%;

        margin: 34px 0 0;
        padding: 0;

        animation:
            frayoraHomeHillsReveal 0.9s
            cubic-bezier(.22, 1, .36, 1)
            0.50s both;
    }

    /* =========================================
       09 — SHARED BUTTON STYLES
    ========================================= */

    body .frayora-home-hero__button {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        gap: 18px;

        width: fit-content;
        min-height: 54px;

        margin: 0;
        padding: 0 28px;

        border: 1px solid transparent;
        border-radius: 999px;

        font-family: "Manrope", sans-serif !important;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.3;

        letter-spacing: -0.015em;
        text-decoration: none !important;
        white-space: nowrap;

        transition:
            background-color 0.35s ease,
            border-color 0.35s ease,
            color 0.35s ease,
            transform 0.35s ease,
            box-shadow 0.35s ease;
    }

    /* =========================================
       10 — PRIMARY BUTTON
    ========================================= */

    body .frayora-home-hero__button--primary {
        background: #C96743 !important;
        border-color: #C96743;

        color: #FFFFFF !important;

        box-shadow:
            0 9px 24px rgba(0, 0, 0, 0.16);
    }

    body .frayora-home-hero__button--primary:hover {
        background: #B95635 !important;
        border-color: #B95635;

        color: #FFFFFF !important;

        transform: translateY(-3px);

        box-shadow:
            0 14px 28px rgba(0, 0, 0, 0.22);
    }

    /* =========================================
       11 — SECONDARY BUTTON
    ========================================= */

    body .frayora-home-hero__button--secondary {
        background: rgba(248, 243, 235, 0.06) !important;

        border-color: rgba(248, 243, 235, 0.65);

        color: #F8F3EB !important;

        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }

    body .frayora-home-hero__button--secondary:hover {
        background: rgba(248, 243, 235, 0.16) !important;

        border-color: #F8F3EB;
        color: #FFFFFF !important;

        transform: translateY(-3px);
    }

    /* =========================================
       12 — BUTTON ARROWS
    ========================================= */

    body .frayora-home-hero__arrow {
        display: inline-block;

        font-size: 20px;
        line-height: 1;
        color: inherit;

        transition:
            transform 0.35s cubic-bezier(.22, 1, .36, 1);
    }

    body .frayora-home-hero__button:hover
    .frayora-home-hero__arrow {
        transform: translateX(5px);
    }

    body .frayora-home-hero__button:focus-visible {
        outline: 2px solid #F8F3EB;
        outline-offset: 4px;
    }

    /* =========================================
       13 — SUBTLE PHOTO DEPTH
    ========================================= */

    @media (hover: hover) {

        body .frayora-home-hero:hover
        .frayora-home-hero__media {
            transform: scale(1.018);
        }
    }

    /* =========================================
       14 — ENTRANCE ANIMATIONS
    ========================================= */

    @keyframes frayoraHomeHillsReveal {
        from {
            opacity: 0;
            transform: translateY(24px);
            filter: blur(4px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
            filter: blur(0);
        }
    }

    @keyframes frayoraHomeHillsPhotoIn {
        from {
            opacity: 0.82;
            transform: scale(1.045);
        }

        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    /* =========================================
       15 — SMALLER DESKTOP
    ========================================= */

    @media (max-width: 1350px) {

        body .frayora-home-hero__inner {
            padding-left: 65px;
            padding-right: 65px;
        }

        body .frayora-home-hero__content {
            max-width: 760px;
        }

        body .frayora-home-hero__title {
            font-size: clamp(59px, 5.2vw, 72px);
        }
    }

    /* =========================================
       16 — REDUCED MOTION
    ========================================= */

    @media (prefers-reduced-motion: reduce) {

        body .frayora-home-hero__media,
        body .frayora-home-hero__title,
        body .frayora-home-hero__description,
        body .frayora-home-hero__actions {
            animation: none !important;
            opacity: 1 !important;
            transform: none !important;
            filter: none !important;
        }

        body .frayora-home-hero__media,
        body .frayora-home-hero__button,
        body .frayora-home-hero__arrow {
            transition: none !important;
        }
    }

} /* END HOMEPAGE SECTION 01 — DESKTOP */



/* =========================================================
   FRAYORA — HOMEPAGE
   SECTION 02 — CONNECTED BUSINESS INFRASTRUCTURE
   DESKTOP ONLY: 1101px+

   Mockup-matched layout
   Luminous ivory background
   Six connected service items
   Terracotta flowing line
   Soft shadows / hover motion
   Editorial entrance animations
========================================================= */

@media (min-width: 1101px) {

    /* =========================================
       01 — FULL WIDTH SECTION
    ========================================= */

    body .infrastructure-section {
        position: relative;
        isolation: isolate;

        display: block;

        width: 100vw;
        max-width: none;

        min-height: 620px;
        height: auto;

        margin: 0 0 0 calc(50% - 50vw);
        padding: 0;

        box-sizing: border-box;
        overflow: hidden;

        background-color: #F8F3EB;

        background-image:
            radial-gradient(
                ellipse 65% 85% at 12% 16%,
                rgba(255,255,255,0.85) 0%,
                transparent 85%
            ),
            radial-gradient(
                ellipse 60% 85% at 90% 78%,
                rgba(225,210,190,0.14) 0%,
                transparent 85%
            ),
            radial-gradient(
                ellipse 58% 65% at 54% 40%,
                rgba(255,255,255,0.53) 0%,
                transparent 90%
            );

        background-repeat: no-repeat;
    }

    body .infrastructure-section *,
    body .infrastructure-section *::before,
    body .infrastructure-section *::after {
        box-sizing: border-box;
    }

    /* =========================================
       02 — INNER CONTAINER
    ========================================= */

    body .infrastructure-section__inner {
        position: relative;
        z-index: 1;

        display: flex;
        flex-direction: column;

        width: 100%;
        max-width: 1600px;

        margin: 0 auto;
        padding: 75px 80px 95px;
    }

    /* =========================================
       03 — TOP EDITORIAL INTRO
    ========================================= */

    body .infrastructure-section__content {
        display: grid;
        grid-template-columns:
            minmax(0, 1.3fr)
            minmax(0, 0.7fr);

        align-items: center;
        column-gap: 80px;

        width: 100%;

        margin: 0 0 72px;
        padding: 0;
    }

    body .infrastructure-section__heading-group {
        max-width: 740px;
    }

    /* EYEBROW */

    body .infrastructure-section__eyebrow {
        margin: 0 0 18px;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.4;

        letter-spacing: 0.10em;
        text-transform: uppercase;

        color: #C96743;
    }

    /* =========================================
       04 — SECTION HEADING
    ========================================= */

    body .infrastructure-section__heading-group h2 {
        margin: 0;
        padding: 0;

        font-family: "Manrope", sans-serif;
        font-size: clamp(36px, 3.2vw, 49px);
        font-weight: 600;
        font-style: normal;

        line-height: 1.14;
        letter-spacing: -0.052em;

        color: #1F211D;
        text-wrap: balance;
    }

    body .infrastructure-section__heading-group h2 span {
        display: block;

        font: inherit;
        color: #566449;
    }

    /* RIGHT DESCRIPTION */

    body .infrastructure-section__body {
        width: 100%;
        max-width: 410px;

        margin: 22px 0 0;
        padding: 0;

        justify-self: end;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.75;

        color: rgba(31,33,29,0.75);
    }

    /* =========================================
       05 — CONNECTED SERVICES DIAGRAM
    ========================================= */

    body .infrastructure-section__diagram {
        position: relative;

        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));

        align-items: start;
        column-gap: 22px;

        width: 100%;
        margin: 0;
        padding: 0;
    }

    /* =========================================
       06 — CONNECTING WAVE
    ========================================= */

    body .infrastructure-section__wave {
    display: none;
}

    body .infrastructure-section__wave path {
        stroke-dasharray: 1800;
        stroke-dashoffset: 0;
    }

    /* =========================================
       07 — INDIVIDUAL SERVICE ITEM
    ========================================= */

    body .infrastructure-section__item {
        position: relative;
        z-index: 1;

        display: flex;
        flex-direction: column;
        align-items: center;

        width: 100%;
        min-width: 0;

        margin: 0;
        padding: 0;

        background: transparent;
        border: 0;

        text-align: center;

        transition:
            translate 0.4s cubic-bezier(.22,1,.36,1);
    }

   
/* =========================================
   HOMEPAGE SECTION 02
   SOFT TERRACOTTA LUMINOSITY
   NO GLOW / NO HALOS
   DESKTOP ONLY
========================================= */

@media (min-width: 1101px) {

    body .infrastructure-section__icon {
        position: relative;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 88px;
        height: 88px;
        flex: 0 0 88px;

        margin: 0 auto 37px;
        padding: 20px;

        border-radius: 50%;

        /* Light reflected within the circle */
        background:
            radial-gradient(
                ellipse at 28% 20%,
                #FFFFFF 0%,
                #FBF7F1 38%,
                #F1E3D7 100%
            );

        border: 1px solid rgba(201, 103, 67, 0.075);

        /* Natural depth instead of outer glow */
        box-shadow:
            0 4px 9px rgba(54, 42, 33, 0.035),
            0 13px 26px rgba(54, 42, 33, 0.055),
            inset 0 1px 2px rgba(255, 255, 255, 0.95),
            inset -5px -7px 14px rgba(201, 103, 67, 0.035);

        backdrop-filter: none;
        -webkit-backdrop-filter: none;

        transition:
            transform 0.4s cubic-bezier(.22,1,.36,1),
            box-shadow 0.4s ease;
    }

    /* REMOVE PREVIOUS GLOW PSEUDO-ELEMENTS */

    body .infrastructure-section__icon::before,
    body .infrastructure-section__icon::after {
        content: none !important;
        display: none !important;
    }

    /* OLIVE LINE ICONS */

    body .infrastructure-section__icon svg {
        display: block;

        width: 34px;
        height: 34px;

        fill: none;
        stroke: #66745B;
        stroke-width: 1.8;

        stroke-linecap: round;
        stroke-linejoin: round;

        transition: transform 0.35s ease;
    }

    /* SUBTLE DEPTH ON HOVER */

    @media (hover: hover) {

        body .infrastructure-section__item:hover
        .infrastructure-section__icon {
            transform: translateY(-4px);

            box-shadow:
                0 9px 20px rgba(54, 42, 33, 0.055),
                0 17px 30px rgba(54, 42, 33, 0.07),
                inset 0 1px 2px rgba(255, 255, 255, 0.98),
                inset -5px -7px 14px rgba(201, 103, 67, 0.045);
        }

        body .infrastructure-section__item:hover
        .infrastructure-section__icon svg {
            transform: scale(1.04);
        }
    }
}


    /* =========================================
       09 — NUMBER + CONNECTOR DOT
    ========================================= */

    body .infrastructure-section__number {
        position: relative;

        display: block;

        margin: 0 0 12px;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.3;

        letter-spacing: 0.02em;
        color: #C96743;
    }

    body .infrastructure-section__number::after {
    display: none;
}

    /* =========================================
       10 — SERVICE HEADINGS
    ========================================= */

    body .infrastructure-section__item h3 {
        width: 100%;
        max-width: 195px;

        margin: 0 0 12px;
        padding: 0;

        font-family: "Manrope", sans-serif;
        font-size: clamp(14px, 1.1vw, 17px);
        font-weight: 600;

        line-height: 1.35;
        letter-spacing: -0.035em;

        color: #1F211D;
        text-align: center;
    }

    /* =========================================
       11 — SERVICE DESCRIPTIONS
    ========================================= */

    body .infrastructure-section__item > p {
        width: 100%;
        max-width: 205px;

        margin: 0 auto;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 12px;
        font-weight: 400;
        line-height: 1.65;

        letter-spacing: 0;
        color: rgba(31,33,29,0.72);

        text-align: center;
    }

    /* =========================================
       12 — REFINED HOVER
    ========================================= */

    @media (hover: hover) {

        body .infrastructure-section__item:hover {
            translate: 0 -5px;
        }

        body .infrastructure-section__item:hover
        .infrastructure-section__icon {
            transform: scale(1.075);

            box-shadow:
                0 12px 30px rgba(72,65,52,0.11),
                0 22px 45px rgba(72,65,52,0.07),
                inset 0 1px 1px rgba(255,255,255,1);
        }

        body .infrastructure-section__item:hover h3 {
            color: #394235;
        }
    }

    /* =========================================
       13 — SCROLL ENTRANCE ANIMATIONS
    ========================================= */

    @keyframes frayoraInfraIntroIn {
        from {
            opacity: 0;
            translate: 0 24px;
            filter: blur(3px);
        }

        to {
            opacity: 1;
            translate: 0 0;
            filter: blur(0);
        }
    }

    @keyframes frayoraInfraItemIn {
        from {
            opacity: 0;
            translate: 0 25px;
            filter: blur(2px);
        }

        to {
            opacity: 1;
            translate: 0 0;
            filter: blur(0);
        }
    }

    @keyframes frayoraInfraWaveIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @supports (animation-timeline: view()) {

        body .infrastructure-section__heading-group,
        body .infrastructure-section__body {
            animation: frayoraInfraIntroIn linear both;

            animation-timeline: view();
            animation-range: entry 0% entry 75%;
        }

        body .infrastructure-section__item {
            animation: frayoraInfraItemIn linear both;

            animation-timeline: view();
            animation-range: entry 0% entry 78%;
        }

        body .infrastructure-section__wave {
            animation: frayoraInfraWaveIn linear both;

            animation-timeline: view();
            animation-range: entry 0% entry 80%;
        }
    }

    /* =========================================
       14 — SMALLER DESKTOP
    ========================================= */

    @media (max-width: 1350px) {

        body .infrastructure-section__inner {
            padding-left: 55px;
            padding-right: 55px;
        }

        body .infrastructure-section__diagram {
            column-gap: 14px;
        }

        body .infrastructure-section__icon {
            width: 70px;
            height: 70px;
            flex-basis: 70px;
            padding: 18px;
        }

        body .infrastructure-section__wave {
            top: 36px;
        }

        body .infrastructure-section__item h3 {
            font-size: 14px;
        }

        body .infrastructure-section__item > p {
            font-size: 11px;
        }
    }

    /* =========================================
       15 — ACCESSIBILITY
    ========================================= */

    @media (prefers-reduced-motion: reduce) {

        body .infrastructure-section__heading-group,
        body .infrastructure-section__body,
        body .infrastructure-section__item,
        body .infrastructure-section__wave {
            animation: none !important;

            opacity: 1 !important;
            translate: none !important;
            filter: none !important;
        }

        body .infrastructure-section__item,
        body .infrastructure-section__icon {
            transition: none !important;
        }
    }

} /* END SECTION 02 — DESKTOP */


/* =========================================
   FRAYORA — SECTION 02
   SEAMLESS, BALANCED LUMINOSITY
   DESKTOP ONLY
========================================= */

@media (min-width: 1101px) {

    body .infrastructure-section {
        background-color: #F8F3EB !important;

        background-image:
            /* Gentle illumination at the top */
            radial-gradient(
                ellipse 120% 90% at 50% 0%,
                rgba(255, 255, 255, 0.38) 0%,
                transparent 85%
            ),

            /* Identical illumination at the bottom */
            radial-gradient(
                ellipse 120% 90% at 50% 100%,
                rgba(255, 255, 255, 0.38) 0%,
                transparent 85%
            ) !important;

        background-repeat: no-repeat !important;
        background-size: 100% 100% !important;
    }
}


/* =========================================================
   FRAYORA — HOMEPAGE
   SECTION 03 — OUR APPROACH
   DESKTOP ONLY: 1101px+

   FROM TANGLED TO EFFORTLESS
   Editorial split layout
   Luminous ivory background
   Illustrated visual journey
   Soft dimensional shadows
   Staggered scroll animations
========================================================= */

@media (min-width: 1101px) {

    /* =========================================
       01 — FULL WIDTH SECTION
    ========================================= */

    body .home-approach {
        position: relative;
        isolation: isolate;

        display: flex;
        align-items: center;

        width: 100vw;
        max-width: none;

        min-height: 680px;
        height: auto;

        margin: 0 0 0 calc(50% - 50vw);
        padding: 0;

        overflow: hidden;
        box-sizing: border-box;

        background-color: #F5EDE4;

        background-image:
            radial-gradient(
                ellipse 70% 90% at 12% 10%,
                rgba(255,255,255,0.77) 0%,
                transparent 80%
            ),
            radial-gradient(
                ellipse 62% 80% at 87% 25%,
                rgba(255,255,255,0.52) 0%,
                transparent 86%
            ),
            radial-gradient(
                ellipse 60% 80% at 50% 100%,
                rgba(218,204,185,0.15) 0%,
                transparent 90%
            );

        background-repeat: no-repeat;
    }

    body .home-approach *,
    body .home-approach *::before,
    body .home-approach *::after {
        box-sizing: border-box;
    }

    /* =========================================
       02 — MAIN CONTENT GRID
    ========================================= */

    body .home-approach__inner {
        position: relative;
        z-index: 2;

        display: grid;

        grid-template-columns:
            minmax(0, 0.95fr)
            minmax(0, 1.65fr);

        align-items: center;

        gap: clamp(55px, 5vw, 95px);

        width: 100%;
        max-width: 1600px;

        margin: 0 auto;
        padding: 95px 80px 105px;
    }

    /* =========================================
       03 — LEFT INTRODUCTION
    ========================================= */

    body .home-approach__intro {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        width: 100%;
        min-width: 0;
        max-width: 510px;
    }

    body .home-approach__eyebrow {
        margin: 0 0 21px;

        font-family: "Inter", sans-serif;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.4;

        letter-spacing: 0.11em;
        text-transform: uppercase;

        color: #C96743;
    }

    /* =========================================
       04 — MAIN HEADING
    ========================================= */

    body .home-approach__title {
        width: 100%;

        margin: 0;
        padding: 0;

        font-family: "Manrope", sans-serif;
        font-size: clamp(44px, 3.5vw, 58px);
        font-weight: 600;
        font-style: normal;

        line-height: 1.12;
        letter-spacing: -0.055em;

        color: #1F211D;
        text-align: left;
        text-wrap: balance;
    }

    body .home-approach__title span {
        display: block;

        font: inherit;
        color: #566449;
    }

    /* =========================================
       05 — DESCRIPTION
    ========================================= */

    body .home-approach__description {
        width: 100%;
        max-width: 470px;

        margin: 29px 0 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 15px;
        font-weight: 400;

        line-height: 1.8;
        letter-spacing: 0;

        color: rgba(31,33,29,0.76);
        text-align: left;
    }

    /* =========================================
       06 — TERRACOTTA CTA BUTTON
    ========================================= */

    body .home-approach__button {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        gap: 20px;

        width: fit-content;
        min-height: 56px;

        margin: 35px 0 0;
        padding: 0 30px;

        background: #C96743;
        color: #FFFFFF;

        border: 1px solid #C96743;
        border-radius: 999px;

        font-family: "Manrope", sans-serif;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.3;

        letter-spacing: -0.015em;
        text-decoration: none;

        box-shadow:
            0 7px 15px rgba(108,63,43,0.09),
            0 15px 30px rgba(108,63,43,0.075);

        transition:
            background-color 0.35s ease,
            transform 0.35s ease,
            box-shadow 0.35s ease;
    }

    body .home-approach__button:hover {
        background: #B95635;
        color: #FFFFFF;

        transform: translateY(-3px);

        box-shadow:
            0 12px 24px rgba(108,63,43,0.13),
            0 20px 36px rgba(108,63,43,0.10);
    }

    body .home-approach__button span {
        display: inline-block;

        font-family: "Inter", sans-serif;
        font-size: 21px;
        line-height: 1;

        transition: transform 0.35s ease;
    }

    body .home-approach__button:hover span {
        transform: translateX(5px);
    }

    body .home-approach__button:focus-visible {
        outline: 2px solid #394235;
        outline-offset: 4px;
    }

    /* =========================================
       07 — RIGHT JOURNEY CONTAINER
    ========================================= */

    body .home-approach__journey {
        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            30px
            minmax(0, 1fr)
            30px
            minmax(0, 1fr);

        align-items: start;

        column-gap: 14px;

        width: 100%;
        min-width: 0;
    }

    /* =========================================
       08 — EACH STAGE
    ========================================= */

    body .home-approach__stage {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        width: 100%;
        min-width: 0;

        margin: 0;
        padding: 0;

        transition:
            translate 0.5s cubic-bezier(.22,1,.36,1);
    }

    /* =========================================
       09 — ILLUSTRATION CONTAINER
    ========================================= */

    body .home-approach__visual {
        position: relative;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        height: 218px;

        margin: 0 0 23px;
        padding: 0;

        background: transparent;
        border: none;
    }

    body .home-approach__visual img {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: contain;
        object-position: center;

        filter:
            drop-shadow(
                0 12px 14px rgba(57,66,53,0.065)
            );

        transition:
            transform 0.65s cubic-bezier(.22,1,.36,1),
            filter 0.65s ease;
    }

    /* =========================================
       10 — STAGE HEADINGS
    ========================================= */

    body .home-approach__stage h3 {
        width: 100%;

        margin: 0 0 18px;

        font-family: "Manrope", sans-serif;
        font-size: clamp(23px, 1.9vw, 30px);
        font-weight: 600;

        line-height: 1.2;
        letter-spacing: -0.045em;

        color: #1F211D;
        text-align: left;
    }

    /* =========================================
       11 — EXPLANATORY CONTENT
    ========================================= */

    body .home-approach__details {
        display: flex;
        flex-direction: column;

        gap: 7px;

        width: 100%;
        margin: 0;
        padding: 0;
    }

    body .home-approach__details p {
        margin: 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 13px;
        font-weight: 400;

        line-height: 1.5;

        color: rgba(31,33,29,0.70);
        text-align: left;
    }

    /* =========================================
       12 — ARROWS
    ========================================= */

    body .home-approach__arrow {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 30px;
        height: 218px;

        margin: 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 31px;
        font-weight: 300;

        line-height: 1;
        color: #C96743;

        opacity: 0.78;
    }

    /* =========================================
       13 — IMAGE HOVER DEPTH
    ========================================= */

    @media (hover: hover) {

        body .home-approach__stage:hover {
            translate: 0 -4px;
        }

        body .home-approach__stage:hover
        .home-approach__visual img {
            transform: scale(1.045);

            filter:
                drop-shadow(
                    0 19px 21px rgba(57,66,53,0.10)
                );
        }
    }

    /* =========================================
       14 — ANIMATIONS
    ========================================= */

    @keyframes homeApproachContentIn {
        from {
            opacity: 0;
            translate: 0 28px;
            filter: blur(3px);
        }

        to {
            opacity: 1;
            translate: 0 0;
            filter: blur(0);
        }
    }

    @keyframes homeApproachVisualIn {
        from {
            opacity: 0;
            translate: 0 34px;
            filter: blur(4px);
        }

        to {
            opacity: 1;
            translate: 0 0;
            filter: blur(0);
        }
    }

    @keyframes homeApproachArrowIn {
        from {
            opacity: 0;
            translate: -10px 0;
        }

        to {
            opacity: 0.78;
            translate: 0 0;
        }
    }

    /* SCROLL-TRIGGERED REVEALS */

    @supports (animation-timeline: view()) {

        body .home-approach__intro {
            animation:
                homeApproachContentIn linear both;

            animation-timeline: view();
            animation-range: entry 0% entry 65%;
        }

        body .home-approach__stage {
            animation:
                homeApproachVisualIn linear both;

            animation-timeline: view();
            animation-range: entry 0% entry 75%;
        }

        body .home-approach__stage:nth-of-type(2) {
            animation-range: entry 7% entry 82%;
        }

        body .home-approach__stage:nth-of-type(3) {
            animation-range: entry 12% entry 88%;
        }

        body .home-approach__arrow {
            animation:
                homeApproachArrowIn linear both;

            animation-timeline: view();
            animation-range: entry 0% entry 78%;
        }
    }

    /* =========================================
       15 — SMALLER DESKTOP
    ========================================= */

    @media (max-width: 1350px) {

        body .home-approach__inner {
            grid-template-columns:
                minmax(0, 0.88fr)
                minmax(0, 1.65fr);

            gap: 45px;

            padding-left: 55px;
            padding-right: 55px;
        }

        body .home-approach__title {
            font-size: clamp(40px, 3.45vw, 48px);
        }

        body .home-approach__description {
            font-size: 14px;
        }

        body .home-approach__journey {
            column-gap: 8px;

            grid-template-columns:
                minmax(0, 1fr)
                22px
                minmax(0, 1fr)
                22px
                minmax(0, 1fr);
        }

        body .home-approach__visual,
        body .home-approach__arrow {
            height: 180px;
        }

        body .home-approach__arrow {
            width: 22px;
            font-size: 25px;
        }

        body .home-approach__stage h3 {
            font-size: 23px;
        }

        body .home-approach__details p {
            font-size: 12px;
        }
    }

    /* =========================================
       16 — REDUCED MOTION
    ========================================= */

    @media (prefers-reduced-motion: reduce) {

        body .home-approach__intro,
        body .home-approach__stage,
        body .home-approach__arrow {
            animation: none !important;

            opacity: 1 !important;
            translate: none !important;
            filter: none !important;
        }

        body .home-approach__stage,
        body .home-approach__visual img,
        body .home-approach__button,
        body .home-approach__button span {
            transition: none !important;
        }
    }

} /* END HOMEPAGE SECTION 03 — DESKTOP */



/* =====================================================
   FRAYORA — HOMEPAGE SECTION 03
   FINAL VISUAL REFINEMENT
   DESKTOP ONLY: 1101px+

   Smaller illustrations
   Centered alignment
   Soft dimensional shadows
   Balanced top + bottom luminosity
===================================================== */

@media (min-width: 1101px) {

    /* ==========================================
       01 — BALANCED LUMINOUS BACKGROUND
    ========================================== */

    body .home-approach {
        background-color: #F4EEE6;

        background-image:

            /* Soft ivory illumination — top */
            radial-gradient(
                ellipse 85% 65% at 50% 0%,
                rgba(255, 255, 255, 0.84) 0%,
                rgba(255, 255, 255, 0.30) 55%,
                transparent 100%
            ),

            /* Matching ivory illumination — bottom */
            radial-gradient(
                ellipse 85% 65% at 50% 100%,
                rgba(255, 255, 255, 0.84) 0%,
                rgba(255, 255, 255, 0.30) 55%,
                transparent 100%
            ),

            /* Subtle warm-stone depth — center */
            radial-gradient(
                ellipse 75% 85% at 50% 50%,
                rgba(220, 202, 182, 0.12) 0%,
                rgba(220, 202, 182, 0.035) 55%,
                transparent 90%
            );

        background-repeat: no-repeat;
    }

    /* ==========================================
       02 — JOURNEY ALIGNMENT
    ========================================== */

    body .home-approach__journey {
        align-items: start;
    }

    body .home-approach__stage {
        align-items: center;
        text-align: center;
    }

    /* ==========================================
       03 — SMALLER IMAGE CONTAINERS
    ========================================== */

    body .home-approach__visual {
        position: relative;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        height: 180px;

        margin: 0 0 26px;
        padding: 0;

        overflow: visible;

        background: transparent;
        border: none;
    }

    /* ==========================================
       04 — REFINED IMAGE SIZE + SHADOWS
    ========================================== */

    body .home-approach__visual img {
        display: block;

        width: 80%;
        max-width: 175px;
        height: 165px;

        margin: 0 auto;

        object-fit: contain;
        object-position: center;

        filter:
            drop-shadow(0 8px 10px rgba(31, 33, 29, 0.055))
            drop-shadow(0 18px 22px rgba(31, 33, 29, 0.075));

        transition:
            transform 0.6s cubic-bezier(.22, 1, .36, 1),
            filter 0.6s ease;
    }

    /* ==========================================
       05 — HEADINGS DIRECTLY UNDER IMAGES
    ========================================== */

    body .home-approach__stage h3 {
        width: 100%;

        margin: 0 0 18px;
        padding: 0;

        text-align: center;
    }

    /* ==========================================
       06 — DESCRIPTIONS
    ========================================== */

    body .home-approach__details {
        align-items: center;
        width: 100%;
    }

    body .home-approach__details p {
        width: 100%;
        text-align: center;
    }

    /* ==========================================
       07 — ARROW ALIGNMENT
    ========================================== */

    body .home-approach__arrow {
        height: 180px;
        align-items: center;
        justify-content: center;
    }

    /* ==========================================
       08 — SUBTLE IMAGE HOVER
    ========================================== */

    @media (hover: hover) {

        body .home-approach__stage:hover
        .home-approach__visual img {
            transform: translateY(-5px) scale(1.035);

            filter:
                drop-shadow(0 12px 15px rgba(31, 33, 29, 0.07))
                drop-shadow(0 24px 28px rgba(31, 33, 29, 0.10));
        }
    }

    /* ==========================================
       09 — SMALLER DESKTOP
    ========================================== */

    @media (max-width: 1350px) {

        body .home-approach__visual,
        body .home-approach__arrow {
            height: 155px;
        }

        body .home-approach__visual img {
            max-width: 145px;
            height: 145px;
        }
    }

    /* ==========================================
       10 — REDUCED MOTION
    ========================================== */

    @media (prefers-reduced-motion: reduce) {

        body .home-approach__visual img {
            transition: none !important;
            transform: none !important;
        }
    }
}


/* =========================================
   FRAYORA — HOMEPAGE SECTION 03
   WARM IVORY LUMINOUS BACKGROUND
   DESKTOP ONLY: 1101px+
========================================= */

@media (min-width: 1101px) {

    body .home-approach {
        background-color: #F5EDE4 !important;

        background-image:
            /* SOFT TOP ILLUMINATION */
            radial-gradient(
                ellipse 120% 90% at 50% 0%,
                rgba(255, 255, 255, 0.38) 0%,
                transparent 85%
            ),

            /* MATCHING BOTTOM ILLUMINATION */
            radial-gradient(
                ellipse 120% 90% at 50% 100%,
                rgba(255, 255, 255, 0.38) 0%,
                transparent 85%
            ) !important;

        background-repeat: no-repeat !important;
        background-size: 100% 100% !important;
    }

}




/* =========================================================
   FRAYORA — HOMEPAGE
   SECTION 05 — SELECTED WORK
   DESKTOP ONLY: 1101px+

   DARK OLIVE EDITORIAL SHOWCASE
   MANROPE + INTER
   BALANCED LUMINOUS BACKGROUND
   DIMENSIONAL PROJECT CARDS
   SOFT SHADOWS + REVEAL ANIMATIONS
========================================================= */

@media (min-width: 1101px) {

    /* =========================================
       01 — SECTION BACKGROUND
    ========================================= */

    body .home-work {
        position: relative;
        isolation: isolate;

        width: 100vw;
        max-width: none;

        margin: 0 0 0 calc(50% - 50vw);
        padding: 0;

        overflow: hidden;
        box-sizing: border-box;

        background-color: #303B32;

        background-image:
            radial-gradient(
                ellipse 120% 90% at 50% 0%,
                rgba(111, 133, 103, 0.12) 0%,
                transparent 85%
            ),
            radial-gradient(
                ellipse 120% 90% at 50% 100%,
                rgba(111, 133, 103, 0.12) 0%,
                transparent 85%
            );

        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    body .home-work *,
    body .home-work *::before,
    body .home-work *::after {
        box-sizing: border-box;
    }

    /* =========================================
       02 — MAIN CONTAINER
    ========================================= */

    body .home-work__inner {
        position: relative;
        z-index: 1;

        width: 100%;
        max-width: 1600px;

        margin: 0 auto;
        padding: 90px 80px 105px;
    }

    /* =========================================
       03 — HEADER GRID
    ========================================= */

    body .home-work__header {
        display: grid;
        grid-template-columns:
            minmax(0, 1.15fr)
            minmax(0, 0.9fr)
            auto;

        align-items: end;
        column-gap: 55px;

        width: 100%;
        margin: 0 0 42px;
    }

    body .home-work__heading-group {
        min-width: 0;
    }

    body .home-work__eyebrow {
        margin: 0 0 17px;

        font-family: "Inter", sans-serif;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.4;
        letter-spacing: 0.10em;

        color: #E58A62;
        text-transform: uppercase;
    }

    /* =========================================
       04 — MAIN HEADING
    ========================================= */

    body .home-work__title {
        margin: 0;

        font-family: "Manrope", sans-serif;
        font-size: clamp(42px, 3.5vw, 58px);
        font-weight: 600;
        font-style: normal;
        line-height: 1.12;
        letter-spacing: -0.055em;

        color: #F8F3EB;

        text-wrap: balance;
    }

    /* =========================================
       05 — DESCRIPTION
    ========================================= */

    body .home-work__description {
        width: 100%;
        max-width: 470px;

        margin: 0 0 6px;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.75;

        color: rgba(248, 243, 235, 0.80);
    }

    /* =========================================
       06 — PORTFOLIO BUTTON
    ========================================= */

    body .home-work__portfolio {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        gap: 17px;

        min-height: 50px;
        margin: 0 0 5px;
        padding: 0 23px;

        border: 1px solid rgba(248, 243, 235, 0.65);
        border-radius: 999px;

        background: transparent;
        color: #F8F3EB;

        font-family: "Manrope", sans-serif;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.3;
        white-space: nowrap;
        text-decoration: none;

        transition:
            background-color 0.35s ease,
            border-color 0.35s ease,
            transform 0.35s ease,
            box-shadow 0.35s ease;
    }

    body .home-work__portfolio:hover {
        background: #F8F3EB;
        border-color: #F8F3EB;
        color: #303B32;

        transform: translateY(-3px);

        box-shadow:
            0 12px 26px rgba(0, 0, 0, 0.13);
    }

    body .home-work__portfolio span {
        font-size: 20px;
        line-height: 1;
        transition: transform 0.35s ease;
    }

    body .home-work__portfolio:hover span {
        transform: translateX(5px);
    }

    body .home-work__portfolio:focus-visible {
        outline: 2px solid #E58A62;
        outline-offset: 4px;
    }

    /* =========================================
       07 — THREE-COLUMN PROJECT GRID
    ========================================= */

    body .home-work__projects {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));

        gap: 23px;
        align-items: stretch;

        width: 100%;
    }

    /* =========================================
       08 — PROJECT CARD
    ========================================= */

    body .home-work__card {
        position: relative;

        display: flex;
        flex-direction: column;

        min-width: 0;
        overflow: hidden;

        margin: 0;

        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 7px;

        background: #F9F5EE;

        box-shadow:
            0 5px 12px rgba(9, 18, 11, 0.08),
            0 18px 35px rgba(9, 18, 11, 0.17),
            0 32px 65px rgba(9, 18, 11, 0.10);

        transition:
            transform 0.45s cubic-bezier(.22, 1, .36, 1),
            box-shadow 0.45s ease,
            border-color 0.35s ease;
    }

    /* =========================================
       09 — PROJECT IMAGE
    ========================================= */

    body .home-work__image-wrap {
        position: relative;

        width: 100%;
        height: 265px;

        margin: 0;
        overflow: hidden;

        background: #E7E2D9;
    }

    body .home-work__image-wrap img {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center;

        transition:
            transform 0.75s cubic-bezier(.22, 1, .36, 1);
    }

    /* Subtle image depth without a heavy overlay */

    body .home-work__image-wrap::after {
        content: "";

        position: absolute;
        inset: 0;

        background:
            linear-gradient(
                180deg,
                rgba(31, 33, 29, 0.045),
                transparent 45%,
                rgba(31, 33, 29, 0.085)
            );

        pointer-events: none;
    }

    /* =========================================
       10 — PROJECT NUMBER BADGE
    ========================================= */

    body .home-work__index {
        position: absolute;
        z-index: 2;

        top: 0;
        left: 0;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 59px;
        height: 53px;

        border-radius: 0 0 9px 0;

        background: rgba(248, 243, 235, 0.96);

        font-family: "Manrope", sans-serif;
        font-size: 20px;
        font-weight: 500;
        line-height: 1;

        color: #D59176;

        box-shadow:
            3px 5px 15px rgba(31, 33, 29, 0.06);
    }

    body .home-work__card:nth-child(2)
    .home-work__index {
        color: #B89A85;
    }

    body .home-work__card:nth-child(3)
    .home-work__index {
        color: #B89D73;
    }

    /* =========================================
       11 — CARD CONTENT
    ========================================= */

    body .home-work__card-content {
        position: relative;

        display: flex;
        flex-direction: column;

        flex: 1;

        min-height: 140px;

        padding: 22px 26px 24px;

        background: #F9F5EE;
    }

    body .home-work__category {
        margin: 0 0 9px;

        font-family: "Inter", sans-serif;
        font-size: 10px;
        font-weight: 600;
        line-height: 1.4;

        letter-spacing: 0.075em;
        text-transform: uppercase;

        color: #C96743;
    }

    body .home-work__project-title {
        margin: 0 35px 7px 0;

        font-family: "Manrope", sans-serif;
        font-size: clamp(20px, 1.6vw, 25px);
        font-weight: 600;
        line-height: 1.22;

        letter-spacing: -0.04em;

        color: #1F211D;
    }

    body .home-work__project-description {
        margin: 0 35px 0 0;

        font-family: "Inter", sans-serif;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.55;

        color: rgba(31, 33, 29, 0.72);
    }

    /* =========================================
       12 — CARD ARROW
    ========================================= */

    body .home-work__arrow {
        position: absolute;

        right: 25px;
        bottom: 41px;

        font-family: "Inter", sans-serif;
        font-size: 25px;
        line-height: 1;

        color: #C96743;

        transition: transform 0.35s ease;
    }

    /* =========================================
       13 — INTERACTION
    ========================================= */

    @media (hover: hover) {

        body .home-work__card:hover {
            transform: translateY(-7px);

            border-color: rgba(255, 255, 255, 0.35);

            box-shadow:
                0 8px 18px rgba(9, 18, 11, 0.10),
                0 26px 45px rgba(9, 18, 11, 0.22),
                0 39px 75px rgba(9, 18, 11, 0.12);
        }

        body .home-work__card:hover
        .home-work__image-wrap img {
            transform: scale(1.045);
        }

        body .home-work__card:hover
        .home-work__arrow {
            transform: translateX(5px);
        }
    }

    /* =========================================
       14 — SCROLL ENTRANCE ANIMATIONS
    ========================================= */

    @keyframes homeWorkReveal {
        from {
            opacity: 0;
            translate: 0 26px;
            filter: blur(3px);
        }

        to {
            opacity: 1;
            translate: 0 0;
            filter: blur(0);
        }
    }

    @supports (animation-timeline: view()) {

        body .home-work__header {
            animation: homeWorkReveal linear both;

            animation-timeline: view();
            animation-range: entry 0% entry 70%;
        }

        body .home-work__card {
            animation: homeWorkReveal linear both;

            animation-timeline: view();
            animation-range: entry 0% entry 75%;
        }

        body .home-work__card:nth-child(2) {
            animation-range: entry 7% entry 82%;
        }

        body .home-work__card:nth-child(3) {
            animation-range: entry 12% entry 87%;
        }
    }

    /* =========================================
       15 — SMALLER DESKTOP
    ========================================= */

    @media (max-width: 1350px) {

        body .home-work__inner {
            padding-left: 55px;
            padding-right: 55px;
        }

        body .home-work__header {
            column-gap: 28px;
        }

        body .home-work__title {
            font-size: clamp(39px, 3.4vw, 48px);
        }

        body .home-work__description {
            font-size: 13px;
        }

        body .home-work__image-wrap {
            height: 230px;
        }

        body .home-work__card-content {
            padding: 20px 22px 23px;
        }

        body .home-work__project-title {
            font-size: 21px;
        }

        body .home-work__arrow {
            right: 20px;
            bottom: 38px;
        }
    }

    /* =========================================
       16 — REDUCED MOTION
    ========================================= */

    @media (prefers-reduced-motion: reduce) {

        body .home-work__header,
        body .home-work__card {
            animation: none !important;
            opacity: 1 !important;
            translate: none !important;
            filter: none !important;
        }

        body .home-work__card,
        body .home-work__image-wrap img,
        body .home-work__portfolio,
        body .home-work__portfolio span,
        body .home-work__arrow {
            transition: none !important;
        }
    }

} /* END SECTION 05 — DESKTOP */



/* =====================================================
   FRAYORA — HOMEPAGE SECTION 05
   COMPACT EDITORIAL REFINEMENT
   DESKTOP ONLY — 1101px+

   Reduced section height
   Smaller portfolio imagery
   Balanced olive luminosity
   Preserves shadows and animations
===================================================== */

@media (min-width: 1101px) {

    /* SECTION BACKGROUND */

    body .home-work {
        min-height: 0;
        height: auto;

        background-color: #303B32;

        background-image:
            radial-gradient(
                ellipse 110% 85% at 50% 0%,
                rgba(143, 160, 130, 0.14) 0%,
                transparent 85%
            ),
            radial-gradient(
                ellipse 110% 85% at 50% 100%,
                rgba(143, 160, 130, 0.14) 0%,
                transparent 85%
            );

        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    /* SECTION SPACING */

    body .home-work__inner {
        padding-top: 65px;
        padding-bottom: 72px;
    }

    /* HEADER SPACING */

    body .home-work__header {
        margin-bottom: 30px;
    }

    body .home-work__eyebrow {
        margin-bottom: 13px;
    }

    /* IMAGE HEIGHT */

    body .home-work__image-wrap {
        height: 195px;
    }

    /* CARD CONTENT */

    body .home-work__card-content {
        min-height: 112px;
        padding: 17px 23px 19px;
    }

    body .home-work__category {
        margin-bottom: 6px;
    }

    body .home-work__project-title {
        margin-bottom: 5px;
    }

    /* CARD ARROWS */

    body .home-work__arrow {
        right: 22px;
        bottom: 30px;
    }

    /* CARD NUMBERS */

    body .home-work__index {
        width: 53px;
        height: 48px;
        font-size: 18px;
    }

}



/* =========================================================
   FRAYORA — HOMEPAGE
   SECTION 06 — WHY FRAYORA
   DESKTOP ONLY: 1101px+

   MODERN EDITORIAL / SAAS DESIGN
   MANROPE + INTER
   SYMMETRICAL SOFT LUMINOSITY
   REFINED TYPOGRAPHY + SHADOWS
   SCROLL REVEAL ANIMATIONS
========================================================= */

@media (min-width: 1101px) {

    /* =========================================
       01 — SECTION BACKGROUND
    ========================================= */

    body .home-why {
        position: relative;
        isolation: isolate;

        width: 100vw;
        max-width: none;

        min-height: 0;
        height: auto;

        margin: 0 0 0 calc(50% - 50vw);
        padding: 0;

        overflow: hidden;
        box-sizing: border-box;

        background-color: #F8F3EB;

        background-image:
            radial-gradient(
                ellipse 120% 90% at 50% 0%,
                rgba(255,255,255,0.38) 0%,
                transparent 85%
            ),
            radial-gradient(
                ellipse 120% 90% at 50% 100%,
                rgba(255,255,255,0.38) 0%,
                transparent 85%
            );

        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    body .home-why *,
    body .home-why *::before,
    body .home-why *::after {
        box-sizing: border-box;
    }

    /* =========================================
       02 — TWO-COLUMN LAYOUT
    ========================================= */

    body .home-why__inner {
        position: relative;
        z-index: 1;

        display: grid;
        grid-template-columns:
            minmax(0, 0.82fr)
            minmax(0, 1.55fr);

        align-items: center;
        gap: clamp(65px, 8vw, 150px);

        width: 100%;
        max-width: 1600px;

        margin: 0 auto;
        padding: 100px 80px 105px;
    }

    /* =========================================
       03 — LEFT COLUMN
    ========================================= */

    body .home-why__left {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        min-width: 0;
    }

    body .home-why__eyebrow {
        margin: 0 0 40px;

        font-family: "Inter", sans-serif;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.4;

        letter-spacing: 0.11em;
        text-transform: uppercase;

        color: #C96743;
    }

    /* =========================================
       04 — EDITORIAL STATEMENT PANEL
    ========================================= */

    body .home-why__statement {
        position: relative;

        width: 100%;
        max-width: 390px;

        margin: 0;
        padding: 43px 38px 45px;

        border: 1px solid rgba(99, 103, 86, 0.11);
        border-radius: 5px;

        background-color: #F6F0E8;

        background-image:
            linear-gradient(
                145deg,
                rgba(255,255,255,0.58),
                rgba(255,255,255,0.02)
            );

        box-shadow:
            0 5px 15px rgba(47,43,37,0.025),
            0 20px 43px rgba(47,43,37,0.055),
            inset 0 1px 0 rgba(255,255,255,0.82);

        transition:
            transform 0.45s cubic-bezier(.22,1,.36,1),
            box-shadow 0.45s ease;
    }

    /* Fine terracotta detail */

    body .home-why__accent-line {
        display: block;

        width: 40px;
        height: 2px;

        margin: 0 0 31px;

        background-color: #C96743;
    }

    body .home-why__statement p {
        margin: 0;

        font-family: "Manrope", sans-serif;
        font-size: clamp(23px, 2vw, 30px);
        font-weight: 500;
        font-style: normal;
        line-height: 1.5;
        letter-spacing: -0.04em;

        color: #566449;
    }

    /* =========================================
       05 — RIGHT CONTENT
    ========================================= */

    body .home-why__right {
        display: flex;
        flex-direction: column;

        min-width: 0;
        max-width: 840px;
    }

    /* =========================================
       06 — MAIN HEADING
    ========================================= */

    body .home-why__title {
        width: 100%;

        margin: 0;
        padding: 0;

        font-family: "Manrope", sans-serif;
        font-size: clamp(43px, 3.6vw, 58px);
        font-weight: 600;
        font-style: normal;

        line-height: 1.16;
        letter-spacing: -0.055em;

        color: #1F211D;
        text-wrap: balance;
    }

    body .home-why__title span {
        display: block;

        font: inherit;
        color: #566449;
    }

    /* =========================================
       07 — REFINED DIVIDER
    ========================================= */

    body .home-why__divider {
        width: 100%;
        height: 1px;

        margin: 34px 0 29px;

        background-color: rgba(76, 80, 68, 0.15);
    }

    /* =========================================
       08 — BODY COPY
    ========================================= */

    body .home-why__copy {
        display: flex;
        flex-direction: column;

        gap: 15px;
        width: 100%;
    }

    body .home-why__copy p {
        margin: 0;

        font-family: "Inter", sans-serif;
        font-size: 15px;
        font-weight: 400;
        line-height: 1.8;
        letter-spacing: 0;

        color: rgba(31,33,29,0.75);
    }

    body .home-why__copy
    .home-why__lead {
        font-weight: 500;
        color: #1F211D;
    }

    /* =========================================
       09 — HOVER DEPTH
    ========================================= */

    @media (hover: hover) {

        body .home-why__statement:hover {
            transform: translateY(-5px);

            box-shadow:
                0 8px 20px rgba(47,43,37,0.035),
                0 28px 50px rgba(47,43,37,0.075),
                inset 0 1px 0 rgba(255,255,255,0.92);
        }
    }

    /* =========================================
       10 — ENTRANCE ANIMATIONS
    ========================================= */

    @keyframes homeWhyRevealLeft {
        from {
            opacity: 0;
            translate: -22px 14px;
            filter: blur(3px);
        }

        to {
            opacity: 1;
            translate: 0 0;
            filter: blur(0);
        }
    }

    @keyframes homeWhyRevealRight {
        from {
            opacity: 0;
            translate: 22px 14px;
            filter: blur(3px);
        }

        to {
            opacity: 1;
            translate: 0 0;
            filter: blur(0);
        }
    }

    @supports (animation-timeline: view()) {

        body .home-why__left {
            animation: homeWhyRevealLeft linear both;

            animation-timeline: view();
            animation-range: entry 0% entry 70%;
        }

        body .home-why__right {
            animation: homeWhyRevealRight linear both;

            animation-timeline: view();
            animation-range: entry 5% entry 75%;
        }
    }

    /* =========================================
       11 — SMALLER DESKTOP
    ========================================= */

    @media (max-width: 1350px) {

        body .home-why__inner {
            gap: 70px;
            padding: 85px 55px 95px;
        }

        body .home-why__title {
            font-size: clamp(40px, 3.5vw, 49px);
        }

        body .home-why__statement {
            padding: 35px 30px 38px;
        }

        body .home-why__statement p {
            font-size: 24px;
        }

        body .home-why__copy p {
            font-size: 14px;
        }
    }

    /* =========================================
       12 — REDUCED MOTION
    ========================================= */

    @media (prefers-reduced-motion: reduce) {

        body .home-why__left,
        body .home-why__right {
            animation: none !important;

            opacity: 1 !important;
            translate: none !important;
            filter: none !important;
        }

        body .home-why__statement {
            transition: none !important;
        }

        body .home-why__statement:hover {
            transform: none !important;
        }
    }

} /* END HOMEPAGE SECTION 06 — DESKTOP */



/* =========================================
   FRAYORA — HOMEPAGE SECTION 06
   WHY FRAYORA — FINAL REFINEMENTS
   DESKTOP ONLY: 1101px+
========================================= */

@media (min-width: 1101px) {

    /* 01 — SLIGHTLY SMALLER HEADING */

    body .home-why__title {
        font-size: clamp(41px, 3.4vw, 55px);
        line-height: 1.17;
    }

    /* 02 — SHORTER EDITORIAL STATEMENT CARD */

    body .home-why__statement {
        padding: 35px 38px 36px;
    }

    body .home-why__accent-line {
        margin-bottom: 24px;
    }

    /* 03 — ITALIC LEFT STATEMENT */

    body .home-why__statement p {
        font-family: "Manrope", sans-serif !important;
        font-style: italic !important;
        font-weight: 500;
        font-size: clamp(22px, 1.85vw, 28px);
        line-height: 1.55;
        letter-spacing: -0.035em;

        color: #566449 !important;
    }

    /* 04 — MORE BREATHING ROOM BETWEEN PARAGRAPHS */

    body .home-why__copy {
        gap: 21px;
    }

    /* 05 — SMALLER DESKTOP ADJUSTMENTS */

    @media (max-width: 1350px) {

        body .home-why__statement {
            padding: 32px 30px 34px;
        }

        body .home-why__statement p {
            font-size: 23px;
        }

        body .home-why__copy {
            gap: 18px;
        }
    }
}


/* =========================================
   HOMEPAGE — FINAL CTA SECTION
   READY TO UNTANGLE YOUR BUSINESS?
========================================= */

.home-cta {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 150px 24px 155px;
    background: #f7f3ec;
    isolation: isolate;
}

/* SOFT LUMINOUS BACKGROUND — EVEN TOP/BOTTOM TRANSITION */
.home-cta::before,
.home-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.home-cta::before {
    background:
        radial-gradient(circle at 22% 18%, rgba(211, 106, 67, 0.10), transparent 32%),
        radial-gradient(circle at 80% 22%, rgba(86, 100, 73, 0.07), transparent 34%),
        radial-gradient(circle at 30% 82%, rgba(255, 255, 255, 0.78), transparent 36%),
        radial-gradient(circle at 78% 80%, rgba(211, 106, 67, 0.07), transparent 34%);
    opacity: 1;
}

.home-cta::after {
    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.34) 0%,
            rgba(255,255,255,0.10) 14%,
            rgba(255,255,255,0.00) 24%,
            rgba(255,255,255,0.00) 76%,
            rgba(255,255,255,0.10) 86%,
            rgba(255,255,255,0.34) 100%
        );
    opacity: 1;
}

.home-cta__inner {
    position: relative;
    z-index: 2;
    max-width: 980px;
    margin: 0 auto;
    text-align: center;
}

.home-cta__accent {
    width: 74px;
    height: 2px;
    margin: 0 auto 34px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        rgba(211,106,67,0.18) 0%,
        rgba(211,106,67,0.78) 50%,
        rgba(211,106,67,0.18) 100%
    );
    box-shadow:
        0 0 18px rgba(211,106,67,0.14),
        0 0 36px rgba(211,106,67,0.08);
}

.home-cta__title {
    margin: 0;
    font-family: "Inter", sans-serif;
    font-size: clamp(44px, 5.1vw, 72px);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -0.055em;
    color: #1f211d;
    text-wrap: balance;
}

.home-cta__text {
    max-width: 660px;
    margin: 28px auto 0;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    line-height: 1.75;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: rgba(31, 33, 29, 0.76);
}

.home-cta__text strong {
    font-weight: 500;
    color: rgba(31, 33, 29, 0.88);
}

.home-cta__button-wrap {
    margin-top: 42px;
}

.home-cta__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-width: 300px;
    min-height: 72px;
    padding: 0 34px;
    border-radius: 999px;
    text-decoration: none;
    background: #d36a43;
    color: #fffaf4;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.02em;
    box-shadow:
        0 16px 34px rgba(211, 106, 67, 0.22),
        0 6px 18px rgba(31, 33, 29, 0.08);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        background-color 0.35s ease;
}

.home-cta__button:hover {
    transform: translateY(-3px);
    background: #c96743;
    box-shadow:
        0 20px 40px rgba(211, 106, 67, 0.24),
        0 10px 24px rgba(31, 33, 29, 0.10);
}

.home-cta__button-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.home-cta__button:hover .home-cta__button-arrow {
    transform: translateX(4px);
}

/* SOFT PANEL FEEL */
.home-cta__inner::before {
    content: "";
    position: absolute;
    inset: -38px -42px;
    z-index: -1;
    border-radius: 34px;
    background: rgba(255,255,255,0.20);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.45),
        0 18px 45px rgba(31,33,29,0.04);
    opacity: 0.72;
    pointer-events: none;
}

/* REVEAL ANIMATIONS */
.home-cta__accent,
.home-cta__title,
.home-cta__text,
.home-cta__button-wrap {
    opacity: 0;
    transform: translateY(28px);
    animation: homeCtaReveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.home-cta__title { animation-delay: 0.08s; }
.home-cta__text { animation-delay: 0.16s; }
.home-cta__button-wrap { animation-delay: 0.24s; }

@keyframes homeCtaReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   TABLET
========================================= */
@media (min-width: 600px) and (max-width: 1100px) {
    .home-cta {
        padding: 120px 34px 126px;
    }

    .home-cta__inner {
        max-width: 760px;
    }

    .home-cta__accent {
        margin-bottom: 28px;
    }

    .home-cta__title {
        font-size: clamp(38px, 7vw, 58px);
        line-height: 1.06;
    }

    .home-cta__text {
        max-width: 600px;
        font-size: 15px;
        line-height: 1.72;
        margin-top: 24px;
    }

    .home-cta__button-wrap {
        margin-top: 36px;
    }

    .home-cta__button {
        min-width: 270px;
        min-height: 66px;
        font-size: 18px;
        padding: 0 28px;
    }

    .home-cta__inner::before {
        inset: -28px -22px;
        border-radius: 28px;
    }
}

/* =========================================
   MOBILE
========================================= */
@media (max-width: 599px) {
    .home-cta {
        padding: 96px 20px 102px;
    }

    .home-cta__inner {
        max-width: 100%;
    }

    .home-cta__accent {
        width: 58px;
        margin-bottom: 24px;
    }

    .home-cta__title {
        font-size: 38px;
        line-height: 1.08;
        letter-spacing: -0.05em;
    }

    .home-cta__text {
        max-width: 100%;
        margin-top: 22px;
        font-size: 15px;
        line-height: 1.72;
    }

    .home-cta__button-wrap {
        margin-top: 30px;
    }

    .home-cta__button {
        width: 100%;
        min-width: 0;
        min-height: 62px;
        padding: 0 24px;
        font-size: 17px;
    }

    .home-cta__inner::before {
        inset: -18px -8px;
        border-radius: 24px;
    }
}

/* =========================================
   REDUCED MOTION
========================================= */
@media (prefers-reduced-motion: reduce) {
    .home-cta__accent,
    .home-cta__title,
    .home-cta__text,
    .home-cta__button-wrap {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .home-cta__button,
    .home-cta__button-arrow {
        transition: none;
    }
}


/* =====================================================
   FRAYORA — HOMEPAGE SECTION 07
   FINAL CTA — COMPACT EDITORIAL REFINEMENT
   DESKTOP ONLY: 1101px+

   No card / no container background
   Reduced height
   Balanced soft luminosity
   Preserves animations
===================================================== */

@media (min-width: 1101px) {

    /* 01 — COMPACT FULL-WIDTH SECTION */

    body .home-cta {
        min-height: 0;
        height: auto;

        padding: 95px 40px 105px;

        background-color: #F8F3EB;

        background-image:
            radial-gradient(
                ellipse 120% 90% at 50% 0%,
                rgba(255, 255, 255, 0.38) 0%,
                transparent 85%
            ),
            radial-gradient(
                ellipse 120% 90% at 50% 100%,
                rgba(255, 255, 255, 0.38) 0%,
                transparent 85%
            );
    }

    /* 02 — REMOVE FLOATING CARD COMPLETELY */

    body .home-cta__inner {
        max-width: 850px;
        padding: 0;

        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }

    body .home-cta__inner::before,
    body .home-cta__inner::after {
        content: none !important;
        display: none !important;
    }

    /* 03 — REMOVE THE EXCESSIVE GLOW LAYERS */

    body .home-cta::before,
    body .home-cta::after {
        content: none !important;
        display: none !important;
    }



    /* 05 — SMALLER HEADING */

    body .home-cta__title {
        max-width: 820px;

        margin: 0 auto;

        font-family: "Manrope", sans-serif;
        font-size: clamp(40px, 3.5vw, 56px);
        font-weight: 600;

        line-height: 1.13;
        letter-spacing: -0.055em;

        color: #1F211D;
        text-align: center;
    }

    /* 06 — SUPPORTING TEXT */

    body .home-cta__text {
        max-width: 600px;

        margin: 22px auto 0;

        font-family: "Inter", sans-serif;
        font-size: 15px;
        line-height: 1.75;

        color: rgba(31, 33, 29, 0.74);
    }

    /* 07 — SMALLER CTA BUTTON */

    body .home-cta__button-wrap {
        margin-top: 30px;
    }

    body .home-cta__button {
        min-width: 245px;
        min-height: 56px;

        padding: 0 30px;

        font-family: "Manrope", sans-serif;
        font-size: 14px;
        font-weight: 600;

        background: #C96743;
        color: #FFFFFF;

        box-shadow:
            0 7px 17px rgba(103, 58, 39, 0.11),
            0 14px 28px rgba(103, 58, 39, 0.06);
    }

    body .home-cta__button:hover {
        background: #B95635;

        box-shadow:
            0 11px 24px rgba(103, 58, 39, 0.16);
    }

}



/* =========================================
   FRAYORA — HOMEPAGE SECTION 07
   WARM IVORY LUMINOUS BACKGROUND
   DESKTOP ONLY: 1101px+
========================================= */

@media (min-width: 1101px) {

    body .home-cta {
        background-color: #F5EDE4 !important;

        background-image:
            /* SOFT TOP ILLUMINATION */
            radial-gradient(
                ellipse 120% 90% at 50% 0%,
                rgba(255, 255, 255, 0.38) 0%,
                transparent 85%
            ),

            /* MATCHING BOTTOM ILLUMINATION */
            radial-gradient(
                ellipse 120% 90% at 50% 100%,
                rgba(255, 255, 255, 0.38) 0%,
                transparent 85%
            ) !important;

        background-repeat: no-repeat !important;
        background-size: 100% 100% !important;
    }

}



/* =========================================================
   FRAYORA — HOMEPAGE
   SECTION 01 — ROLLING HILLS HERO
   TABLET ONLY: 600px–1100px

   Full-width editorial landscape
   Directional dark olive overlay
   Subtle luminous atmosphere
   Manrope + Inter typography
   Header-aligned content
   Terracotta + outlined buttons
   Staggered entrance animations
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    /* =========================================
       01 — MAIN HERO
    ========================================= */

    body .frayora-home-hero {
        position: relative;
        isolation: isolate;

        display: flex;
        align-items: center;

        width: 100vw;
        max-width: none;

        min-height: 820px;
        height: auto;

        margin: 0 0 0 calc(50% - 50vw);
        padding: 0;

        overflow: hidden;
        box-sizing: border-box;

        background-color: #283327;

        border: 0;
        border-radius: 0;
    }

    body .frayora-home-hero *,
    body .frayora-home-hero *::before,
    body .frayora-home-hero *::after {
        box-sizing: border-box;
    }

    /* =========================================
       02 — FULL-BLEED LANDSCAPE IMAGE
    ========================================= */

    body .frayora-home-hero__media {
        position: absolute;
        inset: 0;
        z-index: 0;

        display: block;

        width: 100%;
        height: 100%;

        background-image:
            url("../images/Homepage/tablethillshero.png");

        background-size: cover;
        background-repeat: no-repeat;

        /* Keep the sunlit landscape visible */
        background-position: 57% center;

        transform: scale(1.035);
        transform-origin: center;

        animation:
            homeTabletPhotoReveal 1.6s
            cubic-bezier(.22, 1, .36, 1) both;
    }

    /* =========================================
       03 — DIRECTIONAL OLIVE OVERLAY

       Darker on left for readability
       Softer toward the right
    ========================================= */

    body .frayora-home-hero__overlay {
        position: absolute;
        inset: 0;
        z-index: 1;

        display: block;

        width: 100%;
        height: 100%;

        background-color: transparent;

        background-image:
            linear-gradient(
                90deg,
                rgba(17, 28, 21, 0.82) 0%,
                rgba(17, 28, 21, 0.73) 30%,
                rgba(17, 28, 21, 0.53) 60%,
                rgba(17, 28, 21, 0.28) 100%
            );

        pointer-events: none;
    }

    /* =========================================
       04 — SUBTLE LUMINOUS ATMOSPHERE

       Soft, natural illumination
       No obvious glowing circles
    ========================================= */

    body .frayora-home-hero__overlay::after {
        content: "";

        position: absolute;
        inset: 0;

        background-image:
            radial-gradient(
                ellipse 110% 75% at 50% 0%,
                rgba(166, 182, 149, 0.065) 0%,
                transparent 88%
            ),
            radial-gradient(
                ellipse 110% 75% at 50% 100%,
                rgba(166, 182, 149, 0.065) 0%,
                transparent 88%
            );

        background-repeat: no-repeat;

        pointer-events: none;
    }

    /* =========================================
       05 — HERO CONTENT CONTAINER

       60PX LEFT ALIGNMENT
       Consistent with Frayora tablet grid
    ========================================= */

    body .frayora-home-hero__inner {
        position: relative;
        z-index: 2;

        display: flex;
        align-items: center;
        justify-content: flex-start;

        width: 100%;
        max-width: 1100px;

        min-height: 820px;
        height: auto;

        margin: 0 auto;

        padding:
            90px
            60px
            95px;

        text-align: left;
    }

    body .frayora-home-hero__content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        width: 100%;
        max-width: 780px;
        min-width: 0;

        margin: 0;
        padding: 0;

        text-align: left;
    }

    /* =========================================
       06 — MAIN HERO HEADING
    ========================================= */

    body .frayora-home-hero__title {
        width: 100%;
        max-width: 780px;

        margin: 0;
        padding: 0;

        font-family: "Manrope", sans-serif !important;

        font-size: clamp(49px, 6.6vw, 75px);
        font-weight: 600;
        font-style: normal;

        line-height: 1.075;
        letter-spacing: -0.058em;

        color: #F8F3EB !important;

        text-align: left;
        text-wrap: balance;

        text-shadow:
            0 3px 16px rgba(0, 0, 0, 0.16);

        animation:
            homeTabletContentReveal 1s
            cubic-bezier(.22, 1, .36, 1)
            0.15s both;
    }

    /* =========================================
       07 — DESCRIPTION
    ========================================= */

    body .frayora-home-hero__description {
        width: 100%;
        max-width: 620px;

        margin: 30px 0 0;
        padding: 0;

        font-family: "Inter", sans-serif !important;

        font-size: 16px;
        font-weight: 400;

        line-height: 1.8;
        letter-spacing: 0;

        color: rgba(248, 243, 235, 0.94) !important;

        text-align: left;

        animation:
            homeTabletContentReveal 0.95s
            cubic-bezier(.22, 1, .36, 1)
            0.32s both;
    }

    /* =========================================
       08 — BUTTON CONTAINER
    ========================================= */

    body .frayora-home-hero__actions {
        display: flex;
        align-items: center;
        justify-content: flex-start;

        flex-wrap: wrap;
        gap: 15px;

        width: 100%;

        margin: 35px 0 0;
        padding: 0;

        animation:
            homeTabletContentReveal 0.95s
            cubic-bezier(.22, 1, .36, 1)
            0.48s both;
    }

    /* =========================================
       09 — SHARED BUTTON STYLE
    ========================================= */

    body .frayora-home-hero__button {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        gap: 17px;

        width: fit-content;
        min-height: 56px;

        margin: 0;
        padding: 0 27px;

        border: 1px solid transparent;
        border-radius: 999px;

        font-family: "Manrope", sans-serif !important;

        font-size: 14px;
        font-weight: 600;
        line-height: 1.3;

        letter-spacing: -0.015em;
        text-decoration: none !important;

        white-space: nowrap;

        transition:
            background-color 0.35s ease,
            border-color 0.35s ease,
            transform 0.35s ease,
            box-shadow 0.35s ease;
    }

    /* =========================================
       10 — PRIMARY CTA
    ========================================= */

    body .frayora-home-hero__button--primary {
        background: #C96743 !important;
        border-color: #C96743;

        color: #FFFFFF !important;

        box-shadow:
            0 8px 20px rgba(0, 0, 0, 0.16),
            0 15px 28px rgba(0, 0, 0, 0.08);
    }

    body .frayora-home-hero__button--primary:hover {
        background: #B95635 !important;
        border-color: #B95635;

        color: #FFFFFF !important;

        transform: translateY(-3px);

        box-shadow:
            0 13px 27px rgba(0, 0, 0, 0.22);
    }

    /* =========================================
       11 — SECONDARY CTA
    ========================================= */

    body .frayora-home-hero__button--secondary {
        background: rgba(248, 243, 235, 0.055) !important;

        border-color: rgba(248, 243, 235, 0.70);

        color: #F8F3EB !important;

        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }

    body .frayora-home-hero__button--secondary:hover {
        background: rgba(248, 243, 235, 0.16) !important;

        border-color: #F8F3EB;
        color: #FFFFFF !important;

        transform: translateY(-3px);
    }

    /* =========================================
       12 — BUTTON ARROWS
    ========================================= */

    body .frayora-home-hero__arrow {
        display: inline-block;

        font-size: 20px;
        line-height: 1;

        color: inherit;

        transition:
            transform 0.35s cubic-bezier(.22, 1, .36, 1);
    }

    body .frayora-home-hero__button:hover
    .frayora-home-hero__arrow {
        transform: translateX(5px);
    }

    body .frayora-home-hero__button:focus-visible {
        outline: 2px solid #F8F3EB;
        outline-offset: 4px;
    }

    /* =========================================
       13 — SMALLER TABLETS
       600PX–750PX
    ========================================= */

    @media (max-width: 750px) {

        body .frayora-home-hero {
            min-height: 780px;
        }

        body .frayora-home-hero__inner {
            min-height: 780px;

            padding:
                76px
                36px
                80px
                60px;
        }

        body .frayora-home-hero__content {
            max-width: 100%;
        }

        body .frayora-home-hero__title {
            font-size: clamp(43px, 7vw, 53px);
            line-height: 1.09;
        }

        body .frayora-home-hero__description {
            max-width: 520px;
            margin-top: 25px;

            font-size: 14px;
            line-height: 1.8;
        }

        body .frayora-home-hero__actions {
            margin-top: 29px;
            gap: 12px;
        }

        body .frayora-home-hero__button {
            min-height: 52px;

            padding: 0 21px;

            font-size: 12px;
            gap: 12px;
        }

        body .frayora-home-hero__media {
            background-position: 60% center;
        }
    }

    /* =========================================
       14 — ENTRANCE ANIMATIONS
    ========================================= */

    @keyframes homeTabletContentReveal {
        from {
            opacity: 0;
            transform: translateY(24px);
            filter: blur(4px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
            filter: blur(0);
        }
    }

    @keyframes homeTabletPhotoReveal {
        from {
            opacity: 0.75;
            transform: scale(1.045);
        }

        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    /* =========================================
       15 — REDUCED MOTION
    ========================================= */

    @media (prefers-reduced-motion: reduce) {

        body .frayora-home-hero__media,
        body .frayora-home-hero__title,
        body .frayora-home-hero__description,
        body .frayora-home-hero__actions {
            animation: none !important;

            opacity: 1 !important;
            transform: none !important;
            filter: none !important;
        }

        body .frayora-home-hero__button,
        body .frayora-home-hero__arrow {
            transition: none !important;
        }
    }

} /* END HOMEPAGE SECTION 01 — TABLET */


/* =========================================================
   FRAYORA — HOMEPAGE
   SECTION 02 — CONNECTED BUSINESS INFRASTRUCTURE
   TABLET ONLY: 600px–1100px

   3 COLUMNS × 2 ROWS
   MANROPE + INTER
   SOFT IVORY LUMINOSITY
   NATURAL TERRACOTTA ICON DEPTH
   SHADOWS + STAGGERED ANIMATIONS
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    /* =========================================
       01 — MAIN SECTION
    ========================================= */

    body .infrastructure-section {
        position: relative;
        isolation: isolate;

        display: block;

        width: 100vw;
        max-width: none;

        min-height: 0;
        height: auto;

        margin: 0 0 0 calc(50% - 50vw);
        padding: 0;

        overflow: hidden;
        box-sizing: border-box;

        background-color: #F8F3EB !important;

        background-image:
            radial-gradient(
                ellipse 120% 90% at 50% 0%,
                rgba(255,255,255,0.38) 0%,
                transparent 85%
            ),
            radial-gradient(
                ellipse 120% 90% at 50% 100%,
                rgba(255,255,255,0.38) 0%,
                transparent 85%
            ) !important;

        background-repeat: no-repeat !important;
        background-size: 100% 100% !important;
    }

    body .infrastructure-section *,
    body .infrastructure-section *::before,
    body .infrastructure-section *::after {
        box-sizing: border-box;
    }

    /* =========================================
       02 — INNER CONTAINER
       ALIGNED WITH TABLET HERO
    ========================================= */

    body .infrastructure-section__inner {
        position: relative;
        z-index: 1;

        display: flex;
        flex-direction: column;

        width: 100%;
        max-width: 1100px;

        margin: 0 auto;
        padding: 90px 60px 100px;
    }

    /* =========================================
       03 — TOP CONTENT
    ========================================= */

    body .infrastructure-section__content {
        display: grid;
        grid-template-columns: minmax(0, 1fr);

        align-items: start;
        gap: 22px;

        width: 100%;

        margin: 0 0 68px;
        padding: 0;

        text-align: left;
    }

    body .infrastructure-section__heading-group {
        width: 100%;
        max-width: 850px;

        margin: 0;
        padding: 0;
    }

    /* =========================================
       04 — EYEBROW
    ========================================= */

    body .infrastructure-section__eyebrow {
        display: block;

        margin: 0 0 20px;
        padding: 0;

        font-family: "Inter", sans-serif !important;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.4;

        letter-spacing: 0.10em;
        text-transform: uppercase;

        color: #C96743 !important;
    }

    /* =========================================
       05 — TWO-TONE HEADING
    ========================================= */

    body .infrastructure-section__heading-group h2 {
        width: 100%;
        max-width: 820px;

        margin: 0;
        padding: 0;

        font-family: "Manrope", sans-serif !important;
        font-size: clamp(39px, 4.9vw, 56px);
        font-weight: 600;
        font-style: normal;

        line-height: 1.13;
        letter-spacing: -0.055em;

        color: #1F211D !important;

        text-align: left;
        text-wrap: balance;
    }

    body .infrastructure-section__heading-group h2 span {
        display: block;

        font: inherit;
        color: #566449 !important;
    }

    /* =========================================
       06 — DESCRIPTION
    ========================================= */

    body .infrastructure-section__body {
        width: 100%;
        max-width: 710px;

        justify-self: start;

        margin: 0;
        padding: 0;

        font-family: "Inter", sans-serif !important;
        font-size: 15px;
        font-weight: 400;

        line-height: 1.8;
        letter-spacing: 0;

        color: rgba(31,33,29,0.76) !important;

        text-align: left;
    }

    /* =========================================
       07 — SERVICE GRID
       THREE COLUMNS / TWO ROWS
    ========================================= */

    body .infrastructure-section__diagram {
        position: relative;

        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));

        column-gap: 26px;
        row-gap: 58px;

        align-items: start;

        width: 100%;
        min-height: 0;

        margin: 0;
        padding: 0;

        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    /* =========================================
       08 — REMOVE ORIGINAL WAVE
    ========================================= */

    body .infrastructure-section__wave {
        display: none !important;
        visibility: hidden !important;
    }

    /* =========================================
       09 — SERVICE ITEM
    ========================================= */

    body .infrastructure-section__item {
        position: relative;
        z-index: 1;

        display: flex;
        flex-direction: column;
        align-items: center;

        width: 100%;
        min-width: 0;
        min-height: 0;

        margin: 0;
        padding: 0;

        background: transparent !important;

        border: 0 !important;
        border-radius: 0;

        box-shadow: none !important;

        text-align: center;

        transition:
            translate 0.4s cubic-bezier(.22,1,.36,1);
    }

    /* =========================================
       10 — LUMINOUS ICON CIRCLES
       LIGHT FROM WITHIN, NOT OUTER GLOW
    ========================================= */

    body .infrastructure-section__icon {
        position: relative;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 90px;
        height: 90px;
        flex: 0 0 90px;

        margin: 0 auto 24px;
        padding: 19px;

        overflow: visible;

        border-radius: 50%;

        background:
            radial-gradient(
                ellipse at 28% 20%,
                #FFFFFF 0%,
                #FBF7F1 38%,
                #F1E3D7 100%
            ) !important;

        border: 1px solid rgba(201,103,67,0.075);

        box-shadow:
            0 4px 9px rgba(54,42,33,0.035),
            0 13px 26px rgba(54,42,33,0.055),
            inset 0 1px 2px rgba(255,255,255,0.95),
            inset -5px -7px 14px rgba(201,103,67,0.035);

        backdrop-filter: none;
        -webkit-backdrop-filter: none;

        transition:
            transform 0.4s cubic-bezier(.22,1,.36,1),
            box-shadow 0.4s ease;
    }

    /* REMOVE OLD ICON GLOW LAYERS */

    body .infrastructure-section__icon::before,
    body .infrastructure-section__icon::after {
        content: none !important;
        display: none !important;
    }

    /* =========================================
       11 — OLIVE ICON ARTWORK
    ========================================= */

    body .infrastructure-section__icon svg {
        display: block;

        width: 35px;
        height: 35px;

        flex: 0 0 auto;

        fill: none;
        stroke: #66745B;
        stroke-width: 1.8;

        stroke-linecap: round;
        stroke-linejoin: round;

        transition:
            transform 0.35s ease;
    }

    /* =========================================
       12 — NUMBER
    ========================================= */

    body .infrastructure-section__number {
        position: relative;

        display: block;

        margin: 0 0 12px;
        padding: 0;

        font-family: "Inter", sans-serif !important;
        font-size: 14px;
        font-weight: 600;

        line-height: 1.3;
        letter-spacing: 0.02em;

        color: #C96743 !important;
    }

    body .infrastructure-section__number::after {
        content: none !important;
        display: none !important;
    }

    /* =========================================
       13 — SERVICE TITLES
    ========================================= */

    body .infrastructure-section__item h3 {
        width: 100%;
        max-width: 230px;

        margin: 0 0 12px;
        padding: 0;

        font-family: "Manrope", sans-serif !important;
        font-size: clamp(16px, 1.8vw, 19px);
        font-weight: 600;
        font-style: normal;

        line-height: 1.35;
        letter-spacing: -0.035em;

        color: #1F211D !important;
        text-align: center;
    }

    /* =========================================
       14 — SERVICE DESCRIPTIONS
    ========================================= */

    body .infrastructure-section__item > p {
        width: 100%;
        max-width: 235px;

        margin: 0 auto;
        padding: 0;

        font-family: "Inter", sans-serif !important;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.7;

        color: rgba(31,33,29,0.73) !important;
        text-align: center;
    }

    /* =========================================
       15 — HOVER DEPTH
    ========================================= */

    @media (hover: hover) {

        body .infrastructure-section__item:hover {
            translate: 0 -5px;
        }

        body .infrastructure-section__item:hover
        .infrastructure-section__icon {
            transform: translateY(-3px);

            box-shadow:
                0 8px 18px rgba(54,42,33,0.05),
                0 17px 30px rgba(54,42,33,0.08),
                inset 0 1px 2px rgba(255,255,255,0.98),
                inset -5px -7px 14px rgba(201,103,67,0.045);
        }

        body .infrastructure-section__item:hover
        .infrastructure-section__icon svg {
            transform: scale(1.045);
        }

        body .infrastructure-section__item:hover h3 {
            color: #394235 !important;
        }
    }

    /* =========================================
       16 — SCROLL ENTRANCE ANIMATIONS
    ========================================= */

    @keyframes infraTabletIntroReveal {
        from {
            opacity: 0;
            transform: translateY(20px);
            filter: blur(3px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
            filter: blur(0);
        }
    }

    @keyframes infraTabletItemReveal {
        from {
            opacity: 0;
            transform: translateY(24px);
            filter: blur(2px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
            filter: blur(0);
        }
    }

    @supports (animation-timeline: view()) {

        body .infrastructure-section__heading-group,
        body .infrastructure-section__body {
            animation: infraTabletIntroReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 75%;
        }

        body .infrastructure-section__item {
            animation: infraTabletItemReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 75%;
        }

        body .infrastructure-section__item:nth-child(2),
        body .infrastructure-section__item:nth-child(5) {
            animation-range: entry 5% entry 80%;
        }

        body .infrastructure-section__item:nth-child(3),
        body .infrastructure-section__item:nth-child(6) {
            animation-range: entry 10% entry 85%;
        }
    }

    /* =========================================
       17 — SMALL TABLETS
       600px–750px
    ========================================= */

    @media (max-width: 750px) {

        body .infrastructure-section__inner {
            padding: 75px 36px 85px 60px;
        }

        body .infrastructure-section__content {
            margin-bottom: 52px;
            gap: 18px;
        }

        body .infrastructure-section__heading-group h2 {
            font-size: clamp(36px, 5.8vw, 43px);
        }

        body .infrastructure-section__body {
            font-size: 14px;
        }

        body .infrastructure-section__diagram {
            column-gap: 15px;
            row-gap: 45px;
        }

        body .infrastructure-section__icon {
            width: 76px;
            height: 76px;
            flex-basis: 76px;

            padding: 16px;
            margin-bottom: 21px;
        }

        body .infrastructure-section__icon svg {
            width: 29px;
            height: 29px;
        }

        body .infrastructure-section__item h3 {
            font-size: 15px;
        }

        body .infrastructure-section__item > p {
            font-size: 12px;
            line-height: 1.65;
        }
    }

    /* =========================================
       18 — REDUCED MOTION
    ========================================= */

    @media (prefers-reduced-motion: reduce) {

        body .infrastructure-section__heading-group,
        body .infrastructure-section__body,
        body .infrastructure-section__item {
            animation: none !important;
            opacity: 1 !important;
            transform: none !important;
            filter: none !important;
        }

        body .infrastructure-section__item,
        body .infrastructure-section__icon,
        body .infrastructure-section__icon svg {
            transition: none !important;
        }
    }

} /* END HOMEPAGE SECTION 02 — TABLET */



/* =========================================================
   FRAYORA — HOMEPAGE SECTION 03
   OUR APPROACH — TABLET
   600px–1100px

   FROM TANGLED TO EFFORTLESS
   Manrope + Inter
   Balanced warm ivory luminosity
   Three-stage visual journey
   Smaller centered PNG illustrations
   Soft shadows + scroll animations
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    /* =========================================
       01 — FULL-WIDTH SECTION
    ========================================= */

    body .home-approach {
        position: relative;
        isolation: isolate;

        display: block;

        width: 100vw;
        max-width: none;
        min-height: 0;
        height: auto;

        margin: 0 0 0 calc(50% - 50vw);
        padding: 0;

        overflow: hidden;
        box-sizing: border-box;

        background-color: #F5EDE4 !important;

        background-image:
            radial-gradient(
                ellipse 120% 90% at 50% 0%,
                rgba(255,255,255,0.38) 0%,
                transparent 85%
            ),
            radial-gradient(
                ellipse 120% 90% at 50% 100%,
                rgba(255,255,255,0.38) 0%,
                transparent 85%
            ) !important;

        background-repeat: no-repeat !important;
        background-size: 100% 100% !important;
    }

    body .home-approach *,
    body .home-approach *::before,
    body .home-approach *::after {
        box-sizing: border-box;
    }

    /* =========================================
       02 — SECTION CONTENT
    ========================================= */

    body .home-approach__inner {
        position: relative;
        z-index: 1;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 66px;

        width: 100%;
        max-width: 1100px;

        margin: 0 auto;
        padding: 85px 60px 95px;
    }

    /* =========================================
       03 — TOP INTRODUCTION
    ========================================= */

    body .home-approach__intro {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        width: 100%;
        max-width: 760px;
        min-width: 0;

        margin: 0;
        padding: 0;

        text-align: left;
    }

    /* EYEBROW */

    body .home-approach__eyebrow {
        display: block;

        margin: 0 0 19px;
        padding: 0;

        font-family: "Inter", sans-serif !important;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.4;
        letter-spacing: 0.10em;

        text-transform: uppercase;
        color: #C96743 !important;
    }

    /* =========================================
       04 — TWO-TONE HEADING
    ========================================= */

    body .home-approach__title {
        display: block;

        width: 100%;
        max-width: 760px;

        margin: 0;
        padding: 0;

        font-family: "Manrope", sans-serif !important;
        font-size: clamp(44px, 5.7vw, 60px);
        font-weight: 600;
        font-style: normal;

        line-height: 1.12;
        letter-spacing: -0.055em;

        color: #1F211D !important;
        text-align: left;
        text-wrap: balance;
    }

    body .home-approach__title span {
        display: block;

        font-family: inherit;
        font-size: inherit;
        font-weight: inherit;
        font-style: normal;

        line-height: inherit;
        letter-spacing: inherit;

        color: #566449 !important;
    }

    /* =========================================
       05 — BODY DESCRIPTION
    ========================================= */

    body .home-approach__description {
        width: 100%;
        max-width: 660px;

        margin: 25px 0 0;
        padding: 0;

        font-family: "Inter", sans-serif !important;
        font-size: 15px;
        font-weight: 400;

        line-height: 1.8;
        letter-spacing: 0;

        color: rgba(31,33,29,0.76) !important;
        text-align: left;
    }

    /* =========================================
       06 — TERRACOTTA CTA BUTTON
    ========================================= */

    body .home-approach__button {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        gap: 17px;

        width: fit-content;
        min-height: 55px;

        margin: 30px 0 0;
        padding: 0 28px;

        background: #C96743 !important;
        color: #FFFFFF !important;

        border: 1px solid #C96743;
        border-radius: 999px;

        font-family: "Manrope", sans-serif !important;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.3;

        text-decoration: none !important;
        white-space: nowrap;

        box-shadow:
            0 7px 15px rgba(108,63,43,0.09),
            0 15px 30px rgba(108,63,43,0.075);

        transition:
            background-color 0.35s ease,
            transform 0.35s ease,
            box-shadow 0.35s ease;
    }

    body .home-approach__button:hover {
        background: #B95635 !important;
        border-color: #B95635;

        transform: translateY(-3px);

        box-shadow:
            0 12px 24px rgba(108,63,43,0.13),
            0 20px 36px rgba(108,63,43,0.10);
    }

    body .home-approach__button span {
        display: inline-block;

        font-family: "Inter", sans-serif;
        font-size: 20px;
        line-height: 1;

        transition: transform 0.35s ease;
    }

    body .home-approach__button:hover span {
        transform: translateX(5px);
    }

    body .home-approach__button:focus-visible {
        outline: 2px solid #394235;
        outline-offset: 4px;
    }

    /* =========================================
       07 — THREE-STAGE JOURNEY
    ========================================= */

    body .home-approach__journey {
        position: relative;

        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));

        align-items: start;
        column-gap: 26px;

        width: 100%;
        min-width: 0;

        margin: 0;
        padding: 0;
    }

    /* =========================================
       08 — INDIVIDUAL STAGES
    ========================================= */

    body .home-approach__stage {
        position: relative;

        display: flex;
        flex-direction: column;
        align-items: center;

        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;

        background: transparent;

        text-align: center;

        transition:
            translate 0.45s cubic-bezier(.22,1,.36,1);
    }

    /* =========================================
       09 — ILLUSTRATION CONTAINERS
    ========================================= */

    body .home-approach__visual {
        position: relative;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        height: 165px;

        margin: 0 0 23px;
        padding: 0;

        background: transparent;
        border: 0;

        overflow: visible;
    }

    /* CRITICAL:
       Overrides the oversized tablet PNGs */

    body .home-approach__visual img {
        display: block;

        width: auto !important;
        max-width: min(100%, 155px) !important;

        height: 150px !important;
        max-height: 150px !important;

        margin: 0 auto;
        padding: 0;

        object-fit: contain !important;
        object-position: center;

        filter:
            drop-shadow(0 8px 10px rgba(31,33,29,0.055))
            drop-shadow(0 18px 22px rgba(31,33,29,0.075));

        transition:
            transform 0.5s cubic-bezier(.22,1,.36,1),
            filter 0.5s ease;
    }

    /* =========================================
       10 — STAGE HEADINGS
    ========================================= */

    body .home-approach__stage h3 {
        width: 100%;

        margin: 0 0 18px;
        padding: 0;

        font-family: "Manrope", sans-serif !important;
        font-size: clamp(22px, 2.9vw, 29px);
        font-weight: 600;

        line-height: 1.2;
        letter-spacing: -0.045em;

        color: #1F211D !important;
        text-align: center;
    }

    /* =========================================
       11 — STAGE DESCRIPTIONS
    ========================================= */

    body .home-approach__details {
        display: flex;
        flex-direction: column;
        align-items: center;

        gap: 9px;

        width: 100%;
        margin: 0;
        padding: 0;
    }

    body .home-approach__details p {
        width: 100%;
        margin: 0;
        padding: 0;

        font-family: "Inter", sans-serif !important;
        font-size: 13px;
        font-weight: 400;

        line-height: 1.5;

        color: rgba(31,33,29,0.72) !important;
        text-align: center;
    }

    /* =========================================
       12 — ARROWS BETWEEN ILLUSTRATIONS

       Kept outside the grid flow so they
       cannot squeeze the three columns.
    ========================================= */

    body .home-approach__arrow {
        position: absolute;
        z-index: 2;

        top: 0;
        left: 33.333%;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 28px;
        height: 165px;

        margin: 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 26px;
        font-weight: 300;
        line-height: 1;

        color: #C96743;
        opacity: 0.8;

        transform: translateX(-50%);
        pointer-events: none;
    }

    body .home-approach__arrow:nth-child(4) {
        left: 66.666%;
    }

    /* =========================================
       13 — HOVER INTERACTIONS
    ========================================= */

    @media (hover: hover) {

        body .home-approach__stage:hover {
            translate: 0 -4px;
        }

        body .home-approach__stage:hover
        .home-approach__visual img {
            transform: translateY(-5px) scale(1.035);

            filter:
                drop-shadow(0 12px 15px rgba(31,33,29,0.07))
                drop-shadow(0 24px 28px rgba(31,33,29,0.10));
        }
    }

    /* =========================================
       14 — SCROLL REVEAL ANIMATIONS
    ========================================= */

    @keyframes homeApproachTabletReveal {
        from {
            opacity: 0;
            translate: 0 26px;
            filter: blur(3px);
        }

        to {
            opacity: 1;
            translate: 0 0;
            filter: blur(0);
        }
    }

    @keyframes homeApproachTabletArrowReveal {
        from {
            opacity: 0;
        }

        to {
            opacity: 0.8;
        }
    }

    @supports (animation-timeline: view()) {

        body .home-approach__intro {
            animation: homeApproachTabletReveal linear both;

            animation-timeline: view();
            animation-range: entry 0% entry 60%;
        }

        body .home-approach__stage {
            animation: homeApproachTabletReveal linear both;

            animation-timeline: view();
            animation-range: entry 0% entry 70%;
        }

        body .home-approach__stage:nth-child(3) {
            animation-range: entry 6% entry 76%;
        }

        body .home-approach__stage:nth-child(5) {
            animation-range: entry 12% entry 82%;
        }

        body .home-approach__arrow {
            animation: homeApproachTabletArrowReveal linear both;

            animation-timeline: view();
            animation-range: entry 0% entry 75%;
        }
    }

    /* =========================================
       15 — SMALLER TABLETS
       600px–750px
    ========================================= */

    @media (max-width: 750px) {

        body .home-approach__inner {
            padding: 75px 36px 85px 60px;
            gap: 55px;
        }

        body .home-approach__title {
            font-size: clamp(40px, 6vw, 46px);
        }

        body .home-approach__description {
            font-size: 14px;
            line-height: 1.75;
        }

        body .home-approach__journey {
            column-gap: 12px;
        }

        body .home-approach__visual,
        body .home-approach__arrow {
            height: 135px;
        }

        body .home-approach__visual img {
            max-width: min(100%, 115px) !important;

            height: 115px !important;
            max-height: 115px !important;
        }

        body .home-approach__stage h3 {
            font-size: 21px;
            margin-bottom: 15px;
        }

        body .home-approach__details {
            gap: 7px;
        }

        body .home-approach__details p {
            font-size: 11px;
            line-height: 1.55;
        }

        body .home-approach__arrow {
            width: 20px;
            font-size: 21px;
        }

        body .home-approach__button {
            min-height: 52px;
            padding: 0 23px;
            font-size: 13px;
        }
    }

    /* =========================================
       16 — REDUCED MOTION
    ========================================= */

    @media (prefers-reduced-motion: reduce) {

        body .home-approach__intro,
        body .home-approach__stage,
        body .home-approach__arrow {
            animation: none !important;

            opacity: 1 !important;
            translate: none !important;
            filter: none !important;
        }

        body .home-approach__stage,
        body .home-approach__visual img,
        body .home-approach__button,
        body .home-approach__button span {
            transition: none !important;
        }
    }

} /* END HOMEPAGE SECTION 03 — TABLET */




/* =========================================================
   FRAYORA — HOMEPAGE SECTION 05
   SELECTED WORK — TABLET ONLY
   600px–1100px

   Dark olive luminous background
   Manrope + Inter typography
   Responsive editorial project cards
   Soft shadows + hover elevation
   Staggered scroll reveal animations
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    /* =========================================
       01 — SECTION BACKGROUND
    ========================================= */

    body .home-work {
        position: relative;
        isolation: isolate;

        display: block;

        width: 100vw;
        max-width: none;
        height: auto;
        min-height: 0;

        margin: 0 0 0 calc(50% - 50vw);
        padding: 0;

        overflow: hidden;
        box-sizing: border-box;

        background-color: #303B32 !important;

        background-image:
            radial-gradient(
                ellipse 120% 85% at 50% 0%,
                rgba(137, 155, 124, 0.11) 0%,
                transparent 85%
            ),
            radial-gradient(
                ellipse 120% 85% at 50% 100%,
                rgba(137, 155, 124, 0.11) 0%,
                transparent 85%
            ) !important;

        background-repeat: no-repeat !important;
        background-size: 100% 100% !important;
    }

    body .home-work *,
    body .home-work *::before,
    body .home-work *::after {
        box-sizing: border-box;
    }

    /* =========================================
       02 — SECTION CONTAINER
    ========================================= */

    body .home-work__inner {
        position: relative;
        z-index: 1;

        width: 100%;
        max-width: 1100px;

        margin: 0 auto;
        padding: 78px 60px 88px;
    }

    /* =========================================
       03 — HEADER
    ========================================= */

    body .home-work__header {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: start;

        gap: 20px;

        width: 100%;
        margin: 0 0 38px;
        padding: 0;
    }

    body .home-work__heading-group {
        width: 100%;
        min-width: 0;
    }

    body .home-work__eyebrow {
        display: block;

        margin: 0 0 15px;

        font-family: "Inter", sans-serif !important;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.4;
        letter-spacing: 0.10em;
        text-transform: uppercase;

        color: #E58A62 !important;
    }

    /* =========================================
       04 — HEADING
    ========================================= */

    body .home-work__title {
        width: 100%;
        max-width: 750px;

        margin: 0;

        font-family: "Manrope", sans-serif !important;
        font-size: clamp(41px, 5.7vw, 56px);
        font-weight: 600;
        font-style: normal;
        line-height: 1.12;
        letter-spacing: -0.055em;

        color: #F8F3EB !important;
        text-align: left;
        text-wrap: balance;
    }

    /* =========================================
       05 — DESCRIPTION
    ========================================= */

    body .home-work__description {
        width: 100%;
        max-width: 670px;

        margin: 0;
        padding: 0;

        font-family: "Inter", sans-serif !important;
        font-size: 15px;
        font-weight: 400;
        line-height: 1.75;

        color: rgba(248, 243, 235, 0.83) !important;
        text-align: left;
    }

    /* =========================================
       06 — VIEW OUR WORK BUTTON
    ========================================= */

    body .home-work__portfolio {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        gap: 17px;

        width: fit-content;
        min-height: 52px;

        margin: 7px 0 0;
        padding: 0 25px;

        border: 1px solid rgba(248,243,235,0.70);
        border-radius: 999px;

        background: transparent !important;
        color: #F8F3EB !important;

        font-family: "Manrope", sans-serif !important;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.3;

        text-decoration: none !important;
        white-space: nowrap;

        transition:
            background-color 0.35s ease,
            border-color 0.35s ease,
            color 0.35s ease,
            transform 0.35s ease,
            box-shadow 0.35s ease;
    }

    body .home-work__portfolio span {
        display: inline-block;
        font-size: 20px;
        line-height: 1;

        transition: transform 0.35s ease;
    }

    body .home-work__portfolio:hover {
        background: #F8F3EB !important;
        border-color: #F8F3EB;
        color: #303B32 !important;

        transform: translateY(-3px);

        box-shadow:
            0 12px 25px rgba(8, 17, 10, 0.14);
    }

    body .home-work__portfolio:hover span {
        transform: translateX(5px);
    }

    /* =========================================
       07 — PROJECT GRID
       2 COLUMNS ON LARGER TABLETS
    ========================================= */

    body .home-work__projects {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 22px;
        align-items: stretch;

        width: 100%;
        min-width: 0;

        margin: 0;
        padding: 0;
    }

    /* Center the third project without
       stretching it across the entire section */

    body .home-work__card:nth-child(3):last-child {
        grid-column: 1 / -1;
        width: calc(50% - 11px);
        justify-self: center;
    }

    /* =========================================
       08 — PROJECT CARDS
    ========================================= */

    body .home-work__card {
        position: relative;

        display: flex;
        flex-direction: column;

        width: 100%;
        min-width: 0;
        height: auto;

        margin: 0;
        padding: 0;

        overflow: hidden;

        border: 1px solid rgba(255,255,255,0.16);
        border-radius: 7px;

        background: #F9F5EE;

        box-shadow:
            0 5px 12px rgba(9,18,11,0.08),
            0 17px 33px rgba(9,18,11,0.17),
            0 27px 48px rgba(9,18,11,0.09);

        transition:
            transform 0.45s cubic-bezier(.22,1,.36,1),
            box-shadow 0.45s ease,
            border-color 0.35s ease;
    }

    /* =========================================
       09 — PROJECT IMAGE
    ========================================= */

    body .home-work__image-wrap {
        position: relative;
        display: block;

        width: 100%;
        height: 190px;

        margin: 0;
        padding: 0;

        overflow: hidden;

        background: #E7E2D9;
    }

    body .home-work__image-wrap img {
        display: block;

        width: 100% !important;
        height: 100% !important;

        max-width: none;
        margin: 0;

        object-fit: cover !important;
        object-position: center;

        transition:
            transform 0.75s cubic-bezier(.22,1,.36,1);
    }

    body .home-work__image-wrap::after {
        content: "";

        position: absolute;
        inset: 0;

        background: linear-gradient(
            180deg,
            rgba(31,33,29,0.04),
            transparent 45%,
            rgba(31,33,29,0.075)
        );

        pointer-events: none;
    }

    /* =========================================
       10 — NUMBER BADGE
    ========================================= */

    body .home-work__index {
        position: absolute;
        z-index: 2;

        top: 0;
        left: 0;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 52px;
        height: 46px;

        border-radius: 0 0 8px 0;

        background: rgba(248,243,235,0.96);

        font-family: "Manrope", sans-serif !important;
        font-size: 19px;
        font-weight: 500;
        line-height: 1;

        color: #D59176;

        box-shadow:
            3px 5px 13px rgba(31,33,29,0.06);
    }

    body .home-work__card:nth-child(2)
    .home-work__index {
        color: #B89A85;
    }

    body .home-work__card:nth-child(3)
    .home-work__index {
        color: #B89D73;
    }

    /* =========================================
       11 — CARD CONTENT
    ========================================= */

    body .home-work__card-content {
        position: relative;

        display: flex;
        flex-direction: column;
        flex: 1;

        min-height: 128px;

        padding: 19px 22px 21px;

        background: #F9F5EE;
    }

    body .home-work__category {
        margin: 0 0 7px;

        font-family: "Inter", sans-serif !important;
        font-size: 10px;
        font-weight: 600;
        line-height: 1.4;

        letter-spacing: 0.075em;
        text-transform: uppercase;

        color: #C96743 !important;
    }

    body .home-work__project-title {
        margin: 0 33px 6px 0;

        font-family: "Manrope", sans-serif !important;
        font-size: clamp(20px, 2.5vw, 24px);
        font-weight: 600;
        line-height: 1.25;
        letter-spacing: -0.04em;

        color: #1F211D !important;
    }

    body .home-work__project-description {
        margin: 0 34px 0 0;

        font-family: "Inter", sans-serif !important;
        font-size: 12px;
        font-weight: 400;
        line-height: 1.6;

        color: rgba(31,33,29,0.73) !important;
    }

    /* =========================================
       12 — CARD ARROW
    ========================================= */

    body .home-work__arrow {
        position: absolute;

        right: 20px;
        bottom: 23px;

        display: inline-block;

        font-family: "Inter", sans-serif;
        font-size: 23px;
        line-height: 1;

        color: #C96743 !important;

        transition: transform 0.35s ease;
    }

    /* =========================================
       13 — HOVER EFFECTS
    ========================================= */

    @media (hover: hover) {

        body .home-work__card:hover {
            transform: translateY(-6px);

            border-color: rgba(255,255,255,0.34);

            box-shadow:
                0 8px 19px rgba(9,18,11,0.10),
                0 24px 43px rgba(9,18,11,0.20),
                0 36px 65px rgba(9,18,11,0.11);
        }

        body .home-work__card:hover
        .home-work__image-wrap img {
            transform: scale(1.045);
        }

        body .home-work__card:hover
        .home-work__arrow {
            transform: translateX(5px);
        }
    }

    /* =========================================
       14 — SMALLER TABLETS
       600px–760px
    ========================================= */

    @media (max-width: 760px) {

        body .home-work__inner {
            padding: 70px 36px 78px 60px;
        }

        body .home-work__header {
            gap: 18px;
            margin-bottom: 30px;
        }

        body .home-work__title {
            font-size: clamp(37px, 6vw, 44px);
        }

        body .home-work__description {
            font-size: 14px;
        }

        body .home-work__projects {
            grid-template-columns: minmax(0, 1fr);
            gap: 20px;
        }

        body .home-work__card:nth-child(3):last-child {
            grid-column: auto;
            width: 100%;
        }

        body .home-work__image-wrap {
            height: 215px;
        }

        body .home-work__card-content {
            min-height: 125px;
            padding: 19px 22px 21px;
        }

        body .home-work__project-title {
            font-size: 22px;
        }

        body .home-work__portfolio {
            min-height: 50px;
            padding: 0 23px;
            font-size: 13px;
        }
    }

    /* =========================================
       15 — SCROLL ENTRANCE ANIMATIONS
    ========================================= */

    @keyframes homeWorkTabletReveal {
        from {
            opacity: 0;
            translate: 0 22px;
            filter: blur(3px);
        }

        to {
            opacity: 1;
            translate: 0 0;
            filter: blur(0);
        }
    }

    @supports (animation-timeline: view()) {

        body .home-work__header {
            animation: homeWorkTabletReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 65%;
        }

        body .home-work__card {
            animation: homeWorkTabletReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 70%;
        }

        body .home-work__card:nth-child(2) {
            animation-range: entry 5% entry 75%;
        }

        body .home-work__card:nth-child(3) {
            animation-range: entry 8% entry 78%;
        }
    }

    /* =========================================
       16 — REDUCED MOTION
    ========================================= */

    @media (prefers-reduced-motion: reduce) {

        body .home-work__header,
        body .home-work__card {
            animation: none !important;
            opacity: 1 !important;
            translate: none !important;
            filter: none !important;
        }

        body .home-work__card,
        body .home-work__image-wrap img,
        body .home-work__portfolio,
        body .home-work__portfolio span,
        body .home-work__arrow {
            transition: none !important;
        }

        body .home-work__card:hover,
        body .home-work__portfolio:hover {
            transform: none !important;
        }
    }

} /* END HOMEPAGE SECTION 05 — TABLET */


/* =========================================================
   FRAYORA — HOMEPAGE SECTION 05
   SELECTED WORK — TABLET REFINEMENT
   600px–1100px

   Horizontal scrollable portfolio cards
   Controlled card widths
   Compact section proportions
   Consistent 60px alignment
   Soft shadows + balanced luminosity
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    /* SECTION BACKGROUND */

    body .home-work {
        min-height: 0;
        height: auto;

        background-color: #303B32 !important;

        background-image:
            radial-gradient(
                ellipse 120% 90% at 50% 0%,
                rgba(143,160,130,0.12) 0%,
                transparent 85%
            ),
            radial-gradient(
                ellipse 120% 90% at 50% 100%,
                rgba(143,160,130,0.12) 0%,
                transparent 85%
            ) !important;
    }

    /* MATCH HEADER / HERO ALIGNMENT */

    body .home-work__inner {
        width: 100%;
        max-width: 1100px;

        margin: 0 auto;
        padding: 70px 60px 78px !important;
    }

    /* COMPACT INTRODUCTION */

    body .home-work__header {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        gap: 18px;

        margin: 0 0 32px;
        padding: 0;
    }

    body .home-work__description {
        max-width: 630px;
    }

    body .home-work__portfolio {
        margin-top: 5px;
    }

    /* =========================================
       HORIZONTAL SCROLL CONTAINER
    ========================================= */

    body .home-work__projects {
        display: grid !important;

        grid-template-columns: none !important;
        grid-auto-flow: column;
        grid-auto-columns: clamp(290px, 48vw, 410px);

        gap: 20px;

        align-items: stretch;

        width: 100%;
        min-width: 0;

        margin: 0;
        padding: 5px 4px 24px;

        overflow-x: auto;
        overflow-y: hidden;

        scroll-snap-type: x mandatory;
        scroll-padding-inline: 4px;

        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;

        scrollbar-width: thin;
        scrollbar-color:
            rgba(248,243,235,0.32)
            rgba(248,243,235,0.07);
    }

    body .home-work__projects::-webkit-scrollbar {
        height: 6px;
    }

    body .home-work__projects::-webkit-scrollbar-track {
        background: rgba(248,243,235,0.07);
        border-radius: 999px;
    }

    body .home-work__projects::-webkit-scrollbar-thumb {
        background: rgba(248,243,235,0.32);
        border-radius: 999px;
    }

    /* =========================================
       REMOVE OLD THIRD-CARD GRID OVERRIDE
    ========================================= */

    body .home-work__card:nth-child(3):last-child {
        grid-column: auto !important;
        width: 100% !important;
        justify-self: auto !important;
    }

    /* =========================================
       CONTROLLED CARD SIZE
    ========================================= */

    body .home-work__card {
        width: 100%;
        min-width: 0;
        min-height: 0;
        height: auto;

        scroll-snap-align: start;
        scroll-snap-stop: normal;

        border-radius: 7px;

        box-shadow:
            0 5px 13px rgba(9,18,11,0.09),
            0 17px 33px rgba(9,18,11,0.16),
            0 27px 48px rgba(9,18,11,0.09);
    }

    /* SMALLER PROJECT IMAGES */

    body .home-work__image-wrap {
        height: 190px;
    }

    body .home-work__image-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* COMPACT CARD CONTENT */

    body .home-work__card-content {
        min-height: 118px;
        padding: 18px 22px 20px;
    }

    body .home-work__category {
        margin-bottom: 6px;
    }

    body .home-work__project-title {
        margin-bottom: 5px;
    }

    body .home-work__arrow {
        right: 20px;
        bottom: 25px;
    }

    /* =========================================
       HOVER DEPTH
    ========================================= */

    @media (hover: hover) {

        body .home-work__card:hover {
            transform: translateY(-4px);

            box-shadow:
                0 9px 20px rgba(9,18,11,0.11),
                0 23px 42px rgba(9,18,11,0.20),
                0 34px 60px rgba(9,18,11,0.11);
        }
    }

    /* =========================================
       SMALLER TABLETS
    ========================================= */

    @media (max-width: 750px) {

        body .home-work__inner {
            padding: 64px 36px 72px 60px !important;
        }

        body .home-work__projects {
            grid-auto-columns: minmax(280px, 82%);
            gap: 16px;
        }

        body .home-work__image-wrap {
            height: 180px;
        }

        body .home-work__card-content {
            min-height: 114px;
            padding: 17px 20px 19px;
        }

        body .home-work__header {
            margin-bottom: 28px;
        }
    }

    /* =========================================
       REDUCED MOTION
    ========================================= */

    @media (prefers-reduced-motion: reduce) {

        body .home-work__projects {
            scroll-behavior: auto !important;
        }

        body .home-work__card:hover {
            transform: none !important;
        }
    }

} /* END HOMEPAGE SECTION 05 — TABLET */




/* =========================================================
   FRAYORA — HOMEPAGE SECTION 07
   FINAL CTA — TABLET ONLY
   600px–1100px

   Compact editorial layout
   Warm ivory #F5EDE4
   Balanced soft luminosity
   No floating card
   Manrope + Inter
   Natural button shadows
   Scroll reveal animations
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    /* =========================================
       01 — FULL-WIDTH SECTION
    ========================================= */

    body .home-cta {
        position: relative;
        isolation: isolate;

        display: block;

        width: 100vw;
        max-width: none;
        min-height: 0;
        height: auto;

        margin: 0 0 0 calc(50% - 50vw);
        padding: 88px 60px 94px;

        box-sizing: border-box;
        overflow: hidden;

        background-color: #F5EDE4 !important;

        background-image:
            radial-gradient(
                ellipse 120% 90% at 50% 0%,
                rgba(255,255,255,0.38) 0%,
                transparent 85%
            ),
            radial-gradient(
                ellipse 120% 90% at 50% 100%,
                rgba(255,255,255,0.38) 0%,
                transparent 85%
            ) !important;

        background-repeat: no-repeat !important;
        background-size: 100% 100% !important;
    }

    body .home-cta *,
    body .home-cta *::before,
    body .home-cta *::after {
        box-sizing: border-box;
    }

    /* =========================================
       02 — REMOVE OLD LUMINOSITY LAYERS
       KEEP ONLY THE BALANCED BACKGROUND
    ========================================= */

    body .home-cta::before,
    body .home-cta::after {
        content: none !important;
        display: none !important;
    }

    /* =========================================
       03 — CENTERED CONTENT
       NO FLOATING CARD
    ========================================= */

    body .home-cta__inner {
        position: relative;
        z-index: 1;

        display: flex;
        flex-direction: column;
        align-items: center;

        width: 100%;
        max-width: 800px;

        margin: 0 auto;
        padding: 0;

        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;

        text-align: center;
    }

    /* REMOVE PREVIOUS CARD PSEUDO-ELEMENT */

    body .home-cta__inner::before,
    body .home-cta__inner::after {
        content: none !important;
        display: none !important;
    }



    /* =========================================
       05 — MAIN HEADING
    ========================================= */

    body .home-cta__title {
        width: 100%;
        max-width: 780px;

        margin: 0 auto;
        padding: 0;

        font-family: "Manrope", sans-serif !important;
        font-size: clamp(38px, 5.4vw, 55px);
        font-weight: 600;
        font-style: normal;

        line-height: 1.14;
        letter-spacing: -0.055em;

        color: #1F211D !important;

        text-align: center;
        text-wrap: balance;
    }

    /* =========================================
       06 — SUPPORTING COPY
    ========================================= */

    body .home-cta__text {
        width: 100%;
        max-width: 590px;

        margin: 22px auto 0;
        padding: 0;

        font-family: "Inter", sans-serif !important;
        font-size: 15px;
        font-weight: 400;

        line-height: 1.8;
        letter-spacing: 0;

        color: rgba(31,33,29,0.74) !important;

        text-align: center;
    }

    body .home-cta__text strong {
        font-weight: 500;
        color: #1F211D !important;
    }

    /* =========================================
       07 — BUTTON CONTAINER
    ========================================= */

    body .home-cta__button-wrap {
        display: flex;
        justify-content: center;

        width: 100%;

        margin: 31px 0 0;
        padding: 0;
    }

    /* =========================================
       08 — TERRACOTTA CTA BUTTON
    ========================================= */

    body .home-cta__button {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        gap: 16px;

        width: fit-content;
        min-width: 245px;
        min-height: 56px;

        margin: 0;
        padding: 0 30px;

        border: 1px solid #C96743;
        border-radius: 999px;

        background: #C96743 !important;
        color: #FFFFFF !important;

        font-family: "Manrope", sans-serif !important;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.3;

        letter-spacing: -0.015em;
        text-decoration: none !important;
        white-space: nowrap;

        box-shadow:
            0 7px 17px rgba(103,58,39,0.11),
            0 14px 28px rgba(103,58,39,0.06);

        transition:
            transform 0.35s cubic-bezier(.22,1,.36,1),
            background-color 0.35s ease,
            box-shadow 0.35s ease;
    }

    body .home-cta__button:hover {
        transform: translateY(-3px);

        background: #B95635 !important;
        border-color: #B95635;

        box-shadow:
            0 11px 24px rgba(103,58,39,0.16),
            0 18px 32px rgba(103,58,39,0.08);
    }

    /* BUTTON ARROW */

    body .home-cta__button-arrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        font-family: "Inter", sans-serif;
        font-size: 20px;
        line-height: 1;

        transition:
            transform 0.35s cubic-bezier(.22,1,.36,1);
    }

    body .home-cta__button:hover
    .home-cta__button-arrow {
        transform: translateX(5px);
    }

    body .home-cta__button:focus-visible {
        outline: 2px solid #394235;
        outline-offset: 4px;
    }

    /* =========================================
       09 — SCROLL REVEAL ANIMATIONS
    ========================================= */

    @keyframes homeCtaTabletScrollReveal {
        from {
            opacity: 0;
            translate: 0 22px;
            filter: blur(3px);
        }

        to {
            opacity: 1;
            translate: 0 0;
            filter: blur(0);
        }
    }

    @supports (animation-timeline: view()) {

      
        body .home-cta__title,
        body .home-cta__text,
        body .home-cta__button-wrap {
            animation-name: homeCtaTabletScrollReveal;
            animation-duration: 1s;
            animation-timing-function: linear;
            animation-fill-mode: both;
            animation-delay: 0s;

            animation-timeline: view();
            animation-range: entry 0% entry 70%;

            transform: none;
        }

        body .home-cta__text {
            animation-range: entry 5% entry 75%;
        }

        body .home-cta__button-wrap {
            animation-range: entry 10% entry 80%;
        }
    }

    /* =========================================
       10 — SMALLER TABLETS
       600px–750px
    ========================================= */

    @media (max-width: 750px) {

        body .home-cta {
            padding: 75px 36px 82px 60px;
        }

        body .home-cta__title {
            max-width: 100%;

            font-size: clamp(35px, 6vw, 43px);
            line-height: 1.13;
        }

    

        body .home-cta__text {
            max-width: 490px;

            margin-top: 20px;
            font-size: 14px;
            line-height: 1.75;
        }

        body .home-cta__button-wrap {
            margin-top: 28px;
        }

        body .home-cta__button {
            min-width: 225px;
            min-height: 53px;

            padding: 0 25px;
            font-size: 13px;
        }
    }

    /* =========================================
       11 — REDUCED MOTION
    ========================================= */

    @media (prefers-reduced-motion: reduce) {

    
        body .home-cta__title,
        body .home-cta__text,
        body .home-cta__button-wrap {
            animation: none !important;

            opacity: 1 !important;
            translate: none !important;
            transform: none !important;
            filter: none !important;
        }

        body .home-cta__button,
        body .home-cta__button-arrow {
            transition: none !important;
        }

        body .home-cta__button:hover {
            transform: none !important;
        }
    }

} /* END HOMEPAGE SECTION 07 — TABLET */


/* =========================================================
   FRAYORA — HOMEPAGE
   SECTION 01 — ROLLING HILLS HERO
   MOBILE ONLY: 0px–599px

   Cinematic full-width landscape
   Manrope + Inter typography
   Dark olive directional overlay
   Subtle atmospheric luminosity
   Editorial responsive spacing
   Staggered entrance animations
========================================================= */

@media (max-width: 599px) {

    /* =========================================
       01 — HERO CONTAINER
    ========================================= */

    body .frayora-home-hero {
        position: relative;
        isolation: isolate;

        display: flex;
        align-items: center;

        width: 100vw;
        max-width: none;

        min-height: 740px;
        height: auto;

        margin: 0 0 0 calc(50% - 50vw);
        padding: 0;

        overflow: hidden;
        box-sizing: border-box;

        background-color: #283327;

        border: 0;
        border-radius: 0;
    }

    body .frayora-home-hero *,
    body .frayora-home-hero *::before,
    body .frayora-home-hero *::after {
        box-sizing: border-box;
    }

    /* =========================================
       02 — FULL-BLEED BACKGROUND
    ========================================= */

    body .frayora-home-hero__media {
        position: absolute;
        inset: 0;
        z-index: 0;

        display: block;

        width: 100%;
        height: 100%;

        background-image:
            url("../images/Homepage/mobilehillshero.png");

        background-size: cover;
        background-repeat: no-repeat;

        /* Focus on landscape rather than
           cropping too far to one edge */

        background-position: 58% center;

        transform-origin: center center;

        animation:
            homeMobilePhotoReveal 1.65s
            cubic-bezier(.22,1,.36,1) both;
    }

    /* =========================================
       03 — DARK OLIVE OVERLAY
       Stronger for mobile readability
    ========================================= */

    body .frayora-home-hero__overlay {
        position: absolute;
        inset: 0;
        z-index: 1;

        display: block;

        width: 100%;
        height: 100%;

        background-color: transparent;

        background-image:
            linear-gradient(
                90deg,
                rgba(17,28,21,0.83) 0%,
                rgba(17,28,21,0.74) 45%,
                rgba(17,28,21,0.56) 100%
            ),
            linear-gradient(
                180deg,
                rgba(17,28,21,0.07) 0%,
                transparent 22%,
                transparent 72%,
                rgba(17,28,21,0.12) 100%
            );

        pointer-events: none;
    }

    /* =========================================
       04 — SUBTLE LUMINOUS ATMOSPHERE
       No obvious glow or light circles
    ========================================= */

    body .frayora-home-hero__overlay::after {
        content: "";

        position: absolute;
        inset: 0;

        background-image:
            radial-gradient(
                ellipse 120% 78% at 50% 0%,
                rgba(166,182,149,0.055) 0%,
                transparent 88%
            ),
            radial-gradient(
                ellipse 120% 78% at 50% 100%,
                rgba(166,182,149,0.055) 0%,
                transparent 88%
            );

        pointer-events: none;
    }

    /* =========================================
       05 — CONTENT CONTAINER
       28PX MOBILE CONTENT GRID
    ========================================= */

    body .frayora-home-hero__inner {
        position: relative;
        z-index: 2;

        display: flex;
        align-items: center;
        justify-content: flex-start;

        width: 100%;
        max-width: 599px;

        min-height: 740px;
        height: auto;

        margin: 0 auto;
        padding: 85px 28px 90px;

        text-align: left;
    }

    body .frayora-home-hero__content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        width: 100%;
        max-width: 510px;
        min-width: 0;

        margin: 0;
        padding: 0;

        text-align: left;
    }

    /* =========================================
       06 — HERO TITLE
    ========================================= */

    body .frayora-home-hero__title {
        width: 100%;
        max-width: 510px;

        margin: 0;
        padding: 0;

        font-family: "Manrope", sans-serif !important;
        font-size: clamp(38px, 9vw, 54px);
        font-weight: 600;
        font-style: normal;

        line-height: 1.09;
        letter-spacing: -0.055em;

        color: #F8F3EB !important;

        text-align: left;
        text-wrap: balance;

        text-shadow:
            0 3px 18px rgba(0,0,0,0.16);

        animation:
            homeMobileContentReveal 1s
            cubic-bezier(.22,1,.36,1)
            0.16s both;
    }

    /* =========================================
       07 — DESCRIPTION
    ========================================= */

    body .frayora-home-hero__description {
        width: 100%;
        max-width: 460px;

        margin: 26px 0 0;
        padding: 0;

        font-family: "Inter", sans-serif !important;
        font-size: 14px;
        font-weight: 400;

        line-height: 1.8;
        letter-spacing: 0;

        color: rgba(248,243,235,0.94) !important;
        text-align: left;

        animation:
            homeMobileContentReveal 0.95s
            cubic-bezier(.22,1,.36,1)
            0.34s both;
    }

    /* =========================================
       08 — CTA BUTTONS
    ========================================= */

    body .frayora-home-hero__actions {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;

        flex-wrap: nowrap;
        gap: 13px;

        width: 100%;

        margin: 32px 0 0;
        padding: 0;

        animation:
            homeMobileContentReveal 0.95s
            cubic-bezier(.22,1,.36,1)
            0.52s both;
    }

    /* =========================================
       09 — SHARED BUTTON STYLE
    ========================================= */

    body .frayora-home-hero__button {
        display: inline-flex;
        align-items: center;
        justify-content: space-between;

        gap: 18px;

        width: min(100%, 290px);
        min-height: 54px;

        margin: 0;
        padding: 0 23px;

        border: 1px solid transparent;
        border-radius: 999px;

        font-family: "Manrope", sans-serif !important;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.3;

        letter-spacing: -0.015em;
        text-decoration: none !important;
        white-space: nowrap;

        transition:
            background-color 0.35s ease,
            border-color 0.35s ease,
            color 0.35s ease,
            transform 0.35s ease,
            box-shadow 0.35s ease;
    }

    /* =========================================
       10 — PRIMARY BUTTON
    ========================================= */

    body .frayora-home-hero__button--primary {
        background: #C96743 !important;
        border-color: #C96743;

        color: #FFFFFF !important;

        box-shadow:
            0 8px 20px rgba(0,0,0,0.15),
            0 14px 27px rgba(0,0,0,0.07);
    }

    body .frayora-home-hero__button--primary:hover {
        background: #B95635 !important;
        border-color: #B95635;

        color: #FFFFFF !important;

        transform: translateY(-3px);

        box-shadow:
            0 13px 27px rgba(0,0,0,0.21);
    }

    /* =========================================
       11 — SECONDARY BUTTON
    ========================================= */

    body .frayora-home-hero__button--secondary {
        background: rgba(248,243,235,0.055) !important;

        border-color: rgba(248,243,235,0.70);

        color: #F8F3EB !important;

        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }

    body .frayora-home-hero__button--secondary:hover {
        background: rgba(248,243,235,0.16) !important;

        border-color: #F8F3EB;
        color: #FFFFFF !important;

        transform: translateY(-3px);
    }

    /* =========================================
       12 — BUTTON ARROWS
    ========================================= */

    body .frayora-home-hero__arrow {
        display: inline-block;

        font-size: 20px;
        line-height: 1;

        color: inherit;

        transition:
            transform 0.35s cubic-bezier(.22,1,.36,1);
    }

    body .frayora-home-hero__button:hover
    .frayora-home-hero__arrow {
        transform: translateX(5px);
    }

    body .frayora-home-hero__button:focus-visible {
        outline: 2px solid #F8F3EB;
        outline-offset: 4px;
    }

    /* =========================================
       13 — SMALL MOBILE SCREENS
       0px–374px
    ========================================= */

    @media (max-width: 374px) {

        body .frayora-home-hero {
            min-height: 720px;
        }

        body .frayora-home-hero__inner {
            min-height: 720px;

            padding-left: 23px;
            padding-right: 23px;
        }

        body .frayora-home-hero__title {
            font-size: clamp(34px, 9vw, 39px);
            line-height: 1.1;
        }

        body .frayora-home-hero__description {
            font-size: 13px;
            line-height: 1.75;
        }

        body .frayora-home-hero__button {
            width: min(100%, 280px);
            font-size: 12px;
        }
    }

    /* =========================================
       14 — ENTRANCE ANIMATIONS
    ========================================= */

    @keyframes homeMobileContentReveal {
        from {
            opacity: 0;
            transform: translateY(22px);
            filter: blur(3px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
            filter: blur(0);
        }
    }

    @keyframes homeMobilePhotoReveal {
        from {
            opacity: 0.72;
            transform: scale(1.05);
        }

        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    /* =========================================
       15 — REDUCED MOTION
    ========================================= */

    @media (prefers-reduced-motion: reduce) {

        body .frayora-home-hero__media,
        body .frayora-home-hero__title,
        body .frayora-home-hero__description,
        body .frayora-home-hero__actions {
            animation: none !important;

            opacity: 1 !important;
            transform: none !important;
            filter: none !important;
        }

        body .frayora-home-hero__button,
        body .frayora-home-hero__arrow {
            transition: none !important;
        }
    }

} /* END HOMEPAGE SECTION 01 — MOBILE */


/* =========================================================
   FRAYORA — HOMEPAGE
   SECTION 01 — MOBILE HERO REFINEMENT
   MOBILE ONLY: 0px–599px

   Reduced top and bottom whitespace
   Header logo alignment
   Compact CTA buttons
   Preserves imagery and animations
========================================================= */

@media (max-width: 599px) {

    /* =========================================
       01 — REDUCE HERO HEIGHT
    ========================================= */

    body .frayora-home-hero {
        min-height: 0 !important;
        height: auto !important;
    }

    /* =========================================
       02 — CONTENT POSITION
       MATCH HEADER LOGO ALIGNMENT
    ========================================= */

    body .frayora-home-hero__inner {
        display: flex;
        align-items: center;
        justify-content: flex-start;

        width: 100%;
        max-width: 599px;

        min-height: 0 !important;
        height: auto !important;

        margin: 0 auto;

        /* Less empty space above and below */
        padding: 88px 28px 92px 34px !important;

        text-align: left;
    }

    body .frayora-home-hero__content {
        width: 100%;
        max-width: 100%;

        margin: 0;
        padding: 0;

        align-items: flex-start;
        text-align: left;
    }

    /* =========================================
       03 — HEADING
    ========================================= */

    body .frayora-home-hero__title {
        width: 100%;

        margin: 0;
        padding: 0;

        font-size: clamp(37px, 8.8vw, 52px);
        line-height: 1.09;
        letter-spacing: -0.055em;

        text-align: left;
    }

    /* =========================================
       04 — DESCRIPTION SPACING
    ========================================= */

    body .frayora-home-hero__description {
        max-width: 460px;

        margin-top: 24px;

        font-size: 14px;
        line-height: 1.75;
    }

    /* =========================================
       05 — BUTTON GROUP
    ========================================= */

    body .frayora-home-hero__actions {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;

        gap: 12px;

        width: 100%;

        margin-top: 28px;
        padding: 0;
    }

    /* =========================================
       06 — COMPACT BUTTON WIDTH
    ========================================= */

    body .frayora-home-hero__button {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        /* Button hugs its content */
        width: fit-content !important;
        max-width: 100%;

        min-height: 52px;

        gap: 15px !important;

        padding: 0 23px !important;

        font-family: "Manrope", sans-serif !important;
        font-size: 13px;
        font-weight: 600;

        border-radius: 999px;
        white-space: nowrap;
    }

    /* =========================================
       07 — ARROW ALIGNMENT
    ========================================= */

    body .frayora-home-hero__arrow {
        display: inline-block;

        margin: 0;
        padding: 0;

        font-size: 19px;
        line-height: 1;

        flex-shrink: 0;
    }

    /* =========================================
       08 — SMALLER PHONES
       0px–374px
    ========================================= */

    @media (max-width: 374px) {

        body .frayora-home-hero__inner {
            padding:
                76px
                23px
                82px
                29px !important;
        }

        body .frayora-home-hero__title {
            font-size: clamp(34px, 9vw, 39px);
        }

        body .frayora-home-hero__description {
            margin-top: 21px;

            font-size: 13px;
            line-height: 1.7;
        }

        body .frayora-home-hero__actions {
            margin-top: 25px;
        }

        body .frayora-home-hero__button {
            min-height: 50px;
            padding: 0 20px !important;

            font-size: 12px;
            gap: 12px !important;
        }
    }

} /* END HOMEPAGE SECTION 01 — MOBILE REFINEMENT */


/* =========================================================
   FRAYORA — HOMEPAGE
   SECTION 02 — CONNECTED BUSINESS INFRASTRUCTURE
   MOBILE ONLY: 0px–599px

   TWO COLUMNS × THREE ROWS
   Manrope + Inter typography
   Balanced ivory luminosity
   Soft terracotta icon depth
   Natural shadows
   Staggered scroll animations
========================================================= */

@media (max-width: 599px) {

    /* =========================================
       01 — MAIN SECTION
    ========================================= */

    body .infrastructure-section {
        position: relative;
        isolation: isolate;

        display: block;

        width: 100vw;
        max-width: none;
        min-height: 0;
        height: auto;

        margin: 0 0 0 calc(50% - 50vw);
        padding: 0;

        overflow: hidden;
        box-sizing: border-box;

        background-color: #F8F3EB !important;

        background-image:
            radial-gradient(
                ellipse 120% 90% at 50% 0%,
                rgba(255,255,255,0.38) 0%,
                transparent 85%
            ),
            radial-gradient(
                ellipse 120% 90% at 50% 100%,
                rgba(255,255,255,0.38) 0%,
                transparent 85%
            ) !important;

        background-repeat: no-repeat !important;
        background-size: 100% 100% !important;
    }

    body .infrastructure-section *,
    body .infrastructure-section *::before,
    body .infrastructure-section *::after {
        box-sizing: border-box;
    }

    /* =========================================
       02 — INNER CONTAINER
       MATCHES MOBILE HERO ALIGNMENT
    ========================================= */

    body .infrastructure-section__inner {
        position: relative;
        z-index: 1;

        display: flex;
        flex-direction: column;

        width: 100%;
        max-width: 599px;

        margin: 0 auto;
        padding: 72px 28px 80px;
    }

    /* =========================================
       03 — INTRO CONTENT
    ========================================= */

    body .infrastructure-section__content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        gap: 20px;

        width: 100%;
        min-width: 0;

        margin: 0 0 45px;
        padding: 0;

        text-align: left;
    }

    body .infrastructure-section__heading-group {
        width: 100%;
        max-width: 100%;

        margin: 0;
        padding: 0;
    }

    /* =========================================
       04 — EYEBROW
    ========================================= */

    body .infrastructure-section__eyebrow {
        display: block;

        margin: 0 0 16px;
        padding: 0;

        font-family: "Inter", sans-serif !important;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.4;

        letter-spacing: 0.10em;
        text-transform: uppercase;

        color: #C96743 !important;
    }

    /* =========================================
       05 — TWO-TONE HEADING
    ========================================= */

    body .infrastructure-section__heading-group h2 {
        width: 100%;
        max-width: 100%;

        margin: 0;
        padding: 0;

        font-family: "Manrope", sans-serif !important;
        font-size: clamp(32px, 8.1vw, 45px);
        font-weight: 600;
        font-style: normal;

        line-height: 1.13;
        letter-spacing: -0.052em;

        color: #1F211D !important;

        text-align: left;
        text-wrap: balance;
        overflow-wrap: normal;
    }

    body .infrastructure-section__heading-group h2 span {
        display: block;

        font: inherit;
        color: #566449 !important;
    }

    /* =========================================
       06 — DESCRIPTION
    ========================================= */

    body .infrastructure-section__body {
        width: 100%;
        max-width: 480px;

        margin: 0;
        padding: 0;

        font-family: "Inter", sans-serif !important;
        font-size: 14px;
        font-weight: 400;

        line-height: 1.75;
        letter-spacing: 0;

        color: rgba(31,33,29,0.76) !important;

        text-align: left;
    }

    /* =========================================
       07 — SERVICE GRID
       2 COLUMNS / 3 ROWS
    ========================================= */

    body .infrastructure-section__diagram {
        position: relative;

        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));

        column-gap: 20px;
        row-gap: 43px;

        align-items: start;

        width: 100%;
        min-width: 0;
        min-height: 0;

        margin: 0;
        padding: 0;

        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    /* REMOVE UNUSED CONNECTING WAVE */

    body .infrastructure-section__wave {
        display: none !important;
        visibility: hidden !important;
    }

    /* =========================================
       08 — SERVICE ITEMS
    ========================================= */

    body .infrastructure-section__item {
        position: relative;
        z-index: 1;

        display: flex;
        flex-direction: column;
        align-items: center;

        width: 100%;
        min-width: 0;
        min-height: 0;

        margin: 0;
        padding: 0;

        background: transparent !important;
        border: 0 !important;

        box-shadow: none !important;

        text-align: center;

        transition:
            translate 0.4s cubic-bezier(.22,1,.36,1);
    }

    /* =========================================
       09 — LUMINOUS ICON CIRCLES
    ========================================= */

    body .infrastructure-section__icon {
        position: relative;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 74px;
        height: 74px;
        flex: 0 0 74px;

        margin: 0 auto 20px;
        padding: 16px;

        border-radius: 50%;

        background:
            radial-gradient(
                ellipse at 28% 20%,
                #FFFFFF 0%,
                #FBF7F1 38%,
                #F1E3D7 100%
            ) !important;

        border: 1px solid rgba(201,103,67,0.075);

        box-shadow:
            0 4px 9px rgba(54,42,33,0.035),
            0 12px 24px rgba(54,42,33,0.055),
            inset 0 1px 2px rgba(255,255,255,0.95),
            inset -5px -7px 14px rgba(201,103,67,0.035);

        transition:
            transform 0.4s cubic-bezier(.22,1,.36,1),
            box-shadow 0.4s ease;
    }

    /* NO EXTERNAL GLOW */

    body .infrastructure-section__icon::before,
    body .infrastructure-section__icon::after {
        content: none !important;
        display: none !important;
    }

    /* =========================================
       10 — OLIVE ICON ARTWORK
    ========================================= */

    body .infrastructure-section__icon svg {
        display: block;

        width: 29px;
        height: 29px;

        flex: 0 0 auto;

        fill: none;
        stroke: #66745B;
        stroke-width: 1.8;

        stroke-linecap: round;
        stroke-linejoin: round;

        transition: transform 0.35s ease;
    }

    /* =========================================
       11 — SERVICE NUMBERS
    ========================================= */

    body .infrastructure-section__number {
        position: relative;
        display: block;

        margin: 0 0 10px;
        padding: 0;

        font-family: "Inter", sans-serif !important;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.3;

        letter-spacing: 0.02em;
        color: #C96743 !important;
    }

    body .infrastructure-section__number::after {
        content: none !important;
        display: none !important;
    }

    /* =========================================
       12 — SERVICE TITLES
    ========================================= */

    body .infrastructure-section__item h3 {
        width: 100%;
        max-width: 210px;

        margin: 0 0 10px;
        padding: 0;

        font-family: "Manrope", sans-serif !important;
        font-size: clamp(14px, 3.7vw, 17px);
        font-weight: 600;
        font-style: normal;

        line-height: 1.35;
        letter-spacing: -0.035em;

        color: #1F211D !important;

        text-align: center;
    }

    /* =========================================
       13 — SERVICE DESCRIPTIONS
    ========================================= */

    body .infrastructure-section__item > p {
        width: 100%;
        max-width: 205px;

        margin: 0 auto;
        padding: 0;

        font-family: "Inter", sans-serif !important;
        font-size: 12px;
        font-weight: 400;

        line-height: 1.65;
        letter-spacing: 0;

        color: rgba(31,33,29,0.73) !important;
        text-align: center;
    }

    /* =========================================
       14 — GENTLE HOVER EFFECTS
    ========================================= */

    @media (hover: hover) {

        body .infrastructure-section__item:hover {
            translate: 0 -4px;
        }

        body .infrastructure-section__item:hover
        .infrastructure-section__icon {
            transform: translateY(-3px);

            box-shadow:
                0 8px 17px rgba(54,42,33,0.05),
                0 16px 28px rgba(54,42,33,0.08),
                inset 0 1px 2px rgba(255,255,255,0.98);
        }

        body .infrastructure-section__item:hover
        .infrastructure-section__icon svg {
            transform: scale(1.045);
        }
    }

    /* =========================================
       15 — SCROLL REVEAL ANIMATIONS
    ========================================= */

    @keyframes infraMobileReveal {
        from {
            opacity: 0;
            translate: 0 22px;
            filter: blur(2px);
        }

        to {
            opacity: 1;
            translate: 0 0;
            filter: blur(0);
        }
    }

    @supports (animation-timeline: view()) {

        body .infrastructure-section__heading-group,
        body .infrastructure-section__body {
            animation: infraMobileReveal linear both;

            animation-timeline: view();
            animation-range: entry 0% entry 70%;
        }

        body .infrastructure-section__item {
            animation: infraMobileReveal linear both;

            animation-timeline: view();
            animation-range: entry 0% entry 75%;
        }

        body .infrastructure-section__item:nth-child(even) {
            animation-range: entry 7% entry 82%;
        }
    }

    /* =========================================
       16 — SMALL MOBILE SCREENS
       0px–374px
    ========================================= */

    @media (max-width: 374px) {

        body .infrastructure-section__inner {
            padding: 65px 23px 72px;
        }

        body .infrastructure-section__heading-group h2 {
            font-size: clamp(29px, 8vw, 33px);
        }

        body .infrastructure-section__diagram {
            column-gap: 14px;
            row-gap: 36px;
        }

        body .infrastructure-section__icon {
            width: 68px;
            height: 68px;
            flex-basis: 68px;

            padding: 14px;
        }

        body .infrastructure-section__icon svg {
            width: 27px;
            height: 27px;
        }

        body .infrastructure-section__item h3 {
            font-size: 13px;
        }

        body .infrastructure-section__item > p {
            font-size: 11px;
            line-height: 1.6;
        }
    }

    /* =========================================
       17 — REDUCED MOTION
    ========================================= */

    @media (prefers-reduced-motion: reduce) {

        body .infrastructure-section__heading-group,
        body .infrastructure-section__body,
        body .infrastructure-section__item {
            animation: none !important;

            opacity: 1 !important;
            translate: none !important;
            filter: none !important;
        }

        body .infrastructure-section__item,
        body .infrastructure-section__icon,
        body .infrastructure-section__icon svg {
            transition: none !important;
        }
    }

} /* END HOMEPAGE SECTION 02 — MOBILE */



/* =========================================
   FRAYORA — HOMEPAGE SECTION 02
   MOBILE ALIGNMENT FIX
   0px–599px

   Match Section 01 and header logo
========================================= */

@media (max-width: 599px) {

    /* MAIN CONTENT ALIGNMENT */

    body .infrastructure-section__inner {
        width: 100%;
        max-width: 599px;

        margin-left: auto;
        margin-right: auto;

        padding-left: 34px !important;
        padding-right: 28px !important;
    }

    /* REMOVE ANY EXTRA INTRO INDENT */

    body .infrastructure-section__content,
    body .infrastructure-section__heading-group,
    body .infrastructure-section__body {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    /* SERVICE GRID FOLLOWS THE SAME ALIGNMENT */

    body .infrastructure-section__diagram {
        width: 100%;
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    /* SMALL MOBILE SCREENS */

    @media (max-width: 374px) {

        body .infrastructure-section__inner {
            padding-left: 29px !important;
            padding-right: 23px !important;
        }
    }

}


/* =========================================================
   FRAYORA — HOMEPAGE
   SECTION 03 — OUR APPROACH
   MOBILE ONLY: 0px–599px

   From tangled to effortless
   Editorial vertical journey
   Warm ivory luminosity
   Smaller centered illustrations
   Natural dimensional shadows
   Scroll reveal animations
========================================================= */

@media (max-width: 599px) {

    /* =========================================
       01 — FULL-WIDTH SECTION
    ========================================= */

    body .home-approach {
        position: relative;
        isolation: isolate;

        display: block;

        width: 100vw;
        max-width: none;
        min-height: 0;
        height: auto;

        margin: 0 0 0 calc(50% - 50vw);
        padding: 0;

        overflow: hidden;
        box-sizing: border-box;

        background-color: #F5EDE4 !important;

        background-image:
            radial-gradient(
                ellipse 120% 90% at 50% 0%,
                rgba(255,255,255,0.38) 0%,
                transparent 85%
            ),
            radial-gradient(
                ellipse 120% 90% at 50% 100%,
                rgba(255,255,255,0.38) 0%,
                transparent 85%
            ) !important;

        background-repeat: no-repeat !important;
        background-size: 100% 100% !important;
    }

    body .home-approach *,
    body .home-approach *::before,
    body .home-approach *::after {
        box-sizing: border-box;
    }

    /* =========================================
       02 — MAIN CONTAINER
    ========================================= */

    body .home-approach__inner {
        position: relative;
        z-index: 1;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 54px;

        width: 100%;
        max-width: 599px;

        margin: 0 auto;
        padding: 72px 28px 80px;
    }

    /* =========================================
       03 — INTRODUCTION
    ========================================= */

    body .home-approach__intro {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        width: 100%;
        max-width: 100%;
        min-width: 0;

        margin: 0;
        padding: 0;

        text-align: left;
    }

    /* EYEBROW */

    body .home-approach__eyebrow {
        display: block;

        margin: 0 0 16px;
        padding: 0;

        font-family: "Inter", sans-serif !important;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.4;

        letter-spacing: 0.10em;
        text-transform: uppercase;

        color: #C96743 !important;
    }

    /* =========================================
       04 — TWO-TONE HEADING
    ========================================= */

    body .home-approach__title {
        display: block;

        width: 100%;
        max-width: 100%;

        margin: 0;
        padding: 0;

        font-family: "Manrope", sans-serif !important;
        font-size: clamp(36px, 8.5vw, 47px);
        font-weight: 600;
        font-style: normal;

        line-height: 1.12;
        letter-spacing: -0.055em;

        color: #1F211D !important;

        text-align: left;
        text-wrap: balance;
    }

    body .home-approach__title span {
        display: block;

        font-family: inherit;
        font-size: inherit;
        font-weight: inherit;
        font-style: inherit;

        line-height: inherit;
        letter-spacing: inherit;

        color: #566449 !important;
    }

    /* =========================================
       05 — DESCRIPTION
    ========================================= */

    body .home-approach__description {
        width: 100%;
        max-width: 480px;

        margin: 24px 0 0;
        padding: 0;

        font-family: "Inter", sans-serif !important;
        font-size: 14px;
        font-weight: 400;

        line-height: 1.75;
        letter-spacing: 0;

        color: rgba(31,33,29,0.76) !important;

        text-align: left;
    }

    /* =========================================
       06 — TERRACOTTA CTA
    ========================================= */

    body .home-approach__button {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        gap: 16px;

        width: fit-content;
        min-height: 53px;

        margin: 28px 0 0;
        padding: 0 25px;

        background: #C96743 !important;
        color: #FFFFFF !important;

        border: 1px solid #C96743;
        border-radius: 999px;

        font-family: "Manrope", sans-serif !important;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.3;

        letter-spacing: -0.015em;
        text-decoration: none !important;
        white-space: nowrap;

        box-shadow:
            0 7px 15px rgba(108,63,43,0.09),
            0 15px 28px rgba(108,63,43,0.075);

        transition:
            background-color 0.35s ease,
            transform 0.35s ease,
            box-shadow 0.35s ease;
    }

    body .home-approach__button:hover {
        background: #B95635 !important;
        border-color: #B95635;

        transform: translateY(-3px);

        box-shadow:
            0 12px 24px rgba(108,63,43,0.13),
            0 20px 36px rgba(108,63,43,0.10);
    }

    body .home-approach__button span {
        display: inline-block;

        font-family: "Inter", sans-serif;
        font-size: 20px;
        line-height: 1;

        transition: transform 0.35s ease;
    }

    body .home-approach__button:hover span {
        transform: translateX(5px);
    }

    body .home-approach__button:focus-visible {
        outline: 2px solid #394235;
        outline-offset: 4px;
    }

    /* =========================================
       07 — VERTICAL JOURNEY
       MESS → CLARITY → FREEDOM
    ========================================= */

    body .home-approach__journey {
        position: relative;

        display: flex;
        flex-direction: column;
        align-items: center;

        gap: 0;

        width: 100%;
        min-width: 0;

        margin: 0;
        padding: 0;

        background: transparent;
        border: 0;
    }

    /* =========================================
       08 — INDIVIDUAL STAGES
    ========================================= */

    body .home-approach__stage {
        position: relative;

        display: flex;
        flex-direction: column;
        align-items: center;

        width: 100%;
        max-width: 350px;
        min-width: 0;

        margin: 0;
        padding: 0;

        background: transparent;
        border: 0;

        text-align: center;

        transition:
            translate 0.45s cubic-bezier(.22,1,.36,1);
    }

    /* =========================================
       09 — IMAGE CONTAINER
    ========================================= */

    body .home-approach__visual {
        position: relative;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        height: 166px;

        margin: 0 0 20px;
        padding: 0;

        overflow: visible;

        background: transparent;
        border: none;
        box-shadow: none;
    }

    /* =========================================
       10 — REFINED ILLUSTRATION SIZING
    ========================================= */

    body .home-approach__visual img {
        display: block;

        width: auto !important;
        max-width: 165px !important;

        height: 155px !important;
        max-height: 155px !important;

        margin: 0 auto;
        padding: 0;

        object-fit: contain !important;
        object-position: center;

        filter:
            drop-shadow(0 8px 10px rgba(31,33,29,0.055))
            drop-shadow(0 18px 22px rgba(31,33,29,0.075));

        transition:
            transform 0.55s cubic-bezier(.22,1,.36,1),
            filter 0.55s ease;
    }

    /* =========================================
       11 — STAGE HEADINGS
    ========================================= */

    body .home-approach__stage h3 {
        width: 100%;

        margin: 0 0 16px;
        padding: 0;

        font-family: "Manrope", sans-serif !important;
        font-size: 26px;
        font-weight: 600;

        line-height: 1.2;
        letter-spacing: -0.045em;

        color: #1F211D !important;
        text-align: center;
    }

    /* =========================================
       12 — STAGE DESCRIPTION
    ========================================= */

    body .home-approach__details {
        display: flex;
        flex-direction: column;
        align-items: center;

        gap: 7px;

        width: 100%;

        margin: 0;
        padding: 0;
    }

    body .home-approach__details p {
        width: 100%;

        margin: 0;
        padding: 0;

        font-family: "Inter", sans-serif !important;
        font-size: 13px;
        font-weight: 400;

        line-height: 1.55;

        color: rgba(31,33,29,0.72) !important;

        text-align: center;
    }

    /* =========================================
       13 — VERTICAL CONNECTING ARROWS
    ========================================= */

    body .home-approach__arrow {
        position: relative;
        z-index: 1;

        top: auto;
        left: auto !important;
        right: auto;

        display: flex;
        align-items: center;
        justify-content: center;

        flex: 0 0 auto;

        width: 100%;
        height: 75px;

        margin: 6px 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 28px;
        font-weight: 300;
        line-height: 1;

        color: #C96743 !important;

        opacity: 0.8;

        /* Rotate the existing right arrow down */
        transform: rotate(90deg);

        pointer-events: none;
    }

    /* =========================================
       14 — HOVER INTERACTIONS
    ========================================= */

    @media (hover: hover) {

        body .home-approach__stage:hover {
            translate: 0 -4px;
        }

        body .home-approach__stage:hover
        .home-approach__visual img {
            transform: translateY(-5px) scale(1.035);

            filter:
                drop-shadow(0 12px 15px rgba(31,33,29,0.07))
                drop-shadow(0 24px 28px rgba(31,33,29,0.10));
        }
    }

    /* =========================================
       15 — SCROLL REVEAL ANIMATIONS
    ========================================= */

    @keyframes homeApproachMobileReveal {
        from {
            opacity: 0;
            translate: 0 24px;
            filter: blur(3px);
        }

        to {
            opacity: 1;
            translate: 0 0;
            filter: blur(0);
        }
    }

    @keyframes homeApproachMobileArrowReveal {
        from {
            opacity: 0;
        }

        to {
            opacity: 0.8;
        }
    }

    @supports (animation-timeline: view()) {

        body .home-approach__intro {
            animation: homeApproachMobileReveal linear both;

            animation-timeline: view();
            animation-range: entry 0% entry 65%;
        }

        body .home-approach__stage {
            animation: homeApproachMobileReveal linear both;

            animation-timeline: view();
            animation-range: entry 0% entry 70%;
        }

        body .home-approach__arrow {
            animation: homeApproachMobileArrowReveal linear both;

            animation-timeline: view();
            animation-range: entry 0% entry 65%;
        }
    }

    /* =========================================
       16 — SMALL MOBILE SCREENS
       0px–374px
    ========================================= */

    @media (max-width: 374px) {

        body .home-approach__inner {
            padding: 65px 23px 72px;
            gap: 45px;
        }

        body .home-approach__title {
            font-size: clamp(33px, 8.7vw, 37px);
        }

        body .home-approach__description {
            font-size: 13px;
            line-height: 1.75;
        }

        body .home-approach__visual {
            height: 145px;
        }

        body .home-approach__visual img {
            max-width: 145px !important;

            height: 140px !important;
            max-height: 140px !important;
        }

        body .home-approach__stage h3 {
            font-size: 24px;
        }

        body .home-approach__details p {
            font-size: 12px;
        }

        body .home-approach__arrow {
            height: 65px;
            font-size: 25px;
        }

        body .home-approach__button {
            min-height: 51px;
            padding: 0 22px;
            font-size: 12px;
        }
    }

    /* =========================================
       17 — REDUCED MOTION
    ========================================= */

    @media (prefers-reduced-motion: reduce) {

        body .home-approach__intro,
        body .home-approach__stage,
        body .home-approach__arrow {
            animation: none !important;

            opacity: 1 !important;
            translate: none !important;
            filter: none !important;
        }

        body .home-approach__stage,
        body .home-approach__visual img,
        body .home-approach__button,
        body .home-approach__button span {
            transition: none !important;
        }
    }

} /* END HOMEPAGE SECTION 03 — MOBILE */


/* =========================================
   FRAYORA — HOMEPAGE SECTION 03
   MOBILE INTRO CENTER ALIGNMENT
   0px–599px
========================================= */

@media (max-width: 599px) {

    /* CENTER INTRO CONTAINER */

    body .home-approach__intro {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        width: 100%;
        max-width: 100%;

        margin-left: auto;
        margin-right: auto;
        padding: 0;

        text-align: center !important;
    }

    /* CENTER EYEBROW */

    body .home-approach__eyebrow {
        width: 100%;
        margin-left: auto;
        margin-right: auto;

        text-align: center !important;
    }

    /* CENTER MAIN HEADING */

    body .home-approach__title {
        width: 100%;
        max-width: 440px;

        margin-left: auto;
        margin-right: auto;

        text-align: center !important;
        text-wrap: balance;
    }

    body .home-approach__title span {
        text-align: center !important;
    }

    /* CENTER DESCRIPTION */

    body .home-approach__description {
        width: 100%;
        max-width: 410px;

        margin: 24px auto 0;

        text-align: center !important;
    }

    /* CENTER CTA BUTTON */

    body .home-approach__button {
        align-self: center;
        justify-content: center;

        width: fit-content;
        max-width: 100%;

        margin: 28px auto 0;

        text-align: center;
    }

    /* MAINTAIN CENTER ALIGNMENT ON SMALL PHONES */

    @media (max-width: 374px) {

        body .home-approach__title {
            max-width: 100%;
        }

        body .home-approach__description {
            max-width: 100%;
            margin-top: 21px;
        }

        body .home-approach__button {
            margin-top: 25px;
        }
    }

}






/* =========================================================
   FRAYORA — HOMEPAGE
   SECTION 07 — FINAL CTA
   MOBILE ONLY: 0px–599px

   Compact, centered editorial design
   Warm ivory background #F5EDE4
   Balanced top + bottom luminosity
   No floating card or extra overlays
   Manrope + Inter typography
   Natural button shadow
   Staggered entrance animations
========================================================= */

@media (max-width: 599px) {

    /* =========================================
       01 — FULL-WIDTH BACKGROUND
    ========================================= */

    body .home-cta {
        position: relative;
        isolation: isolate;

        display: block;

        width: 100vw;
        max-width: none;
        min-height: 0;
        height: auto;

        margin: 0 0 0 calc(50% - 50vw);
        padding: 78px 28px 84px;

        overflow: hidden;
        box-sizing: border-box;

        background-color: #F5EDE4 !important;

        background-image:
            radial-gradient(
                ellipse 120% 90% at 50% 0%,
                rgba(255,255,255,0.38) 0%,
                transparent 85%
            ),
            radial-gradient(
                ellipse 120% 90% at 50% 100%,
                rgba(255,255,255,0.38) 0%,
                transparent 85%
            ) !important;

        background-repeat: no-repeat !important;
        background-size: 100% 100% !important;
    }

    body .home-cta *,
    body .home-cta *::before,
    body .home-cta *::after {
        box-sizing: border-box;
    }

    /* =========================================
       02 — REMOVE OLD GLOW LAYERS
    ========================================= */

    body .home-cta::before,
    body .home-cta::after {
        content: none !important;
        display: none !important;
    }

    /* =========================================
       03 — CENTERED CONTENT
       NO FLOATING PANEL
    ========================================= */

    body .home-cta__inner {
        position: relative;
        z-index: 1;

        display: flex;
        flex-direction: column;
        align-items: center;

        width: 100%;
        max-width: 500px;

        margin: 0 auto;
        padding: 0;

        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;

        text-align: center;
    }

    /* REMOVE ORIGINAL FLOATING CARD */

    body .home-cta__inner::before,
    body .home-cta__inner::after {
        content: none !important;
        display: none !important;
    }



    /* =========================================
       05 — MAIN HEADING
    ========================================= */

    body .home-cta__title {
        width: 100%;
        max-width: 460px;

        margin: 0 auto;
        padding: 0;

        font-family: "Manrope", sans-serif !important;
        font-size: clamp(35px, 8.5vw, 46px);
        font-weight: 600;
        font-style: normal;

        line-height: 1.13;
        letter-spacing: -0.055em;

        color: #1F211D !important;

        text-align: center;
        text-wrap: balance;
    }

    /* =========================================
       06 — DESCRIPTION
    ========================================= */

    body .home-cta__text {
        width: 100%;
        max-width: 440px;

        margin: 22px auto 0;
        padding: 0;

        font-family: "Inter", sans-serif !important;
        font-size: 14px;
        font-weight: 400;

        line-height: 1.75;
        letter-spacing: 0;

        color: rgba(31,33,29,0.74) !important;

        text-align: center;
    }

    body .home-cta__text strong {
        font-weight: 500;
        color: #1F211D !important;
    }

    /* =========================================
       07 — BUTTON CONTAINER
    ========================================= */

    body .home-cta__button-wrap {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;

        margin: 29px 0 0;
        padding: 0;
    }

    /* =========================================
       08 — TERRACOTTA CTA BUTTON
    ========================================= */

    body .home-cta__button {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        gap: 15px;

        width: fit-content;
        min-width: 238px;
        max-width: 100%;
        min-height: 55px;

        margin: 0;
        padding: 0 27px;

        border: 1px solid #C96743;
        border-radius: 999px;

        background: #C96743 !important;
        color: #FFFFFF !important;

        font-family: "Manrope", sans-serif !important;
        font-size: 13px;
        font-weight: 600;

        line-height: 1.3;
        letter-spacing: -0.015em;

        text-decoration: none !important;
        white-space: nowrap;

        box-shadow:
            0 7px 17px rgba(103,58,39,0.11),
            0 14px 26px rgba(103,58,39,0.06);

        transition:
            transform 0.35s cubic-bezier(.22,1,.36,1),
            background-color 0.35s ease,
            box-shadow 0.35s ease;
    }

    body .home-cta__button:hover {
        transform: translateY(-3px);

        background: #B95635 !important;
        border-color: #B95635;

        box-shadow:
            0 11px 24px rgba(103,58,39,0.16),
            0 18px 30px rgba(103,58,39,0.08);
    }

    /* =========================================
       09 — BUTTON ARROW
    ========================================= */

    body .home-cta__button-arrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        font-family: "Inter", sans-serif;
        font-size: 20px;
        line-height: 1;

        transition:
            transform 0.35s cubic-bezier(.22,1,.36,1);
    }

    body .home-cta__button:hover
    .home-cta__button-arrow {
        transform: translateX(5px);
    }

    body .home-cta__button:focus-visible {
        outline: 2px solid #394235;
        outline-offset: 4px;
    }

    /* =========================================
       10 — STAGGERED SCROLL REVEALS
    ========================================= */

    @keyframes homeCtaMobileReveal {
        from {
            opacity: 0;
            translate: 0 20px;
            filter: blur(2px);
        }

        to {
            opacity: 1;
            translate: 0 0;
            filter: blur(0);
        }
    }

    /* The older CTA CSS uses timed entrance
       animations. Reset them on mobile first. */

  
    body .home-cta__title,
    body .home-cta__text,
    body .home-cta__button-wrap {
        animation: none;

        opacity: 1;
        transform: none;
        translate: none;
        filter: none;
    }

    @supports (animation-timeline: view()) {

   
        body .home-cta__title,
        body .home-cta__text,
        body .home-cta__button-wrap {
            animation: homeCtaMobileReveal linear both;

            animation-timeline: view();
            animation-range: entry 0% entry 65%;
        }

        body .home-cta__text {
            animation-range: entry 5% entry 73%;
        }

        body .home-cta__button-wrap {
            animation-range: entry 10% entry 78%;
        }
    }

    /* =========================================
       11 — SMALL MOBILE SCREENS
       0px–374px
    ========================================= */

    @media (max-width: 374px) {

        body .home-cta {
            padding: 70px 23px 76px;
        }

     

        body .home-cta__title {
            font-size: clamp(32px, 8.7vw, 37px);
            line-height: 1.14;
        }

        body .home-cta__text {
            margin-top: 19px;
            font-size: 13px;
            line-height: 1.75;
        }

        body .home-cta__button-wrap {
            margin-top: 26px;
        }

        body .home-cta__button {
            min-width: 220px;
            min-height: 52px;

            padding: 0 23px;
            font-size: 12px;
        }
    }

    /* =========================================
       12 — REDUCED MOTION
    ========================================= */

    @media (prefers-reduced-motion: reduce) {

   
        body .home-cta__title,
        body .home-cta__text,
        body .home-cta__button-wrap {
            animation: none !important;

            opacity: 1 !important;
            transform: none !important;
            translate: none !important;
            filter: none !important;
        }

        body .home-cta__button,
        body .home-cta__button-arrow {
            transition: none !important;
        }

        body .home-cta__button:hover {
            transform: none !important;
        }
    }

} /* END HOMEPAGE SECTION 07 — MOBILE */


/* =========================================
   FRAYORA — EXPERIMENTAL SURFACE LIGHTING
   TEST ON HOMEPAGE SECTION 02 ONLY
   DESKTOP + TABLET + MOBILE
========================================= */

body .infrastructure-section {
    background-color: #F8F3EB !important;

    background-image: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(255, 255, 255, 0.045) 28%,
        rgba(255, 255, 255, 0.00) 50%,
        rgba(255, 255, 255, 0.045) 72%,
        rgba(255, 255, 255, 0.12) 100%
    ) !important;

    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
}



/* =========================================================
   FRAYORA — GLOBAL EDITORIAL SURFACE SYSTEM

   Applies across desktop, tablet and mobile.
   Solid backgrounds inspired by Bond's approach.

   Section backgrounds only.
   Does NOT change:
   - Hero photographs
   - Content card shadows
   - Typography or alignment
   - Scroll animations
   - Buttons
========================================================= */

:root {
    --frayora-ivory: #F8F3EB;
    --frayora-warm: #F5EDE4;
    --frayora-olive: #303B32;
}

/* =========================================
   01 — PRIMARY IVORY
========================================= */

body .infrastructure-section,
body .home-biab,
body .home-why,

body .about-us-page .about-summary,
body .about-us-page .about-method,
body .about-us-page .about-founder,

body .our-approach-page .oa-difference,
body .our-approach-page .oa-system,
body .our-approach-page .oa-final {

    background-color: var(--frayora-ivory) !important;
    background-image: none !important;
}

/* =========================================
   02 — WARM IVORY
========================================= */

body .home-approach,
body .home-cta,

body .about-us-page .about-why,

body .our-approach-page .oa-method {

    background-color: var(--frayora-warm) !important;
    background-image: none !important;
}

/* =========================================
   03 — DEEP OLIVE
========================================= */

body .home-work,
body .about-us-page .about-values-mission {

    background-color: var(--frayora-olive) !important;
    background-image: none !important;
}

/* =========================================
   04 — FUTURE SECTIONS

   Add one of these classes to a new
   section's PHP/HTML element.
========================================= */

body .frayora-surface--ivory {
    background-color: var(--frayora-ivory) !important;
    background-image: none !important;
}

body .frayora-surface--warm {
    background-color: var(--frayora-warm) !important;
    background-image: none !important;
}

body .frayora-surface--olive {
    background-color: var(--frayora-olive) !important;
    background-image: none !important;
}



/* =========================================
   FRAYORA — FOOTER
   BOND-INSPIRED SUBTLE ELEVATION

   Desktop + Tablet + Mobile
========================================= */

body .site-footer {
    background-color: #303B32 !important;
    background-image: none !important;

    /* Very subtle architectural depth */
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.07),
        inset 0 18px 28px -32px rgba(255,255,255,0.10) !important;
}



/* =========================================================
   FRAYORA — BUSINESS-IN-A-BOX
   SECTION 01 — HERO — DESKTOP
   1101px AND ABOVE

   Matches Our Approach hero proportions
========================================================= */

@media (min-width: 1101px) {

    /* =========================================
       HERO BACKGROUND
    ========================================= */

    body .biab-hero {
        position: relative;
        isolation: isolate;

        width: 100%;
        height: 600px;
        min-height: 600px;

        margin: 0;
        padding: 0;

        box-sizing: border-box;
        overflow: hidden;

        background-color: #283429 !important;
        background-image: url("../images/Business in a box/herodesktop.png") !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;

        color: #F8F3EB;
    }

    /* =========================================
       SUBTLE OLIVE OVERLAY
    ========================================= */

    body .biab-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;

        pointer-events: none;

        background: linear-gradient(
            90deg,
            rgba(17, 26, 18, 0.31) 0%,
            rgba(17, 26, 18, 0.20) 31%,
            rgba(17, 26, 18, 0.04) 60%,
            transparent 80%
        );
    }

    /* =========================================
       REFINED LUMINOSITY
    ========================================= */

    body .biab-hero::after {
        content: "";

        position: absolute;
        inset: 0;
        z-index: 1;

        pointer-events: none;

        /* Subtle luminous architectural finish */
        background:
            linear-gradient(
                115deg,
                transparent 35%,
                rgba(255, 250, 235, 0.015) 60%,
                rgba(255, 250, 235, 0.055) 82%,
                rgba(255, 250, 235, 0.015) 100%
            );

        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.08),
            inset 0 -20px 40px -45px rgba(0, 0, 0, 0.20);
    }

    /* =========================================
       CONTENT LAYOUT
    ========================================= */

    body .biab-hero__inner {
        position: relative;
        z-index: 2;

        box-sizing: border-box;

        width: 100%;
        max-width: 1600px;

        height: 600px;
        min-height: 600px;

        margin: 0 auto;
        padding: 45px 80px;

        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    body .biab-hero__content {
        position: relative;
        z-index: 2;

        width: 100%;
        max-width: 645px;

        margin: 0;
        padding: 0;

        transform: none;
    }

    /* =========================================
       EYEBROW
    ========================================= */

    body .biab-hero__eyebrow {
        margin: 0 0 30px;

        font-family: "Inter", sans-serif;
        font-size: 12px;
        line-height: 1.3;
        font-weight: 600;

        letter-spacing: 0.19em;
        text-transform: uppercase;

        color: #E8D8C0;

        text-shadow:
            0 1px 5px rgba(0, 0, 0, 0.12);
    }

    /* =========================================
       MAIN HEADING
    ========================================= */

    body .biab-hero__title {
        width: 100%;
        max-width: 660px;

        margin: 0;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: clamp(54px, 4.45vw, 72px);
        line-height: 1.11;
        font-weight: 600;
        letter-spacing: -0.048em;

        color: #F8F3EB;

        text-wrap: balance;

        text-shadow:
            0 3px 18px rgba(0, 0, 0, 0.13);
    }

    /* =========================================
       BODY COPY
    ========================================= */

    body .biab-hero__body {
        width: 100%;
        max-width: 570px;

        margin: 32px 0 0;

        font-family: "Inter", sans-serif;
        font-size: 16px;
        line-height: 1.7;
        font-weight: 400;
        letter-spacing: -0.005em;

        color: rgba(248, 243, 235, 0.92);

        text-shadow:
            0 2px 8px rgba(0, 0, 0, 0.12);
    }

    /* =========================================
       SUPPORTING COPY
    ========================================= */

    body .biab-hero__statement {
        width: 100%;
        max-width: 620px;

        margin: 26px 0 0;

        font-family: "Inter", sans-serif;
        font-size: 15px;
        line-height: 1.6;
        font-weight: 500;
        letter-spacing: -0.01em;

        color: #F8F3EB;
    }

    /* =========================================
       TERRACOTTA BUTTON
    ========================================= */

    body .biab-hero__button {
        position: relative;

        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 14px;

        width: fit-content;
        min-width: 0;
        min-height: 52px;

        box-sizing: border-box;

        margin: 30px 0 0;
        padding: 15px 27px;

        background: #C96743;
        color: #FFFFFF;

        border: 1px solid rgba(255, 255, 255, 0.11);
        border-radius: 30px;

        font-family: "Inter", sans-serif;
        font-size: 13px;
        line-height: 1.2;
        font-weight: 600;
        letter-spacing: -0.01em;

        text-decoration: none;

        box-shadow:
            0 4px 10px rgba(11, 20, 13, 0.12),
            0 14px 28px rgba(11, 20, 13, 0.18),
            inset 0 1px 0 rgba(255, 255, 255, 0.12);

        transition:
            transform 280ms ease,
            background-color 280ms ease,
            box-shadow 280ms ease;
    }

    body .biab-hero__button span {
        display: inline-block;
        font-size: 19px;
        line-height: 1;

        transition: transform 280ms ease;
    }

    body .biab-hero__button:hover {
        background: #D57450;

        transform: translateY(-3px);

        box-shadow:
            0 7px 14px rgba(11, 20, 13, 0.14),
            0 20px 36px rgba(11, 20, 13, 0.23),
            inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }

    body .biab-hero__button:hover span {
        transform: translateX(4px);
    }

    body .biab-hero__button:focus-visible {
        outline: 2px solid #F8F3EB;
        outline-offset: 4px;
    }

    /* =========================================
       STAGGERED ENTRANCE ANIMATIONS
    ========================================= */

    body .biab-hero__eyebrow,
    body .biab-hero__title,
    body .biab-hero__body,
    body .biab-hero__statement,
    body .biab-hero__button {
        opacity: 0;
        transform: translateY(22px);

        animation:
            biabSignatureReveal 850ms
            cubic-bezier(0.22, 1, 0.36, 1)
            both;
    }

    body .biab-hero__eyebrow {
        animation-delay: 120ms;
    }

    body .biab-hero__title {
        animation-delay: 220ms;
    }

    body .biab-hero__body {
        animation-delay: 340ms;
    }

    body .biab-hero__statement {
        animation-delay: 450ms;
    }

    body .biab-hero__button {
        animation-delay: 570ms;
    }
}

/* =========================================
   ANIMATION KEYFRAMES
========================================= */

@keyframes biabSignatureReveal {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

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

/* =========================================
   ACCESSIBILITY — REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    body .biab-hero__eyebrow,
    body .biab-hero__title,
    body .biab-hero__body,
    body .biab-hero__statement,
    body .biab-hero__button {
        opacity: 1;
        transform: none;
        animation: none;
    }

    body .biab-hero__button,
    body .biab-hero__button span {
        transition: none;
    }
}


/* =========================================================
   FRAYORA — BUSINESS-IN-A-BOX
   SECTION 01 — FLOATING HERO VISUAL
   DESKTOP ONLY: 1101px+

   Premium floating 3D illustration
   Preserves existing hero background
   Soft shadows, glass luminosity and motion
========================================================= */

@media (min-width: 1101px) {

    /* =========================================
       HERO CONTENT LAYER
    ========================================= */

    body .biab-hero__content {
        position: relative;
        z-index: 4;

        max-width: 645px;
    }

    /* =========================================
       FLOATING HERO ILLUSTRATION
    ========================================= */

    body .biab-hero__visual {
        position: absolute;
        z-index: 3;

        top: 50%;
        right: 1.5%;

        width: 51%;
        max-width: 760px;
        height: auto;

        transform: translateY(-50%);

        pointer-events: none;

        filter:
            drop-shadow(
                0 20px 30px rgba(5, 15, 8, 0.14)
            )
            drop-shadow(
                0 35px 55px rgba(5, 15, 8, 0.16)
            );

        animation:
            biabHeroVisualReveal 1100ms
            cubic-bezier(0.22, 1, 0.36, 1)
            250ms both;
    }

    /* =========================================
       IMAGE
    ========================================= */

    body .biab-hero__visual img {
        display: block;

        width: 100%;
        height: auto;

        object-fit: contain;

        filter:
            brightness(1.03)
            contrast(1.02);

        animation:
            biabHeroVisualFloat 7s
            ease-in-out 1350ms infinite;
    }
}

/* =========================================
   ENTRANCE ANIMATION
========================================= */

@keyframes biabHeroVisualReveal {
    from {
        opacity: 0;
        translate: 0 28px;
        scale: 0.96;
    }

    to {
        opacity: 1;
        translate: 0 0;
        scale: 1;
    }
}

/* =========================================
   SUBTLE FLOATING ANIMATION
========================================= */

@keyframes biabHeroVisualFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }
}


/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    body .biab-hero__visual,
    body .biab-hero__visual img {
        animation: none;
        opacity: 1;
        translate: none;
        scale: 1;
        transform: none;
    }

    @media (min-width: 1101px) {
        body .biab-hero__visual {
            transform: translateY(-50%);
        }
    }
}


/* =========================================================
   FRAYORA — BUSINESS-IN-A-BOX
   SECTION 02 — INSIDE THE BOX
   DESKTOP: 1101px+

   Solid ivory surface
   Asymmetric editorial layout
   Architectural bottom-left linework
   Soft elevation and staggered animation
========================================================= */

@media (min-width: 1101px) {

    /* =========================================
       SECTION BACKGROUND
    ========================================= */

    body .biab-foundation {
        position: relative;
        isolation: isolate;

        box-sizing: border-box;

        width: 100%;
        min-height: 650px;

        margin: 0;
        padding: 100px 0 115px;

        overflow: hidden;

        background-color: #F8F3EB !important;
        background-image: none !important;

        color: #1F211D;
    }

    /* =========================================
       CONTENT GRID
    ========================================= */

    body .biab-foundation__inner {
        position: relative;
        z-index: 2;

        box-sizing: border-box;

        width: 100%;
        max-width: 1600px;

        margin: 0 auto;
        padding: 0 80px;

        display: grid;
        grid-template-columns:
            minmax(0, 0.95fr)
            minmax(0, 1.45fr);

        column-gap: 74px;
        align-items: start;
    }

    /* =========================================
       LEFT INTRO
    ========================================= */

    body .biab-foundation__intro {
        width: 100%;
        max-width: 565px;

        padding-top: 28px;
    }

    body .biab-foundation__eyebrow {
        margin: 0 0 24px;

        font-family: "Inter", sans-serif;
        font-size: 12px;
        line-height: 1.3;
        font-weight: 600;

        letter-spacing: 0.16em;
        text-transform: uppercase;

        color: #AD7258;
    }

    body .biab-foundation__title {
        max-width: 570px;

        margin: 0;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: clamp(36px, 3.15vw, 49px);
        line-height: 1.16;
        font-weight: 600;
        letter-spacing: -0.047em;

        color: #1F211D;

        text-wrap: pretty;
    }

    body .biab-foundation__body {
        width: 100%;
        max-width: 550px;

        margin: 29px 0 0;

        font-family: "Inter", sans-serif;
        font-size: 15px;
        line-height: 1.75;
        font-weight: 400;

        color: rgba(31, 33, 29, 0.78);
    }

    body .biab-foundation__body + .biab-foundation__body {
        margin-top: 21px;
    }

    /* =========================================
       RIGHT — 3 × 2 CAPABILITIES
    ========================================= */

    body .biab-foundation__grid {
        display: grid;

        grid-template-columns: repeat(3, minmax(0, 1fr));

        column-gap: 32px;
        row-gap: 70px;

        align-items: start;
    }

    body .biab-foundation__item {
        position: relative;

        box-sizing: border-box;
        min-width: 0;

        margin: 0;
        padding: 0;

        background: transparent;
        border: none;
        box-shadow: none;

        transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* =========================================
       NUMBER + ICON
    ========================================= */

    body .biab-foundation__top {
        display: flex;
        align-items: center;
        gap: 17px;

        min-height: 76px;
        margin-bottom: 19px;
    }

    body .biab-foundation__number {
        flex: 0 0 auto;

        font-family: "Inter", sans-serif;
        font-size: 15px;
        line-height: 1;
        font-weight: 600;
        letter-spacing: -0.025em;

        color: #98664D;
    }

    body .biab-foundation__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        width: 76px;
        height: 76px;
        flex: 0 0 76px;

        border-radius: 50%;

        background-color: #F1E2D4;

        border: 1px solid rgba(178, 133, 102, 0.07);

        box-shadow:
            0 4px 10px rgba(66, 46, 34, 0.035),
            0 14px 24px rgba(66, 46, 34, 0.055),
            inset 0 1px 0 rgba(255, 255, 255, 0.65);

        transition:
            transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
            background-color 400ms ease,
            box-shadow 400ms ease;
    }

    body .biab-foundation__icon svg {
        display: block;

        width: 30px;
        height: 30px;

        stroke: #594B3D;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;

        filter: drop-shadow(
            0 2px 1px rgba(60, 43, 33, 0.08)
        );

        transition: transform 400ms ease;
    }

    /* =========================================
       FEATURE TYPOGRAPHY
    ========================================= */

    body .biab-foundation__item h3 {
        margin: 0 0 15px;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: 17px;
        line-height: 1.4;
        font-weight: 650;
        letter-spacing: -0.033em;

        color: #1F211D;
    }

    body .biab-foundation__item p {
        margin: 0;

        font-family: "Inter", sans-serif;
        font-size: 13px;
        line-height: 1.67;
        font-weight: 400;

        color: rgba(31, 33, 29, 0.75);
    }

    /* =========================================
       SUBTLE HOVER INTERACTION
    ========================================= */

    @media (hover: hover) {

        body .biab-foundation__item:hover {
            transform: translateY(-4px);
        }

        body .biab-foundation__item:hover .biab-foundation__icon {
            transform: translateY(-3px);

            background-color: #F0DED0;

            box-shadow:
                0 7px 14px rgba(66, 46, 34, 0.055),
                0 18px 30px rgba(66, 46, 34, 0.075),
                inset 0 1px 0 rgba(255, 255, 255, 0.7);
        }

        body .biab-foundation__item:hover svg {
            transform: scale(1.06);
        }
    }

    /* =========================================
   BOTTOM-LEFT ARCHITECTURAL ART
========================================= */

body .biab-foundation__art {
    position: absolute;
    z-index: 0;
    left: -210px;
    bottom: -350px;
    width: 820px;
    height: 580px;
    overflow: hidden;
    pointer-events: none;
    opacity: 1;
}

body .biab-foundation__arc {
    position: absolute;
    display: block;
    box-sizing: border-box;
    width: 900px;
    height: 600px;
    border: 1.2px solid rgba(201, 103, 67, 0.20);
    border-radius: 50%;
    background: transparent;
}

body .biab-foundation__arc--one {
    left: -220px;
    top: 100px;
    transform: rotate(23deg);
    border-color: rgba(201, 103, 67, 0.28);
}

body .biab-foundation__arc--two {
    left: -110px;
    top: 135px;
    transform: rotate(18deg);
    border-color: rgba(201, 103, 67, 0.22);
}

body .biab-foundation__arc--three {
    left: 5px;
    top: 185px;
    transform: rotate(13deg);
    border-color: rgba(201, 103, 67, 0.16);
}

    /* =========================================
       STAGGERED ENTRANCE
    ========================================= */

    body .biab-foundation__eyebrow,
    body .biab-foundation__title,
    body .biab-foundation__body,
    body .biab-foundation__item {
        animation: biabFoundationReveal 850ms
            cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    body .biab-foundation__eyebrow {
        animation-delay: 80ms;
    }

    body .biab-foundation__title {
        animation-delay: 160ms;
    }

    body .biab-foundation__body {
        animation-delay: 240ms;
    }

    body .biab-foundation__item:nth-child(1) {
        animation-delay: 180ms;
    }

    body .biab-foundation__item:nth-child(2) {
        animation-delay: 260ms;
    }

    body .biab-foundation__item:nth-child(3) {
        animation-delay: 340ms;
    }

    body .biab-foundation__item:nth-child(4) {
        animation-delay: 420ms;
    }

    body .biab-foundation__item:nth-child(5) {
        animation-delay: 500ms;
    }

    body .biab-foundation__item:nth-child(6) {
        animation-delay: 580ms;
    }

}

/* =========================================
   ANIMATION
========================================= */

@keyframes biabFoundationReveal {
    from {
        opacity: 0;
        translate: 0 25px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    body .biab-foundation__eyebrow,
    body .biab-foundation__title,
    body .biab-foundation__body,
    body .biab-foundation__item {
        animation: none;
        opacity: 1;
        translate: none;
    }

    body .biab-foundation__item,
    body .biab-foundation__icon,
    body .biab-foundation__icon svg {
        transition: none;
    }
}


/* =========================================================
   FRAYORA — BUSINESS-IN-A-BOX
   SECTION 03 — THE DIFFERENCE
   DESKTOP: 1101px+

   Deep olive editorial background
   Overlapping dimensional circles
   Subtle lighting and staggered motion
========================================================= */

@media (min-width: 1101px) {

    /* =========================================
       SECTION
    ========================================= */

    body .biab-transformation {
        position: relative;
        isolation: isolate;

        width: 100%;
        min-height: 530px;

        box-sizing: border-box;
        overflow: hidden;

        background-color: #303B32 !important;
        background-image: none !important;

        color: #F8F3EB;
    }

    /* =========================================
       MAIN LAYOUT
    ========================================= */

    body .biab-transformation__inner {
        position: relative;
        z-index: 2;

        box-sizing: border-box;

        width: 100%;
        max-width: 1600px;
        min-height: 530px;

        margin: 0 auto;
        padding: 75px 80px;

        display: grid;
        grid-template-columns:
            minmax(0, 1.03fr)
            minmax(0, 1fr);

        column-gap: 72px;

        align-items: center;
    }

    /* =========================================
       LEFT CONTENT
    ========================================= */

    body .biab-transformation__content {
        position: relative;

        width: 100%;
        max-width: 660px;
    }

    /* EYEBROW */

    body .biab-transformation__eyebrow {
        margin: 0 0 27px;

        font-family: "Inter", sans-serif;
        font-size: 12px;
        line-height: 1.3;
        font-weight: 600;

        letter-spacing: 0.16em;

        color: #E8D9C7;
    }

    /* HEADING */

    body .biab-transformation__title {
        margin: 0;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: clamp(35px, 3.1vw, 49px);
        line-height: 1.17;
        font-weight: 600;

        letter-spacing: -0.045em;

        color: #F8F3EB;

        text-shadow:
            0 3px 16px rgba(0, 0, 0, 0.10);
    }

    /* BODY COPY */

    body .biab-transformation__body {
        width: 100%;
        max-width: 640px;

        margin: 30px 0 0;

        font-family: "Inter", sans-serif;
        font-size: 15px;
        line-height: 1.8;
        font-weight: 400;

        color: rgba(248, 243, 235, 0.86);
    }

    /* =========================================
       CLOSING STATEMENT
    ========================================= */

    body .biab-transformation__statement {
        display: flex;
        align-items: flex-start;

        gap: 18px;

        max-width: 610px;

        margin: 34px 0 0;

        font-family: "Inter", sans-serif;
        font-size: 15px;
        line-height: 1.65;
        font-weight: 500;

        color: #F8F3EB;
    }

    body .biab-transformation__statement-arrow {
        flex: 0 0 auto;

        font-size: 29px;
        line-height: 0.95;

        color: #E1C5AE;

        transition: transform 350ms ease;
    }

    /* =========================================
       RIGHT DIAGRAM
    ========================================= */

    body .biab-transformation__diagram {
        position: relative;
        isolation: isolate;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        height: 390px;

        padding: 0;
        margin: 0;
    }

    /* SHARED CIRCLE */

    body .biab-transformation__circle {
        position: relative;
        isolation: isolate;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 345px;
        height: 345px;
        flex: 0 0 345px;
        aspect-ratio: 1;

        box-sizing: border-box;
        border-radius: 50%;

        text-align: center;

        overflow: hidden;

        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);

        border: 1px solid rgba(255, 247, 226, 0.42);

        box-shadow:
            0 14px 35px rgba(7, 15, 9, 0.13),
            0 32px 60px rgba(7, 15, 9, 0.12),
            inset 0 2px 2px rgba(255, 255, 255, 0.18),
            inset 0 -18px 34px rgba(8, 15, 9, 0.13);

        transition:
            transform 550ms cubic-bezier(0.22, 1, 0.36, 1),
            box-shadow 550ms ease;
    }

    /* =========================================
       LEFT — MUTED OLIVE GLASS
    ========================================= */

    body .biab-transformation__circle--less {
        z-index: 1;

        margin-right: -55px;

        background:
            linear-gradient(
                145deg,
                rgba(160, 176, 146, 0.28) 0%,
                rgba(91, 108, 87, 0.45) 38%,
                rgba(51, 66, 53, 0.78) 100%
            );

        border-color: rgba(226, 233, 215, 0.52);
    }

    /* =========================================
       RIGHT — WARM TERRACOTTA GLASS
    ========================================= */

    body .biab-transformation__circle--more {
        z-index: 2;

        background:
            linear-gradient(
                140deg,
                rgba(215, 152, 111, 0.72) 0%,
                rgba(161, 106, 78, 0.66) 42%,
                rgba(90, 68, 56, 0.88) 100%
            );

        border-color: rgba(242, 190, 153, 0.68);

        box-shadow:
            0 16px 38px rgba(7, 15, 9, 0.16),
            0 34px 65px rgba(7, 15, 9, 0.15),
            inset 0 2px 2px rgba(255, 240, 220, 0.24),
            inset 0 -22px 36px rgba(53, 30, 21, 0.16);
    }


/* =========================================
   GLASS SURFACE REFLECTION
========================================= */

body .biab-transformation__circle::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 0;

    border-radius: inherit;
    pointer-events: none;

    background: linear-gradient(
        155deg,
        rgba(255, 255, 255, 0.16) 0%,
        rgba(255, 255, 255, 0.045) 26%,
        transparent 52%
    );
}

/* =========================================
   REFINED INNER LUMINOUS EDGE
========================================= */

body .biab-transformation__circle::after {
    content: "";

    position: absolute;
    inset: 5px;
    z-index: 0;

    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 50%;

    pointer-events: none;
}

/* KEEP TEXT ABOVE THE GLASS EFFECT */

body .biab-transformation__circle > span {
    position: relative;
    z-index: 2;
}


    /* CIRCLE TYPOGRAPHY */

    body .biab-transformation__circle span {
        display: block;

        font-family: "Inter", sans-serif;
        font-size: 16px;
        line-height: 1.6;
        font-weight: 600;

        letter-spacing: 0.14em;

        color: #F8F3EB;

        text-shadow:
            0 2px 7px rgba(0, 0, 0, 0.12);
    }

    /* =========================================
       CENTER ARROW
    ========================================= */

    body .biab-transformation__diagram-arrow {
        position: absolute;
        z-index: 5;

        top: 50%;
        left: 50%;

        transform: translate(-50%, -50%);

        font-family: "Inter", sans-serif;
        font-size: 52px;
        line-height: 1;
        font-weight: 300;

        color: #F8F3EB;

        text-shadow:
            0 2px 10px rgba(0, 0, 0, 0.20);

        pointer-events: none;
    }

    /* =========================================
       SUBTLE INTERACTIONS
    ========================================= */

    @media (hover: hover) {

        body .biab-transformation__diagram:hover
        .biab-transformation__circle--less {
            transform: translateX(-5px);
        }

        body .biab-transformation__diagram:hover
        .biab-transformation__circle--more {
            transform: translateX(5px);
        }

        body .biab-transformation__content:hover
        .biab-transformation__statement-arrow {
            transform: translateX(5px);
        }

    }

    /* =========================================
       ENTRANCE ANIMATIONS
    ========================================= */

    body .biab-transformation__eyebrow,
    body .biab-transformation__title,
    body .biab-transformation__body,
    body .biab-transformation__statement {
        animation:
            biabTransformationReveal 850ms
            cubic-bezier(0.22, 1, 0.36, 1)
            both;
    }

    body .biab-transformation__eyebrow {
        animation-delay: 80ms;
    }

    body .biab-transformation__title {
        animation-delay: 170ms;
    }

    body .biab-transformation__body {
        animation-delay: 270ms;
    }

    body .biab-transformation__statement {
        animation-delay: 370ms;
    }

    body .biab-transformation__circle--less {
        animation:
            biabTransformationCircle 1000ms
            cubic-bezier(0.22, 1, 0.36, 1)
            210ms both;
    }

    body .biab-transformation__circle--more {
        animation:
            biabTransformationCircle 1000ms
            cubic-bezier(0.22, 1, 0.36, 1)
            390ms both;
    }

    body .biab-transformation__diagram-arrow {
        animation:
            biabTransformationArrow 800ms ease
            650ms both;
    }

}

/* =========================================
   KEYFRAMES
========================================= */

@keyframes biabTransformationReveal {
    from {
        opacity: 0;
        translate: 0 22px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

@keyframes biabTransformationCircle {
    from {
        opacity: 0;
        translate: 0 25px;
        scale: 0.94;
    }

    to {
        opacity: 1;
        translate: 0 0;
        scale: 1;
    }
}

@keyframes biabTransformationArrow {
    from {
        opacity: 0;
        translate: -12px 0;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    body .biab-transformation__eyebrow,
    body .biab-transformation__title,
    body .biab-transformation__body,
    body .biab-transformation__statement,
    body .biab-transformation__circle,
    body .biab-transformation__diagram-arrow {
        animation: none;
        opacity: 1;
        translate: none;
        scale: 1;
    }

    body .biab-transformation__circle,
    body .biab-transformation__statement-arrow {
        transition: none;
    }
}



/* =========================================================
   FRAYORA — BUSINESS-IN-A-BOX
   SECTION 04 — HOW IT WORKS
   DESKTOP: 1101px+

   Horizontal four-step process
   Modern editorial typography
   Solid ivory, dimensional icons, subtle motion
========================================================= */

@media (min-width: 1101px) {

    /* =========================================
       SECTION BACKGROUND
    ========================================= */

    body .biab-journey {
        position: relative;
        isolation: isolate;

        box-sizing: border-box;
        width: 100%;
        min-height: 610px;

        margin: 0;
        padding: 94px 0 82px;

        overflow: hidden;

        background-color: #F8F3EB !important;
        background-image: none !important;

        color: #1F211D;
    }

    body .biab-journey__inner {
        position: relative;
        z-index: 2;

        box-sizing: border-box;
        width: 100%;
        max-width: 1600px;

        margin: 0 auto;
        padding: 0 80px;
    }

    /* =========================================
       TOP INTRO
    ========================================= */

    body .biab-journey__intro {
        max-width: 1050px;
        margin: 0;
    }

    body .biab-journey__eyebrow {
        margin: 0 0 22px;

        font-family: "Inter", sans-serif;
        font-size: 12px;
        line-height: 1.3;
        font-weight: 600;
        letter-spacing: 0.16em;

        color: #AD7258;
    }

    body .biab-journey__title {
        margin: 0;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: clamp(36px, 3.15vw, 49px);
        line-height: 1.16;
        font-weight: 600;
        letter-spacing: -0.047em;

        color: #1F211D;
    }

    body .biab-journey__description {
        width: 100%;
        max-width: 1000px;

        margin: 20px 0 0;

        font-family: "Inter", sans-serif;
        font-size: 15px;
        line-height: 1.75;
        font-weight: 400;

        color: rgba(31, 33, 29, 0.78);
    }

    /* =========================================
       FOUR-COLUMN PROCESS GRID
    ========================================= */

    body .biab-journey__steps {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));

        column-gap: 62px;
        align-items: start;

        margin-top: 65px;
    }

    body .biab-journey__step {
        position: relative;
        min-width: 0;

        margin: 0;
        padding: 0;

        background: transparent;
        border: 0;
        box-shadow: none;

        transition: transform 350ms ease;
    }

    /* =========================================
       NUMBERS AND ICON CIRCLES
    ========================================= */

    body .biab-journey__step-top {
        display: flex;
        align-items: center;
        gap: 17px;

        height: 75px;
        margin-bottom: 19px;
    }

    body .biab-journey__number {
        flex: 0 0 auto;

        font-family: "Inter", sans-serif;
        font-size: 15px;
        line-height: 1;
        font-weight: 600;

        letter-spacing: -0.025em;

        color: #98664D;
    }

    body .biab-journey__icon {
        position: relative;

        display: flex;
        align-items: center;
        justify-content: center;

        flex: 0 0 74px;
        width: 74px;
        height: 74px;

        box-sizing: border-box;
        border-radius: 50%;

        background-color: #F1E2D4;

        border: 1px solid rgba(178, 133, 102, 0.10);

        box-shadow:
            0 4px 10px rgba(66, 46, 34, 0.035),
            0 14px 24px rgba(66, 46, 34, 0.055),
            inset 0 1px 0 rgba(255, 255, 255, 0.70);

        transition:
            transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
            background-color 400ms ease,
            box-shadow 400ms ease;
    }

    body .biab-journey__icon svg {
        display: block;

        width: 31px;
        height: 31px;

        stroke: #594B3D;
        stroke-width: 1.65;
        stroke-linecap: round;
        stroke-linejoin: round;

        filter: drop-shadow(
            0 2px 2px rgba(60, 43, 33, 0.08)
        );
    }

    /* =========================================
       CONNECTING ARROWS
    ========================================= */

    body .biab-journey__step:not(:last-child)::after {
        content: "→";

        position: absolute;
        z-index: 3;

        top: 17px;
        right: -44px;

        font-family: "Inter", sans-serif;
        font-size: 30px;
        line-height: 1;
        font-weight: 300;

        color: rgba(152, 102, 77, 0.77);

        pointer-events: none;

        transition: transform 350ms ease;
    }

    /* =========================================
       STEP TYPOGRAPHY
    ========================================= */

    body .biab-journey__step h3 {
        margin: 0 0 14px;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: 17px;
        line-height: 1.38;
        font-weight: 650;
        letter-spacing: -0.033em;

        color: #1F211D;
    }

    body .biab-journey__step p {
        margin: 0;

        font-family: "Inter", sans-serif;
        font-size: 13px;
        line-height: 1.7;
        font-weight: 400;

        color: rgba(31, 33, 29, 0.75);
    }

    /* =========================================
       CENTERED CLOSING STATEMENT
    ========================================= */

    body .biab-journey__closing {
        position: relative;

        width: 100%;
        max-width: 1050px;

        margin: 76px auto 0;
        padding: 0 24px;

        box-sizing: border-box;

        text-align: center;
    }

    body .biab-journey__closing p {
        margin: 0;

        font-family: "Inter", sans-serif;
        font-size: 15px;
        line-height: 1.65;
        font-weight: 600;

        color: #1F211D;
    }

    /* =========================================
       HOVER INTERACTIONS
    ========================================= */

    @media (hover: hover) {

        body .biab-journey__step:hover {
            transform: translateY(-4px);
        }

        body .biab-journey__step:hover .biab-journey__icon {
            transform: translateY(-3px) scale(1.04);

            background-color: #F0DED0;

            box-shadow:
                0 6px 14px rgba(66, 46, 34, 0.055),
                0 20px 32px rgba(66, 46, 34, 0.085),
                inset 0 1px 0 rgba(255, 255, 255, 0.75);
        }

        body .biab-journey__step:hover::after {
            transform: translateX(4px);
        }
    }

    /* =========================================
       STAGGERED ENTRANCE ANIMATION
    ========================================= */

    body .biab-journey__eyebrow,
    body .biab-journey__title,
    body .biab-journey__description,
    body .biab-journey__step,
    body .biab-journey__closing {
        animation: biabJourneyReveal 850ms
            cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    body .biab-journey__eyebrow {
        animation-delay: 70ms;
    }

    body .biab-journey__title {
        animation-delay: 150ms;
    }

    body .biab-journey__description {
        animation-delay: 240ms;
    }

    body .biab-journey__step:nth-child(1) {
        animation-delay: 280ms;
    }

    body .biab-journey__step:nth-child(2) {
        animation-delay: 370ms;
    }

    body .biab-journey__step:nth-child(3) {
        animation-delay: 460ms;
    }

    body .biab-journey__step:nth-child(4) {
        animation-delay: 550ms;
    }

    body .biab-journey__closing {
        animation-delay: 620ms;
    }
}

/* =========================================
   REVEAL KEYFRAMES
========================================= */

@keyframes biabJourneyReveal {
    from {
        opacity: 0;
        translate: 0 24px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    body .biab-journey__eyebrow,
    body .biab-journey__title,
    body .biab-journey__description,
    body .biab-journey__step,
    body .biab-journey__closing {
        animation: none;
        opacity: 1;
        translate: none;
    }

    body .biab-journey__step,
    body .biab-journey__icon {
        transition: none;
    }
}


/* =========================================================
   FRAYORA — BUSINESS-IN-A-BOX
   SECTION 05 — BUILT AROUND YOUR BUSINESS
   DESKTOP: 1101px+

   Architectural three-stage progression
   Solid editorial background
   Sage, stone and terracotta surfaces
   Connecting curve, shadows and subtle motion
========================================================= */

@media (min-width: 1101px) {

    /* =========================================
       SECTION FOUNDATION
    ========================================= */

    body .biab-stages {
        position: relative;
        isolation: isolate;

        width: 100%;
        min-height: 680px;

        margin: 0;
        padding: 85px 0 100px;

        box-sizing: border-box;
        overflow: hidden;

        background-color: #F5EDE4 !important;
        background-image: none !important;

        color: #1F211D;
    }

    body .biab-stages__inner {
        position: relative;
        z-index: 2;

        box-sizing: border-box;

        width: 100%;
        max-width: 1600px;

        margin: 0 auto;
        padding: 0 80px;
    }

    /* =========================================
       INTRODUCTION
    ========================================= */

    body .biab-stages__intro {
        position: relative;
        z-index: 2;

        width: 100%;
        max-width: 1180px;
    }

    body .biab-stages__eyebrow {
        margin: 0 0 20px;

        font-family: "Inter", sans-serif;
        font-size: 12px;
        line-height: 1.3;
        font-weight: 600;
        letter-spacing: 0.16em;

        color: #AD7258;
    }

    body .biab-stages__title {
        margin: 0;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: clamp(36px, 3.15vw, 49px);
        line-height: 1.16;
        font-weight: 600;
        letter-spacing: -0.047em;

        color: #1F211D;
    }

    body .biab-stages__body {
        max-width: 1120px;

        margin: 23px 0 0;

        font-family: "Inter", sans-serif;
        font-size: 15px;
        line-height: 1.75;
        font-weight: 400;

        color: rgba(31, 33, 29, 0.78);
    }

    body .biab-stages__statement {
        margin: 24px 0 0;

        font-family: "Inter", sans-serif;
        font-size: 15px;
        line-height: 1.65;
        font-weight: 600;

        color: #303B32;
    }

    /* =========================================
       ARCHITECTURAL STAGE LANDSCAPE
    ========================================= */

    body .biab-stages__landscape {
        position: relative;
        isolation: isolate;

        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: end;

        gap: 20px;

        width: 100%;
        min-height: 340px;

        margin-top: 55px;
    }

    /* =========================================
       SHARED STAGE PANELS
    ========================================= */

    body .biab-stages__stage {
        position: relative;
        z-index: 1;

        box-sizing: border-box;
        min-width: 0;
        min-height: 285px;

        padding: 52px 38px 35px;

        overflow: hidden;

        border: 1px solid rgba(77, 68, 54, 0.05);

        box-shadow:
            0 5px 12px rgba(54, 45, 35, 0.025),
            0 20px 40px rgba(54, 45, 35, 0.045),
            inset 0 1px 0 rgba(255, 255, 255, 0.46);

        transition:
            transform 500ms cubic-bezier(0.22, 1, 0.36, 1),
            box-shadow 500ms ease;
    }

    /* =========================================
       01 — STARTING
       Muted sage architecture
    ========================================= */

    body .biab-stages__stage--starting {
        min-height: 290px;

        border-radius: 0 155px 0 0;

        background-color: #DEDECF;

        background-image: linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.18),
            rgba(255, 255, 255, 0.00) 68%
        );
    }

    /* =========================================
       02 — GROWING
       Warm stone surface
    ========================================= */

    body .biab-stages__stage--growing {
        min-height: 290px;

        border-radius: 145px 0 0 0;

        background-color: #EADBCB;

        background-image: linear-gradient(
            150deg,
            rgba(255, 255, 255, 0.25),
            rgba(255, 255, 255, 0.00) 68%
        );
    }

    /* =========================================
       03 — ESTABLISHED
       Elevated terracotta architecture
    ========================================= */

    body .biab-stages__stage--established {
        min-height: 340px;

        border-radius: 155px 0 0 0;

        background-color: #C88364;

        background-image: linear-gradient(
            140deg,
            rgba(255, 238, 221, 0.24) 0%,
            rgba(207, 143, 108, 0.12) 44%,
            rgba(138, 82, 60, 0.16) 100%
        );

        border-color: rgba(130, 74, 48, 0.12);

        box-shadow:
            0 8px 18px rgba(91, 51, 37, 0.075),
            0 24px 45px rgba(91, 51, 37, 0.095),
            inset 0 1px 0 rgba(255, 241, 225, 0.28);
    }

    /* =========================================
       TOP NUMBERS + ICONS
    ========================================= */

    body .biab-stages__top {
        position: relative;
        z-index: 2;

        display: flex;
        align-items: center;
        gap: 24px;

        min-height: 45px;
        margin-bottom: 25px;
    }

    body .biab-stages__number {
        font-family: "Inter", sans-serif;
        font-size: 15px;
        line-height: 1;
        font-weight: 600;

        color: #8F5B42;
    }

    body .biab-stages__icon {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 45px;
        height: 45px;

        color: #6E5545;

        transition: transform 400ms ease;
    }

    body .biab-stages__icon svg {
        display: block;

        width: 38px;
        height: 38px;

        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;

        filter: drop-shadow(
            0 2px 2px rgba(60, 43, 33, 0.09)
        );
    }

    body .biab-stages__stage--established
    .biab-stages__number,
    body .biab-stages__stage--established
    .biab-stages__icon {
        color: #684332;
    }

    /* =========================================
       STAGE COPY
    ========================================= */

    body .biab-stages__copy {
        position: relative;
        z-index: 2;

        max-width: 345px;
    }

    body .biab-stages__copy h3 {
        margin: 0 0 16px;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: 23px;
        line-height: 1.25;
        font-weight: 650;
        letter-spacing: -0.038em;

        color: #1F211D;
    }

    body .biab-stages__copy p {
        margin: 0;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1.7;
        font-weight: 400;

        color: rgba(31, 33, 29, 0.80);
    }

    body .biab-stages__stage--established
    .biab-stages__copy p {
        color: rgba(35, 28, 24, 0.88);
    }

    /* =========================================
       CONNECTING CURVED LINE
    ========================================= */

    body .biab-stages__path {
        position: absolute;

        z-index: 3;

        top: -35px;
        left: 0;

        width: 100%;
        height: 250px;

        overflow: visible;
        pointer-events: none;
    }

    body .biab-stages__path-line {
        stroke: #B58467;
        stroke-width: 1.8;

        vector-effect: non-scaling-stroke;

        opacity: 0.8;
    }

    body .biab-stages__path-dot {
        stroke-width: 1;
        vector-effect: non-scaling-stroke;
    }

    body .biab-stages__path-dot--one {
        fill: #7D896C;
        stroke: #F5EDE4;
    }

    body .biab-stages__path-dot--two {
        fill: #784832;
        stroke: #EBC3A6;
    }

    /* =========================================
       HOVER INTERACTIONS
    ========================================= */

    @media (hover: hover) {

        body .biab-stages__stage:hover {
            transform: translateY(-6px);

            box-shadow:
                0 9px 18px rgba(54, 45, 35, 0.055),
                0 28px 55px rgba(54, 45, 35, 0.095),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
        }

        body .biab-stages__stage:hover
        .biab-stages__icon {
            transform: translateY(-4px) scale(1.06);
        }
    }

    /* =========================================
       STAGGERED ENTRANCE ANIMATIONS
    ========================================= */

    body .biab-stages__eyebrow,
    body .biab-stages__title,
    body .biab-stages__body,
    body .biab-stages__statement,
    body .biab-stages__stage {
        animation: biabStagesReveal 900ms
            cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    body .biab-stages__eyebrow {
        animation-delay: 70ms;
    }

    body .biab-stages__title {
        animation-delay: 150ms;
    }

    body .biab-stages__body {
        animation-delay: 240ms;
    }

    body .biab-stages__statement {
        animation-delay: 320ms;
    }

    body .biab-stages__stage:nth-child(1) {
        animation-delay: 300ms;
    }

    body .biab-stages__stage:nth-child(2) {
        animation-delay: 430ms;
    }

    body .biab-stages__stage:nth-child(3) {
        animation-delay: 560ms;
    }

    body .biab-stages__path-line {
        stroke-dasharray: 1500;
        stroke-dashoffset: 1500;

        animation: biabStagesDraw 1800ms
            cubic-bezier(0.22, 1, 0.36, 1)
            550ms forwards;
    }

    body .biab-stages__path-dot {
        animation: biabStagesDot 700ms ease
            1200ms both;
    }

}

/* =========================================
   ANIMATION KEYFRAMES
========================================= */

@keyframes biabStagesReveal {
    from {
        opacity: 0;
        translate: 0 25px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

@keyframes biabStagesDraw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes biabStagesDot {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    body .biab-stages__eyebrow,
    body .biab-stages__title,
    body .biab-stages__body,
    body .biab-stages__statement,
    body .biab-stages__stage,
    body .biab-stages__path-line,
    body .biab-stages__path-dot {
        animation: none;
        opacity: 1;
        translate: none;
    }

    body .biab-stages__path-line {
        stroke-dasharray: none;
        stroke-dashoffset: 0;
    }

    body .biab-stages__stage,
    body .biab-stages__icon {
        transition: none;
    }
}


/* =========================================================
   FRAYORA — BUSINESS-IN-A-BOX
   SECTION 06 — BUILT FOR REAL TEAMS
   DESKTOP: 1101px+

   Three elevated editorial cards
   Solid warm ivory background
   Soft glass-like highlights and shadows
   Full-width closing CTA panel
========================================================= */

@media (min-width: 1101px) {

    /* =========================================
       SECTION FOUNDATION
    ========================================= */

    body .biab-proposal {
        position: relative;
        isolation: isolate;

        box-sizing: border-box;
        width: 100%;
        min-height: 710px;

        margin: 0;
        padding: 88px 0 105px;

        overflow: hidden;

        background-color: #F8F3EB !important;
        background-image: none !important;

        color: #1F211D;
    }

    body .biab-proposal__inner {
        position: relative;
        z-index: 2;

        box-sizing: border-box;

        width: 100%;
        max-width: 1600px;

        margin: 0 auto;
        padding: 0 80px;
    }

    /* =========================================
       INTRODUCTION
    ========================================= */

    body .biab-proposal__intro {
        position: relative;
        z-index: 2;

        width: 100%;
        max-width: 1180px;
    }

    body .biab-proposal__eyebrow {
        margin: 0 0 20px;

        font-family: "Inter", sans-serif;
        font-size: 12px;
        line-height: 1.3;
        font-weight: 600;
        letter-spacing: 0.16em;

        color: #AD7258;
    }

    body .biab-proposal__title {
        margin: 0;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: clamp(36px, 3.15vw, 49px);
        line-height: 1.16;
        font-weight: 600;
        letter-spacing: -0.047em;

        color: #1F211D;
    }

    body .biab-proposal__body {
        width: 100%;
        max-width: 1120px;

        margin: 23px 0 0;

        font-family: "Inter", sans-serif;
        font-size: 15px;
        line-height: 1.75;
        font-weight: 400;

        color: rgba(31, 33, 29, 0.78);
    }

    body .biab-proposal__statement {
        margin: 22px 0 0;

        font-family: "Inter", sans-serif;
        font-size: 15px;
        line-height: 1.65;
        font-weight: 600;

        color: #303B32;
    }

    /* =========================================
       THREE-CARD GRID
    ========================================= */

    body .biab-proposal__steps {
        position: relative;

        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));

        gap: 55px;
        align-items: stretch;

        width: 100%;

        margin-top: 45px;
    }

    /* =========================================
       ELEVATED CARDS
    ========================================= */

    body .biab-proposal__card {
        position: relative;

        box-sizing: border-box;
        min-width: 0;
        min-height: 245px;

        padding: 27px 32px 32px;

        background-color: #FCFAF7;
        background-image: linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.48),
            rgba(255, 255, 255, 0) 65%
        );

        border: 1px solid rgba(94, 74, 58, 0.045);
        border-radius: 16px;

        box-shadow:
            0 5px 12px rgba(54, 45, 35, 0.025),
            0 20px 42px rgba(54, 45, 35, 0.065),
            inset 0 1px 0 rgba(255, 255, 255, 0.80);

        transition:
            transform 450ms cubic-bezier(0.22, 1, 0.36, 1),
            box-shadow 450ms ease;
    }

    /* =========================================
       CONNECTING ARROWS
    ========================================= */

    body .biab-proposal__card:not(:last-child)::after {
        content: "→";

        position: absolute;
        z-index: 3;

        top: 50%;
        right: -44px;

        transform: translateY(-50%);

        font-family: "Inter", sans-serif;
        font-size: 34px;
        line-height: 1;
        font-weight: 300;

        color: #98664D;

        pointer-events: none;
    }

    /* =========================================
       NUMBERS + CIRCULAR ICONS
    ========================================= */

    body .biab-proposal__card-top {
        display: flex;
        align-items: center;

        gap: 17px;

        margin-bottom: 23px;
    }

    body .biab-proposal__number {
        font-family: "Inter", sans-serif;
        font-size: 15px;
        line-height: 1;
        font-weight: 600;

        color: #98664D;
    }

    body .biab-proposal__icon {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 65px;
        height: 65px;
        flex: 0 0 65px;

        box-sizing: border-box;

        background-color: #F1E2D4;
        border-radius: 50%;

        border: 1px solid rgba(178, 133, 102, 0.075);

        box-shadow:
            0 4px 9px rgba(66, 46, 34, 0.035),
            0 12px 22px rgba(66, 46, 34, 0.055),
            inset 0 1px 0 rgba(255, 255, 255, 0.65);

        transition:
            transform 400ms ease,
            box-shadow 400ms ease;
    }

    body .biab-proposal__icon svg {
        display: block;

        width: 30px;
        height: 30px;

        stroke: #594B3D;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    /* =========================================
       CARD TYPOGRAPHY
    ========================================= */

    body .biab-proposal__card h3 {
        margin: 0 0 15px;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: 18px;
        line-height: 1.35;
        font-weight: 650;
        letter-spacing: -0.035em;

        color: #1F211D;
    }

    body .biab-proposal__card p {
        margin: 0;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1.65;
        font-weight: 400;

        color: rgba(31, 33, 29, 0.76);
    }

    /* =========================================
       CLOSING CTA PANEL
    ========================================= */

    body .biab-proposal__closing {
        position: relative;
        z-index: 2;

        display: flex;
        align-items: center;
        justify-content: space-between;

        gap: 36px;

        box-sizing: border-box;
        width: 100%;

        min-height: 90px;

        margin-top: 27px;
        padding: 19px 36px;

        background-color: #FCFAF7;
        background-image: linear-gradient(
            155deg,
            rgba(255, 255, 255, 0.55),
            rgba(255, 255, 255, 0) 68%
        );

        border: 1px solid rgba(94, 74, 58, 0.045);
        border-radius: 15px;

        box-shadow:
            0 5px 12px rgba(54, 45, 35, 0.025),
            0 18px 38px rgba(54, 45, 35, 0.06),
            inset 0 1px 0 rgba(255, 255, 255, 0.85);
    }

    body .biab-proposal__closing p {
        margin: 0;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: 18px;
        line-height: 1.45;
        font-weight: 600;
        letter-spacing: -0.025em;

        color: #1F211D;
    }

    /* =========================================
       TERRACOTTA CTA BUTTON
    ========================================= */

    body .biab-proposal__button {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        flex: 0 0 auto;

        gap: 12px;

        min-height: 50px;

        box-sizing: border-box;
        padding: 13px 25px;

        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 30px;

        background-color: #C96743;
        color: #FFFFFF;

        font-family: "Inter", sans-serif;
        font-size: 13px;
        line-height: 1.2;
        font-weight: 600;

        text-decoration: none;

        box-shadow:
            0 5px 12px rgba(91, 51, 37, 0.13),
            0 12px 22px rgba(91, 51, 37, 0.12),
            inset 0 1px 0 rgba(255, 255, 255, 0.14);

        transition:
            background-color 300ms ease,
            transform 300ms ease,
            box-shadow 300ms ease;
    }

    body .biab-proposal__button span {
        display: inline-block;

        font-size: 18px;
        line-height: 1;

        transition: transform 300ms ease;
    }

    /* =========================================
       DECORATIVE ARCHITECTURAL CURVES
    ========================================= */

    body .biab-proposal__decoration {
        position: absolute;
        z-index: 0;

        top: -360px;
        right: -130px;

        width: 650px;
        height: 520px;

        pointer-events: none;
        overflow: hidden;
    }

    body .biab-proposal__arc {
        position: absolute;
        display: block;

        width: 760px;
        height: 500px;

        border: 1px solid rgba(201, 103, 67, 0.20);
        border-radius: 50%;

        background: transparent;
    }

    body .biab-proposal__arc--one {
        top: 20px;
        left: 0;

        transform: rotate(-21deg);
    }

    body .biab-proposal__arc--two {
        top: 90px;
        left: 105px;

        transform: rotate(-15deg);

        border-color: rgba(201, 103, 67, 0.13);
    }

    /* =========================================
       HOVER INTERACTIONS
    ========================================= */

    @media (hover: hover) {

        body .biab-proposal__card:hover {
            transform: translateY(-5px);

            box-shadow:
                0 9px 18px rgba(54, 45, 35, 0.045),
                0 27px 48px rgba(54, 45, 35, 0.095),
                inset 0 1px 0 rgba(255, 255, 255, 0.85);
        }

        body .biab-proposal__card:hover
        .biab-proposal__icon {
            transform: translateY(-3px);

            box-shadow:
                0 7px 15px rgba(66, 46, 34, 0.06),
                0 18px 28px rgba(66, 46, 34, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.72);
        }

        body .biab-proposal__button:hover {
            background-color: #D57450;
            transform: translateY(-3px);

            box-shadow:
                0 8px 17px rgba(91, 51, 37, 0.17),
                0 18px 30px rgba(91, 51, 37, 0.16);
        }

        body .biab-proposal__button:hover span {
            transform: translateX(4px);
        }

    }

    body .biab-proposal__button:focus-visible {
        outline: 2px solid #C96743;
        outline-offset: 4px;
    }

    /* =========================================
       ENTRANCE ANIMATIONS
    ========================================= */

    body .biab-proposal__eyebrow,
    body .biab-proposal__title,
    body .biab-proposal__body,
    body .biab-proposal__statement,
    body .biab-proposal__card,
    body .biab-proposal__closing {
        animation: biabProposalReveal 850ms
            cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    body .biab-proposal__eyebrow {
        animation-delay: 70ms;
    }

    body .biab-proposal__title {
        animation-delay: 150ms;
    }

    body .biab-proposal__body {
        animation-delay: 230ms;
    }

    body .biab-proposal__statement {
        animation-delay: 300ms;
    }

    body .biab-proposal__card:nth-child(1) {
        animation-delay: 340ms;
    }

    body .biab-proposal__card:nth-child(2) {
        animation-delay: 440ms;
    }

    body .biab-proposal__card:nth-child(3) {
        animation-delay: 540ms;
    }

    body .biab-proposal__closing {
        animation-delay: 650ms;
    }

}

/* =========================================
   ANIMATION KEYFRAMES
========================================= */

@keyframes biabProposalReveal {
    from {
        opacity: 0;
        translate: 0 24px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    body .biab-proposal__eyebrow,
    body .biab-proposal__title,
    body .biab-proposal__body,
    body .biab-proposal__statement,
    body .biab-proposal__card,
    body .biab-proposal__closing {
        animation: none;
        opacity: 1;
        translate: none;
    }

    body .biab-proposal__card,
    body .biab-proposal__icon,
    body .biab-proposal__button,
    body .biab-proposal__button span {
        transition: none;
    }
}


/* =========================================================
   FRAYORA — BUSINESS-IN-A-BOX
   SECTION 07 — FINAL CTA
   DESKTOP: 1101px+
========================================================= */

@media (min-width: 1101px) {

    body .biab-final-cta {
        position: relative;
        isolation: isolate;

        width: 100%;
        min-height: 520px;

        box-sizing: border-box;
        margin: 0;
        padding: 0;
        overflow: hidden;

        background-color: #FAF5EF !important;
        background-image:
            radial-gradient(
                ellipse 80% 120% at 50% 45%,
                rgba(201, 103, 67, 0.13) 0%,
                rgba(201, 103, 67, 0.07) 34%,
                rgba(201, 103, 67, 0.03) 52%,
                transparent 78%
            ),
            radial-gradient(
                ellipse 110% 140% at 15% 100%,
                rgba(232, 180, 150, 0.10) 0%,
                rgba(232, 180, 150, 0.04) 42%,
                transparent 80%
            ),
            radial-gradient(
                ellipse 110% 140% at 85% 0%,
                rgba(214, 143, 110, 0.08) 0%,
                rgba(214, 143, 110, 0.03) 40%,
                transparent 78%
            ) !important;
        background-repeat: no-repeat !important;

        color: #1F211D;
    }

    body .biab-final-cta::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.72),
            inset 0 18px 35px -35px rgba(87,65,47,0.08);
    }

    body .biab-final-cta__inner {
        position: relative;
        z-index: 2;

        display: flex;
        align-items: center;
        justify-content: center;

        box-sizing: border-box;
        width: 100%;
        max-width: 1600px;
        min-height: 520px;

        margin: 0 auto;
        padding: 85px 80px;
    }

    body .biab-final-cta__content {
        width: 100%;
        max-width: 1120px;

        margin: 0 auto;
        text-align: center;
    }

    body .biab-final-cta__eyebrow {
        margin: 0 0 27px;

        font-family: "Inter", sans-serif;
        font-size: 12px;
        line-height: 1.3;
        font-weight: 600;
        letter-spacing: 0.16em;
        text-transform: uppercase;

        color: #C96743;
    }

    body .biab-final-cta__title {
        max-width: 1080px;
        margin: 0 auto;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: clamp(48px, 4.5vw, 74px);
        line-height: 1.08;
        font-weight: 600;
        letter-spacing: -0.05em;

        color: #1F211D;
        text-wrap: balance;
    }

    body .biab-final-cta__body {
        width: 100%;
        max-width: 760px;

        margin: 30px auto 0;

        font-family: "Inter", sans-serif;
        font-size: 16px;
        line-height: 1.75;
        font-weight: 400;

        color: rgba(31,33,29,0.78);
    }

    body .biab-final-cta__support {
        width: 100%;
        max-width: 760px;

        margin: 20px auto 0;

        font-family: "Inter", sans-serif;
        font-size: 15px;
        line-height: 1.7;
        font-weight: 500;

        color: #303B32;
    }

    body .biab-final-cta__button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 16px;

        width: fit-content;
        min-height: 55px;

        box-sizing: border-box;

        margin: 34px auto 0;
        padding: 16px 30px;

        border: 1px solid rgba(255,255,255,0.18);
        border-radius: 999px;

        background-color: #C96743;
        color: #FFFFFF;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1.2;
        font-weight: 600;
        text-decoration: none;

        box-shadow:
            0 8px 18px rgba(170, 98, 69, 0.16),
            0 18px 36px rgba(170, 98, 69, 0.14),
            inset 0 1px 0 rgba(255,255,255,0.18);

        transition:
            background-color 300ms ease,
            transform 300ms ease,
            box-shadow 300ms ease;
    }

    body .biab-final-cta__button span {
        font-size: 20px;
        line-height: 1;
        transition: transform 300ms ease;
    }

    body .biab-final-cta__button:hover {
        background-color: #B95635;
        transform: translateY(-3px);
        box-shadow:
            0 10px 22px rgba(170, 98, 69, 0.18),
            0 22px 42px rgba(170, 98, 69, 0.16);
    }

    body .biab-final-cta__button:hover span {
        transform: translateX(4px);
    }

    body .biab-final-cta__button:focus-visible {
        outline: 2px solid #C96743;
        outline-offset: 4px;
    }

    body .biab-final-cta__eyebrow,
    body .biab-final-cta__title,
    body .biab-final-cta__body,
    body .biab-final-cta__support,
    body .biab-final-cta__button {
        animation: biabFinalReveal 850ms cubic-bezier(0.22,1,0.36,1) both;
    }

    body .biab-final-cta__eyebrow { animation-delay: 80ms; }
    body .biab-final-cta__title   { animation-delay: 170ms; }
    body .biab-final-cta__body    { animation-delay: 270ms; }
    body .biab-final-cta__support { animation-delay: 370ms; }
    body .biab-final-cta__button  { animation-delay: 470ms; }
}

/* KEYFRAMES */
@keyframes biabFinalReveal {
    from {
        opacity: 0;
        translate: 0 24px;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}

/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
    body .biab-final-cta__eyebrow,
    body .biab-final-cta__title,
    body .biab-final-cta__body,
    body .biab-final-cta__support,
    body .biab-final-cta__button {
        animation: none;
        opacity: 1;
        translate: none;
    }

    body .biab-final-cta__button,
    body .biab-final-cta__button span {
        transition: none;
    }
}


/* =========================================================
   FRAYORA — BUSINESS-IN-A-BOX
   SECTION 01 — HERO — TABLET
   600px–1100px

   Desktop-inspired architectural hero
   Olive overlay, subtle luminosity
   Manrope + Inter, shadows and animations
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    /* =========================================
       HERO BACKGROUND
    ========================================= */

    body .biab-hero {
        position: relative;
        isolation: isolate;

        display: block;

        width: 100%;
        height: 680px;
min-height: 680px;

        margin: 0;
        padding: 0;
        box-sizing: border-box;

        overflow: hidden;

        background-color: #283429 !important;
        background-image: url("../images/Business in a box/herotablet.png") !important;
        background-size: cover !important;
        background-position: 60% center !important;
        background-repeat: no-repeat !important;

        color: #F8F3EB;
    }

    /* =========================================
       OLIVE CONTRAST OVERLAY
    ========================================= */

    body .biab-hero::before {
        content: "";

        position: absolute;
        inset: 0;
        z-index: 0;

        pointer-events: none;

        background: linear-gradient(
            90deg,
            rgba(17, 26, 18, 0.60) 0%,
            rgba(17, 26, 18, 0.43) 55%,
            rgba(17, 26, 18, 0.16) 100%
        );
    }

    /* =========================================
       SUBTLE ARCHITECTURAL LUMINOSITY
    ========================================= */

    body .biab-hero::after {
        content: "";

        position: absolute;
        inset: 0;
        z-index: 1;

        pointer-events: none;

        background: linear-gradient(
            125deg,
            transparent 35%,
            rgba(255, 250, 235, 0.018) 65%,
            rgba(255, 250, 235, 0.05) 100%
        );

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.07),
            inset 0 -22px 42px -45px rgba(0,0,0,0.22);
    }

    /* =========================================
       CONTENT GRID
    ========================================= */

    body .biab-hero__inner {
        position: relative;
        z-index: 2;

        display: flex;
        align-items: center;
        justify-content: flex-start;

        width: 100%;
        max-width: 1100px;

        height: 100%;
min-height: 680px;

        margin: 0 auto;
        padding: 40px 60px;

        box-sizing: border-box;
    }

    body .biab-hero__content {
        position: relative;
        z-index: 2;

        width: 100%;
        max-width: 610px;

        margin: 0;
        padding: 0;

        text-align: left;
    }

    /* =========================================
       EYEBROW
    ========================================= */

    body .biab-hero__eyebrow {
        margin: 0 0 27px;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 12px;
        line-height: 1.4;
        font-weight: 600;

        letter-spacing: 0.17em;
        text-transform: uppercase;

        color: #E8D8C0;

        text-shadow: 0 1px 5px rgba(0,0,0,0.12);
    }

    /* =========================================
       HEADING
    ========================================= */

    body .biab-hero__title {
        width: 100%;
        max-width: 610px;

        margin: 0;
        padding: 0;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: clamp(46px, 5.8vw, 64px);
        line-height: 1.12;
        font-weight: 600;
        letter-spacing: -0.05em;

        color: #F8F3EB;

        text-align: left;
        text-wrap: balance;

        text-shadow: 0 3px 18px rgba(0,0,0,0.15);
    }

    /* =========================================
       BODY COPY
    ========================================= */

    body .biab-hero__body {
        width: 100%;
        max-width: 545px;

        margin: 30px 0 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 15px;
        line-height: 1.75;
        font-weight: 400;
        letter-spacing: -0.005em;

        color: rgba(248,243,235,0.94);

        text-shadow: 0 2px 8px rgba(0,0,0,0.13);
    }

    /* =========================================
       SUPPORTING STATEMENT
    ========================================= */

    body .biab-hero__statement {
        width: 100%;
        max-width: 550px;

        margin: 26px 0 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 15px;
        line-height: 1.65;
        font-weight: 500;

        letter-spacing: -0.01em;

        color: #F8F3EB;
    }

    /* =========================================
       TERRACOTTA CTA BUTTON
    ========================================= */

    body .biab-hero__button {
        position: relative;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        gap: 14px;

        width: fit-content;
        min-height: 54px;

        margin: 31px 0 0;
        padding: 15px 27px;

        box-sizing: border-box;

        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 999px;

        background-color: #C96743;
        background-image: none;

        color: #FFFFFF;

        font-family: "Inter", sans-serif;
        font-size: 13px;
        line-height: 1.2;
        font-weight: 600;

        letter-spacing: -0.01em;
        text-decoration: none;

        box-shadow:
            0 5px 12px rgba(11,20,13,0.13),
            0 16px 30px rgba(11,20,13,0.19),
            inset 0 1px 0 rgba(255,255,255,0.15);

        transition:
            transform 280ms ease,
            background-color 280ms ease,
            box-shadow 280ms ease;
    }

    body .biab-hero__button span {
        display: inline-block;

        font-size: 19px;
        line-height: 1;

        transition: transform 280ms ease;
    }

    body .biab-hero__button:hover {
        background-color: #D57450;
        transform: translateY(-3px);

        box-shadow:
            0 8px 16px rgba(11,20,13,0.16),
            0 22px 38px rgba(11,20,13,0.23),
            inset 0 1px 0 rgba(255,255,255,0.15);
    }

    body .biab-hero__button:hover span {
        transform: translateX(4px);
    }

    body .biab-hero__button:focus-visible {
        outline: 2px solid #F8F3EB;
        outline-offset: 4px;
    }

    /* =========================================
       STAGGERED ENTRANCE ANIMATION
    ========================================= */

    body .biab-hero__eyebrow,
    body .biab-hero__title,
    body .biab-hero__body,
    body .biab-hero__statement,
    body .biab-hero__button {
        opacity: 0;
        transform: translateY(22px);

        animation: biabSignatureReveal 850ms
            cubic-bezier(0.22,1,0.36,1) both;
    }

    body .biab-hero__eyebrow {
        animation-delay: 120ms;
    }

    body .biab-hero__title {
        animation-delay: 220ms;
    }

    body .biab-hero__body {
        animation-delay: 340ms;
    }

    body .biab-hero__statement {
        animation-delay: 450ms;
    }

    body .biab-hero__button {
        animation-delay: 570ms;
    }

}

/* =========================================
   TABLET REFINEMENT — 600px–749px
========================================= */

@media (min-width: 600px) and (max-width: 749px) {

    body .biab-hero {
        height: 710px;
        min-height: 710px;
    }

    body .biab-hero__inner {
        height: 100%;
        min-height: 710px;
        padding: 40px 45px;
    }

    body .biab-hero__title {
        font-size: 46px;
    }

    body .biab-hero__body {
        font-size: 14px;
    }

    body .biab-hero__statement {
        font-size: 14px;
    }
}

/* =========================================
   ACCESSIBILITY
========================================= */

@media (min-width: 600px) and (max-width: 1100px) and
       (prefers-reduced-motion: reduce) {

    body .biab-hero__eyebrow,
    body .biab-hero__title,
    body .biab-hero__body,
    body .biab-hero__statement,
    body .biab-hero__button {
        opacity: 1;
        transform: none;
        animation: none;
    }

    body .biab-hero__button,
    body .biab-hero__button span {
        transition: none;
    }
}


/* =========================================================
   FRAYORA — BUSINESS-IN-A-BOX
   SECTION 01 — IMAGE-FIRST TABLET HERO
   600px–1100px ONLY

   Illustration above content
   Editorial spacing
   Dimensional shadows and subtle motion
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    /* HERO */

    body .biab-hero {
        height: auto;
        min-height: 0;
        overflow: hidden;

        background-image:
            url("../images/Business in a box/herotablet.png") !important;
        background-size: cover !important;
        background-position: center center !important;
    }

    /* STACK IMAGE ABOVE TEXT */

    body .biab-hero__inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;

        width: 100%;
        max-width: 1100px;

        height: auto;
        min-height: 0;

        margin: 0 auto;
        padding: 62px 60px 80px;
        box-sizing: border-box;
    }

    /* FLOATING BOX — FIRST */

    body .biab-hero__visual {
        position: relative;
        z-index: 3;

        display: block !important;
        order: -1;

        top: auto;
        right: auto;
        bottom: auto;
        left: auto;

        width: min(80%, 560px);
        max-width: 560px;
        height: auto;

        margin: 0 auto 35px;

        transform: none;

        pointer-events: none;

        filter:
            drop-shadow(0 16px 26px rgba(5,15,8,0.15))
            drop-shadow(0 32px 52px rgba(5,15,8,0.18));

        animation:
            biabTabletVisualEntrance 1000ms
            cubic-bezier(0.22,1,0.36,1)
            150ms both;
    }

    body .biab-hero__visual img {
        display: block;
        width: 100%;
        height: auto;

        object-fit: contain;

        animation:
            biabTabletVisualFloat 7s
            ease-in-out 1200ms infinite;
    }

    /* CONTENT BELOW IMAGE */

    body .biab-hero__content {
        position: relative;
        z-index: 4;

        order: 1;

        width: 100%;
        max-width: 690px;

        margin: 0;
        padding: 0;

        text-align: left;
    }

    /* SPACING REFINEMENTS */

    body .biab-hero__eyebrow {
        margin-bottom: 22px;
    }

    body .biab-hero__title {
        max-width: 690px;
        font-size: clamp(44px, 5.8vw, 62px);
        line-height: 1.13;
    }

    body .biab-hero__body {
        max-width: 650px;
        margin-top: 26px;
    }

    body .biab-hero__statement {
        max-width: 650px;
        margin-top: 23px;
    }

    body .biab-hero__button {
        margin-top: 28px;
    }
}

/* SMALL TABLET */

@media (min-width: 600px) and (max-width: 749px) {

    body .biab-hero__inner {
        padding: 52px 45px 70px;
    }

    body .biab-hero__visual {
        width: 90%;
        max-width: 440px;
        margin-bottom: 28px;
    }

    body .biab-hero__title {
        font-size: 44px;
    }
}

/* ENTRANCE */

@keyframes biabTabletVisualEntrance {
    from {
        opacity: 0;
        translate: 0 22px;
        scale: 0.96;
    }

    to {
        opacity: 1;
        translate: 0 0;
        scale: 1;
    }
}

/* FLOAT */

@keyframes biabTabletVisualFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

/* REDUCED MOTION */

@media (min-width: 600px) and (max-width: 1100px) and
       (prefers-reduced-motion: reduce) {

    body .biab-hero__visual,
    body .biab-hero__visual img {
        animation: none;
        opacity: 1;
        translate: none;
        scale: 1;
        transform: none;
    }
}

/* =========================================================
   BUSINESS-IN-A-BOX — TABLET
   RESTORE VISIBLE FLOATING ANIMATION
   600px–1100px ONLY
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    /* Keep the illustration in its approved position */
    body .biab-hero__visual {
        animation: biabTabletVisualEntrance 900ms
            cubic-bezier(0.22, 1, 0.36, 1)
            150ms both;
    }

    /* Animate the image independently */
    body .biab-hero__visual img {
        display: block;
        width: 100%;
        height: auto;

        animation: biabTabletFloatEnhanced 5s
            ease-in-out 1.1s infinite;

        will-change: transform;
    }
}

/* =========================================
   FLOATING MOTION
========================================= */

@keyframes biabTabletFloatEnhanced {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-17px);
    }
}

/* =========================================
   REDUCED MOTION
========================================= */

@media (min-width: 600px) and (max-width: 1100px) and
       (prefers-reduced-motion: reduce) {

    body .biab-hero__visual,
    body .biab-hero__visual img {
        animation: none;
        will-change: auto;
    }
}

/* =========================================
   BUSINESS-IN-A-BOX — TABLET HERO
   LARGER FLOATING VISUAL
   600px–1100px ONLY
========================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .biab-hero__visual {
        width: min(85%, 615px);
        max-width: 615px;

        align-self: flex-end;
        margin: 0 0 -10px auto;
    }
}

/* SMALL TABLET */

@media (min-width: 600px) and (max-width: 749px) {

    body .biab-hero__visual {
        width: min(90%, 500px);
        max-width: 500px;
    }
}

/* =========================================================
   BUSINESS-IN-A-BOX — TABLET HERO
   CORRECT VISUAL POSITION AND SPACING
   600px–1100px ONLY
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .biab-hero__visual {
        position: relative;

        /* Move towards the right edge */
        align-self: flex-end;
        left: 50px;
        right: auto;
        top: auto;
        bottom: auto;

        /* Keep approved illustration size */
        width: min(85%, 615px);
        max-width: 615px;

        /* Reduce gap without overlapping eyebrow */
        margin: 0 0 0 auto;

        transform: none;
    }

    body .biab-hero__content {
        margin-top: 0;
        transform: none;
    }
}

/* SMALL TABLET — 600px–749px */

@media (min-width: 600px) and (max-width: 749px) {

    body .biab-hero__visual {
        left: 25px;
        width: min(90%, 500px);
        max-width: 500px;
    }
}

/* =========================================
   BUSINESS-IN-A-BOX — TABLET HERO
   REDUCE VISUAL-TO-EYEBROW GAP
   600px–1100px ONLY
========================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .biab-hero__visual {
        margin-bottom: -40px;
    }

    body .biab-hero__content {
        margin-top: 0;
    }
}

/* SMALL TABLET */

@media (min-width: 600px) and (max-width: 749px) {

    body .biab-hero__visual {
        margin-bottom: -20px;
    }
}

/* =========================================================
   FRAYORA — BUSINESS-IN-A-BOX
   SECTION 02 — INSIDE THE BOX
   TABLET ONLY: 600px–1100px

   Editorial stacked layout
   Two-column capability grid
   Bond-inspired solid ivory surface
   Soft icon elevation, animations and linework
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    /* =========================================
       SECTION FOUNDATION
    ========================================= */

    body .biab-foundation {
        position: relative;
        isolation: isolate;

        display: block;

        width: 100%;
        height: auto;
        min-height: 0;

        box-sizing: border-box;
        margin: 0;
        padding: 105px 0 145px;

        overflow: hidden;

        background-color: #F8F3EB !important;
        background-image: none !important;

        color: #1F211D;
    }

    /* =========================================
       CONTENT CONTAINER
    ========================================= */

    body .biab-foundation__inner {
        position: relative;
        z-index: 2;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        width: 100%;
        max-width: 1100px;

        margin: 0 auto;
        padding: 0 60px;

        box-sizing: border-box;
    }

    /* =========================================
       TOP INTRODUCTION
    ========================================= */

    body .biab-foundation__intro {
        width: 100%;
        max-width: 780px;

        margin: 0;
        padding: 0;
    }

    body .biab-foundation__eyebrow {
        margin: 0 0 24px;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 12px;
        line-height: 1.4;
        font-weight: 600;

        letter-spacing: 0.16em;
        text-transform: uppercase;

        color: #AD7258;
    }

    body .biab-foundation__title {
        width: 100%;
        max-width: 770px;

        margin: 0;
        padding: 0;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: clamp(38px, 4.6vw, 51px);
        line-height: 1.15;
        font-weight: 600;
        letter-spacing: -0.047em;

        color: #1F211D;

        text-wrap: balance;
    }

    body .biab-foundation__body {
        width: 100%;
        max-width: 740px;

        margin: 27px 0 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 15px;
        line-height: 1.8;
        font-weight: 400;

        color: rgba(31, 33, 29, 0.78);
    }

    body .biab-foundation__body + .biab-foundation__body {
        margin-top: 19px;
    }

    /* =========================================
       TWO-COLUMN CAPABILITIES
    ========================================= */

    body .biab-foundation__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));

        column-gap: 52px;
        row-gap: 67px;

        width: 100%;
        margin-top: 78px;

        align-items: start;
    }

    body .biab-foundation__item {
        position: relative;

        box-sizing: border-box;
        min-width: 0;

        margin: 0;
        padding: 0;

        background: transparent;
        border: 0;
        box-shadow: none;

        transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* =========================================
       NUMBER + ICON
    ========================================= */

    body .biab-foundation__top {
        display: flex;
        align-items: center;

        gap: 17px;

        height: 75px;
        min-height: 75px;

        margin: 0 0 18px;
    }

    body .biab-foundation__number {
        flex: 0 0 auto;

        font-family: "Inter", sans-serif;
        font-size: 15px;
        line-height: 1;
        font-weight: 600;

        letter-spacing: -0.025em;

        color: #98664D;
    }

    body .biab-foundation__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        flex: 0 0 74px;
        width: 74px;
        height: 74px;

        box-sizing: border-box;
        border-radius: 50%;

        background-color: #F1E2D4;

        border: 1px solid rgba(178, 133, 102, 0.09);

        box-shadow:
            0 4px 10px rgba(66, 46, 34, 0.04),
            0 15px 27px rgba(66, 46, 34, 0.07),
            inset 0 1px 0 rgba(255, 255, 255, 0.72);

        transition:
            transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
            background-color 400ms ease,
            box-shadow 400ms ease;
    }

    body .biab-foundation__icon svg {
        display: block;

        width: 30px;
        height: 30px;

        stroke: #594B3D;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;

        filter: drop-shadow(
            0 2px 1px rgba(60, 43, 33, 0.08)
        );

        transition: transform 400ms ease;
    }

    /* =========================================
       CAPABILITY TYPOGRAPHY
    ========================================= */

    body .biab-foundation__item h3 {
        margin: 0 0 13px;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: 19px;
        line-height: 1.4;
        font-weight: 650;

        letter-spacing: -0.033em;

        color: #1F211D;
    }

    body .biab-foundation__item p {
        margin: 0;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1.75;
        font-weight: 400;

        color: rgba(31, 33, 29, 0.75);
    }

    /* =========================================
       SUBTLE HOVER / DEPTH
    ========================================= */

    @media (hover: hover) {

        body .biab-foundation__item:hover {
            transform: translateY(-4px);
        }

        body .biab-foundation__item:hover
        .biab-foundation__icon {
            transform: translateY(-3px);

            background-color: #F0DED0;

            box-shadow:
                0 7px 14px rgba(66, 46, 34, 0.055),
                0 20px 32px rgba(66, 46, 34, 0.085),
                inset 0 1px 0 rgba(255, 255, 255, 0.75);
        }

        body .biab-foundation__item:hover svg {
            transform: scale(1.06);
        }
    }

    /* =========================================
       BOTTOM-LEFT TERRACOTTA LINEWORK
    ========================================= */

    body .biab-foundation__art {
        position: absolute;
        z-index: 0;

        left: -205px;
        bottom: -350px;

        width: 820px;
        height: 580px;

        overflow: hidden;
        pointer-events: none;

        opacity: 1;
    }

    body .biab-foundation__arc {
        position: absolute;
        display: block;

        box-sizing: border-box;

        width: 900px;
        height: 600px;

        border: 1.2px solid rgba(201, 103, 67, 0.20);
        border-radius: 50%;

        background: transparent;
    }

    body .biab-foundation__arc--one {
        left: -220px;
        top: 100px;

        transform: rotate(23deg);

        border-color: rgba(201, 103, 67, 0.28);
    }

    body .biab-foundation__arc--two {
        left: -110px;
        top: 135px;

        transform: rotate(18deg);

        border-color: rgba(201, 103, 67, 0.22);
    }

    body .biab-foundation__arc--three {
        left: 5px;
        top: 185px;

        transform: rotate(13deg);

        border-color: rgba(201, 103, 67, 0.16);
    }

    /* =========================================
       STAGGERED ENTRANCE ANIMATIONS
    ========================================= */

    body .biab-foundation__eyebrow,
    body .biab-foundation__title,
    body .biab-foundation__body,
    body .biab-foundation__item {
        animation: biabFoundationReveal 850ms
            cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    body .biab-foundation__eyebrow {
        animation-delay: 80ms;
    }

    body .biab-foundation__title {
        animation-delay: 160ms;
    }

    body .biab-foundation__body {
        animation-delay: 240ms;
    }

    body .biab-foundation__item:nth-child(1) {
        animation-delay: 180ms;
    }

    body .biab-foundation__item:nth-child(2) {
        animation-delay: 260ms;
    }

    body .biab-foundation__item:nth-child(3) {
        animation-delay: 340ms;
    }

    body .biab-foundation__item:nth-child(4) {
        animation-delay: 420ms;
    }

    body .biab-foundation__item:nth-child(5) {
        animation-delay: 500ms;
    }

    body .biab-foundation__item:nth-child(6) {
        animation-delay: 580ms;
    }
}

/* =========================================
   SMALL TABLET — 600px–749px
========================================= */

@media (min-width: 600px) and (max-width: 749px) {

    body .biab-foundation {
        padding-top: 85px;
        padding-bottom: 120px;
    }

    body .biab-foundation__inner {
        padding-left: 45px;
        padding-right: 45px;
    }

    body .biab-foundation__title {
        font-size: 39px;
    }

    body .biab-foundation__grid {
        column-gap: 32px;
        row-gap: 55px;
        margin-top: 65px;
    }

    body .biab-foundation__item h3 {
        font-size: 17px;
    }

    body .biab-foundation__item p {
        font-size: 13px;
    }

    body .biab-foundation__icon {
        flex-basis: 67px;
        width: 67px;
        height: 67px;
    }

    body .biab-foundation__top {
        min-height: 67px;
        height: 67px;
    }
}

/* =========================================
   ACCESSIBILITY — REDUCED MOTION
========================================= */

@media (min-width: 600px) and (max-width: 1100px) and
       (prefers-reduced-motion: reduce) {

    body .biab-foundation__eyebrow,
    body .biab-foundation__title,
    body .biab-foundation__body,
    body .biab-foundation__item {
        animation: none;
        opacity: 1;
        translate: none;
    }

    body .biab-foundation__item,
    body .biab-foundation__icon,
    body .biab-foundation__icon svg {
        transition: none;
    }
}


/* =========================================================
   FRAYORA — BUSINESS-IN-A-BOX
   SECTION 03 — THE DIFFERENCE
   TABLET ONLY: 600px–1100px

   Deep olive solid surface
   Stacked editorial content
   Frosted olive + terracotta glass circles
   Soft luminosity, shadows and animations
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    /* =========================================
       SECTION BACKGROUND
    ========================================= */

    body .biab-transformation {
        position: relative;
        isolation: isolate;

        box-sizing: border-box;

        display: block;
        width: 100%;
        height: auto;
        min-height: 0;

        margin: 0;
        padding: 95px 0 105px;

        overflow: hidden;

        background-color: #303B32 !important;
        background-image: none !important;

        color: #F8F3EB;
    }

    /* =========================================
       STACKED TABLET LAYOUT
    ========================================= */

    body .biab-transformation__inner {
        position: relative;
        z-index: 2;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        box-sizing: border-box;

        width: 100%;
        max-width: 1100px;
        min-height: 0;

        margin: 0 auto;
        padding: 0 60px;
    }

    body .biab-transformation__content {
        width: 100%;
        max-width: 800px;

        margin: 0;
        padding: 0;
    }

    /* =========================================
       EYEBROW
    ========================================= */

    body .biab-transformation__eyebrow {
        margin: 0 0 25px;

        font-family: "Inter", sans-serif;
        font-size: 12px;
        line-height: 1.4;
        font-weight: 600;
        letter-spacing: 0.16em;
        text-transform: uppercase;

        color: #E8D9C7;
    }

    /* =========================================
       HEADING
    ========================================= */

    body .biab-transformation__title {
        width: 100%;
        max-width: 800px;

        margin: 0;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: clamp(39px, 5vw, 54px);
        line-height: 1.16;
        font-weight: 600;
        letter-spacing: -0.045em;

        color: #F8F3EB;

        text-shadow:
            0 3px 16px rgba(0, 0, 0, 0.12);
    }

    /* =========================================
       BODY COPY
    ========================================= */

    body .biab-transformation__body {
        width: 100%;
        max-width: 720px;

        margin: 29px 0 0;

        font-family: "Inter", sans-serif;
        font-size: 15px;
        line-height: 1.8;
        font-weight: 400;

        color: rgba(248, 243, 235, 0.87);
    }

    /* =========================================
       SUPPORTING STATEMENT
    ========================================= */

    body .biab-transformation__statement {
        display: flex;
        align-items: flex-start;

        gap: 16px;

        width: 100%;
        max-width: 740px;

        margin: 31px 0 0;

        font-family: "Inter", sans-serif;
        font-size: 15px;
        line-height: 1.7;
        font-weight: 500;

        color: #F8F3EB;
    }

    body .biab-transformation__statement-arrow {
        display: inline-block;
        flex: 0 0 auto;

        font-size: 30px;
        line-height: 1;

        color: #E1C5AE;

        transition: transform 350ms ease;
    }

    /* =========================================
       CENTERED GLASS DIAGRAM
    ========================================= */

    body .biab-transformation__diagram {
        position: relative;
        isolation: isolate;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        max-width: 800px;

        height: auto;
        min-height: 360px;

        margin: 65px auto 0;
        padding: 0;

        box-sizing: border-box;
    }

    /* =========================================
       SHARED GLASS CIRCLES
    ========================================= */

    body .biab-transformation__circle {
        position: relative;
        isolation: isolate;

        display: flex;
        align-items: center;
        justify-content: center;

        box-sizing: border-box;

        width: clamp(245px, 35vw, 320px);
        height: auto;

        aspect-ratio: 1 / 1;

        flex: 0 0 clamp(245px, 35vw, 320px);

        border-radius: 50%;
        overflow: hidden;

        text-align: center;

        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);

        border: 1px solid rgba(255, 247, 226, 0.42);

        box-shadow:
            0 14px 35px rgba(7, 15, 9, 0.13),
            0 32px 60px rgba(7, 15, 9, 0.12),
            inset 0 2px 2px rgba(255, 255, 255, 0.18),
            inset 0 -18px 34px rgba(8, 15, 9, 0.13);

        transition:
            transform 550ms cubic-bezier(0.22, 1, 0.36, 1),
            box-shadow 550ms ease;
    }

    /* =========================================
       LEFT — OLIVE GLASS
    ========================================= */

    body .biab-transformation__circle--less {
        z-index: 1;

        margin-right: -48px;

        background: linear-gradient(
            145deg,
            rgba(160, 176, 146, 0.28) 0%,
            rgba(91, 108, 87, 0.45) 38%,
            rgba(51, 66, 53, 0.78) 100%
        );

        border-color: rgba(226, 233, 215, 0.52);
    }

    /* =========================================
       RIGHT — TERRACOTTA GLASS
    ========================================= */

    body .biab-transformation__circle--more {
        z-index: 2;

        background: linear-gradient(
            140deg,
            rgba(215, 152, 111, 0.72) 0%,
            rgba(161, 106, 78, 0.66) 42%,
            rgba(90, 68, 56, 0.88) 100%
        );

        border-color: rgba(242, 190, 153, 0.68);

        box-shadow:
            0 16px 38px rgba(7, 15, 9, 0.16),
            0 34px 65px rgba(7, 15, 9, 0.15),
            inset 0 2px 2px rgba(255, 240, 220, 0.24),
            inset 0 -22px 36px rgba(53, 30, 21, 0.16);
    }

    /* =========================================
       GLASS REFLECTION
    ========================================= */

    body .biab-transformation__circle::before {
        content: "";

        position: absolute;
        inset: 0;
        z-index: 0;

        border-radius: inherit;
        pointer-events: none;

        background: linear-gradient(
            155deg,
            rgba(255, 255, 255, 0.16) 0%,
            rgba(255, 255, 255, 0.045) 26%,
            transparent 52%
        );
    }

    /* =========================================
       INNER LUMINOUS RING
    ========================================= */

    body .biab-transformation__circle::after {
        content: "";

        position: absolute;
        inset: 5px;
        z-index: 0;

        border: 1px solid rgba(255, 255, 255, 0.075);
        border-radius: 50%;

        pointer-events: none;
    }

    /* =========================================
       CIRCLE LABELS
    ========================================= */

    body .biab-transformation__circle > span {
        position: relative;
        z-index: 2;

        display: block;

        font-family: "Inter", sans-serif;
        font-size: clamp(12px, 1.7vw, 15px);
        line-height: 1.6;
        font-weight: 600;

        letter-spacing: 0.13em;

        color: #F8F3EB;

        text-align: center;

        text-shadow:
            0 2px 7px rgba(0, 0, 0, 0.12);
    }

    /* =========================================
       CENTER ARROW
    ========================================= */

    body .biab-transformation__diagram-arrow {
        position: absolute;
        z-index: 5;

        top: 50%;
        left: 50%;

        transform: translate(-50%, -50%);

        font-family: "Inter", sans-serif;
        font-size: 46px;
        line-height: 1;
        font-weight: 300;

        color: #F8F3EB;

        text-shadow:
            0 2px 10px rgba(0, 0, 0, 0.20);

        pointer-events: none;
    }

    /* =========================================
       SUBTLE HOVER INTERACTIONS
    ========================================= */

    @media (hover: hover) {

        body .biab-transformation__diagram:hover
        .biab-transformation__circle--less {
            transform: translateX(-4px);
        }

        body .biab-transformation__diagram:hover
        .biab-transformation__circle--more {
            transform: translateX(4px);
        }

        body .biab-transformation__content:hover
        .biab-transformation__statement-arrow {
            transform: translateX(5px);
        }
    }

    /* =========================================
       ENTRANCE ANIMATIONS
    ========================================= */

    body .biab-transformation__eyebrow,
    body .biab-transformation__title,
    body .biab-transformation__body,
    body .biab-transformation__statement {
        animation: biabTransformationReveal 850ms
            cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    body .biab-transformation__eyebrow {
        animation-delay: 80ms;
    }

    body .biab-transformation__title {
        animation-delay: 170ms;
    }

    body .biab-transformation__body {
        animation-delay: 270ms;
    }

    body .biab-transformation__statement {
        animation-delay: 370ms;
    }

    body .biab-transformation__circle--less {
        animation: biabTransformationCircle 1000ms
            cubic-bezier(0.22, 1, 0.36, 1)
            210ms both;
    }

    body .biab-transformation__circle--more {
        animation: biabTransformationCircle 1000ms
            cubic-bezier(0.22, 1, 0.36, 1)
            390ms both;
    }

    body .biab-transformation__diagram-arrow {
        animation: biabTransformationArrow 800ms ease
            650ms both;
    }
}

/* =========================================
   SMALL TABLET — 600px–749px
========================================= */

@media (min-width: 600px) and (max-width: 749px) {

    body .biab-transformation {
        padding-top: 85px;
        padding-bottom: 90px;
    }

    body .biab-transformation__inner {
        padding-left: 45px;
        padding-right: 45px;
    }

    body .biab-transformation__title {
        font-size: 40px;
    }

    body .biab-transformation__body,
    body .biab-transformation__statement {
        font-size: 14px;
    }

    body .biab-transformation__diagram {
        margin-top: 55px;
        min-height: 300px;
    }

    body .biab-transformation__circle {
        width: 245px;
        flex-basis: 245px;
    }

    body .biab-transformation__circle > span {
        font-size: 12px;
    }

    body .biab-transformation__diagram-arrow {
        font-size: 40px;
    }
}

/* =========================================
   ACCESSIBILITY — REDUCED MOTION
========================================= */

@media (min-width: 600px) and (max-width: 1100px) and
       (prefers-reduced-motion: reduce) {

    body .biab-transformation__eyebrow,
    body .biab-transformation__title,
    body .biab-transformation__body,
    body .biab-transformation__statement,
    body .biab-transformation__circle,
    body .biab-transformation__diagram-arrow {
        animation: none;
        opacity: 1;
        translate: none;
        scale: 1;
    }

    body .biab-transformation__circle,
    body .biab-transformation__statement-arrow {
        transition: none;
    }
}


/* =========================================================
   FRAYORA — BUSINESS-IN-A-BOX
   SECTION 04 — HOW IT WORKS
   TABLET ONLY: 600px–1100px

   2 x 2 process layout
   Solid ivory editorial surface
   Elevated icons, arrows and animations
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    /* =========================================
       SECTION BACKGROUND
    ========================================= */

    body .biab-journey {
        position: relative;
        isolation: isolate;

        display: block;
        width: 100%;
        height: auto;
        min-height: 0;

        margin: 0;
        padding: 95px 0 105px;
        box-sizing: border-box;
        overflow: hidden;

        background-color: #F8F3EB !important;
        background-image: none !important;

        color: #1F211D;
    }

    /* =========================================
       CONTENT CONTAINER
    ========================================= */

    body .biab-journey__inner {
        position: relative;
        z-index: 2;

        width: 100%;
        max-width: 1100px;

        margin: 0 auto;
        padding: 0 60px;
        box-sizing: border-box;
    }

    /* =========================================
       INTRODUCTION
    ========================================= */

    body .biab-journey__intro {
        width: 100%;
        max-width: 900px;
        margin: 0;
        padding: 0;
    }

    body .biab-journey__eyebrow {
        margin: 0 0 23px;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 12px;
        line-height: 1.4;
        font-weight: 600;
        letter-spacing: 0.16em;
        text-transform: uppercase;

        color: #AD7258;
    }

    body .biab-journey__title {
        width: 100%;
        max-width: 850px;

        margin: 0;
        padding: 0;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: clamp(38px, 4.7vw, 51px);
        line-height: 1.16;
        font-weight: 600;
        letter-spacing: -0.047em;

        color: #1F211D;
        text-wrap: balance;
    }

    body .biab-journey__description {
        width: 100%;
        max-width: 850px;

        margin: 23px 0 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 15px;
        line-height: 1.8;
        font-weight: 400;

        color: rgba(31, 33, 29, 0.78);
    }

    /* =========================================
       TWO-COLUMN, FOUR-STEP PROCESS
    ========================================= */

    body .biab-journey__steps {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));

        column-gap: 80px;
        row-gap: 70px;

        width: 100%;
        margin: 73px 0 0;
        padding: 0;

        align-items: start;
    }

    body .biab-journey__step {
        position: relative;

        min-width: 0;
        height: 100%;

        margin: 0;
        padding: 0;

        background: transparent;
        border: none;
        box-shadow: none;

        transition: transform 350ms ease;
    }

    /* =========================================
       NUMBER + CIRCULAR ICON
    ========================================= */

    body .biab-journey__step-top {
        display: flex;
        align-items: center;
        gap: 17px;

        height: 74px;
        min-height: 74px;

        margin: 0 0 21px;
        padding: 0;
    }

    body .biab-journey__number {
        flex: 0 0 auto;

        font-family: "Inter", sans-serif;
        font-size: 15px;
        line-height: 1;
        font-weight: 600;
        letter-spacing: -0.025em;

        color: #98664D;
    }

    body .biab-journey__icon {
        position: relative;

        display: flex;
        align-items: center;
        justify-content: center;

        flex: 0 0 74px;
        width: 74px;
        height: 74px;

        box-sizing: border-box;
        border-radius: 50%;

        background-color: #F1E2D4;

        border: 1px solid rgba(178, 133, 102, 0.10);

        box-shadow:
            0 4px 10px rgba(66, 46, 34, 0.04),
            0 15px 28px rgba(66, 46, 34, 0.075),
            inset 0 1px 0 rgba(255, 255, 255, 0.75);

        transition:
            transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
            background-color 400ms ease,
            box-shadow 400ms ease;
    }

    body .biab-journey__icon svg {
        display: block;
        width: 31px;
        height: 31px;

        stroke: #594B3D;
        stroke-width: 1.65;
        stroke-linecap: round;
        stroke-linejoin: round;

        filter: drop-shadow(
            0 2px 2px rgba(60, 43, 33, 0.08)
        );
    }

    /* =========================================
       CONNECTING ARROWS

       01 → 02
       03 → 04
    ========================================= */

    body .biab-journey__step::after {
        content: none;
        display: none;
    }

    body .biab-journey__step:nth-child(1)::after,
    body .biab-journey__step:nth-child(3)::after {
        content: "→";

        position: absolute;
        z-index: 3;

        display: block;

        top: 19px;
        right: -53px;

        font-family: "Inter", sans-serif;
        font-size: 32px;
        line-height: 1;
        font-weight: 300;

        color: rgba(152, 102, 77, 0.8);

        pointer-events: none;

        transition: transform 350ms ease;
    }

    /* =========================================
       STEP TYPOGRAPHY
    ========================================= */

    body .biab-journey__step h3 {
        margin: 0 0 15px;
        padding: 0;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: 19px;
        line-height: 1.38;
        font-weight: 650;
        letter-spacing: -0.033em;

        color: #1F211D;
    }

    body .biab-journey__step p {
        margin: 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1.75;
        font-weight: 400;

        color: rgba(31, 33, 29, 0.75);
    }

    /* =========================================
       CLOSING STATEMENT
    ========================================= */

    body .biab-journey__closing {
        position: relative;

        width: 100%;
        max-width: 830px;

        margin: 78px auto 0;
        padding: 0 20px;
        box-sizing: border-box;

        text-align: center;
    }

    body .biab-journey__closing p {
        margin: 0;

        font-family: "Inter", sans-serif;
        font-size: 15px;
        line-height: 1.75;
        font-weight: 600;

        color: #1F211D;
    }

    /* =========================================
       REFINED HOVER INTERACTIONS
    ========================================= */

    @media (hover: hover) {

        body .biab-journey__step:hover {
            transform: translateY(-4px);
        }

        body .biab-journey__step:hover
        .biab-journey__icon {
            transform: translateY(-3px) scale(1.04);
            background-color: #F0DED0;

            box-shadow:
                0 7px 15px rgba(66, 46, 34, 0.055),
                0 21px 34px rgba(66, 46, 34, 0.09),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
        }

        body .biab-journey__step:hover::after {
            transform: translateX(4px);
        }
    }

    /* =========================================
       STAGGERED ENTRANCE ANIMATIONS
    ========================================= */

    body .biab-journey__eyebrow,
    body .biab-journey__title,
    body .biab-journey__description,
    body .biab-journey__step,
    body .biab-journey__closing {
        animation: biabJourneyReveal 850ms
            cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    body .biab-journey__eyebrow {
        animation-delay: 70ms;
    }

    body .biab-journey__title {
        animation-delay: 150ms;
    }

    body .biab-journey__description {
        animation-delay: 240ms;
    }

    body .biab-journey__step:nth-child(1) {
        animation-delay: 280ms;
    }

    body .biab-journey__step:nth-child(2) {
        animation-delay: 370ms;
    }

    body .biab-journey__step:nth-child(3) {
        animation-delay: 460ms;
    }

    body .biab-journey__step:nth-child(4) {
        animation-delay: 550ms;
    }

    body .biab-journey__closing {
        animation-delay: 620ms;
    }
}

/* =========================================
   SMALL TABLET — 600px–749px
========================================= */

@media (min-width: 600px) and (max-width: 749px) {

    body .biab-journey {
        padding-top: 85px;
        padding-bottom: 90px;
    }

    body .biab-journey__inner {
        padding-left: 45px;
        padding-right: 45px;
    }

    body .biab-journey__title {
        font-size: 39px;
    }

    body .biab-journey__description {
        font-size: 14px;
    }

    body .biab-journey__steps {
        column-gap: 48px;
        row-gap: 58px;
        margin-top: 62px;
    }

    body .biab-journey__step h3 {
        font-size: 17px;
    }

    body .biab-journey__step p {
        font-size: 13px;
    }

    body .biab-journey__icon {
        flex-basis: 65px;
        width: 65px;
        height: 65px;
    }

    body .biab-journey__step-top {
        height: 65px;
        min-height: 65px;
        gap: 13px;
    }

    body .biab-journey__step:nth-child(1)::after,
    body .biab-journey__step:nth-child(3)::after {
        top: 15px;
        right: -34px;
        font-size: 26px;
    }

    body .biab-journey__closing {
        margin-top: 65px;
    }

    body .biab-journey__closing p {
        font-size: 14px;
    }
}

/* =========================================
   ACCESSIBILITY — REDUCED MOTION
========================================= */

@media (min-width: 600px) and (max-width: 1100px) and
       (prefers-reduced-motion: reduce) {

    body .biab-journey__eyebrow,
    body .biab-journey__title,
    body .biab-journey__description,
    body .biab-journey__step,
    body .biab-journey__closing {
        animation: none;
        opacity: 1;
        translate: none;
    }

    body .biab-journey__step,
    body .biab-journey__icon {
        transition: none;
    }
}


/* =========================================================
   FRAYORA — BUSINESS-IN-A-BOX
   SECTION 05 — BUILT AROUND YOUR BUSINESS
   TABLET ONLY: 600px–1100px

   Horizontal architectural progression
   Scrollable stage landscape
   Solid warm ivory background
   Dimensional surfaces + connecting curve
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    /* =========================================
       SECTION BACKGROUND
    ========================================= */

    body .biab-stages {
        position: relative;
        isolation: isolate;

        display: block;
        width: 100%;
        height: auto;
        min-height: 0;

        margin: 0;
        padding: 95px 0 100px;
        box-sizing: border-box;
        overflow: hidden;

        background-color: #F5EDE4 !important;
        background-image: none !important;

        color: #1F211D;
    }

    /* =========================================
       CONTENT CONTAINER
    ========================================= */

    body .biab-stages__inner {
        position: relative;
        z-index: 2;

        width: 100%;
        max-width: 1100px;

        margin: 0 auto;
        padding: 0 60px;

        box-sizing: border-box;
    }

    /* =========================================
       INTRODUCTION
    ========================================= */

    body .biab-stages__intro {
        position: relative;
        z-index: 2;

        width: 100%;
        max-width: 900px;

        margin: 0;
        padding: 0;
    }

    body .biab-stages__eyebrow {
        margin: 0 0 23px;

        font-family: "Inter", sans-serif;
        font-size: 12px;
        line-height: 1.4;
        font-weight: 600;
        letter-spacing: 0.16em;
        text-transform: uppercase;

        color: #AD7258;
    }

    body .biab-stages__title {
        width: 100%;
        max-width: 850px;

        margin: 0;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: clamp(38px, 4.7vw, 51px);
        line-height: 1.16;
        font-weight: 600;
        letter-spacing: -0.047em;

        color: #1F211D;
        text-wrap: balance;
    }

    body .biab-stages__body {
        width: 100%;
        max-width: 850px;

        margin: 23px 0 0;

        font-family: "Inter", sans-serif;
        font-size: 15px;
        line-height: 1.8;
        font-weight: 400;

        color: rgba(31, 33, 29, 0.78);
    }

    body .biab-stages__statement {
        margin: 23px 0 0;

        font-family: "Inter", sans-serif;
        font-size: 15px;
        line-height: 1.7;
        font-weight: 600;

        color: #303B32;
    }

    /* =========================================
       HORIZONTAL STAGE LANDSCAPE
    ========================================= */

    body .biab-stages__landscape {
        position: relative;
        isolation: isolate;

        display: grid;
        grid-template-columns: repeat(3, 300px);
        align-items: end;

        gap: 18px;

        width: 100%;
        min-height: 410px;

        box-sizing: border-box;

        margin: 52px 0 0;
        padding: 25px 0 28px;

        overflow-x: auto;
        overflow-y: hidden;

        scroll-snap-type: x proximity;
        scroll-padding-inline: 0;
        overscroll-behavior-x: contain;

        scrollbar-width: thin;
        scrollbar-color: #BA957F transparent;
    }

    body .biab-stages__landscape::-webkit-scrollbar {
        height: 5px;
    }

    body .biab-stages__landscape::-webkit-scrollbar-thumb {
        background: #BA957F;
        border-radius: 999px;
    }

    body .biab-stages__landscape::-webkit-scrollbar-track {
        background: transparent;
    }

    /* =========================================
       SHARED ARCHITECTURAL PANELS
    ========================================= */

    body .biab-stages__stage {
        position: relative;
        z-index: 1;

        display: flex;
        flex-direction: column;

        box-sizing: border-box;

        width: 300px;
        min-width: 0;
        height: 320px;
        min-height: 320px;

        margin: 0;
        padding: 56px 29px 30px;

        overflow: hidden;
        scroll-snap-align: start;

        border: 1px solid rgba(77, 68, 54, 0.055);

        box-shadow:
            0 5px 12px rgba(54, 45, 35, 0.035),
            0 19px 37px rgba(54, 45, 35, 0.065),
            inset 0 1px 0 rgba(255, 255, 255, 0.55);

        transition:
            transform 450ms cubic-bezier(0.22, 1, 0.36, 1),
            box-shadow 450ms ease;
    }

    /* =========================================
       01 — STARTING
    ========================================= */

    body .biab-stages__stage--starting {
        border-radius: 0 125px 0 0;

        background-color: #DEDECF;
        background-image: linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.20),
            transparent 70%
        );
    }

    /* =========================================
       02 — GROWING
    ========================================= */

    body .biab-stages__stage--growing {
        border-radius: 125px 0 0 0;

        background-color: #EADBCB;
        background-image: linear-gradient(
            150deg,
            rgba(255, 255, 255, 0.26),
            transparent 70%
        );
    }

    /* =========================================
       03 — ESTABLISHED
    ========================================= */

    body .biab-stages__stage--established {
        height: 360px;
        min-height: 360px;

        border-radius: 130px 0 0 0;

        background-color: #C88364;
        background-image: linear-gradient(
            140deg,
            rgba(255, 238, 221, 0.23) 0%,
            rgba(207, 143, 108, 0.11) 45%,
            rgba(138, 82, 60, 0.16) 100%
        );

        border-color: rgba(130, 74, 48, 0.12);

        box-shadow:
            0 9px 20px rgba(91, 51, 37, 0.065),
            0 25px 44px rgba(91, 51, 37, 0.10),
            inset 0 1px 0 rgba(255, 241, 225, 0.35);
    }

    /* =========================================
       NUMBERS + ICONS
    ========================================= */

    body .biab-stages__top {
        position: relative;
        z-index: 4;

        display: flex;
        align-items: center;
        gap: 20px;

        min-height: 42px;
        margin: 0 0 25px;
    }

    body .biab-stages__number {
        font-family: "Inter", sans-serif;
        font-size: 15px;
        line-height: 1;
        font-weight: 600;

        color: #8F5B42;
    }

    body .biab-stages__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        width: 42px;
        height: 42px;
        flex: 0 0 42px;

        color: #6E5545;

        transition: transform 400ms ease;
    }

    body .biab-stages__icon svg {
        display: block;

        width: 35px;
        height: 35px;

        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;

        filter: drop-shadow(
            0 2px 2px rgba(60, 43, 33, 0.09)
        );
    }

    body .biab-stages__stage--established
    .biab-stages__number,
    body .biab-stages__stage--established
    .biab-stages__icon {
        color: #684332;
    }

    /* =========================================
       STAGE TYPOGRAPHY
    ========================================= */

    body .biab-stages__copy {
        position: relative;
        z-index: 4;

        width: 100%;
        max-width: 100%;
    }

    body .biab-stages__copy h3 {
        margin: 0 0 15px;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: 22px;
        line-height: 1.3;
        font-weight: 650;
        letter-spacing: -0.038em;

        color: #1F211D;
    }

    body .biab-stages__copy p {
        margin: 0;

        font-family: "Inter", sans-serif;
        font-size: 13px;
        line-height: 1.72;
        font-weight: 400;

        color: rgba(31, 33, 29, 0.80);
    }

    body .biab-stages__stage--established
    .biab-stages__copy p {
        color: rgba(35, 28, 24, 0.88);
    }

    /* =========================================
       ARCHITECTURAL CONNECTING CURVE

       The line follows the complete
       three-panel scrollable landscape.
    ========================================= */

    body .biab-stages__path {
        position: absolute;
        z-index: 3;

        top: 30px;
        left: 0;

        width: 936px;
        height: 250px;

        overflow: visible;
        pointer-events: none;
    }

    body .biab-stages__path-line {
        fill: none;
        stroke: #B58467;
        stroke-width: 1.7;
        vector-effect: non-scaling-stroke;
        opacity: 0.82;

        stroke-dasharray: 1500;
        stroke-dashoffset: 1500;

        animation:
            biabStagesDraw 1800ms
            cubic-bezier(0.22, 1, 0.36, 1)
            500ms forwards;
    }

    body .biab-stages__path-dot {
        stroke-width: 1;
        vector-effect: non-scaling-stroke;

        animation: biabStagesDot 700ms ease 1200ms both;
    }

    body .biab-stages__path-dot--one {
        fill: #7D896C;
        stroke: #F5EDE4;
    }

    body .biab-stages__path-dot--two {
        fill: #784832;
        stroke: #EBC3A6;
    }

    /* =========================================
       SUBTLE INTERACTIONS
    ========================================= */

    @media (hover: hover) {

        body .biab-stages__stage:hover {
            transform: translateY(-5px);

            box-shadow:
                0 9px 18px rgba(54, 45, 35, 0.055),
                0 26px 48px rgba(54, 45, 35, 0.095),
                inset 0 1px 0 rgba(255, 255, 255, 0.56);
        }

        body .biab-stages__stage:hover
        .biab-stages__icon {
            transform: translateY(-3px) scale(1.05);
        }
    }

    /* =========================================
       STAGGERED ENTRANCE ANIMATIONS
    ========================================= */

    body .biab-stages__eyebrow,
    body .biab-stages__title,
    body .biab-stages__body,
    body .biab-stages__statement,
    body .biab-stages__stage {
        animation:
            biabStagesReveal 900ms
            cubic-bezier(0.22, 1, 0.36, 1)
            both;
    }

    body .biab-stages__eyebrow {
        animation-delay: 70ms;
    }

    body .biab-stages__title {
        animation-delay: 150ms;
    }

    body .biab-stages__body {
        animation-delay: 230ms;
    }

    body .biab-stages__statement {
        animation-delay: 310ms;
    }

    body .biab-stages__stage:nth-child(1) {
        animation-delay: 320ms;
    }

    body .biab-stages__stage:nth-child(2) {
        animation-delay: 450ms;
    }

    body .biab-stages__stage:nth-child(3) {
        animation-delay: 580ms;
    }
}

/* =========================================
   SMALL TABLET — 600px–749px
========================================= */

@media (min-width: 600px) and (max-width: 749px) {

    body .biab-stages {
        padding-top: 85px;
        padding-bottom: 85px;
    }

    body .biab-stages__inner {
        padding-left: 45px;
        padding-right: 45px;
    }

    body .biab-stages__title {
        font-size: 39px;
    }

    body .biab-stages__body,
    body .biab-stages__statement {
        font-size: 14px;
    }

    body .biab-stages__landscape {
        margin-top: 45px;
    }
}

/* =========================================
   ACCESSIBILITY — REDUCED MOTION
========================================= */

@media (min-width: 600px) and (max-width: 1100px) and
       (prefers-reduced-motion: reduce) {

    body .biab-stages__eyebrow,
    body .biab-stages__title,
    body .biab-stages__body,
    body .biab-stages__statement,
    body .biab-stages__stage,
    body .biab-stages__path-line,
    body .biab-stages__path-dot {
        animation: none;
        opacity: 1;
        translate: none;
    }

    body .biab-stages__path-line {
        stroke-dasharray: none;
        stroke-dashoffset: 0;
    }

    body .biab-stages__stage,
    body .biab-stages__icon {
        transition: none;
    }
}



/* =========================================================
   FRAYORA — BUSINESS-IN-A-BOX
   SECTION 06 — BUILT FOR REAL TEAMS
   TABLET ONLY: 600px–1100px

   Scrollable three-card progression
   Elevated ivory / soft glass surfaces
   Terracotta arrows + closing CTA
   Subtle shadows and staggered animations
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    /* =========================================
       SECTION FOUNDATION
    ========================================= */

    body .biab-proposal {
        position: relative;
        isolation: isolate;

        display: block;
        width: 100%;
        height: auto;
        min-height: 0;

        margin: 0;
        padding: 95px 0 105px;
        box-sizing: border-box;

        overflow: hidden;

        background-color: #F8F3EB !important;
        background-image: none !important;

        color: #1F211D;
    }

    body .biab-proposal__inner {
        position: relative;
        z-index: 2;

        width: 100%;
        max-width: 1100px;

        margin: 0 auto;
        padding: 0 60px;
        box-sizing: border-box;
    }

    /* =========================================
       INTRODUCTION
    ========================================= */

    body .biab-proposal__intro {
        position: relative;
        z-index: 2;

        width: 100%;
        max-width: 900px;

        margin: 0;
        padding: 0;
    }

    body .biab-proposal__eyebrow {
        margin: 0 0 23px;

        font-family: "Inter", sans-serif;
        font-size: 12px;
        line-height: 1.4;
        font-weight: 600;
        letter-spacing: 0.16em;
        text-transform: uppercase;

        color: #AD7258;
    }

    body .biab-proposal__title {
        width: 100%;
        max-width: 850px;

        margin: 0;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: clamp(38px, 4.7vw, 51px);
        line-height: 1.16;
        font-weight: 600;
        letter-spacing: -0.047em;

        color: #1F211D;
        text-wrap: balance;
    }

    body .biab-proposal__body {
        width: 100%;
        max-width: 850px;

        margin: 23px 0 0;

        font-family: "Inter", sans-serif;
        font-size: 15px;
        line-height: 1.8;
        font-weight: 400;

        color: rgba(31, 33, 29, 0.78);
    }

    body .biab-proposal__statement {
        margin: 23px 0 0;

        font-family: "Inter", sans-serif;
        font-size: 15px;
        line-height: 1.7;
        font-weight: 600;

        color: #303B32;
    }

    /* =========================================
       HORIZONTAL CARD PROGRESSION
    ========================================= */

    body .biab-proposal__steps {
        position: relative;

        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 330px;
        grid-template-columns: none;

        align-items: stretch;
        gap: 44px;

        width: 100%;

        margin: 48px 0 0;
        padding: 8px 4px 30px;

        box-sizing: border-box;

        overflow-x: auto;
        overflow-y: hidden;

        scroll-snap-type: x proximity;
        overscroll-behavior-x: contain;

        scrollbar-width: thin;
        scrollbar-color: #C6A38D transparent;
    }

    body .biab-proposal__steps::-webkit-scrollbar {
        height: 5px;
    }

    body .biab-proposal__steps::-webkit-scrollbar-thumb {
        background-color: #C6A38D;
        border-radius: 999px;
    }

    body .biab-proposal__steps::-webkit-scrollbar-track {
        background: transparent;
    }

    /* =========================================
       ELEVATED GLASS-LIKE CARDS
    ========================================= */

    body .biab-proposal__card {
        position: relative;

        display: flex;
        flex-direction: column;

        width: 330px;
        min-width: 0;
        min-height: 315px;

        margin: 0;
        padding: 31px 29px 34px;

        box-sizing: border-box;
        overflow: visible;

        scroll-snap-align: start;

        background-color: #FCFAF7;
        background-image: linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.58) 0%,
            rgba(255, 255, 255, 0.18) 38%,
            transparent 78%
        );

        border: 1px solid rgba(94, 74, 58, 0.06);
        border-radius: 16px;

        box-shadow:
            0 5px 12px rgba(54, 45, 35, 0.035),
            0 18px 37px rgba(54, 45, 35, 0.075),
            inset 0 1px 0 rgba(255, 255, 255, 0.84);

        transition:
            transform 450ms cubic-bezier(0.22, 1, 0.36, 1),
            box-shadow 450ms ease;
    }

    /* =========================================
       CONNECTING ARROWS
    ========================================= */

    body .biab-proposal__card:not(:last-child)::after {
        content: "→";

        position: absolute;
        z-index: 4;

        top: 50%;
        right: -34px;

        transform: translateY(-50%);

        font-family: "Inter", sans-serif;
        font-size: 30px;
        line-height: 1;
        font-weight: 300;

        color: #98664D;
        pointer-events: none;
    }

    /* =========================================
       NUMBERS + ICONS
    ========================================= */

    body .biab-proposal__card-top {
        display: flex;
        align-items: center;
        gap: 17px;

        margin: 0 0 26px;
        padding: 0;
    }

    body .biab-proposal__number {
        flex: 0 0 auto;

        font-family: "Inter", sans-serif;
        font-size: 15px;
        line-height: 1;
        font-weight: 600;

        color: #98664D;
    }

    body .biab-proposal__icon {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 67px;
        height: 67px;
        flex: 0 0 67px;

        box-sizing: border-box;
        border-radius: 50%;

        background-color: #F1E2D4;
        border: 1px solid rgba(178, 133, 102, 0.09);

        box-shadow:
            0 4px 10px rgba(66, 46, 34, 0.04),
            0 15px 27px rgba(66, 46, 34, 0.07),
            inset 0 1px 0 rgba(255, 255, 255, 0.75);

        transition:
            transform 400ms ease,
            box-shadow 400ms ease;
    }

    body .biab-proposal__icon svg {
        display: block;

        width: 30px;
        height: 30px;

        stroke: #594B3D;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;

        filter: drop-shadow(
            0 2px 1px rgba(60, 43, 33, 0.08)
        );
    }

    /* =========================================
       CARD TYPOGRAPHY
    ========================================= */

    body .biab-proposal__card h3 {
        margin: 0 0 15px;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: 19px;
        line-height: 1.4;
        font-weight: 650;
        letter-spacing: -0.035em;

        color: #1F211D;
    }

    body .biab-proposal__card p {
        margin: 0;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1.75;
        font-weight: 400;

        color: rgba(31, 33, 29, 0.76);
    }

    /* =========================================
       CLOSING CTA PANEL
    ========================================= */

    body .biab-proposal__closing {
        position: relative;
        z-index: 2;

        display: flex;
        align-items: center;
        justify-content: space-between;

        gap: 24px;

        width: 100%;
        min-height: 100px;

        margin: 24px 0 0;
        padding: 22px 27px;

        box-sizing: border-box;

        background-color: #FCFAF7;
        background-image: linear-gradient(
            155deg,
            rgba(255, 255, 255, 0.56),
            transparent 75%
        );

        border: 1px solid rgba(94, 74, 58, 0.055);
        border-radius: 16px;

        box-shadow:
            0 5px 12px rgba(54, 45, 35, 0.03),
            0 18px 38px rgba(54, 45, 35, 0.07),
            inset 0 1px 0 rgba(255, 255, 255, 0.88);
    }

    body .biab-proposal__closing p {
        flex: 1 1 auto;

        margin: 0;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: 17px;
        line-height: 1.5;
        font-weight: 600;
        letter-spacing: -0.025em;

        color: #1F211D;
    }

    /* =========================================
       TERRACOTTA CTA BUTTON
    ========================================= */

    body .biab-proposal__button {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        flex: 0 0 auto;
        gap: 11px;

        width: fit-content;
        min-height: 52px;

        padding: 14px 22px;
        box-sizing: border-box;

        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.14);

        background-color: #C96743;
        color: #FFFFFF;

        font-family: "Inter", sans-serif;
        font-size: 13px;
        line-height: 1.3;
        font-weight: 600;

        text-decoration: none;

        box-shadow:
            0 6px 14px rgba(91, 51, 37, 0.14),
            0 16px 29px rgba(91, 51, 37, 0.13),
            inset 0 1px 0 rgba(255, 255, 255, 0.15);

        transition:
            background-color 300ms ease,
            transform 300ms ease,
            box-shadow 300ms ease;
    }

    body .biab-proposal__button span {
        display: inline-block;
        font-size: 19px;
        line-height: 1;

        transition: transform 300ms ease;
    }

    body .biab-proposal__button:hover {
        background-color: #D57450;
        transform: translateY(-3px);

        box-shadow:
            0 8px 18px rgba(91, 51, 37, 0.17),
            0 20px 35px rgba(91, 51, 37, 0.17);
    }

    body .biab-proposal__button:hover span {
        transform: translateX(4px);
    }

    body .biab-proposal__button:focus-visible {
        outline: 2px solid #C96743;
        outline-offset: 4px;
    }

    /* =========================================
       TOP-RIGHT ARCHITECTURAL LINEWORK
    ========================================= */

    body .biab-proposal__decoration {
        position: absolute;
        z-index: 0;

        top: -280px;
        right: -180px;

        width: 550px;
        height: 410px;

        overflow: hidden;
        pointer-events: none;
    }

    body .biab-proposal__arc {
        position: absolute;
        display: block;

        width: 620px;
        height: 430px;

        box-sizing: border-box;

        border: 1px solid rgba(201, 103, 67, 0.20);
        border-radius: 50%;

        background: transparent;
    }

    body .biab-proposal__arc--one {
        top: 20px;
        left: 0;
        transform: rotate(-21deg);
    }

    body .biab-proposal__arc--two {
        top: 78px;
        left: 92px;

        transform: rotate(-15deg);
        border-color: rgba(201, 103, 67, 0.13);
    }

    /* =========================================
       HOVER INTERACTIONS
    ========================================= */

    @media (hover: hover) {

        body .biab-proposal__card:hover {
            transform: translateY(-5px);

            box-shadow:
                0 9px 18px rgba(54, 45, 35, 0.055),
                0 26px 47px rgba(54, 45, 35, 0.10),
                inset 0 1px 0 rgba(255, 255, 255, 0.90);
        }

        body .biab-proposal__card:hover
        .biab-proposal__icon {
            transform: translateY(-3px);

            box-shadow:
                0 7px 15px rgba(66, 46, 34, 0.06),
                0 18px 30px rgba(66, 46, 34, 0.09),
                inset 0 1px 0 rgba(255, 255, 255, 0.80);
        }
    }

    /* =========================================
       STAGGERED ENTRANCE ANIMATIONS
       Reuses desktop keyframes
    ========================================= */

    body .biab-proposal__eyebrow,
    body .biab-proposal__title,
    body .biab-proposal__body,
    body .biab-proposal__statement,
    body .biab-proposal__card,
    body .biab-proposal__closing {
        animation: biabProposalReveal 850ms
            cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    body .biab-proposal__eyebrow {
        animation-delay: 70ms;
    }

    body .biab-proposal__title {
        animation-delay: 150ms;
    }

    body .biab-proposal__body {
        animation-delay: 230ms;
    }

    body .biab-proposal__statement {
        animation-delay: 300ms;
    }

    body .biab-proposal__card:nth-child(1) {
        animation-delay: 340ms;
    }

    body .biab-proposal__card:nth-child(2) {
        animation-delay: 440ms;
    }

    body .biab-proposal__card:nth-child(3) {
        animation-delay: 540ms;
    }

    body .biab-proposal__closing {
        animation-delay: 650ms;
    }
}

/* =========================================
   SMALL TABLET — 600px–749px
========================================= */

@media (min-width: 600px) and (max-width: 749px) {

    body .biab-proposal {
        padding-top: 85px;
        padding-bottom: 90px;
    }

    body .biab-proposal__inner {
        padding-left: 45px;
        padding-right: 45px;
    }

    body .biab-proposal__title {
        font-size: 39px;
    }

    body .biab-proposal__body,
    body .biab-proposal__statement {
        font-size: 14px;
    }

    body .biab-proposal__steps {
        grid-auto-columns: 300px;
        gap: 40px;
        margin-top: 42px;
    }

    body .biab-proposal__card {
        width: 300px;
        min-height: 330px;
        padding: 28px 25px 32px;
    }

    body .biab-proposal__card:not(:last-child)::after {
        right: -31px;
    }

    body .biab-proposal__card h3 {
        font-size: 18px;
    }

    body .biab-proposal__card p {
        font-size: 13px;
    }

    /* Stack closing statement and CTA */
    body .biab-proposal__closing {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;

        gap: 21px;
        padding: 26px;
    }

    body .biab-proposal__closing p {
        font-size: 16px;
    }

    body .biab-proposal__button {
        align-self: flex-start;
    }
}

/* =========================================
   ACCESSIBILITY — REDUCED MOTION
========================================= */

@media (min-width: 600px) and (max-width: 1100px) and
       (prefers-reduced-motion: reduce) {

    body .biab-proposal__eyebrow,
    body .biab-proposal__title,
    body .biab-proposal__body,
    body .biab-proposal__statement,
    body .biab-proposal__card,
    body .biab-proposal__closing {
        animation: none;
        opacity: 1;
        translate: none;
    }

    body .biab-proposal__card,
    body .biab-proposal__icon,
    body .biab-proposal__button,
    body .biab-proposal__button span {
        transition: none;
    }
}



/* =========================================================
   FRAYORA — BUSINESS-IN-A-BOX
   SECTION 07 — FINAL CTA
   TABLET ONLY: 600px–1100px

   Centered editorial composition
   Soft terracotta / ivory luminosity
   Dimensional CTA and staggered animations
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    /* =========================================
       SECTION BACKGROUND
    ========================================= */

    body .biab-final-cta {
        position: relative;
        isolation: isolate;

        display: block;
        width: 100%;
        height: auto;
        min-height: 570px;

        box-sizing: border-box;
        margin: 0;
        padding: 0;

        overflow: hidden;

        background-color: #FAF5EF !important;

        background-image:
            radial-gradient(
                ellipse 110% 110% at 50% 46%,
                rgba(201, 103, 67, 0.12) 0%,
                rgba(201, 103, 67, 0.065) 38%,
                rgba(201, 103, 67, 0.025) 68%,
                transparent 90%
            ),
            radial-gradient(
                ellipse 100% 110% at 15% 100%,
                rgba(232, 180, 150, 0.075) 0%,
                transparent 85%
            ) !important;

        background-position: center center !important;
        background-repeat: no-repeat !important;

        color: #1F211D;
    }

    /* =========================================
       SUBTLE SURFACE DEPTH
    ========================================= */

    body .biab-final-cta::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;

        pointer-events: none;

        background: none;

        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.70),
            inset 0 18px 36px -38px rgba(87, 65, 47, 0.08);
    }

    /* =========================================
       CENTERED CONTENT CONTAINER
    ========================================= */

    body .biab-final-cta__inner {
        position: relative;
        z-index: 2;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        max-width: 1100px;
        min-height: 570px;

        margin: 0 auto;
        padding: 90px 60px;

        box-sizing: border-box;
    }

    body .biab-final-cta__content {
        width: 100%;
        max-width: 890px;

        margin: 0 auto;
        padding: 0;

        text-align: center;
    }

    /* =========================================
       EYEBROW
    ========================================= */

    body .biab-final-cta__eyebrow {
        margin: 0 0 27px;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 12px;
        line-height: 1.4;
        font-weight: 600;
        letter-spacing: 0.16em;
        text-transform: uppercase;

        color: #C96743;
    }

    /* =========================================
       HEADING
    ========================================= */

    body .biab-final-cta__title {
        width: 100%;
        max-width: 850px;

        margin: 0 auto;
        padding: 0;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: clamp(43px, 5.2vw, 60px);
        line-height: 1.1;
        font-weight: 600;
        letter-spacing: -0.05em;

        color: #1F211D;
        text-align: center;
        text-wrap: balance;
    }

    /* =========================================
       BODY DESCRIPTION
    ========================================= */

    body .biab-final-cta__body {
        width: 100%;
        max-width: 760px;

        margin: 30px auto 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 16px;
        line-height: 1.75;
        font-weight: 400;

        color: rgba(31, 33, 29, 0.78);
        text-align: center;
    }

    /* =========================================
       SUPPORTING COPY
    ========================================= */

    body .biab-final-cta__support {
        width: 100%;
        max-width: 760px;

        margin: 23px auto 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 15px;
        line-height: 1.7;
        font-weight: 500;

        color: #303B32;
        text-align: center;
    }

    /* =========================================
       TERRACOTTA CTA BUTTON
    ========================================= */

    body .biab-final-cta__button {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        gap: 16px;

        width: fit-content;
        min-height: 55px;

        box-sizing: border-box;

        margin: 36px auto 0;
        padding: 16px 30px;

        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 999px;

        background-color: #C96743;
        background-image: none;

        color: #FFFFFF;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1.2;
        font-weight: 600;

        text-decoration: none;

        box-shadow:
            0 8px 18px rgba(170, 98, 69, 0.15),
            0 18px 36px rgba(170, 98, 69, 0.14),
            inset 0 1px 0 rgba(255, 255, 255, 0.18);

        transition:
            background-color 300ms ease,
            transform 300ms ease,
            box-shadow 300ms ease;
    }

    body .biab-final-cta__button span {
        display: inline-block;

        font-size: 20px;
        line-height: 1;

        transition: transform 300ms ease;
    }

    body .biab-final-cta__button:hover {
        background-color: #B95635;
        transform: translateY(-3px);

        box-shadow:
            0 10px 22px rgba(170, 98, 69, 0.18),
            0 22px 42px rgba(170, 98, 69, 0.16);
    }

    body .biab-final-cta__button:hover span {
        transform: translateX(4px);
    }

    body .biab-final-cta__button:focus-visible {
        outline: 2px solid #C96743;
        outline-offset: 4px;
    }

    /* =========================================
       STAGGERED ANIMATIONS
       Reuses desktop keyframes
    ========================================= */

    body .biab-final-cta__eyebrow,
    body .biab-final-cta__title,
    body .biab-final-cta__body,
    body .biab-final-cta__support,
    body .biab-final-cta__button {
        animation: biabFinalReveal 850ms
            cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    body .biab-final-cta__eyebrow {
        animation-delay: 80ms;
    }

    body .biab-final-cta__title {
        animation-delay: 170ms;
    }

    body .biab-final-cta__body {
        animation-delay: 270ms;
    }

    body .biab-final-cta__support {
        animation-delay: 370ms;
    }

    body .biab-final-cta__button {
        animation-delay: 470ms;
    }
}

/* =========================================
   SMALL TABLET — 600px–749px
========================================= */

@media (min-width: 600px) and (max-width: 749px) {

    body .biab-final-cta {
        min-height: 540px;
    }

    body .biab-final-cta__inner {
        min-height: 540px;
        padding: 80px 45px;
    }

    body .biab-final-cta__title {
        font-size: 43px;
    }

    body .biab-final-cta__body {
        font-size: 15px;
    }

    body .biab-final-cta__support {
        font-size: 14px;
    }

    body .biab-final-cta__button {
        margin-top: 32px;
    }
}

/* =========================================
   ACCESSIBILITY — REDUCED MOTION
========================================= */

@media (min-width: 600px) and (max-width: 1100px) and
       (prefers-reduced-motion: reduce) {

    body .biab-final-cta__eyebrow,
    body .biab-final-cta__title,
    body .biab-final-cta__body,
    body .biab-final-cta__support,
    body .biab-final-cta__button {
        animation: none;
        opacity: 1;
        translate: none;
    }

    body .biab-final-cta__button,
    body .biab-final-cta__button span {
        transition: none;
    }
}


/* =========================================================
   FRAYORA — BUSINESS-IN-A-BOX
   SECTION 01 — HERO — MOBILE
   599px AND BELOW

   Architectural olive background
   Subtle luminous finish
   Modern typography, shadows and animations
========================================================= */

@media (max-width: 599px) {

    /* =========================================
       HERO BACKGROUND
    ========================================= */

    body .biab-hero {
    position: relative;
    isolation: isolate;

    display: block;

    width: 100%;
    height: auto;
    min-height: 0;

    margin: 0;
    padding: 0;

    box-sizing: border-box;
    overflow: hidden;

    background-color: #283429 !important;
    background-image: url("../images/Business in a box/heromobile.png") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    color: #F8F3EB;
}

    /* =========================================
       OLIVE OVERLAY
       Improves text readability
    ========================================= */

    body .biab-hero::before {
        content: "";

        position: absolute;
        inset: 0;
        z-index: 0;

        pointer-events: none;

        background: linear-gradient(
            180deg,
            rgba(16, 26, 18, 0.30) 0%,
            rgba(16, 26, 18, 0.49) 30%,
            rgba(16, 26, 18, 0.57) 58%,
            rgba(16, 26, 18, 0.18) 100%
        );
    }

    /* =========================================
       REFINED ARCHITECTURAL LUMINOSITY
       Soft highlights without bright patches
    ========================================= */

    body .biab-hero::after {
        content: "";

        position: absolute;
        inset: 0;
        z-index: 1;

        pointer-events: none;

        background: linear-gradient(
            145deg,
            transparent 38%,
            rgba(255, 250, 235, 0.012) 60%,
            rgba(255, 250, 235, 0.045) 83%,
            rgba(255, 250, 235, 0.012) 100%
        );

        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.06),
            inset 0 -24px 45px -45px rgba(0, 0, 0, 0.20);
    }

    /* =========================================
       CONTENT CONTAINER
    ========================================= */

    body .biab-hero__inner {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-start;
    justify-content: flex-start;

    width: 100%;
    max-width: 100%;

    height: auto;
    min-height: 0;

    margin: 0 auto;

    /* Same left alignment as Frayora mobile header */
    padding: 76px 28px 82px 43px;

    box-sizing: border-box;
}

    body .biab-hero__content {
        position: relative;
        z-index: 2;

        width: 100%;
        max-width: 480px;

        margin: 0;
        padding: 0;

        text-align: left;
    }

    /* =========================================
       EYEBROW
    ========================================= */

    body .biab-hero__eyebrow {
        margin: 0 0 25px;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 11px;
        line-height: 1.4;
        font-weight: 600;

        letter-spacing: 0.16em;
        text-transform: uppercase;

        color: #E8D8C0;

        text-shadow:
            0 1px 5px rgba(0, 0, 0, 0.15);
    }

    /* =========================================
       MAIN HEADING
    ========================================= */

    body .biab-hero__title {
        width: 100%;
        max-width: 470px;

        margin: 0;
        padding: 0;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: clamp(35px, 9vw, 48px);
        line-height: 1.15;
        font-weight: 600;
        letter-spacing: -0.052em;

        color: #F8F3EB;

        text-align: left;
        text-wrap: balance;

        text-shadow:
            0 3px 16px rgba(0, 0, 0, 0.17);
    }

    /* =========================================
       BODY COPY
    ========================================= */

    body .biab-hero__body {
        width: 100%;
        max-width: 440px;

        margin: 29px 0 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1.75;
        font-weight: 400;

        letter-spacing: -0.005em;

        color: rgba(248, 243, 235, 0.93);

        text-shadow:
            0 2px 8px rgba(0, 0, 0, 0.15);
    }

    /* =========================================
       SUPPORTING STATEMENT
    ========================================= */

    body .biab-hero__statement {
        width: 100%;
        max-width: 430px;

        margin: 26px 0 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1.7;
        font-weight: 500;

        letter-spacing: -0.01em;

        color: #F8F3EB;

        text-shadow:
            0 2px 8px rgba(0, 0, 0, 0.13);
    }

    /* =========================================
       TERRACOTTA CTA BUTTON
    ========================================= */

    body .biab-hero__button {
        position: relative;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        gap: 13px;

        width: fit-content;
        max-width: 100%;
        min-height: 52px;

        margin: 32px 0 0;
        padding: 15px 25px;

        box-sizing: border-box;

        background-color: #C96743;
        background-image: none;

        color: #FFFFFF;

        border: 1px solid rgba(255, 255, 255, 0.13);
        border-radius: 999px;

        font-family: "Inter", sans-serif;
        font-size: 13px;
        line-height: 1.3;
        font-weight: 600;

        letter-spacing: -0.01em;
        text-decoration: none;

        box-shadow:
            0 5px 12px rgba(11, 20, 13, 0.15),
            0 17px 30px rgba(11, 20, 13, 0.21),
            inset 0 1px 0 rgba(255, 255, 255, 0.16);

        transition:
            transform 280ms ease,
            background-color 280ms ease,
            box-shadow 280ms ease;
    }

    body .biab-hero__button span {
        display: inline-block;

        font-size: 19px;
        line-height: 1;

        transition: transform 280ms ease;
    }

    body .biab-hero__button:hover {
        background-color: #D57450;

        transform: translateY(-3px);

        box-shadow:
            0 8px 16px rgba(11, 20, 13, 0.17),
            0 21px 36px rgba(11, 20, 13, 0.23),
            inset 0 1px 0 rgba(255, 255, 255, 0.17);
    }

    body .biab-hero__button:hover span {
        transform: translateX(4px);
    }

    body .biab-hero__button:focus-visible {
        outline: 2px solid #F8F3EB;
        outline-offset: 4px;
    }

    /* =========================================
       STAGGERED ENTRANCE ANIMATIONS
       Reuses your desktop keyframes
    ========================================= */

    body .biab-hero__eyebrow,
    body .biab-hero__title,
    body .biab-hero__body,
    body .biab-hero__statement,
    body .biab-hero__button {
        animation:
            biabSignatureReveal 850ms
            cubic-bezier(0.22, 1, 0.36, 1)
            both;
    }

    body .biab-hero__eyebrow {
        animation-delay: 100ms;
    }

    body .biab-hero__title {
        animation-delay: 200ms;
    }

    body .biab-hero__body {
        animation-delay: 320ms;
    }

    body .biab-hero__statement {
        animation-delay: 430ms;
    }

    body .biab-hero__button {
        animation-delay: 540ms;
    }
}

/* =========================================
   SMALL MOBILE — 374px AND BELOW
========================================= */

@media (max-width: 374px) {

    body .biab-hero {
        height: auto;
        min-height: 0;
    }

    body .biab-hero__inner {
        height: auto;
        min-height: 0;

        padding: 65px 23px 72px 43px;
    }

    body .biab-hero__title {
        font-size: 34px;
        line-height: 1.16;
    }

    body .biab-hero__body {
        font-size: 13px;
    }

    body .biab-hero__statement {
        font-size: 13px;
    }

    body .biab-hero__button {
        padding: 14px 23px;
    }
}

/* =========================================
   REDUCED MOTION — MOBILE
========================================= */

@media (max-width: 599px) and
       (prefers-reduced-motion: reduce) {

    body .biab-hero__eyebrow,
    body .biab-hero__title,
    body .biab-hero__body,
    body .biab-hero__statement,
    body .biab-hero__button {
        opacity: 1;
        transform: none;
        animation: none;
    }

    body .biab-hero__button,
    body .biab-hero__button span {
        transition: none;
    }
}


/* =========================================================
   FRAYORA — BUSINESS-IN-A-BOX
   SECTION 02 — INSIDE THE BOX
   MOBILE ONLY: 599px AND BELOW

   Single-column editorial layout
   Solid ivory background
   Bond-inspired subtle depth and shadows
   Terracotta architectural linework
========================================================= */

@media (max-width: 599px) {

    /* =========================================
       SECTION BACKGROUND
    ========================================= */

    body .biab-foundation {
        position: relative;
        isolation: isolate;

        display: block;
        box-sizing: border-box;

        width: 100%;
        height: auto;
        min-height: 0;

        margin: 0;
        padding: 80px 0 105px;

        overflow: hidden;

        background-color: #F8F3EB !important;
        background-image: none !important;

        color: #1F211D;
    }

    /* =========================================
       CONTENT CONTAINER
       Aligned with mobile header logo
    ========================================= */

    body .biab-foundation__inner {
        position: relative;
        z-index: 2;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        box-sizing: border-box;

        width: 100%;
        max-width: 100%;

        margin: 0 auto;
        padding: 0 28px 0 43px;
    }

    /* =========================================
       INTRODUCTION
    ========================================= */

    body .biab-foundation__intro {
        width: 100%;
        max-width: 100%;

        margin: 0;
        padding: 0;
    }

    body .biab-foundation__eyebrow {
        margin: 0 0 22px;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 11px;
        line-height: 1.4;
        font-weight: 600;

        letter-spacing: 0.16em;
        text-transform: uppercase;

        color: #AD7258;
    }

    body .biab-foundation__title {
        width: 100%;
        max-width: 100%;

        margin: 0;
        padding: 0;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: clamp(30px, 8vw, 42px);
        line-height: 1.16;
        font-weight: 600;
        letter-spacing: -0.047em;

        color: #1F211D;
        text-wrap: balance;
    }

    body .biab-foundation__body {
        width: 100%;
        max-width: 100%;

        margin: 25px 0 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1.75;
        font-weight: 400;

        color: rgba(31, 33, 29, 0.78);
    }

    body .biab-foundation__body
    + .biab-foundation__body {
        margin-top: 19px;
    }

    /* =========================================
       SIX FEATURES — SINGLE COLUMN
    ========================================= */

    body .biab-foundation__grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);

        column-gap: 0;
        row-gap: 43px;

        width: 100%;

        margin: 60px 0 0;
        padding: 0;

        align-items: start;
    }

    body .biab-foundation__item {
        position: relative;

        display: block;
        box-sizing: border-box;

        min-width: 0;
        width: 100%;

        margin: 0;
        padding: 0;

        background: transparent;
        border: none;
        box-shadow: none;

        transition:
            transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* =========================================
       NUMBER + CIRCULAR ICON
    ========================================= */

    body .biab-foundation__top {
        display: flex;
        align-items: center;
        gap: 16px;

        width: 100%;
        height: 66px;
        min-height: 66px;

        margin: 0 0 18px;
        padding: 0;
    }

    body .biab-foundation__number {
        flex: 0 0 auto;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1;
        font-weight: 600;

        letter-spacing: -0.025em;

        color: #98664D;
    }

    body .biab-foundation__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        box-sizing: border-box;

        flex: 0 0 66px;
        width: 66px;
        height: 66px;

        border-radius: 50%;

        background-color: #F1E2D4;

        border: 1px solid rgba(178, 133, 102, 0.10);

        box-shadow:
            0 4px 10px rgba(66, 46, 34, 0.04),
            0 14px 25px rgba(66, 46, 34, 0.07),
            inset 0 1px 0 rgba(255, 255, 255, 0.76);

        transition:
            transform 350ms ease,
            background-color 350ms ease,
            box-shadow 350ms ease;
    }

    body .biab-foundation__icon svg {
        display: block;

        width: 27px;
        height: 27px;

        stroke: #594B3D;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;

        filter:
            drop-shadow(
                0 2px 1px rgba(60, 43, 33, 0.08)
            );

        transition: transform 350ms ease;
    }

    /* =========================================
       FEATURE TYPOGRAPHY
    ========================================= */

    body .biab-foundation__item h3 {
        margin: 0 0 12px;
        padding: 0;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: 19px;
        line-height: 1.35;
        font-weight: 650;
        letter-spacing: -0.035em;

        color: #1F211D;
    }

    body .biab-foundation__item p {
        width: 100%;
        max-width: 430px;

        margin: 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1.75;
        font-weight: 400;

        color: rgba(31, 33, 29, 0.76);
    }

    /* =========================================
       BOTTOM-LEFT ARCHITECTURAL CURVES
    ========================================= */

    body .biab-foundation__art {
        position: absolute;
        z-index: 0;

        left: -155px;
        bottom: -105px;

        width: 390px;
        height: 245px;

        overflow: hidden;
        pointer-events: none;
        opacity: 1;
    }

    body .biab-foundation__arc {
        position: absolute;
        display: block;
        box-sizing: border-box;

        width: 470px;
        height: 290px;

        border: 1px solid rgba(201, 103, 67, 0.22);
        border-radius: 50%;

        background: transparent;
    }

    body .biab-foundation__arc--one {
        left: -100px;
        top: 65px;

        transform: rotate(23deg);
        border-color: rgba(201, 103, 67, 0.30);
    }

    body .biab-foundation__arc--two {
        left: -40px;
        top: 90px;

        transform: rotate(18deg);
        border-color: rgba(201, 103, 67, 0.23);
    }

    body .biab-foundation__arc--three {
        left: 25px;
        top: 115px;

        transform: rotate(13deg);
        border-color: rgba(201, 103, 67, 0.17);
    }

    /* =========================================
       HOVER INTERACTIONS
    ========================================= */

    @media (hover: hover) {

        body .biab-foundation__item:hover {
            transform: translateY(-3px);
        }

        body .biab-foundation__item:hover
        .biab-foundation__icon {
            transform: translateY(-3px);

            background-color: #F0DED0;

            box-shadow:
                0 7px 14px rgba(66, 46, 34, 0.055),
                0 18px 30px rgba(66, 46, 34, 0.085),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
        }

        body .biab-foundation__item:hover svg {
            transform: scale(1.06);
        }
    }

    /* =========================================
       STAGGERED ENTRANCE ANIMATIONS
    ========================================= */

    body .biab-foundation__eyebrow,
    body .biab-foundation__title,
    body .biab-foundation__body,
    body .biab-foundation__item {
        animation:
            biabFoundationReveal 850ms
            cubic-bezier(0.22, 1, 0.36, 1)
            both;
    }

    body .biab-foundation__eyebrow {
        animation-delay: 80ms;
    }

    body .biab-foundation__title {
        animation-delay: 160ms;
    }

    body .biab-foundation__body {
        animation-delay: 240ms;
    }

    body .biab-foundation__item:nth-child(1) {
        animation-delay: 180ms;
    }

    body .biab-foundation__item:nth-child(2) {
        animation-delay: 260ms;
    }

    body .biab-foundation__item:nth-child(3) {
        animation-delay: 340ms;
    }

    body .biab-foundation__item:nth-child(4) {
        animation-delay: 420ms;
    }

    body .biab-foundation__item:nth-child(5) {
        animation-delay: 500ms;
    }

    body .biab-foundation__item:nth-child(6) {
        animation-delay: 580ms;
    }
}

/* =========================================
   SMALL MOBILE — 374px AND BELOW
========================================= */

@media (max-width: 374px) {

    body .biab-foundation {
        padding-top: 75px;
        padding-bottom: 95px;
    }

    body .biab-foundation__inner {
        padding-left: 29px;
        padding-right: 23px;
    }

    body .biab-foundation__title {
        font-size: 31px;
    }

    body .biab-foundation__body,
    body .biab-foundation__item p {
        font-size: 13px;
    }

    body .biab-foundation__item h3 {
        font-size: 18px;
    }

    body .biab-foundation__grid {
        row-gap: 39px;
        margin-top: 54px;
    }

    body .biab-foundation__icon {
        width: 61px;
        height: 61px;
        flex-basis: 61px;
    }

    body .biab-foundation__top {
        height: 61px;
        min-height: 61px;
    }
}

/* =========================================
   REDUCED MOTION
========================================= */

@media (max-width: 599px) and
       (prefers-reduced-motion: reduce) {

    body .biab-foundation__eyebrow,
    body .biab-foundation__title,
    body .biab-foundation__body,
    body .biab-foundation__item {
        animation: none;
        opacity: 1;
        translate: none;
    }

    body .biab-foundation__item,
    body .biab-foundation__icon,
    body .biab-foundation__icon svg {
        transition: none;
    }
}


/* =========================================================
   FRAYORA — BUSINESS-IN-A-BOX
   SECTION 01 — IMAGE-FIRST MOBILE HERO
   MOBILE ONLY: 599px AND BELOW

   Upper-right floating 3D box
   Left-aligned copy beneath
   Compact editorial spacing
   Architectural background and luminous depth
========================================================= */

@media (max-width: 599px) {

    /* =========================================
       HERO CONTAINER
    ========================================= */

    body .biab-hero {
        position: relative;
        isolation: isolate;

        display: block;
        width: 100%;
        height: auto;
        min-height: 0;

        margin: 0;
        padding: 0;
        overflow: hidden;

        box-sizing: border-box;
    }

    /* =========================================
       STACK IMAGE ABOVE CONTENT
    ========================================= */

    body .biab-hero__inner {
        position: relative;
        z-index: 2;

        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;

        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 0;

        margin: 0 auto;
        padding: 42px 28px 65px 34px;

        box-sizing: border-box;
    }

    /* =========================================
       3D BOX — TOP RIGHT
    ========================================= */

    body .biab-hero__visual {
        position: relative;
        z-index: 3;

        display: block !important;
        order: -1;
        align-self: flex-end;

        top: auto;
        right: auto;
        bottom: auto;
        left: auto;

        width: min(100%, 430px);
        max-width: 430px;
        height: auto;

        margin: 0 -12px -12px auto;
        padding: 0;

        transform: none;
        pointer-events: none;

        filter:
            drop-shadow(0 12px 22px rgba(5, 15, 8, 0.15))
            drop-shadow(0 24px 42px rgba(5, 15, 8, 0.18));

        animation:
            biabMobileVisualEntrance 950ms
            cubic-bezier(0.22, 1, 0.36, 1)
            150ms both;
    }

    body .biab-hero__visual img {
        display: block;

        width: 100%;
        height: auto;

        object-fit: contain;

        filter:
            brightness(1.03)
            contrast(1.02);

        animation:
            biabMobileVisualFloat 5.5s
            ease-in-out 1150ms infinite;

        will-change: transform;
    }

    /* =========================================
       TEXT CONTENT — LEFT ALIGNED
    ========================================= */

    body .biab-hero__content {
        position: relative;
        z-index: 4;

        display: block;
        order: 1;

        width: 100%;
        max-width: 100%;

        margin: 0;
        padding: 0;

        transform: none;
        text-align: left;
    }

    /* =========================================
       EYEBROW
    ========================================= */

    body .biab-hero__eyebrow {
        margin: 0 0 22px;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 11px;
        line-height: 1.4;
        font-weight: 600;

        letter-spacing: 0.16em;
        text-transform: uppercase;

        color: #E8D8C0;

        text-align: left;
    }

    /* =========================================
       MAIN HEADING
    ========================================= */

    body .biab-hero__title {
        width: 100%;
        max-width: 100%;

        margin: 0;
        padding: 0;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: clamp(36px, 8.5vw, 46px);
        line-height: 1.13;
        font-weight: 600;
        letter-spacing: -0.05em;

        color: #F8F3EB;

        text-align: left;
        text-wrap: balance;

        text-shadow: 0 3px 16px rgba(0, 0, 0, 0.14);
    }

    /* =========================================
       BODY COPY
    ========================================= */

    body .biab-hero__body {
        width: 100%;
        max-width: 100%;

        margin: 27px 0 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1.75;
        font-weight: 400;

        color: rgba(248, 243, 235, 0.94);

        text-align: left;

        text-shadow: 0 2px 7px rgba(0, 0, 0, 0.12);
    }

    /* =========================================
       SUPPORTING STATEMENT
    ========================================= */

    body .biab-hero__statement {
        width: 100%;
        max-width: 100%;

        margin: 24px 0 0;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1.7;
        font-weight: 600;

        color: #F8F3EB;
        text-align: left;
    }

    /* =========================================
       TERRACOTTA BUTTON
    ========================================= */

    body .biab-hero__button {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        gap: 13px;

        width: fit-content;
        max-width: 100%;
        min-height: 54px;

        margin: 29px 0 0;
        padding: 15px 25px;

        box-sizing: border-box;

        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 999px;

        background-color: #C96743;
        background-image: none;

        color: #FFFFFF;

        font-family: "Inter", sans-serif;
        font-size: 13px;
        line-height: 1.3;
        font-weight: 600;

        text-decoration: none;

        box-shadow:
            0 5px 13px rgba(11, 20, 13, 0.14),
            0 17px 32px rgba(11, 20, 13, 0.19),
            inset 0 1px 0 rgba(255, 255, 255, 0.16);

        transition:
            transform 300ms ease,
            background-color 300ms ease,
            box-shadow 300ms ease;
    }

    body .biab-hero__button span {
        display: inline-block;
        font-size: 19px;
        line-height: 1;

        transition: transform 300ms ease;
    }

    body .biab-hero__button:hover {
        background-color: #D57450;
        transform: translateY(-3px);

        box-shadow:
            0 8px 17px rgba(11, 20, 13, 0.16),
            0 21px 39px rgba(11, 20, 13, 0.22);
    }

    body .biab-hero__button:hover span {
        transform: translateX(4px);
    }

    body .biab-hero__button:focus-visible {
        outline: 2px solid #F8F3EB;
        outline-offset: 4px;
    }
}

/* =========================================
   SMALL MOBILE — 374px AND BELOW
========================================= */

@media (max-width: 374px) {

    body .biab-hero__inner {
        padding: 36px 23px 55px 29px;
    }

    body .biab-hero__visual {
        width: min(100%, 360px);
        margin-right: -10px;
        margin-bottom: -8px;
    }

    body .biab-hero__title {
        font-size: 34px;
    }

    body .biab-hero__body,
    body .biab-hero__statement {
        font-size: 13px;
    }
}

/* =========================================
   VISUAL ENTRANCE ANIMATION
========================================= */

@keyframes biabMobileVisualEntrance {
    from {
        opacity: 0;
        translate: 0 22px;
        scale: 0.96;
    }

    to {
        opacity: 1;
        translate: 0 0;
        scale: 1;
    }
}

/* =========================================
   GENTLE FLOATING ANIMATION
========================================= */

@keyframes biabMobileVisualFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* =========================================
   ACCESSIBILITY — REDUCED MOTION
========================================= */

@media (max-width: 599px) and
       (prefers-reduced-motion: reduce) {

    body .biab-hero__visual,
    body .biab-hero__visual img {
        animation: none;
        opacity: 1;
        translate: none;
        scale: 1;
        transform: none;
        will-change: auto;
    }

    body .biab-hero__button,
    body .biab-hero__button span {
        transition: none;
    }
}


/* =========================================
   BIAB HERO — MOBILE
   LOWER EYEBROW / ADD SPACE BELOW VISUAL
========================================= */

@media (max-width: 599px) {

    body .biab-hero__visual {
        margin-bottom: 22px;
    }

    body .biab-hero__eyebrow {
        margin-top: 4px;
    }
}

/* =========================================
   BUSINESS-IN-A-BOX — MOBILE HERO
   LARGER VISUAL + MORE TOP SPACING
   599px AND BELOW
========================================= */

@media (max-width: 599px) {

    /* More space below the header */
    body .biab-hero__inner {
        padding-top: 65px;
    }

    /* Larger floating illustration */
    body .biab-hero__visual {
        width: 112%;
        max-width: none;

        align-self: flex-end;

        margin: 0 -10px 28px auto;
    }
}

/* SMALL MOBILE */
@media (max-width: 374px) {

    body .biab-hero__inner {
        padding-top: 55px;
    }

    body .biab-hero__visual {
        width: 108%;
        margin-right: -8px;
        margin-bottom: 28px;
    }
}

/* =========================================
   BUSINESS-IN-A-BOX — MOBILE HERO
   INCREASE BOTTOM PADDING
   599px AND BELOW
========================================= */

@media (max-width: 599px) {

    body .biab-hero__inner {
        padding-bottom: 90px;
    }
}

/* SMALL MOBILE */
@media (max-width: 374px) {

    body .biab-hero__inner {
        padding-bottom: 80px;
    }
}

/* =========================================================
   FRAYORA — BUSINESS-IN-A-BOX
   SECTION 02 — MOBILE CENTER ALIGNMENT
   599px AND BELOW

   Centers introduction and all six features
   Preserves shadows, animations and backgrounds
========================================================= */

@media (max-width: 599px) {

    /* SECTION INTRODUCTION */

    body .biab-foundation__intro {
        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    body .biab-foundation__eyebrow,
    body .biab-foundation__title,
    body .biab-foundation__body {
        text-align: center;
    }

    /* SIX FEATURES */

    body .biab-foundation__grid {
        justify-items: center;
        row-gap: 52px;
    }

    body .biab-foundation__item {
        width: 100%;
        max-width: 390px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    /* CENTER NUMBER + ICON TOGETHER */

    body .biab-foundation__top {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;

        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    body .biab-foundation__number {
        text-align: center;
    }

    body .biab-foundation__icon {
        margin: 0;
    }

    /* FEATURE TITLES */

    body .biab-foundation__item h3 {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    /* FEATURE DESCRIPTIONS */

    body .biab-foundation__item p {
        width: 100%;
        max-width: 360px;

        margin-left: auto;
        margin-right: auto;

        text-align: center;
        text-wrap: pretty;
    }
}

/* SMALL MOBILE */

@media (max-width: 374px) {

    body .biab-foundation__grid {
        row-gap: 45px;
    }

    body .biab-foundation__item p {
        max-width: 100%;
    }
}



/* =========================================================
   FRAYORA — BUSINESS-IN-A-BOX
   SECTION 02 — MOBILE OVERRIDE
   Put numbers above icons
========================================================= */

@media (max-width: 599px) {

    body .biab-foundation__top {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 14px;

        min-height: auto;
        margin-bottom: 18px;
    }

    body .biab-foundation__number {
        display: block;
        order: 1;

        margin: 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1;
        font-weight: 600;

        color: #98664D;
        text-align: center;
    }

    body .biab-foundation__icon {
        order: 2;

        margin: 0 auto;
    }
}

/* =========================================
   SECTION 02 — MOBILE ICON SPACING
   599px AND BELOW
========================================= */

@media (max-width: 599px) {

    body .biab-foundation__top {
        height: auto;
        min-height: 0;
        margin-bottom: 32px;
    }

}

/* =========================================================
   FRAYORA — BUSINESS-IN-A-BOX
   SECTION 03 — THE DIFFERENCE
   MOBILE ONLY: 599px AND BELOW

   Deep olive editorial background
   Frosted olive + terracotta glass circles
   Soft luminosity, shadows and animations
========================================================= */

@media (max-width: 599px) {

    /* =========================================
       SECTION BACKGROUND
    ========================================= */

    body .biab-transformation {
        position: relative;
        isolation: isolate;

        display: block;
        box-sizing: border-box;

        width: 100%;
        height: auto;
        min-height: 0;

        margin: 0;
        padding: 78px 0 85px;

        overflow: hidden;

        background-color: #303B32 !important;
        background-image: none !important;

        color: #F8F3EB;
    }

    /* =========================================
       MAIN LAYOUT
       ALIGNED WITH MOBILE HEADER LOGO
    ========================================= */

    body .biab-transformation__inner {
        position: relative;
        z-index: 2;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        width: 100%;
        max-width: 100%;
        min-height: 0;

        margin: 0 auto;
        padding: 0 28px 0 43px;

        box-sizing: border-box;
    }

    body .biab-transformation__content {
        position: relative;

        width: 100%;
        max-width: 100%;

        margin: 0;
        padding: 0;

        text-align: left;
    }

    /* =========================================
       EYEBROW
    ========================================= */

    body .biab-transformation__eyebrow {
        margin: 0 0 23px;

        font-family: "Inter", sans-serif;
        font-size: 11px;
        line-height: 1.4;
        font-weight: 600;

        letter-spacing: 0.16em;
        text-transform: uppercase;

        color: #E8D9C7;
    }

    /* =========================================
       HEADING
    ========================================= */

    body .biab-transformation__title {
        width: 100%;
        max-width: 100%;

        margin: 0;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: clamp(31px, 8vw, 43px);
        line-height: 1.17;
        font-weight: 600;
        letter-spacing: -0.048em;

        color: #F8F3EB;
        text-align: left;
        text-wrap: balance;

        text-shadow:
            0 3px 16px rgba(0, 0, 0, 0.14);
    }

    /* =========================================
       BODY COPY
    ========================================= */

    body .biab-transformation__body {
        width: 100%;
        max-width: 100%;

        margin: 27px 0 0;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1.8;
        font-weight: 400;

        color: rgba(248, 243, 235, 0.88);
    }

    /* =========================================
       SUPPORTING STATEMENT
    ========================================= */

    body .biab-transformation__statement {
        display: flex;
        align-items: flex-start;

        gap: 13px;

        width: 100%;
        max-width: 100%;

        margin: 30px 0 0;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1.7;
        font-weight: 600;

        color: #F8F3EB;
    }

    body .biab-transformation__statement-arrow {
        display: inline-block;
        flex: 0 0 auto;

        font-size: 27px;
        line-height: 1.05;

        color: #E1C5AE;

        transition: transform 350ms ease;
    }

    /* =========================================
       OVERLAPPING CIRCLE DIAGRAM
    ========================================= */

    body .biab-transformation__diagram {
        position: relative;
        isolation: isolate;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        max-width: 380px;

        height: auto;
        min-height: 0;

        margin: 65px auto 0;
        padding: 18px 0;

        box-sizing: border-box;
    }

    /* =========================================
       SHARED FROSTED GLASS CIRCLES
    ========================================= */

    body .biab-transformation__circle {
        position: relative;
        isolation: isolate;

        display: flex;
        align-items: center;
        justify-content: center;

        width: min(42vw, 205px);
        height: auto;

        flex: 0 0 min(42vw, 205px);
        aspect-ratio: 1 / 1;

        box-sizing: border-box;
        border-radius: 50%;

        overflow: hidden;
        text-align: center;

        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);

        border: 1px solid rgba(255, 247, 226, 0.42);

        box-shadow:
            0 10px 25px rgba(7, 15, 9, 0.14),
            0 23px 42px rgba(7, 15, 9, 0.16),
            inset 0 2px 2px rgba(255, 255, 255, 0.17),
            inset 0 -15px 25px rgba(8, 15, 9, 0.14);

        transition:
            transform 450ms cubic-bezier(0.22, 1, 0.36, 1),
            box-shadow 450ms ease;
    }

    /* =========================================
       LEFT — OLIVE GLASS
    ========================================= */

    body .biab-transformation__circle--less {
        z-index: 1;

        margin-right: -28px;

        background:
            linear-gradient(
                145deg,
                rgba(160, 176, 146, 0.28) 0%,
                rgba(91, 108, 87, 0.45) 38%,
                rgba(51, 66, 53, 0.78) 100%
            );

        border-color: rgba(226, 233, 215, 0.50);
    }

    /* =========================================
       RIGHT — TERRACOTTA GLASS
    ========================================= */

    body .biab-transformation__circle--more {
        z-index: 2;

        background:
            linear-gradient(
                140deg,
                rgba(215, 152, 111, 0.72) 0%,
                rgba(161, 106, 78, 0.66) 42%,
                rgba(90, 68, 56, 0.88) 100%
            );

        border-color: rgba(242, 190, 153, 0.68);

        box-shadow:
            0 12px 30px rgba(7, 15, 9, 0.17),
            0 27px 50px rgba(7, 15, 9, 0.17),
            inset 0 2px 2px rgba(255, 240, 220, 0.23),
            inset 0 -17px 30px rgba(53, 30, 21, 0.16);
    }

    /* =========================================
       GLASS LIGHT REFLECTION
    ========================================= */

    body .biab-transformation__circle::before {
        content: "";

        position: absolute;
        inset: 0;
        z-index: 0;

        border-radius: inherit;
        pointer-events: none;

        background:
            linear-gradient(
                155deg,
                rgba(255, 255, 255, 0.16) 0%,
                rgba(255, 255, 255, 0.045) 26%,
                transparent 52%
            );
    }

    /* =========================================
       SUBTLE INNER GLASS RING
    ========================================= */

    body .biab-transformation__circle::after {
        content: "";

        position: absolute;
        inset: 4px;
        z-index: 0;

        border: 1px solid rgba(255, 255, 255, 0.09);
        border-radius: 50%;

        pointer-events: none;
    }

    /* =========================================
       CIRCLE LABELS
    ========================================= */

    body .biab-transformation__circle > span {
        position: relative;
        z-index: 2;

        display: block;

        margin: 0;
        padding: 0 7px;

        font-family: "Inter", sans-serif;
        font-size: clamp(9px, 2.6vw, 12px);
        line-height: 1.5;
        font-weight: 600;

        letter-spacing: 0.075em;

        color: #F8F3EB;
        text-align: center;

        text-shadow:
            0 2px 7px rgba(0, 0, 0, 0.16);
    }

    /* =========================================
       CENTER ARROW
    ========================================= */

    body .biab-transformation__diagram-arrow {
        position: absolute;
        z-index: 5;

        top: 50%;
        left: 50%;

        transform: translate(-50%, -50%);

        font-family: "Inter", sans-serif;
        font-size: 34px;
        line-height: 1;
        font-weight: 300;

        color: #F8F3EB;

        text-shadow:
            0 2px 9px rgba(0, 0, 0, 0.20);

        pointer-events: none;
    }

    /* =========================================
       SUBTLE INTERACTIONS
    ========================================= */

    @media (hover: hover) {

        body .biab-transformation__diagram:hover
        .biab-transformation__circle--less {
            transform: translateX(-3px);
        }

        body .biab-transformation__diagram:hover
        .biab-transformation__circle--more {
            transform: translateX(3px);
        }

        body .biab-transformation__content:hover
        .biab-transformation__statement-arrow {
            transform: translateX(4px);
        }
    }

    /* =========================================
       STAGGERED ENTRANCE ANIMATIONS
       Reuses existing desktop keyframes
    ========================================= */

    body .biab-transformation__eyebrow,
    body .biab-transformation__title,
    body .biab-transformation__body,
    body .biab-transformation__statement {
        animation:
            biabTransformationReveal 850ms
            cubic-bezier(0.22, 1, 0.36, 1)
            both;
    }

    body .biab-transformation__eyebrow {
        animation-delay: 80ms;
    }

    body .biab-transformation__title {
        animation-delay: 170ms;
    }

    body .biab-transformation__body {
        animation-delay: 270ms;
    }

    body .biab-transformation__statement {
        animation-delay: 370ms;
    }

    body .biab-transformation__circle--less {
        animation:
            biabTransformationCircle 1000ms
            cubic-bezier(0.22, 1, 0.36, 1)
            210ms both;
    }

    body .biab-transformation__circle--more {
        animation:
            biabTransformationCircle 1000ms
            cubic-bezier(0.22, 1, 0.36, 1)
            390ms both;
    }

    body .biab-transformation__diagram-arrow {
        animation:
            biabTransformationArrow 800ms ease
            650ms both;
    }
}

/* =========================================
   SMALL MOBILE — 374px AND BELOW
========================================= */

@media (max-width: 374px) {

    body .biab-transformation {
        padding-top: 70px;
        padding-bottom: 75px;
    }

    body .biab-transformation__inner {
        padding-left: 29px;
        padding-right: 23px;
    }

    body .biab-transformation__title {
        font-size: 30px;
    }

    body .biab-transformation__body,
    body .biab-transformation__statement {
        font-size: 13px;
    }

    body .biab-transformation__diagram {
        margin-top: 50px;
    }

    body .biab-transformation__circle--less {
        margin-right: -24px;
    }

    body .biab-transformation__diagram-arrow {
        font-size: 29px;
    }
}

/* =========================================
   REDUCED MOTION — MOBILE
========================================= */

@media (max-width: 599px) and
       (prefers-reduced-motion: reduce) {

    body .biab-transformation__eyebrow,
    body .biab-transformation__title,
    body .biab-transformation__body,
    body .biab-transformation__statement,
    body .biab-transformation__circle,
    body .biab-transformation__diagram-arrow {
        animation: none;
        opacity: 1;
        transform: none;
        translate: none;
        scale: 1;
    }

    body .biab-transformation__circle,
    body .biab-transformation__statement-arrow {
        transition: none;
    }
}

/* =========================================================
   FRAYORA — BUSINESS-IN-A-BOX
   SECTION 04 — HOW IT WORKS — MOBILE
   599px AND BELOW

   Clean stacked process layout
   Bond-inspired soft depth, shadows and motion
========================================================= */

@media (max-width: 599px) {

    /* =========================================
       SECTION
    ========================================= */

    body .biab-journey {
        position: relative;
        isolation: isolate;

        width: 100%;
        min-height: auto;

        margin: 0;
        padding: 64px 0 62px;

        box-sizing: border-box;
        overflow: hidden;

        background-color: #F8F3EB !important;
        background-image: none !important;

        color: #1F211D;
    }

    body .biab-journey__inner {
        position: relative;
        z-index: 2;

        width: 100%;
        margin: 0 auto;
        padding: 0 28px;

        box-sizing: border-box;
    }

    /* =========================================
       INTRO
    ========================================= */

    body .biab-journey__intro {
        width: 100%;
        max-width: 100%;
        margin: 0;
        text-align: left;
    }

    body .biab-journey__eyebrow {
        margin: 0 0 18px;

        font-family: "Inter", sans-serif;
        font-size: 11px;
        line-height: 1.3;
        font-weight: 600;
        letter-spacing: 0.16em;
        text-transform: uppercase;

        color: #AD7258;
    }

    body .biab-journey__title {
        margin: 0;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: 46px;
        line-height: 1.08;
        font-weight: 600;
        letter-spacing: -0.05em;

        color: #1F211D;
        text-wrap: balance;
    }

    body .biab-journey__description {
        width: 100%;
        max-width: 100%;

        margin: 20px 0 0;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1.75;
        font-weight: 400;

        color: rgba(31, 33, 29, 0.76);
    }

    /* =========================================
       STEPS WRAP
    ========================================= */

    body .biab-journey__steps {
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 26px;

        margin-top: 42px;
    }

    /* =========================================
       INDIVIDUAL STEP CARD
    ========================================= */

    body .biab-journey__step {
        position: relative;

        width: 100%;
        min-width: 0;

        padding: 0 0 22px;
        margin: 0;

        box-sizing: border-box;

        border-bottom: 1px solid rgba(173, 114, 88, 0.12);

        transition:
            transform 350ms cubic-bezier(0.22, 1, 0.36, 1),
            opacity 350ms ease;
    }

    body .biab-journey__step:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    /* =========================================
       TOP ROW
    ========================================= */

    body .biab-journey__step-top {
        display: flex;
        align-items: center;
        gap: 16px;

        min-height: 72px;
        margin-bottom: 18px;
    }

    body .biab-journey__number {
        flex: 0 0 auto;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1;
        font-weight: 600;
        letter-spacing: -0.02em;

        color: #98664D;
    }

    body .biab-journey__icon {
        position: relative;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        width: 72px;
        height: 72px;
        flex: 0 0 72px;

        border-radius: 50%;
        box-sizing: border-box;

        background:
            radial-gradient(
                circle at 30% 25%,
                rgba(255,255,255,0.58) 0%,
                rgba(255,255,255,0.18) 28%,
                transparent 58%
            ),
            linear-gradient(
                180deg,
                #F3E5D8 0%,
                #EEDFD1 100%
            );

        border: 1px solid rgba(201, 103, 67, 0.09);

        box-shadow:
            0 6px 14px rgba(80, 57, 41, 0.05),
            0 16px 28px rgba(80, 57, 41, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.72);

        transition:
            transform 350ms cubic-bezier(0.22, 1, 0.36, 1),
            box-shadow 350ms ease,
            background 350ms ease;
    }

    body .biab-journey__icon svg {
        display: block;

        width: 30px;
        height: 30px;

        stroke: #5D4D3F;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;

        filter: drop-shadow(0 2px 2px rgba(60, 43, 33, 0.08));
    }

    /* =========================================
       MOBILE CONNECTOR ARROW
    ========================================= */

    body .biab-journey__step:not(:last-child)::after {
        content: "↓";

        display: block;

        margin: 20px auto 0;

        width: fit-content;

        font-family: "Inter", sans-serif;
        font-size: 26px;
        line-height: 1;
        font-weight: 300;

        color: rgba(152, 102, 77, 0.76);
    }

    /* =========================================
       STEP COPY
    ========================================= */

    body .biab-journey__step h3 {
        margin: 0 0 12px;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: 17px;
        line-height: 1.35;
        font-weight: 650;
        letter-spacing: -0.03em;

        color: #1F211D;
    }

    body .biab-journey__step p {
        margin: 0;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1.72;
        font-weight: 400;

        color: rgba(31, 33, 29, 0.74);
    }

    /* =========================================
       CLOSING STATEMENT
    ========================================= */

    body .biab-journey__closing {
        width: 100%;
        max-width: 100%;

        margin: 36px auto 0;
        padding: 0;

        text-align: center;
    }

    body .biab-journey__closing p {
        margin: 0;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1.65;
        font-weight: 600;

        color: #1F211D;
    }

    /* =========================================
       HOVER / TAP FEEL
    ========================================= */

    body .biab-journey__step:active {
        transform: translateY(1px);
    }

    body .biab-journey__step:active .biab-journey__icon {
        transform: scale(0.98);
    }

    /* =========================================
       STAGGERED ENTRANCE ANIMATION
    ========================================= */

    body .biab-journey__eyebrow,
    body .biab-journey__title,
    body .biab-journey__description,
    body .biab-journey__step,
    body .biab-journey__closing {
        opacity: 0;
        transform: translateY(22px);

        animation: biabJourneyMobileReveal 850ms
            cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    body .biab-journey__eyebrow {
        animation-delay: 70ms;
    }

    body .biab-journey__title {
        animation-delay: 150ms;
    }

    body .biab-journey__description {
        animation-delay: 240ms;
    }

    body .biab-journey__step:nth-child(1) {
        animation-delay: 300ms;
    }

    body .biab-journey__step:nth-child(2) {
        animation-delay: 390ms;
    }

    body .biab-journey__step:nth-child(3) {
        animation-delay: 480ms;
    }

    body .biab-journey__step:nth-child(4) {
        animation-delay: 570ms;
    }

    body .biab-journey__closing {
        animation-delay: 660ms;
    }
}

/* =========================================
   MOBILE KEYFRAMES
========================================= */

@keyframes biabJourneyMobileReveal {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

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

/* =========================================
   REDUCED MOTION
========================================= */

@media (max-width: 599px) and (prefers-reduced-motion: reduce) {

    body .biab-journey__eyebrow,
    body .biab-journey__title,
    body .biab-journey__description,
    body .biab-journey__step,
    body .biab-journey__closing {
        opacity: 1;
        transform: none;
        animation: none;
    }

    body .biab-journey__step,
    body .biab-journey__icon {
        transition: none;
    }
}


/* =========================================================
   FRAYORA — BUSINESS-IN-A-BOX
   SECTION 04 — MOBILE REFINEMENT
   599px AND BELOW

   Smaller section heading
   Number above icon
   Fully centered process steps
   Preserves shadows, luminosity and animations
========================================================= */

@media (max-width: 599px) {

    /* =========================================
       MAIN SECTION HEADING
    ========================================= */

    body .biab-journey__title {
        font-family: "Manrope", "Inter", sans-serif;

        font-size: 34px;
        line-height: 1.16;
        font-weight: 600;
        letter-spacing: -0.047em;

        text-wrap: balance;
    }

    /* =========================================
       FOUR PROCESS STEPS
    ========================================= */

    body .biab-journey__steps {
        display: grid;
        grid-template-columns: minmax(0, 1fr);

        row-gap: 42px;
        margin-top: 48px;
    }

    body .biab-journey__step {
        display: flex;
        flex-direction: column;
        align-items: center;

        width: 100%;
        min-width: 0;

        margin: 0;
        padding: 0 0 32px;

        text-align: center;
    }

    /* =========================================
       NUMBER ABOVE CIRCULAR ICON
    ========================================= */

    body .biab-journey__step-top {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 15px;

        width: 100%;
        height: auto;
        min-height: 0;

        margin: 0 0 23px;
        padding: 0;
    }

    body .biab-journey__number {
        display: block;

        margin: 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1.3;
        font-weight: 600;

        color: #98664D;
        text-align: center;
    }

    /* =========================================
       CENTERED DIMENSIONAL ICON
    ========================================= */

    body .biab-journey__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        flex: 0 0 72px;

        width: 72px;
        height: 72px;

        margin: 0 auto;

        border-radius: 50%;

        box-shadow:
            0 6px 14px rgba(80, 57, 41, 0.05),
            0 16px 28px rgba(80, 57, 41, 0.08),
            inset 0 1px 0 rgba(255,255,255,0.72);
    }

    body .biab-journey__icon svg {
        display: block;

        width: 30px;
        height: 30px;

        margin: auto;
    }

    /* =========================================
       CENTERED STEP HEADINGS
    ========================================= */

    body .biab-journey__step h3 {
        width: 100%;
        max-width: 330px;

        margin: 0 auto 14px;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: 19px;
        line-height: 1.4;
        font-weight: 650;
        letter-spacing: -0.035em;

        color: #1F211D;
        text-align: center;
    }

    /* =========================================
       CENTERED STEP DESCRIPTIONS
    ========================================= */

    body .biab-journey__step p {
        width: 100%;
        max-width: 330px;

        margin: 0 auto;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1.75;

        color: rgba(31, 33, 29, 0.76);

        text-align: center;
        text-wrap: pretty;
    }

    /* =========================================
       CENTERED DOWN ARROWS
    ========================================= */

    body .biab-journey__step:not(:last-child)::after {
        content: "↓";

        position: static;
        display: block;

        width: fit-content;

        margin: 28px auto 0;

        font-family: "Inter", sans-serif;
        font-size: 27px;
        line-height: 1;
        font-weight: 300;

        color: #AD7258;

        transform: none;
        text-align: center;
    }

    /* =========================================
       REMOVE DUPLICATE SEPARATORS
    ========================================= */

    body .biab-journey__step {
        border-bottom: none;
    }

    /* =========================================
       CLOSING STATEMENT
    ========================================= */

    body .biab-journey__closing {
        margin: 26px auto 0;
        text-align: center;
    }

    body .biab-journey__closing p {
        font-size: 14px;
        line-height: 1.7;
        text-align: center;
    }
}

/* =========================================
   SMALL MOBILE — 374px AND BELOW
========================================= */

@media (max-width: 374px) {

    body .biab-journey__title {
        font-size: 31px;
    }

    body .biab-journey__step h3 {
        font-size: 18px;
    }

    body .biab-journey__step p {
        font-size: 13px;
    }
}


/* =========================================================
   FRAYORA — BUSINESS-IN-A-BOX
   SECTION 05 — BUILT AROUND YOUR BUSINESS
   MOBILE ONLY: 599px AND BELOW

   Horizontal swipeable architecture
   Sage / stone / terracotta progression
   Refined surface lighting and shadows
   Responsive typography and motion
========================================================= */

@media (max-width: 599px) {

    /* =========================================
       SECTION BACKGROUND
    ========================================= */

    body .biab-stages {
        position: relative;
        isolation: isolate;

        display: block;
        width: 100%;
        height: auto;
        min-height: 0;

        margin: 0;
        padding: 76px 0 82px;
        box-sizing: border-box;
        overflow: hidden;

        background-color: #F5EDE4 !important;
        background-image: none !important;

        color: #1F211D;
    }

    /* =========================================
       CONTENT CONTAINER
       ALIGNED WITH MOBILE LOGO
    ========================================= */

    body .biab-stages__inner {
        position: relative;
        z-index: 2;

        width: 100%;
        max-width: 100%;

        margin: 0 auto;
        padding: 0 28px 0 43px;
        box-sizing: border-box;
    }

    /* =========================================
       INTRODUCTION
    ========================================= */

    body .biab-stages__intro {
        position: relative;
        z-index: 2;

        width: 100%;
        max-width: 100%;

        margin: 0;
        padding: 0;

        text-align: left;
    }

    body .biab-stages__eyebrow {
        margin: 0 0 21px;

        font-family: "Inter", sans-serif;
        font-size: 11px;
        line-height: 1.4;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;

        color: #AD7258;
    }

    body .biab-stages__title {
        width: 100%;
        max-width: 100%;

        margin: 0;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: clamp(31px, 8vw, 43px);
        line-height: 1.16;
        font-weight: 600;
        letter-spacing: -0.047em;

        color: #1F211D;
        text-wrap: balance;
    }

    body .biab-stages__body {
        width: 100%;
        max-width: 100%;

        margin: 25px 0 0;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1.75;
        font-weight: 400;

        color: rgba(31, 33, 29, 0.78);
    }

    body .biab-stages__statement {
        width: 100%;
        max-width: 100%;

        margin: 24px 0 0;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1.7;
        font-weight: 600;

        color: #303B32;
    }

    /* =========================================
       SWIPEABLE THREE-STAGE LANDSCAPE
    ========================================= */

    body .biab-stages__landscape {
        position: relative;
        isolation: isolate;

        display: grid;
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 270px;

        align-items: end;
        justify-content: start;

        gap: 15px;

        width: 100%;
        height: auto;
        min-height: 420px;

        margin: 45px 0 0;
        padding: 22px 0 35px;

        box-sizing: border-box;

        overflow-x: auto;
        overflow-y: hidden;

        scroll-snap-type: x mandatory;
        scroll-padding-inline: 0;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;

        scrollbar-width: thin;
        scrollbar-color: #BC957E transparent;
    }

    body .biab-stages__landscape::-webkit-scrollbar {
        height: 4px;
    }

    body .biab-stages__landscape::-webkit-scrollbar-thumb {
        background-color: #BC957E;
        border-radius: 999px;
    }

    body .biab-stages__landscape::-webkit-scrollbar-track {
        background: transparent;
    }

    /* =========================================
       SHARED ARCHITECTURAL STAGE
    ========================================= */

    body .biab-stages__stage {
        position: relative;
        z-index: 1;

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;

        width: 270px;
        min-width: 0;
        height: 320px;
        min-height: 320px;

        margin: 0;
        padding: 55px 26px 28px;

        box-sizing: border-box;
        overflow: hidden;

        scroll-snap-align: start;

        border: 1px solid rgba(77, 68, 54, 0.07);

        box-shadow:
            0 5px 12px rgba(54, 45, 35, 0.035),
            0 18px 34px rgba(54, 45, 35, 0.075),
            inset 0 1px 0 rgba(255, 255, 255, 0.52);

        transition:
            transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
            box-shadow 400ms ease;
    }

    /* =========================================
       01 — STARTING
       SOFT SAGE
    ========================================= */

    body .biab-stages__stage--starting {
        border-radius: 0 110px 0 0;

        background-color: #DEDECF;
        background-image: linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.22) 0%,
            rgba(255, 255, 255, 0.05) 45%,
            transparent 85%
        );
    }

    /* =========================================
       02 — GROWING
       WARM STONE
    ========================================= */

    body .biab-stages__stage--growing {
        border-radius: 110px 0 0 0;

        background-color: #EADBCB;
        background-image: linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.27) 0%,
            rgba(255, 255, 255, 0.06) 45%,
            transparent 85%
        );
    }

    /* =========================================
       03 — ESTABLISHED
       LUMINOUS TERRACOTTA
    ========================================= */

    body .biab-stages__stage--established {
        height: 355px;
        min-height: 355px;

        border-radius: 115px 0 0 0;

        background-color: #C88364;
        background-image: linear-gradient(
            140deg,
            rgba(255, 238, 221, 0.23) 0%,
            rgba(207, 143, 108, 0.10) 48%,
            rgba(138, 82, 60, 0.16) 100%
        );

        border-color: rgba(130, 74, 48, 0.12);

        box-shadow:
            0 8px 18px rgba(91, 51, 37, 0.06),
            0 24px 43px rgba(91, 51, 37, 0.11),
            inset 0 1px 0 rgba(255, 241, 225, 0.35);
    }

    /* =========================================
       NUMBER AND ICON ROW
    ========================================= */

    body .biab-stages__top {
        position: relative;
        z-index: 4;

        display: flex;
        align-items: center;
        justify-content: flex-start;

        width: 100%;
        min-height: 38px;

        gap: 18px;
        margin: 0 0 27px;
        padding: 0;
    }

    body .biab-stages__number {
        flex: 0 0 auto;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1;
        font-weight: 600;

        color: #8F5B42;
    }

    body .biab-stages__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        width: 38px;
        height: 38px;
        flex: 0 0 38px;

        color: #6E5545;

        transition: transform 350ms ease;
    }

    body .biab-stages__icon svg {
        display: block;

        width: 32px;
        height: 32px;

        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;

        filter:
            drop-shadow(
                0 2px 2px rgba(60, 43, 33, 0.09)
            );
    }

    body .biab-stages__stage--established
    .biab-stages__number,
    body .biab-stages__stage--established
    .biab-stages__icon {
        color: #684332;
    }

    /* =========================================
       STAGE COPY
    ========================================= */

    body .biab-stages__copy {
        position: relative;
        z-index: 4;

        width: 100%;
        max-width: 100%;
    }

    body .biab-stages__copy h3 {
        margin: 0 0 13px;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: 21px;
        line-height: 1.3;
        font-weight: 650;
        letter-spacing: -0.038em;

        color: #1F211D;
    }

    body .biab-stages__copy p {
        margin: 0;

        font-family: "Inter", sans-serif;
        font-size: 13px;
        line-height: 1.75;
        font-weight: 400;

        color: rgba(31, 33, 29, 0.82);
    }

    body .biab-stages__stage--established
    .biab-stages__copy p {
        color: rgba(35, 28, 24, 0.88);
    }

    /* =========================================
       CONNECTING ARCHITECTURAL LINE
       Travels across the stage progression
    ========================================= */

    body .biab-stages__path {
        position: absolute;
        z-index: 3;

        top: 37px;
        left: 0;

        width: 840px;
        height: 240px;

        overflow: visible;
        pointer-events: none;
    }

    body .biab-stages__path-line {
        fill: none;

        stroke: #B58467;
        stroke-width: 1.5;
        vector-effect: non-scaling-stroke;

        opacity: 0.85;

        stroke-dasharray: 1500;
        stroke-dashoffset: 1500;

        animation:
            biabStagesDraw 1800ms
            cubic-bezier(0.22, 1, 0.36, 1)
            450ms forwards;
    }

    body .biab-stages__path-dot {
        stroke-width: 1;
        vector-effect: non-scaling-stroke;

        animation:
            biabStagesDot 700ms ease
            1100ms both;
    }

    body .biab-stages__path-dot--one {
        fill: #7D896C;
        stroke: #F5EDE4;
    }

    body .biab-stages__path-dot--two {
        fill: #784832;
        stroke: #EBC3A6;
    }

    /* =========================================
       INTERACTIONS
    ========================================= */

    @media (hover: hover) {

        body .biab-stages__stage:hover {
            transform: translateY(-4px);

            box-shadow:
                0 9px 18px rgba(54, 45, 35, 0.055),
                0 25px 43px rgba(54, 45, 35, 0.10),
                inset 0 1px 0 rgba(255, 255, 255, 0.56);
        }

        body .biab-stages__stage:hover
        .biab-stages__icon {
            transform: translateY(-3px) scale(1.05);
        }
    }

    /* =========================================
       STAGGERED ENTRANCE ANIMATIONS
    ========================================= */

    body .biab-stages__eyebrow,
    body .biab-stages__title,
    body .biab-stages__body,
    body .biab-stages__statement,
    body .biab-stages__stage {
        animation:
            biabStagesReveal 850ms
            cubic-bezier(0.22, 1, 0.36, 1)
            both;
    }

    body .biab-stages__eyebrow {
        animation-delay: 70ms;
    }

    body .biab-stages__title {
        animation-delay: 150ms;
    }

    body .biab-stages__body {
        animation-delay: 240ms;
    }

    body .biab-stages__statement {
        animation-delay: 320ms;
    }

    body .biab-stages__stage:nth-child(1) {
        animation-delay: 300ms;
    }

    body .biab-stages__stage:nth-child(2) {
        animation-delay: 420ms;
    }

    body .biab-stages__stage:nth-child(3) {
        animation-delay: 540ms;
    }
}

/* =========================================
   SMALL MOBILE — 374px AND BELOW
========================================= */

@media (max-width: 374px) {

    body .biab-stages {
        padding-top: 68px;
        padding-bottom: 72px;
    }

    body .biab-stages__inner {
        padding-left: 29px;
        padding-right: 23px;
    }

    body .biab-stages__title {
        font-size: 30px;
    }

    body .biab-stages__body,
    body .biab-stages__statement {
        font-size: 13px;
    }

    body .biab-stages__landscape {
        grid-auto-columns: 245px;
        min-height: 405px;
        margin-top: 38px;
    }

    body .biab-stages__stage {
        width: 245px;
        padding-left: 23px;
        padding-right: 23px;
    }

    body .biab-stages__copy h3 {
        font-size: 20px;
    }

    body .biab-stages__copy p {
        font-size: 12px;
    }
}

/* =========================================
   REDUCED MOTION — MOBILE
========================================= */

@media (max-width: 599px) and
       (prefers-reduced-motion: reduce) {

    body .biab-stages__eyebrow,
    body .biab-stages__title,
    body .biab-stages__body,
    body .biab-stages__statement,
    body .biab-stages__stage,
    body .biab-stages__path-line,
    body .biab-stages__path-dot {
        animation: none;
        opacity: 1;
        transform: none;
        translate: none;
    }

    body .biab-stages__path-line {
        stroke-dasharray: none;
        stroke-dashoffset: 0;
    }

    body .biab-stages__stage,
    body .biab-stages__icon {
        transition: none;
    }
}

/* =========================================================
   FRAYORA — BUSINESS-IN-A-BOX
   SECTION 05 — MOBILE CLEANUP
   599px AND BELOW

   Remove connecting line and dots
   Preserve all card styling and animations
========================================================= */

@media (max-width: 599px) {

    /* Hide complete connecting path */
    body .biab-stages__path,
    body .biab-stages__path-line,
    body .biab-stages__path-dot,
    body .biab-stages__path-dot--one,
    body .biab-stages__path-dot--two {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        animation: none !important;
    }

}

/* =========================================================
   FRAYORA — BUSINESS-IN-A-BOX
   SECTION 06 — BUILT FOR REAL TEAMS
   MOBILE ONLY: 599px AND BELOW

   Swipeable proposal cards
   Elevated ivory surfaces
   Terracotta arrows + CTA
   Subtle luminosity, shadows and animations
========================================================= */

@media (max-width: 599px) {

    /* =========================================
       SECTION BACKGROUND
    ========================================= */

    body .biab-proposal {
        position: relative;
        isolation: isolate;

        display: block;
        width: 100%;
        height: auto;
        min-height: 0;

        margin: 0;
        padding: 75px 0 85px;

        box-sizing: border-box;
        overflow: hidden;

        background-color: #F8F3EB !important;
        background-image: none !important;

        color: #1F211D;
    }

    /* =========================================
       CONTENT CONTAINER
    ========================================= */

    body .biab-proposal__inner {
        position: relative;
        z-index: 2;

        width: 100%;
        max-width: 100%;

        margin: 0 auto;
        padding: 0 28px 0 43px;

        box-sizing: border-box;
    }

    /* =========================================
       INTRODUCTION
    ========================================= */

    body .biab-proposal__intro {
        position: relative;
        z-index: 2;

        width: 100%;
        max-width: 100%;

        margin: 0;
        padding: 0;

        text-align: left;
    }

    body .biab-proposal__eyebrow {
        margin: 0 0 22px;

        font-family: "Inter", sans-serif;
        font-size: 11px;
        line-height: 1.4;
        font-weight: 600;

        letter-spacing: 0.16em;
        text-transform: uppercase;

        color: #AD7258;
    }

    body .biab-proposal__title {
        width: 100%;
        max-width: 100%;

        margin: 0;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: clamp(31px, 8vw, 43px);
        line-height: 1.16;
        font-weight: 600;
        letter-spacing: -0.047em;

        color: #1F211D;
        text-wrap: balance;
    }

    body .biab-proposal__body {
        width: 100%;
        max-width: 100%;

        margin: 25px 0 0;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1.75;
        font-weight: 400;

        color: rgba(31, 33, 29, 0.78);
    }

    body .biab-proposal__statement {
        width: 100%;
        max-width: 100%;

        margin: 23px 0 0;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1.7;
        font-weight: 600;

        color: #303B32;
    }

    /* =========================================
       HORIZONTAL SWIPEABLE CARDS
    ========================================= */

    body .biab-proposal__steps {
        position: relative;
        z-index: 2;

        display: grid;
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 270px);

        align-items: stretch;
        justify-content: start;

        gap: 35px;

        width: 100%;
        max-width: 100%;

        margin: 43px 0 0;
        padding: 10px 3px 30px;

        box-sizing: border-box;

        overflow-x: auto;
        overflow-y: hidden;

        scroll-snap-type: x mandatory;
        scroll-padding-inline: 3px;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;

        scrollbar-width: thin;
        scrollbar-color: #C6A38D transparent;
    }

    body .biab-proposal__steps::-webkit-scrollbar {
        height: 4px;
    }

    body .biab-proposal__steps::-webkit-scrollbar-track {
        background: transparent;
    }

    body .biab-proposal__steps::-webkit-scrollbar-thumb {
        background: #C6A38D;
        border-radius: 999px;
    }

    /* =========================================
       ELEVATED GLASS-LIKE CARDS
    ========================================= */

    body .biab-proposal__card {
        position: relative;

        display: flex;
        flex-direction: column;

        width: 270px;
        min-width: 0;
        min-height: 350px;
        height: auto;

        margin: 0;
        padding: 29px 25px 32px;

        box-sizing: border-box;
        overflow: visible;

        scroll-snap-align: start;

        background-color: #FCFAF7;

        background-image: linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.62) 0%,
            rgba(255, 255, 255, 0.20) 43%,
            transparent 80%
        );

        border: 1px solid rgba(94, 74, 58, 0.07);
        border-radius: 16px;

        box-shadow:
            0 5px 12px rgba(54, 45, 35, 0.04),
            0 18px 36px rgba(54, 45, 35, 0.085),
            inset 0 1px 0 rgba(255, 255, 255, 0.88);

        transition:
            transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
            box-shadow 400ms ease;
    }

    /* =========================================
       CONNECTING ARROWS
    ========================================= */

    body .biab-proposal__card:not(:last-child)::after {
        content: "→";

        position: absolute;
        z-index: 4;

        display: block;

        top: 50%;
        right: -28px;

        transform: translateY(-50%);

        font-family: "Inter", sans-serif;
        font-size: 26px;
        line-height: 1;
        font-weight: 300;

        color: #98664D;
        pointer-events: none;
    }

    /* =========================================
       NUMBER + ICON
    ========================================= */

    body .biab-proposal__card-top {
        display: flex;
        align-items: center;
        justify-content: flex-start;

        gap: 16px;

        width: 100%;
        margin: 0 0 26px;
        padding: 0;
    }

    body .biab-proposal__number {
        flex: 0 0 auto;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1;
        font-weight: 600;

        color: #98664D;
    }

    body .biab-proposal__icon {
        display: flex;
        align-items: center;
        justify-content: center;

        flex: 0 0 65px;
        width: 65px;
        height: 65px;

        box-sizing: border-box;
        border-radius: 50%;

        background-color: #F1E2D4;

        background-image: linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.36),
            transparent 72%
        );

        border: 1px solid rgba(178, 133, 102, 0.10);

        box-shadow:
            0 4px 10px rgba(66, 46, 34, 0.045),
            0 15px 27px rgba(66, 46, 34, 0.075),
            inset 0 1px 0 rgba(255, 255, 255, 0.75);

        transition:
            transform 350ms ease,
            box-shadow 350ms ease;
    }

    body .biab-proposal__icon svg {
        display: block;

        width: 29px;
        height: 29px;

        stroke: #594B3D;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;

        filter:
            drop-shadow(
                0 2px 1px rgba(60, 43, 33, 0.08)
            );
    }

    /* =========================================
       CARD TYPOGRAPHY
    ========================================= */

    body .biab-proposal__card h3 {
        margin: 0 0 15px;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: 19px;
        line-height: 1.38;
        font-weight: 650;
        letter-spacing: -0.035em;

        color: #1F211D;
    }

    body .biab-proposal__card p {
        margin: 0;

        font-family: "Inter", sans-serif;
        font-size: 13px;
        line-height: 1.75;
        font-weight: 400;

        color: rgba(31, 33, 29, 0.76);
    }

    /* =========================================
       CLOSING CTA PANEL
    ========================================= */

    body .biab-proposal__closing {
        position: relative;
        z-index: 2;

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;

        gap: 24px;

        width: 100%;
        min-height: 0;

        margin: 25px 0 0;
        padding: 28px 24px 30px;

        box-sizing: border-box;

        background-color: #FCFAF7;

        background-image: linear-gradient(
            150deg,
            rgba(255, 255, 255, 0.58),
            transparent 78%
        );

        border: 1px solid rgba(94, 74, 58, 0.06);
        border-radius: 16px;

        box-shadow:
            0 5px 12px rgba(54, 45, 35, 0.04),
            0 18px 37px rgba(54, 45, 35, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.90);
    }

    body .biab-proposal__closing p {
        width: 100%;
        margin: 0;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: 18px;
        line-height: 1.5;
        font-weight: 600;
        letter-spacing: -0.025em;

        color: #1F211D;
    }

    /* =========================================
       TERRACOTTA BUTTON
    ========================================= */

    body .biab-proposal__button {
        position: relative;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        align-self: flex-start;
        flex: 0 1 auto;

        gap: 12px;

        width: fit-content;
        max-width: 100%;
        min-height: 52px;

        margin: 0;
        padding: 15px 20px;

        box-sizing: border-box;

        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 999px;

        background-color: #C96743;
        background-image: none;

        color: #FFFFFF;

        font-family: "Inter", sans-serif;
        font-size: 12px;
        line-height: 1.4;
        font-weight: 600;

        text-align: center;
        text-decoration: none;

        box-shadow:
            0 6px 14px rgba(91, 51, 37, 0.14),
            0 17px 30px rgba(91, 51, 37, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.16);

        transition:
            transform 300ms ease,
            background-color 300ms ease,
            box-shadow 300ms ease;
    }

    body .biab-proposal__button span {
        display: inline-block;
        flex: 0 0 auto;

        font-size: 19px;
        line-height: 1;

        transition: transform 300ms ease;
    }

    body .biab-proposal__button:hover {
        background-color: #B95635;
        transform: translateY(-3px);

        box-shadow:
            0 9px 18px rgba(91, 51, 37, 0.17),
            0 21px 36px rgba(91, 51, 37, 0.17);
    }

    body .biab-proposal__button:hover span {
        transform: translateX(4px);
    }

    body .biab-proposal__button:focus-visible {
        outline: 2px solid #C96743;
        outline-offset: 4px;
    }

    /* =========================================
       TOP-RIGHT ARCHITECTURAL CURVES
    ========================================= */

    body .biab-proposal__decoration {
        position: absolute;
        z-index: 0;

        top: -145px;
        right: -125px;

        width: 300px;
        height: 215px;

        overflow: hidden;
        pointer-events: none;
    }

    body .biab-proposal__arc {
        position: absolute;
        display: block;

        width: 350px;
        height: 255px;

        box-sizing: border-box;

        border: 1px solid rgba(201, 103, 67, 0.22);
        border-radius: 50%;

        background: transparent;
    }

    body .biab-proposal__arc--one {
        top: 5px;
        left: 0;

        transform: rotate(-21deg);
    }

    body .biab-proposal__arc--two {
        top: 48px;
        left: 65px;

        transform: rotate(-15deg);
        border-color: rgba(201, 103, 67, 0.14);
    }

    /* =========================================
       SUBTLE INTERACTIONS
    ========================================= */

    @media (hover: hover) {

        body .biab-proposal__card:hover {
            transform: translateY(-4px);

            box-shadow:
                0 8px 18px rgba(54, 45, 35, 0.06),
                0 25px 45px rgba(54, 45, 35, 0.11),
                inset 0 1px 0 rgba(255, 255, 255, 0.90);
        }

        body .biab-proposal__card:hover
        .biab-proposal__icon {
            transform: translateY(-3px);

            box-shadow:
                0 7px 14px rgba(66, 46, 34, 0.06),
                0 19px 31px rgba(66, 46, 34, 0.09),
                inset 0 1px 0 rgba(255, 255, 255, 0.82);
        }
    }

    /* =========================================
       STAGGERED ENTRANCE ANIMATIONS
       Uses existing desktop keyframes
    ========================================= */

    body .biab-proposal__eyebrow,
    body .biab-proposal__title,
    body .biab-proposal__body,
    body .biab-proposal__statement,
    body .biab-proposal__card,
    body .biab-proposal__closing {
        animation:
            biabProposalReveal 850ms
            cubic-bezier(0.22, 1, 0.36, 1)
            both;
    }

    body .biab-proposal__eyebrow {
        animation-delay: 70ms;
    }

    body .biab-proposal__title {
        animation-delay: 150ms;
    }

    body .biab-proposal__body {
        animation-delay: 230ms;
    }

    body .biab-proposal__statement {
        animation-delay: 310ms;
    }

    body .biab-proposal__card:nth-child(1) {
        animation-delay: 320ms;
    }

    body .biab-proposal__card:nth-child(2) {
        animation-delay: 420ms;
    }

    body .biab-proposal__card:nth-child(3) {
        animation-delay: 520ms;
    }

    body .biab-proposal__closing {
        animation-delay: 600ms;
    }
}

/* =========================================
   SMALL MOBILE — 374px AND BELOW
========================================= */

@media (max-width: 374px) {

    body .biab-proposal {
        padding-top: 68px;
        padding-bottom: 75px;
    }

    body .biab-proposal__inner {
        padding-left: 29px;
        padding-right: 23px;
    }

    body .biab-proposal__title {
        font-size: 30px;
    }

    body .biab-proposal__body,
    body .biab-proposal__statement {
        font-size: 13px;
    }

    body .biab-proposal__steps {
        grid-auto-columns: 245px;
        gap: 29px;
    }

    body .biab-proposal__card {
        width: 245px;
        min-height: 370px;

        padding: 27px 22px 30px;
    }

    body .biab-proposal__card h3 {
        font-size: 18px;
    }

    body .biab-proposal__card p {
        font-size: 12px;
    }

    body .biab-proposal__card:not(:last-child)::after {
        right: -24px;
    }

    body .biab-proposal__closing {
        padding: 25px 20px 28px;
    }

    body .biab-proposal__closing p {
        font-size: 16px;
    }

    body .biab-proposal__button {
        font-size: 11px;
        padding: 14px 16px;
        gap: 8px;
    }
}

/* =========================================
   ACCESSIBILITY — REDUCED MOTION
========================================= */

@media (max-width: 599px) and
       (prefers-reduced-motion: reduce) {

    body .biab-proposal__eyebrow,
    body .biab-proposal__title,
    body .biab-proposal__body,
    body .biab-proposal__statement,
    body .biab-proposal__card,
    body .biab-proposal__closing {
        animation: none;
        opacity: 1;
        transform: none;
        translate: none;
    }

    body .biab-proposal__card,
    body .biab-proposal__icon,
    body .biab-proposal__button,
    body .biab-proposal__button span {
        transition: none;
    }
}



/* =========================================================
   FRAYORA — BUSINESS-IN-A-BOX
   SECTION 07 — FINAL CTA
   MOBILE ONLY: 599px AND BELOW

   Centered editorial composition
   Warm ivory + subtle terracotta luminosity
   Dimensional button and staggered motion
========================================================= */

@media (max-width: 599px) {

    /* =========================================
       SECTION BACKGROUND
    ========================================= */

    body .biab-final-cta {
        position: relative;
        isolation: isolate;

        display: block;
        width: 100%;
        height: auto;
        min-height: 0;

        margin: 0;
        padding: 0;
        box-sizing: border-box;

        overflow: hidden;

        background-color: #FAF5EF !important;

        background-image:
            radial-gradient(
                ellipse 115% 90% at 50% 48%,
                rgba(201, 103, 67, 0.105) 0%,
                rgba(201, 103, 67, 0.065) 38%,
                rgba(201, 103, 67, 0.025) 68%,
                transparent 95%
            ) !important;

        background-position: center center !important;
        background-repeat: no-repeat !important;

        color: #1F211D;
    }

    /* =========================================
       SUBTLE SURFACE DEPTH
    ========================================= */

    body .biab-final-cta::before {
        content: "";

        position: absolute;
        inset: 0;
        z-index: 0;

        pointer-events: none;

        background: none;

        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.72),
            inset 0 17px 34px -35px
                rgba(87, 65, 47, 0.09);
    }

    /* =========================================
       CENTERED CONTENT CONTAINER
    ========================================= */

    body .biab-final-cta__inner {
        position: relative;
        z-index: 2;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        max-width: 100%;
        min-height: 0;

        margin: 0 auto;
        padding: 85px 28px 90px;

        box-sizing: border-box;
    }

    body .biab-final-cta__content {
        width: 100%;
        max-width: 480px;

        margin: 0 auto;
        padding: 0;

        text-align: center;
    }

    /* =========================================
       EYEBROW
    ========================================= */

    body .biab-final-cta__eyebrow {
        margin: 0 0 25px;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 11px;
        line-height: 1.4;
        font-weight: 600;

        letter-spacing: 0.16em;
        text-transform: uppercase;

        color: #C96743;
        text-align: center;
    }

    /* =========================================
       MAIN HEADING
    ========================================= */

    body .biab-final-cta__title {
        width: 100%;
        max-width: 100%;

        margin: 0 auto;
        padding: 0;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: clamp(37px, 9vw, 48px);
        line-height: 1.12;
        font-weight: 600;
        letter-spacing: -0.05em;

        color: #1F211D;

        text-align: center;
        text-wrap: balance;
    }

    /* =========================================
       BODY DESCRIPTION
    ========================================= */

    body .biab-final-cta__body {
        width: 100%;
        max-width: 420px;

        margin: 27px auto 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1.8;
        font-weight: 400;

        color: rgba(31, 33, 29, 0.78);

        text-align: center;
    }

    /* =========================================
       SUPPORTING STATEMENT
    ========================================= */

    body .biab-final-cta__support {
        width: 100%;
        max-width: 410px;

        margin: 22px auto 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1.7;
        font-weight: 500;

        color: #303B32;

        text-align: center;
    }

    /* =========================================
       TERRACOTTA CTA BUTTON
    ========================================= */

    body .biab-final-cta__button {
        position: relative;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        gap: 13px;

        width: fit-content;
        max-width: 100%;
        min-height: 54px;

        margin: 34px auto 0;
        padding: 16px 27px;

        box-sizing: border-box;

        border: 1px solid rgba(255, 255, 255, 0.17);
        border-radius: 999px;

        background-color: #C96743;
        background-image: none;

        color: #FFFFFF;

        font-family: "Inter", sans-serif;
        font-size: 13px;
        line-height: 1.2;
        font-weight: 600;

        text-align: center;
        text-decoration: none;

        box-shadow:
            0 6px 14px rgba(170, 98, 69, 0.15),
            0 18px 34px rgba(170, 98, 69, 0.17),
            inset 0 1px 0 rgba(255, 255, 255, 0.18);

        transition:
            background-color 300ms ease,
            transform 300ms ease,
            box-shadow 300ms ease;
    }

    body .biab-final-cta__button span {
        display: inline-block;
        flex: 0 0 auto;

        font-size: 20px;
        line-height: 1;

        transition: transform 300ms ease;
    }

    body .biab-final-cta__button:hover {
        background-color: #B95635;
        transform: translateY(-3px);

        box-shadow:
            0 9px 19px rgba(170, 98, 69, 0.18),
            0 21px 40px rgba(170, 98, 69, 0.19),
            inset 0 1px 0 rgba(255, 255, 255, 0.18);
    }

    body .biab-final-cta__button:hover span {
        transform: translateX(4px);
    }

    body .biab-final-cta__button:focus-visible {
        outline: 2px solid #C96743;
        outline-offset: 4px;
    }

    /* =========================================
       STAGGERED ENTRANCE ANIMATIONS
       Reuses desktop keyframes
    ========================================= */

    body .biab-final-cta__eyebrow,
    body .biab-final-cta__title,
    body .biab-final-cta__body,
    body .biab-final-cta__support,
    body .biab-final-cta__button {
        animation:
            biabFinalReveal 850ms
            cubic-bezier(0.22, 1, 0.36, 1)
            both;
    }

    body .biab-final-cta__eyebrow {
        animation-delay: 80ms;
    }

    body .biab-final-cta__title {
        animation-delay: 170ms;
    }

    body .biab-final-cta__body {
        animation-delay: 270ms;
    }

    body .biab-final-cta__support {
        animation-delay: 370ms;
    }

    body .biab-final-cta__button {
        animation-delay: 470ms;
    }
}

/* =========================================
   SMALL MOBILE — 374px AND BELOW
========================================= */

@media (max-width: 374px) {

    body .biab-final-cta__inner {
        padding: 75px 23px 80px;
    }

    body .biab-final-cta__eyebrow {
        margin-bottom: 21px;
        font-size: 10px;
    }

    body .biab-final-cta__title {
        font-size: 34px;
        line-height: 1.14;
    }

    body .biab-final-cta__body {
        margin-top: 24px;
        font-size: 13px;
    }

    body .biab-final-cta__support {
        font-size: 13px;
    }

    body .biab-final-cta__button {
        margin-top: 30px;
        padding: 15px 24px;
    }
}

/* =========================================
   ACCESSIBILITY — REDUCED MOTION
========================================= */

@media (max-width: 599px) and
       (prefers-reduced-motion: reduce) {

    body .biab-final-cta__eyebrow,
    body .biab-final-cta__title,
    body .biab-final-cta__body,
    body .biab-final-cta__support,
    body .biab-final-cta__button {
        animation: none;
        opacity: 1;
        transform: none;
        translate: none;
    }

    body .biab-final-cta__button,
    body .biab-final-cta__button span {
        transition: none;
    }
}



/* =========================================================
   FRAYORA — WEBSITE & DIGITAL INFRASTRUCTURE
   SECTION 01 — DESKTOP HERO SIZE FIX
   1101px AND ABOVE

   Same 600px hero as Our Approach
   Preserves glass visual, shadows and animations
========================================================= */

@media (min-width: 1101px) {

    /* HERO — EXACT HEIGHT */

    body .digital-hero {
        position: relative;
        isolation: isolate;

        display: block;
        width: 100%;
        height: 600px;
        min-height: 600px;
        max-height: 600px;

        margin: 0;
        padding: 0;
        box-sizing: border-box;
        overflow: hidden;

        background-color: #283429 !important;
        background-image:
            url("../images/Business in a box/herodesktop.png") !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;

        color: #F8F3EB;
    }

    /* OLIVE CONTRAST */

    body .digital-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;

        background: linear-gradient(
            90deg,
            rgba(17, 26, 18, 0.34) 0%,
            rgba(17, 26, 18, 0.20) 34%,
            rgba(17, 26, 18, 0.04) 65%,
            transparent 90%
        );
    }

    /* SUBTLE LUMINOSITY */

    body .digital-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;

        background: linear-gradient(
            115deg,
            transparent 38%,
            rgba(255, 250, 235, 0.012) 58%,
            rgba(255, 250, 235, 0.045) 82%,
            rgba(255, 250, 235, 0.012) 100%
        );

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.08),
            inset 0 -20px 40px -45px rgba(0,0,0,0.20);
    }

    /* CONTENT LAYOUT */

    body .digital-hero__inner {
        position: relative;
        z-index: 2;

        display: grid;
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 0.94fr);

        column-gap: 35px;
        align-items: center;

        width: 100%;
        max-width: 1600px;

        height: 600px;
        min-height: 600px;

        margin: 0 auto;
        padding: 42px 80px;
        box-sizing: border-box;
    }

    /* LEFT CONTENT */

    body .digital-hero__content {
        position: relative;
        z-index: 4;

        width: 100%;
        min-width: 0;
        max-width: 650px;

        margin: 0;
        padding: 0;

        text-align: left;
    }

    /* EYEBROW */

    body .digital-hero__eyebrow {
        margin: 0 0 25px;

        font-family: "Inter", sans-serif;
        font-size: 12px;
        line-height: 1.3;
        font-weight: 600;
        letter-spacing: 0.17em;
        text-transform: uppercase;

        color: #E8D8C0;
    }

    /* HEADING — MATCH OTHER SERVICE HEROES */

    body .digital-hero__title {
        width: 100%;
        max-width: 650px;

        margin: 0;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: clamp(43px, 3.7vw, 59px);
        line-height: 1.12;
        font-weight: 600;
        letter-spacing: -0.048em;

        color: #F8F3EB;
        text-wrap: balance;

        text-shadow: 0 3px 18px rgba(0,0,0,0.13);
    }

    /* DESCRIPTION */

    body .digital-hero__body {
        width: 100%;
        max-width: 570px;

        margin: 27px 0 0;

        font-family: "Inter", sans-serif;
        font-size: 15px;
        line-height: 1.7;
        font-weight: 400;

        color: rgba(248,243,235,0.92);

        text-shadow: 0 2px 8px rgba(0,0,0,0.12);
    }

    /* SUPPORTING COPY */

    body .digital-hero__statement {
        width: 100%;
        max-width: 590px;

        margin: 22px 0 0;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1.6;
        font-weight: 500;

        color: #F8F3EB;
    }

    /* BUTTON */

    body .digital-hero__button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 14px;

        width: fit-content;
        max-width: 100%;
        min-height: 52px;

        margin: 27px 0 0;
        padding: 15px 27px;

        box-sizing: border-box;

        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 999px;

        background-color: #C96743;
        color: #FFFFFF;

        font-family: "Inter", sans-serif;
        font-size: 13px;
        line-height: 1.2;
        font-weight: 600;
        text-decoration: none;

        box-shadow:
            0 5px 12px rgba(11,20,13,0.13),
            0 16px 30px rgba(11,20,13,0.18),
            inset 0 1px 0 rgba(255,255,255,0.14);

        transition:
            transform 280ms ease,
            background-color 280ms ease,
            box-shadow 280ms ease;
    }

    body .digital-hero__button span {
        display: inline-block;
        font-size: 19px;
        line-height: 1;

        transition: transform 280ms ease;
    }

    body .digital-hero__button:hover {
        background-color: #D57450;
        transform: translateY(-3px);

        box-shadow:
            0 8px 16px rgba(11,20,13,0.16),
            0 20px 38px rgba(11,20,13,0.23);
    }

    body .digital-hero__button:hover span {
        transform: translateX(4px);
    }

    body .digital-hero__button:focus-visible {
        outline: 2px solid #F8F3EB;
        outline-offset: 4px;
    }

        /* FLOATING GLASS WEBSITE VISUAL */

    body .digital-hero__visual {
        position: relative;
        z-index: 3;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        min-width: 0;
        height: 560px;
        top: -25px;

        margin: 0;
        padding: 0;

        pointer-events: none;

        /* Move the composition left toward the text */
        left: -45px;

        filter:
            drop-shadow(0 16px 28px rgba(5, 15, 8, 0.15))
            drop-shadow(0 34px 54px rgba(5, 15, 8, 0.20));

        animation:
            digitalHeroVisualReveal 1000ms
            cubic-bezier(0.22, 1, 0.36, 1)
            250ms both;
    }

    body .digital-hero__visual img {
        display: block;

        /* Allow illustration to extend beyond grid column */
        width: 560px;
        min-width: 0;
        max-width: none;
        max-height: none;
        height: auto;

        object-fit: contain;

        filter:
            brightness(1.03)
            contrast(1.02);

        animation:
            digitalHeroFloat 7s
            ease-in-out 1.3s infinite;
    }
    
    

    /* STAGGERED ENTRANCE */

    body .digital-hero__eyebrow,
    body .digital-hero__title,
    body .digital-hero__body,
    body .digital-hero__statement,
    body .digital-hero__button {
        animation:
            digitalHeroReveal 850ms
            cubic-bezier(0.22,1,0.36,1)
            both;
    }

    body .digital-hero__eyebrow   { animation-delay: 80ms; }
    body .digital-hero__title     { animation-delay: 170ms; }
    body .digital-hero__body      { animation-delay: 270ms; }
    body .digital-hero__statement { animation-delay: 370ms; }
    body .digital-hero__button    { animation-delay: 470ms; }
}

/* ANIMATIONS */

@keyframes digitalHeroReveal {
    from {
        opacity: 0;
        translate: 0 22px;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}

@keyframes digitalHeroVisualReveal {
    from {
        opacity: 0;
        translate: 15px 22px;
        scale: 0.96;
    }
    to {
        opacity: 1;
        translate: 0 0;
        scale: 1;
    }
}

@keyframes digitalHeroFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-9px);
    }
}

/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {
    body .digital-hero__eyebrow,
    body .digital-hero__title,
    body .digital-hero__body,
    body .digital-hero__statement,
    body .digital-hero__button,
    body .digital-hero__visual,
    body .digital-hero__visual img {
        animation: none;
        opacity: 1;
        translate: none;
        scale: 1;
        transform: none;
    }
}



/* =========================================================
   FRAYORA — WEBSITE & DIGITAL INFRASTRUCTURE
   SECTION 02 — WHAT WE DESIGN
   DESKTOP: 1101px+

   Asymmetric editorial layout
   Four distinct service icons
   Soft ivory background
   Terracotta architectural linework
   Bond-inspired depth and subtle animations
========================================================= */

@media (min-width: 1101px) {

    /* =========================================
       SECTION BACKGROUND
    ========================================= */

    body .digital-design {
        position: relative;
        isolation: isolate;

        width: 100%;
        min-height: 670px;

        margin: 0;
        padding: 110px 0 125px;

        box-sizing: border-box;
        overflow: hidden;

        background-color: #F8F3EB !important;
        background-image: none !important;

        color: #1F211D;
    }

    /* =========================================
       MAIN CONTENT GRID
    ========================================= */

    body .digital-design__inner {
        position: relative;
        z-index: 2;

        display: grid;

        grid-template-columns:
            minmax(0, 0.90fr)
            minmax(0, 1.25fr);

        column-gap: 95px;
        align-items: start;

        width: 100%;
        max-width: 1600px;

        margin: 0 auto;
        padding: 0 80px;

        box-sizing: border-box;
    }

    /* =========================================
       LEFT INTRO
    ========================================= */

    body .digital-design__intro {
        position: relative;

        width: 100%;
        max-width: 570px;

        padding-top: 30px;
    }

    /* EYEBROW */

    body .digital-design__eyebrow {
        margin: 0 0 26px;

        font-family: "Inter", sans-serif;
        font-size: 12px;
        line-height: 1.3;
        font-weight: 600;

        letter-spacing: 0.16em;
        text-transform: uppercase;

        color: #AD7258;
    }

    /* HEADING */

    body .digital-design__title {
        width: 100%;
        max-width: 565px;

        margin: 0;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: clamp(37px, 3.2vw, 49px);
        line-height: 1.16;
        font-weight: 600;

        letter-spacing: -0.047em;

        color: #1F211D;

        text-wrap: balance;
    }

    /* BODY */

    body .digital-design__body {
        width: 100%;
        max-width: 530px;

        margin: 29px 0 0;

        font-family: "Inter", sans-serif;
        font-size: 15px;
        line-height: 1.75;
        font-weight: 400;

        color: rgba(31, 33, 29, 0.78);
    }

    /* =========================================
       RIGHT SERVICE GRID
    ========================================= */

    body .digital-design__grid {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        column-gap: 70px;
        row-gap: 66px;

        align-items: start;
    }

    /* =========================================
       SERVICE ITEM
    ========================================= */

    body .digital-design__item {
        position: relative;

        min-width: 0;
        margin: 0;
        padding: 0;

        background: transparent;
        border: none;
        box-shadow: none;

        transition:
            transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* =========================================
       NUMBER AND ICON
    ========================================= */

    body .digital-design__top {
        display: flex;
        align-items: center;

        gap: 18px;

        min-height: 94px;
        margin-bottom: 20px;
    }

    body .digital-design__number {
        flex: 0 0 auto;

        font-family: "Inter", sans-serif;
        font-size: 15px;
        line-height: 1;
        font-weight: 600;

        letter-spacing: -0.02em;

        color: #98664D;
    }

    /* =========================================
       DIMENSIONAL ICON CIRCLES
    ========================================= */

    body .digital-design__icon {
        position: relative;

        display: flex;
        align-items: center;
        justify-content: center;

        flex: 0 0 88px;

        width: 88px;
        height: 88px;

        box-sizing: border-box;
        border-radius: 50%;

        background:
            linear-gradient(
                145deg,
                #F8ECE1 0%,
                #F1E2D4 60%,
                #EBD8C9 100%
            );

        border: 1px solid rgba(178, 133, 102, 0.12);

        box-shadow:
            0 5px 12px rgba(75, 49, 34, 0.045),
            0 18px 30px rgba(75, 49, 34, 0.07),
            inset 0 2px 1px rgba(255,255,255,0.75),
            inset 0 -5px 12px rgba(136,91,62,0.045);

        transition:
            transform 450ms cubic-bezier(0.22,1,0.36,1),
            background 450ms ease,
            box-shadow 450ms ease;
    }

    /* VERY SUBTLE SURFACE HIGHLIGHT */

    body .digital-design__icon::before {
        content: "";

        position: absolute;
        inset: 4px;

        border-radius: 50%;

        border: 1px solid rgba(255,255,255,0.42);

        pointer-events: none;
    }

    /* =========================================
       SVG LINE ART
    ========================================= */

    body .digital-design__icon svg {
        position: relative;
        z-index: 2;

        display: block;

        width: 38px;
        height: 38px;

        color: #655141;
        stroke: currentColor;
        stroke-width: 1.6;

        stroke-linecap: round;
        stroke-linejoin: round;

        filter:
            drop-shadow(0 2px 2px rgba(61,42,30,0.10));

        transition:
            transform 450ms ease;
    }

    /* =========================================
       SERVICE TYPOGRAPHY
    ========================================= */

    body .digital-design__item h3 {
        margin: 0 0 14px;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: 19px;
        line-height: 1.35;
        font-weight: 650;

        letter-spacing: -0.035em;

        color: #1F211D;
    }

    body .digital-design__item p {
        margin: 0;

        font-family: "Inter", sans-serif;
        font-size: 13px;
        line-height: 1.72;
        font-weight: 400;

        color: rgba(31,33,29,0.76);
    }

    /* =========================================
       ARCHITECTURAL LINE ART
       Bottom-left, as on Business-in-a-Box
    ========================================= */

    body .digital-design__art {
        position: absolute;
        z-index: 0;

        left: -235px;
        bottom: -360px;

        width: 800px;
        height: 540px;

        pointer-events: none;
        overflow: hidden;
    }

    body .digital-design__arc {
        position: absolute;
        display: block;

        width: 880px;
        height: 590px;

        box-sizing: border-box;

        border: 1.2px solid rgba(201,103,67,0.20);
        border-radius: 50%;

        background: transparent;
    }

    body .digital-design__arc--one {
        left: -200px;
        top: 95px;

        transform: rotate(23deg);

        border-color: rgba(201,103,67,0.26);
    }

    body .digital-design__arc--two {
        left: -95px;
        top: 130px;

        transform: rotate(18deg);

        border-color: rgba(201,103,67,0.20);
    }

    body .digital-design__arc--three {
        left: 10px;
        top: 180px;

        transform: rotate(13deg);

        border-color: rgba(201,103,67,0.15);
    }

    /* =========================================
       HOVER INTERACTIONS
    ========================================= */

    @media (hover: hover) {

        body .digital-design__item:hover {
            transform: translateY(-5px);
        }

        body .digital-design__item:hover
        .digital-design__icon {
            transform: translateY(-5px) scale(1.04);

            box-shadow:
                0 8px 16px rgba(75,49,34,0.055),
                0 24px 38px rgba(75,49,34,0.10),
                inset 0 2px 1px rgba(255,255,255,0.85);
        }

        body .digital-design__item:hover svg {
            transform: scale(1.08);
        }
    }

    /* =========================================
       STAGGERED ENTRANCE
    ========================================= */

    body .digital-design__eyebrow,
    body .digital-design__title,
    body .digital-design__body,
    body .digital-design__item {
        animation:
            digitalDesignReveal 850ms
            cubic-bezier(0.22,1,0.36,1)
            both;
    }

    body .digital-design__eyebrow {
        animation-delay: 80ms;
    }

    body .digital-design__title {
        animation-delay: 170ms;
    }

    body .digital-design__body {
        animation-delay: 270ms;
    }

    body .digital-design__item:nth-child(1) {
        animation-delay: 190ms;
    }

    body .digital-design__item:nth-child(2) {
        animation-delay: 290ms;
    }

    body .digital-design__item:nth-child(3) {
        animation-delay: 390ms;
    }

    body .digital-design__item:nth-child(4) {
        animation-delay: 490ms;
    }
}

/* =========================================
   ANIMATION KEYFRAMES
========================================= */

@keyframes digitalDesignReveal {
    from {
        opacity: 0;
        translate: 0 25px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

/* =========================================
   ACCESSIBILITY — REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    body .digital-design__eyebrow,
    body .digital-design__title,
    body .digital-design__body,
    body .digital-design__item {
        animation: none;
        opacity: 1;
        translate: none;
    }

    body .digital-design__item,
    body .digital-design__icon,
    body .digital-design__icon svg {
        transition: none;
    }
}



/* =========================================================
   FRAYORA — WEBSITE & DIGITAL INFRASTRUCTURE
   SECTION 03 — THE IMPACT
   DESKTOP: 1101px+

   Four elevated editorial cards
   Distinct illustrated visual identities
   Ivory surface, luminous depth
   Soft shadows and staggered motion
========================================================= */

@media (min-width: 1101px) {

    /* =========================================
       SECTION
    ========================================= */

    body .digital-benefits {
        position: relative;
        isolation: isolate;

        width: 100%;
        min-height: 650px;

        margin: 0;
        padding: 105px 0 120px;

        box-sizing: border-box;
        overflow: hidden;

        background-color: #F5EDE4 !important;
        background-image: none !important;

        color: #1F211D;
    }

    /* =========================================
       MAIN CONTAINER
    ========================================= */

    body .digital-benefits__inner {
        position: relative;
        z-index: 2;

        width: 100%;
        max-width: 1600px;

        margin: 0 auto;
        padding: 0 80px;

        box-sizing: border-box;
    }

    /* =========================================
       HEADING AREA
    ========================================= */

    body .digital-benefits__intro {
        width: 100%;
        max-width: 1050px;

        margin: 0 0 55px;
    }

    /* EYEBROW */

    body .digital-benefits__eyebrow {
        margin: 0 0 24px;

        font-family: "Inter", sans-serif;
        font-size: 12px;
        line-height: 1.3;
        font-weight: 600;

        letter-spacing: 0.16em;
        text-transform: uppercase;

        color: #AD7258;
    }

    /* HEADING */

    body .digital-benefits__title {
        width: 100%;
        max-width: 850px;

        margin: 0;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: clamp(38px, 3.2vw, 49px);
        line-height: 1.14;
        font-weight: 600;

        letter-spacing: -0.047em;

        color: #1F211D;
        text-wrap: balance;
    }

    /* =========================================
       FOUR-CARD GRID
    ========================================= */

    body .digital-benefits__grid {
        display: grid;

        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        column-gap: 24px;

        align-items: stretch;
    }

    /* =========================================
       CARD SURFACE
    ========================================= */

    body .digital-benefits__card {
        position: relative;
        isolation: isolate;

        display: flex;
        flex-direction: column;

        min-width: 0;
        min-height: 315px;

        margin: 0;
        padding: 27px 25px 32px;

        box-sizing: border-box;

        border: 1px solid rgba(255,255,255,0.52);
        border-radius: 15px;

        background-color: #FBF8F4;

        background-image:
            linear-gradient(
                135deg,
                rgba(255,255,255,0.70) 0%,
                rgba(255,255,255,0.20) 54%,
                transparent 100%
            );

        box-shadow:
            0 6px 16px rgba(77,57,43,0.035),
            0 20px 45px rgba(77,57,43,0.07),
            0 40px 72px rgba(77,57,43,0.035),
            inset 0 1px 0 rgba(255,255,255,0.84);

        transition:
            transform 450ms cubic-bezier(0.22,1,0.36,1),
            box-shadow 450ms ease,
            border-color 450ms ease;
    }

    /* =========================================
       SMALL NUMBER
    ========================================= */

    body .digital-benefits__number {
        position: absolute;
        top: 27px;
        right: 26px;

        font-family: "Inter", sans-serif;
        font-size: 12px;
        line-height: 1;
        font-weight: 600;

        letter-spacing: 0.04em;

        color: #AD7258;
    }

    /* =========================================
       ICON STAGE
    ========================================= */

    body .digital-benefits__visual {
        position: relative;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        height: 126px;

        margin: 0 0 24px;

        border-radius: 12px;

        background:
            radial-gradient(
                ellipse 75% 75% at 50% 55%,
                rgba(235,213,195,0.34),
                transparent 78%
            );

        transition:
            transform 450ms cubic-bezier(0.22,1,0.36,1);
    }

    body .digital-benefits__visual svg {
        display: block;

        width: 115px;
        height: 100px;

        overflow: visible;

        filter:
            drop-shadow(0 7px 10px rgba(95,66,47,0.12));

        transition:
            transform 450ms ease,
            filter 450ms ease;
    }

    /* =========================================
       UNIQUE VISUAL TREATMENTS
    ========================================= */

    body .digital-benefits__visual--navigation svg {
        transform: rotate(-3deg);
    }

    body .digital-benefits__visual--structure svg {
        transform: perspective(500px) rotateY(-7deg);
    }

    body .digital-benefits__visual--mobile svg {
        transform: rotate(3deg);
    }

    body .digital-benefits__visual--brand svg {
        transform: scale(1.02);
    }

    /* =========================================
       CARD TITLES
    ========================================= */

    body .digital-benefits__card h3 {
        margin: 0 0 13px;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: 17px;
        line-height: 1.38;
        font-weight: 650;

        letter-spacing: -0.033em;

        color: #1F211D;
    }

    /* =========================================
       CARD DESCRIPTIONS
    ========================================= */

    body .digital-benefits__card p {
        margin: 0;

        font-family: "Inter", sans-serif;
        font-size: 13px;
        line-height: 1.72;
        font-weight: 400;

        color: rgba(31,33,29,0.75);
    }

    /* =========================================
       HOVER — LIFT AND LUMINOSITY
    ========================================= */

    @media (hover: hover) {

        body .digital-benefits__card:hover {
            transform: translateY(-7px);

            border-color: rgba(255,255,255,0.78);

            box-shadow:
                0 10px 20px rgba(77,57,43,0.055),
                0 28px 58px rgba(77,57,43,0.095),
                0 45px 75px rgba(77,57,43,0.045),
                inset 0 1px 0 rgba(255,255,255,0.95);
        }

        body .digital-benefits__card:hover
        .digital-benefits__visual {
            transform: translateY(-3px);
        }

        body .digital-benefits__card:hover
        .digital-benefits__visual svg {
            filter:
                drop-shadow(0 12px 14px rgba(95,66,47,0.16));
        }
    }

    /* =========================================
       BOTTOM-RIGHT ARCHITECTURAL CURVES
    ========================================= */

    body .digital-benefits__art {
        position: absolute;
        z-index: 0;

        right: -240px;
        bottom: -300px;

        width: 850px;
        height: 550px;

        overflow: hidden;
        pointer-events: none;
    }

    body .digital-benefits__arc {
        position: absolute;
        display: block;

        width: 880px;
        height: 570px;

        box-sizing: border-box;
        border-radius: 50%;

        border: 1.1px solid rgba(201,103,67,0.16);

        background: transparent;
    }

    body .digital-benefits__arc--one {
        left: -15px;
        top: 100px;

        transform: rotate(-20deg);

        border-color: rgba(201,103,67,0.24);
    }

    body .digital-benefits__arc--two {
        left: 95px;
        top: 135px;

        transform: rotate(-15deg);

        border-color: rgba(201,103,67,0.15);
    }

    /* =========================================
       STAGGERED ENTRANCE
    ========================================= */

    body .digital-benefits__eyebrow,
    body .digital-benefits__title,
    body .digital-benefits__card {
        animation:
            digitalBenefitsReveal 850ms
            cubic-bezier(0.22,1,0.36,1)
            both;
    }

    body .digital-benefits__eyebrow {
        animation-delay: 80ms;
    }

    body .digital-benefits__title {
        animation-delay: 180ms;
    }

    body .digital-benefits__card:nth-child(1) {
        animation-delay: 250ms;
    }

    body .digital-benefits__card:nth-child(2) {
        animation-delay: 350ms;
    }

    body .digital-benefits__card:nth-child(3) {
        animation-delay: 450ms;
    }

    body .digital-benefits__card:nth-child(4) {
        animation-delay: 550ms;
    }
}

/* =========================================
   ANIMATION KEYFRAMES
========================================= */

@keyframes digitalBenefitsReveal {
    from {
        opacity: 0;
        translate: 0 26px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

/* =========================================
   ACCESSIBILITY — REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    body .digital-benefits__eyebrow,
    body .digital-benefits__title,
    body .digital-benefits__card {
        animation: none;
        opacity: 1;
        translate: none;
    }

    body .digital-benefits__card,
    body .digital-benefits__visual,
    body .digital-benefits__visual svg {
        transition: none;
    }
}


/* =========================================================
   FRAYORA — WEBSITE & DIGITAL INFRASTRUCTURE
   SECTION 03 — THE IMPACT
   REFINED GLASS + LUMINOSITY OVERRIDE

   DESKTOP ONLY: 1101px+

   Soft frosted ivory surfaces
   Subtle glass reflections
   Dimensional illustration shadows
   Elegant hover interactions

   NO layout or typography changes
========================================================= */

@media (min-width: 1101px) {

    /* =========================================
       01 — LUMINOUS GLASS CARDS
    ========================================= */

    body .digital-benefits__card {
        position: relative;
        isolation: isolate;

        background-color: rgba(255, 253, 250, 0.80);

        background-image:
            linear-gradient(
                145deg,
                rgba(255, 255, 255, 0.74) 0%,
                rgba(255, 255, 255, 0.30) 38%,
                rgba(244, 230, 218, 0.12) 75%,
                rgba(255, 255, 255, 0.24) 100%
            );

        border: 1px solid rgba(255, 255, 255, 0.82);

        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);

        box-shadow:
            0 5px 12px rgba(75, 51, 36, 0.035),
            0 20px 42px rgba(75, 51, 36, 0.075),
            0 38px 68px rgba(75, 51, 36, 0.045),
            inset 0 1px 0 rgba(255, 255, 255, 0.95),
            inset 0 -1px 0 rgba(188, 147, 120, 0.06);

        transition:
            transform 450ms cubic-bezier(0.22, 1, 0.36, 1),
            box-shadow 450ms ease,
            border-color 450ms ease,
            background-color 450ms ease;
    }

    /* =========================================
       02 — DELICATE GLASS REFLECTION
    ========================================= */

    body .digital-benefits__card::before {
        content: "";

        position: absolute;
        inset: 0;
        z-index: 0;

        border-radius: inherit;

        background:
            linear-gradient(
                130deg,
                rgba(255, 255, 255, 0.24) 0%,
                rgba(255, 255, 255, 0.07) 29%,
                transparent 58%
            );

        pointer-events: none;
    }

    /* Keep text and icons above the reflection */

    body .digital-benefits__card > * {
        position: relative;
        z-index: 1;
    }

    /* Preserve the numbers in their top-right position */

    body .digital-benefits__number {
        position: absolute;
        z-index: 2;
    }

    /* =========================================
       03 — SOFT ILLUSTRATION STAGE
    ========================================= */

    body .digital-benefits__visual {
        background:
            radial-gradient(
                ellipse 65% 70% at 50% 55%,
                rgba(231, 204, 184, 0.20) 0%,
                rgba(245, 232, 221, 0.10) 47%,
                transparent 80%
            );

        transition:
            transform 450ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* =========================================
       04 — ILLUSTRATION DEPTH
    ========================================= */

    body .digital-benefits__visual svg {
        filter:
            drop-shadow(0 3px 4px rgba(103, 69, 48, 0.09))
            drop-shadow(0 10px 13px rgba(103, 69, 48, 0.12));

        transition:
            transform 450ms cubic-bezier(0.22, 1, 0.36, 1),
            filter 450ms ease;
    }

    /* =========================================
       05 — HOVER LUMINOSITY
    ========================================= */

    @media (hover: hover) {

        body .digital-benefits__card:hover {
            transform: translateY(-6px);

            background-color: rgba(255, 255, 255, 0.91);

            border-color: rgba(255, 255, 255, 0.96);

            box-shadow:
                0 9px 20px rgba(75, 51, 36, 0.05),
                0 27px 53px rgba(75, 51, 36, 0.10),
                0 46px 78px rgba(75, 51, 36, 0.05),
                inset 0 1px 0 rgba(255, 255, 255, 1);
        }

        body .digital-benefits__card:hover
        .digital-benefits__visual {
            transform: translateY(-3px);
        }

        body .digital-benefits__card:hover
        .digital-benefits__visual svg {
            filter:
                drop-shadow(0 5px 6px rgba(103, 69, 48, 0.11))
                drop-shadow(0 15px 18px rgba(103, 69, 48, 0.16));
        }
    }
}

/* =========================================
   ACCESSIBILITY — REDUCED MOTION
========================================= */

@media (min-width: 1101px) and
       (prefers-reduced-motion: reduce) {

    body .digital-benefits__card,
    body .digital-benefits__visual,
    body .digital-benefits__visual svg {
        transition: none;
    }
}



/* =========================================================
   FRAYORA — WEBSITE & DIGITAL INFRASTRUCTURE
   SECTION 04 — WEBSITE AS INFRASTRUCTURE
   DESKTOP: 1101px+

   Two-column editorial composition
   Connected business architecture diagram
   Olive glass website hub
   Luminous icon surfaces
   Subtle shadows and animations
========================================================= */

@media (min-width: 1101px) {

    /* =========================================
       SECTION
    ========================================= */

    body .digital-system {
        position: relative;
        isolation: isolate;

        width: 100%;
        min-height: 780px;

        margin: 0;
        padding: 105px 0 110px;

        box-sizing: border-box;
        overflow: hidden;

        background-color: #F8F3EB !important;
        background-image: none !important;

        color: #1F211D;
    }

    /* =========================================
       MAIN GRID
    ========================================= */

    body .digital-system__inner {
        position: relative;
        z-index: 2;

        display: grid;
        grid-template-columns:
            minmax(0, 0.78fr)
            minmax(0, 1.35fr);

        column-gap: 85px;
        align-items: center;

        width: 100%;
        max-width: 1600px;

        margin: 0 auto;
        padding: 0 80px;

        box-sizing: border-box;
    }

    /* =========================================
       LEFT EDITORIAL CONTENT
    ========================================= */

    body .digital-system__content {
        width: 100%;
        max-width: 470px;
        min-width: 0;
    }

    body .digital-system__eyebrow {
        margin: 0 0 25px;

        font-family: "Inter", sans-serif;
        font-size: 12px;
        line-height: 1.3;
        font-weight: 600;

        letter-spacing: 0.16em;
        text-transform: uppercase;

        color: #AD7258;
    }

    body .digital-system__title {
        margin: 0;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: clamp(36px, 3.2vw, 49px);
        line-height: 1.15;
        font-weight: 600;
        letter-spacing: -0.047em;

        color: #1F211D;
        text-wrap: balance;
    }

    body .digital-system__body {
        width: 100%;
        max-width: 455px;

        margin: 28px 0 0;

        font-family: "Inter", sans-serif;
        font-size: 15px;
        line-height: 1.8;
        font-weight: 400;

        color: rgba(31,33,29,0.77);
    }

    /* =========================================
       DIAGRAM AREA
    ========================================= */

    body .digital-system__diagram {
        position: relative;
        isolation: isolate;

        display: flex;
        flex-direction: column;
        align-items: center;

        width: 100%;
        min-width: 0;

        margin: 0;
        padding: 0;

        text-align: center;
    }

    /* DIAGRAM LABEL */

    body .digital-system__diagram-label {
        margin: 0 0 22px;

        font-family: "Inter", sans-serif;
        font-size: 11px;
        line-height: 1.3;
        font-weight: 600;
        letter-spacing: 0.17em;

        color: #AD7258;
    }

    /* =========================================
       BUSINESS AND CONNECTED ROWS
    ========================================= */

    body .digital-system__business,
    body .digital-system__connected {
        position: relative;
        z-index: 2;

        display: grid;
        width: 100%;

        align-items: start;
        justify-items: center;

        column-gap: 10px;
    }

    body .digital-system__business {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    body .digital-system__connected {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    /* =========================================
       INDIVIDUAL NODE
    ========================================= */

    body .digital-system__node {
        position: relative;
        z-index: 2;

        display: flex;
        flex-direction: column;
        align-items: center;

        gap: 12px;

        width: 100%;
        min-width: 0;

        font-family: "Inter", sans-serif;
        text-align: center;

        transition:
            transform 350ms cubic-bezier(0.22,1,0.36,1);
    }

    body .digital-system__node > span {
        font-family: "Inter", sans-serif;
        font-size: 12px;
        line-height: 1.4;
        font-weight: 600;

        color: #303B32;
        overflow-wrap: anywhere;
    }

    /* =========================================
       LUMINOUS CIRCULAR ICONS
    ========================================= */

    body .digital-system__icon {
        position: relative;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 75px;
        height: 75px;
        flex: 0 0 75px;

        box-sizing: border-box;
        border-radius: 50%;

        background-color: #F3E6DA;

        background-image: linear-gradient(
            145deg,
            rgba(255,255,255,0.62) 0%,
            rgba(248,234,220,0.30) 52%,
            rgba(220,190,167,0.17) 100%
        );

        border: 1px solid rgba(194,154,124,0.16);

        box-shadow:
            0 4px 11px rgba(79,53,36,0.045),
            0 17px 28px rgba(79,53,36,0.09),
            inset 0 2px 1px rgba(255,255,255,0.82),
            inset 0 -5px 12px rgba(141,96,67,0.045);

        transition:
            transform 400ms cubic-bezier(0.22,1,0.36,1),
            box-shadow 400ms ease;
    }

    body .digital-system__icon::after {
        content: "";

        position: absolute;
        inset: 4px;

        border: 1px solid rgba(255,255,255,0.39);
        border-radius: 50%;

        pointer-events: none;
    }

    body .digital-system__icon svg {
        display: block;

        width: 32px;
        height: 32px;

        stroke: #725943;
        stroke-width: 1.65;

        stroke-linecap: round;
        stroke-linejoin: round;

        filter:
            drop-shadow(0 2px 2px rgba(82,54,36,0.09));
    }

    /* =========================================
       CONNECTOR AREAS
    ========================================= */

    body .digital-system__connector {
        position: relative;

        width: 78%;
        height: 48px;

        margin: 0 auto;

        pointer-events: none;
    }

    /* Horizontal connector lines */

    body .digital-system__connector::before {
        content: "";

        position: absolute;
        left: 0;
        right: 0;

        border-top: 1.5px dashed
            rgba(144,128,105,0.46);
    }

    /* Center vertical stem */

    body .digital-system__connector span {
        position: absolute;
        left: 50%;

        width: 0;
        border-left: 1.5px dashed
            rgba(144,128,105,0.46);

        transform: translateX(-50%);
    }

    /* TOP CONNECTOR */

    body .digital-system__connector--top::before {
        top: 24px;
    }

    body .digital-system__connector--top span {
        top: 24px;
        height: 24px;
    }

    /* BOTTOM CONNECTOR */

    body .digital-system__connector--bottom::before {
        top: 25px;
    }

    body .digital-system__connector--bottom span {
        top: 0;
        height: 25px;
    }

    /* =========================================
       CENTRAL OLIVE GLASS WEBSITE PANEL
    ========================================= */

    body .digital-system__website {
        position: relative;
        z-index: 3;

        width: 260px;
        min-height: 128px;

        box-sizing: border-box;
        overflow: hidden;

        border-radius: 12px;

        background-color: #303B32;

        background-image: linear-gradient(
            145deg,
            rgba(117,135,106,0.36) 0%,
            rgba(65,84,65,0.20) 35%,
            rgba(28,43,31,0.70) 100%
        );

        border: 1px solid rgba(201,214,184,0.35);

        box-shadow:
            0 9px 18px rgba(18,29,20,0.15),
            0 22px 43px rgba(18,29,20,0.18),
            inset 0 1px 1px rgba(255,255,255,0.24),
            inset 0 -10px 20px rgba(7,15,9,0.11);

        transition:
            transform 450ms cubic-bezier(0.22,1,0.36,1),
            box-shadow 450ms ease;
    }

    /* BROWSER BAR */

    body .digital-system__website-bar {
        display: flex;
        align-items: center;
        gap: 5px;

        height: 26px;

        padding: 0 13px;

        border-bottom: 1px solid
            rgba(255,255,255,0.13);
    }

    body .digital-system__website-bar i {
        display: block;

        width: 6px;
        height: 6px;

        border-radius: 50%;
        background-color: #D9B79E;
    }

    body .digital-system__website-bar i:nth-child(2) {
        background-color: #E5D4BD;
    }

    body .digital-system__website-bar i:nth-child(3) {
        background-color: #A1AE94;
    }

    /* WEBSITE LABEL */

    body .digital-system__website-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 10px;

        padding: 22px 16px 24px;

        color: #F8F3EB;
    }

    body .digital-system__website-content strong {
        font-family: "Manrope", "Inter", sans-serif;
        font-size: 20px;
        line-height: 1.2;
        font-weight: 600;

        letter-spacing: -0.035em;
    }

    body .digital-system__website-content span {
        font-family: "Inter", sans-serif;
        font-size: 13px;
        line-height: 1.4;
        font-weight: 400;

        color: rgba(248,243,235,0.83);
    }

    /* =========================================
       DIAGRAM FOOTER
    ========================================= */

    body .digital-system__footer {
        width: 100%;
        max-width: 650px;

        margin: 40px auto 0;
        text-align: center;
    }

    body .digital-system__statement {
        margin: 0;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1.6;
        font-weight: 600;

        color: #303B32;
    }

    body .digital-system__explanation {
        margin: 13px auto 0;

        font-family: "Inter", sans-serif;
        font-size: 13px;
        line-height: 1.7;
        font-weight: 400;

        color: rgba(31,33,29,0.71);
    }

    /* =========================================
       INTERACTIONS
    ========================================= */

    @media (hover: hover) {

        body .digital-system__node:hover {
            transform: translateY(-4px);
        }

        body .digital-system__node:hover
        .digital-system__icon {
            transform: translateY(-3px);

            box-shadow:
                0 7px 15px rgba(79,53,36,0.065),
                0 22px 35px rgba(79,53,36,0.11),
                inset 0 2px 1px rgba(255,255,255,0.88);
        }

        body .digital-system__website:hover {
            transform: translateY(-4px);

            box-shadow:
                0 14px 26px rgba(18,29,20,0.17),
                0 30px 52px rgba(18,29,20,0.22),
                inset 0 1px 1px rgba(255,255,255,0.28);
        }
    }

    /* =========================================
       STAGGERED ENTRANCE
    ========================================= */

    body .digital-system__eyebrow,
    body .digital-system__title,
    body .digital-system__body,
    body .digital-system__diagram-label,
    body .digital-system__business,
    body .digital-system__website,
    body .digital-system__connected,
    body .digital-system__footer {
        animation:
            digitalSystemReveal 850ms
            cubic-bezier(0.22,1,0.36,1)
            both;
    }

    body .digital-system__eyebrow {
        animation-delay: 70ms;
    }

    body .digital-system__title {
        animation-delay: 170ms;
    }

    body .digital-system__body {
        animation-delay: 270ms;
    }

    body .digital-system__diagram-label {
        animation-delay: 220ms;
    }

    body .digital-system__business {
        animation-delay: 300ms;
    }

    body .digital-system__website {
        animation-delay: 470ms;
    }

    body .digital-system__connected {
        animation-delay: 590ms;
    }

    body .digital-system__footer {
        animation-delay: 690ms;
    }
}

/* =========================================
   ENTRANCE KEYFRAMES
========================================= */

@keyframes digitalSystemReveal {
    from {
        opacity: 0;
        translate: 0 24px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    body .digital-system__eyebrow,
    body .digital-system__title,
    body .digital-system__body,
    body .digital-system__diagram-label,
    body .digital-system__business,
    body .digital-system__website,
    body .digital-system__connected,
    body .digital-system__footer {
        animation: none;
        opacity: 1;
        translate: none;
    }

    body .digital-system__node,
    body .digital-system__icon,
    body .digital-system__website {
        transition: none;
    }
}


/* =========================================================
   FRAYORA — WEBSITE & DIGITAL INFRASTRUCTURE
   SECTION 05 — OUR WEBSITE PROCESS
   DESKTOP ONLY: 1101px+

   Compact editorial layout
   Consistent Frayora content alignment
   Smaller numbers and illustrated icons
   Soft shadows and subtle luminosity
   Refined animations
========================================================= */

@media (min-width: 1101px) {

    /* =========================================
       SECTION BACKGROUND
    ========================================= */

    body .digital-process {
        position: relative;
        isolation: isolate;

        display: block;
        width: 100%;
        min-height: 0;

        margin: 0;
        padding: 0;

        box-sizing: border-box;
        overflow: hidden;

        background-color: #F8F3EB !important;
        background-image: none !important;

        color: #1F211D;
    }

    /* REFINED LUMINOSITY */

    body .digital-process::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;

        pointer-events: none;

        background: linear-gradient(
            115deg,
            rgba(255,255,255,0.12) 0%,
            transparent 55%,
            rgba(255,255,255,0.07) 100%
        );
    }

    /* SUBTLE ARCHITECTURAL CURVE */

    body .digital-process::after {
        content: "";
        position: absolute;
        z-index: 0;

        left: -8%;
        bottom: -55px;

        width: 44%;
        height: 175px;

        border-top: 1px solid rgba(201,103,67,0.15);
        border-radius: 50%;

        transform: rotate(-6deg);
        pointer-events: none;
    }

    /* =========================================
       MAIN CONTENT CONTAINER
       SAME GRID AS OTHER SERVICE SECTIONS
    ========================================= */

    body .digital-process__inner {
        position: relative;
        z-index: 2;

        display: block;

        width: 100%;
        max-width: 1600px;

        margin: 0 auto;
        padding: 78px 80px 82px;

        box-sizing: border-box;
    }

    /* =========================================
       INTRO — TWO-COLUMN
    ========================================= */

    body .digital-process__intro {
        display: grid;

        grid-template-columns:
            minmax(0, 0.90fr)
            minmax(0, 1.10fr);

        column-gap: 80px;
        align-items: start;

        width: 100%;
        margin: 0 0 48px;
        padding: 0;

        box-sizing: border-box;
    }

    body .digital-process__intro-left,
    body .digital-process__intro-right {
        width: 100%;
        min-width: 0;

        margin: 0;
        padding: 0;
    }

    /* EYEBROW */

    body .digital-process__eyebrow {
        margin: 0 0 20px;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 12px;
        line-height: 1.3;
        font-weight: 600;

        letter-spacing: 0.16em;
        text-transform: uppercase;

        color: #AD7258;
    }

    /* HEADING */

    body .digital-process__title {
        width: 100%;
        max-width: 520px;

        margin: 0;
        padding: 0;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: clamp(37px, 3.15vw, 49px);
        line-height: 1.14;
        font-weight: 600;
        letter-spacing: -0.047em;

        color: #1F211D;

        text-wrap: balance;
    }

    /* DESCRIPTION */

    body .digital-process__body {
        width: 100%;
        max-width: 610px;

        margin: 7px 0 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 15px;
        line-height: 1.75;
        font-weight: 400;

        color: rgba(31,33,29,0.77);
    }

    /* =========================================
       FIVE-STEP PROCESS GRID
    ========================================= */

    body .digital-process__steps {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));

        column-gap: 27px;
        align-items: start;

        width: 100%;
        margin: 0;
        padding: 0;

        box-sizing: border-box;
    }

    body .digital-process__step {
        position: relative;

        min-width: 0;
        margin: 0;
        padding: 0;

        background: transparent;
        border: none;
        box-shadow: none;

        animation:
            digitalProcessReveal 820ms
            cubic-bezier(0.22,1,0.36,1)
            both;
    }

    /* =========================================
       NUMBER + ICON ROW
    ========================================= */

    body .digital-process__step-top {
        position: relative;

        display: flex;
        align-items: center;

        min-height: 78px;

        margin: 0 0 19px;
        padding: 0;
    }

    /* SMALLER STEP NUMBERS */

    body .digital-process__number {
        flex: 0 0 auto;

        margin: 0 14px 0 0;

        font-family: "Inter", sans-serif;
        font-size: 17px;
        line-height: 1;
        font-weight: 600;
        letter-spacing: -0.025em;

        color: #A66B50;
    }

    /* =========================================
       ICON WRAPPER
    ========================================= */

    body .digital-process__icon-wrap {
        position: relative;

        display: block;
        flex: 0 0 auto;

        margin: 0;
        padding: 0;
    }

    /* LUMINOUS ICON CIRCLE */

    body .digital-process__icon {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 74px;
        height: 74px;

        box-sizing: border-box;
        border-radius: 50%;

        background-color: #F1E2D4;

        background-image: linear-gradient(
            145deg,
            rgba(255,255,255,0.63) 0%,
            rgba(241,226,212,0.72) 60%,
            rgba(232,211,194,0.65) 100%
        );

        border: 1px solid rgba(188,145,112,0.13);

        box-shadow:
            0 4px 10px rgba(75,49,34,0.04),
            0 14px 25px rgba(75,49,34,0.075),
            inset 0 1px 0 rgba(255,255,255,0.83);

        transition:
            transform 400ms cubic-bezier(0.22,1,0.36,1),
            box-shadow 400ms ease;
    }

    /* ICON LINE ART */

    body .digital-process__icon svg {
        display: block;

        width: 29px;
        height: 29px;

        fill: none;

        stroke: #725943;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;

        filter:
            drop-shadow(0 2px 2px rgba(82,54,36,0.08));
    }

    /* =========================================
       PROCESS CONNECTING LINES
    ========================================= */

    body .digital-process__connector {
        position: relative;

        display: block;
        flex: 1 1 auto;

        min-width: 0;
        height: 1px;

        margin: 0 0 0 14px;

        background: linear-gradient(
            90deg,
            rgba(201,103,67,0.34),
            rgba(201,103,67,0.13)
        );
    }

    body .digital-process__connector::after {
        content: "";

        position: absolute;
        right: 0;
        top: 50%;

        width: 6px;
        height: 6px;

        border-radius: 50%;
        background: rgba(201,103,67,0.33);

        transform: translateY(-50%);

        box-shadow:
            0 0 0 4px rgba(201,103,67,0.045);
    }

    /* =========================================
       STEP TYPOGRAPHY
    ========================================= */

    body .digital-process__step-title {
        margin: 0 0 11px;
        padding: 0;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: 17px;
        line-height: 1.4;
        font-weight: 650;
        letter-spacing: -0.033em;

        color: #1F211D;
    }

    body .digital-process__step-body {
        width: 100%;
        max-width: 240px;

        margin: 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 13px;
        line-height: 1.72;
        font-weight: 400;

        color: rgba(31,33,29,0.75);
    }

    /* =========================================
       SUPPORTING STATEMENT
    ========================================= */

    body .digital-process__footer {
        width: 100%;

        margin: 48px 0 0;
        padding: 0;

        text-align: center;
    }

    body .digital-process__support {
        width: 100%;
        max-width: 850px;

        margin: 0 auto;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1.65;
        font-weight: 500;

        color: #384238;
    }

    /* =========================================
       HOVER INTERACTIONS
    ========================================= */

    @media (hover: hover) {

        body .digital-process__step:hover
        .digital-process__icon {
            transform: translateY(-4px);

            box-shadow:
                0 7px 15px rgba(75,49,34,0.055),
                0 20px 33px rgba(75,49,34,0.10),
                inset 0 1px 0 rgba(255,255,255,0.90);
        }
    }

    /* =========================================
       STAGGERED ENTRANCE ANIMATIONS
    ========================================= */

    body .digital-process__step:nth-child(1) {
        animation-delay: 100ms;
    }

    body .digital-process__step:nth-child(2) {
        animation-delay: 180ms;
    }

    body .digital-process__step:nth-child(3) {
        animation-delay: 260ms;
    }

    body .digital-process__step:nth-child(4) {
        animation-delay: 340ms;
    }

    body .digital-process__step:nth-child(5) {
        animation-delay: 420ms;
    }

    body .digital-process__eyebrow,
    body .digital-process__title,
    body .digital-process__body,
    body .digital-process__support {
        animation:
            digitalProcessReveal 820ms
            cubic-bezier(0.22,1,0.36,1)
            both;
    }

    body .digital-process__eyebrow {
        animation-delay: 70ms;
    }

    body .digital-process__title {
        animation-delay: 150ms;
    }

    body .digital-process__body {
        animation-delay: 230ms;
    }

    body .digital-process__support {
        animation-delay: 480ms;
    }
}

/* =========================================
   REVEAL ANIMATION
========================================= */

@keyframes digitalProcessReveal {
    from {
        opacity: 0;
        translate: 0 22px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    body .digital-process__step,
    body .digital-process__eyebrow,
    body .digital-process__title,
    body .digital-process__body,
    body .digital-process__support {
        animation: none;
        opacity: 1;
        translate: none;
        transform: none;
    }

    body .digital-process__icon {
        transition: none;
    }
}


/* =========================================================
   FRAYORA — WEBSITE & DIGITAL INFRASTRUCTURE
   SECTION 06 — FINAL CTA
   DESKTOP ONLY: 1101px+

   Warm architectural editorial composition
   Centered typography and terracotta CTA
   Curved linework, soft depth and animations
========================================================= */

@media (min-width: 1101px) {

    /* =========================================
       SECTION BACKGROUND
    ========================================= */

    body .digital-final-cta {
        position: relative;
        isolation: isolate;

        width: 100%;
        min-height: 440px;

        margin: 0;
        padding: 0;

        box-sizing: border-box;
        overflow: hidden;

        background-color: #F5E8DF !important;

        background-image: linear-gradient(
            115deg,
            #DFB49D 0%,
            #F1DBCC 29%,
            #F9F1EA 53%,
            #F0D9CC 77%,
            #E6BDA7 100%
        ) !important;

        color: #1F211D;
    }

    /* Subtle surface finish */

    body .digital-final-cta::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;

        pointer-events: none;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.70),
            inset 0 -24px 50px -48px rgba(87,52,36,0.16);
    }

    /* =========================================
       MAIN CONTENT CONTAINER
    ========================================= */

    body .digital-final-cta__inner {
        position: relative;
        z-index: 3;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        max-width: 1600px;
        min-height: 440px;

        margin: 0 auto;
        padding: 72px 80px;

        box-sizing: border-box;
    }

    body .digital-final-cta__content {
        position: relative;

        display: flex;
        flex-direction: column;
        align-items: center;

        width: 100%;
        max-width: 950px;

        margin: 0 auto;
        padding: 0;

        text-align: center;
    }

    /* =========================================
       HEADING
    ========================================= */

    body .digital-final-cta__title {
        width: 100%;
        max-width: 860px;

        margin: 0 auto;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: clamp(46px, 4.3vw, 66px);
        line-height: 1.12;
        font-weight: 600;
        letter-spacing: -0.05em;

        color: #1F211D;
        text-wrap: balance;

        text-shadow:
            0 2px 12px rgba(255,255,255,0.12);
    }

    /* =========================================
       TERRACOTTA BUTTON
    ========================================= */

    body .digital-final-cta__button {
        position: relative;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        gap: 16px;

        width: fit-content;
        min-height: 55px;

        margin: 34px auto 0;
        padding: 16px 30px;

        box-sizing: border-box;

        border: 1px solid rgba(255,255,255,0.24);
        border-radius: 999px;

        background-color: #C96743;
        background-image: none;

        color: #FFFFFF;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1.2;
        font-weight: 600;

        text-decoration: none;

        box-shadow:
            0 6px 15px rgba(106,54,36,0.12),
            0 18px 36px rgba(106,54,36,0.17),
            inset 0 1px 0 rgba(255,255,255,0.22);

        transition:
            transform 300ms ease,
            background-color 300ms ease,
            box-shadow 300ms ease;
    }

    body .digital-final-cta__button span {
        display: inline-block;

        font-size: 20px;
        line-height: 1;

        transition: transform 300ms ease;
    }

    body .digital-final-cta__button:hover {
        background-color: #B95635;
        transform: translateY(-3px);

        box-shadow:
            0 10px 22px rgba(106,54,36,0.15),
            0 24px 46px rgba(106,54,36,0.22),
            inset 0 1px 0 rgba(255,255,255,0.24);
    }

    body .digital-final-cta__button:hover span {
        transform: translateX(4px);
    }

    body .digital-final-cta__button:focus-visible {
        outline: 2px solid #394235;
        outline-offset: 4px;
    }

    /* =========================================
       ARCHITECTURAL CURVES
    ========================================= */

    body .digital-final-cta__art {
        position: absolute;
        inset: 0;
        z-index: 1;

        overflow: hidden;
        pointer-events: none;
    }

    body .digital-final-cta__arc {
        position: absolute;
        display: block;

        box-sizing: border-box;
        border-radius: 50%;

        background: transparent;
    }

    /* Large ivory curve — left */

    body .digital-final-cta__arc--one {
        width: 930px;
        height: 670px;

        left: -600px;
        top: -340px;

        border: 1.5px solid rgba(255,255,255,0.68);

        transform: rotate(-23deg);
    }

    /* Fine terracotta line — left */

    body .digital-final-cta__arc--two {
        width: 1050px;
        height: 590px;

        left: -690px;
        top: 165px;

        border: 1.2px solid rgba(178,99,68,0.28);

        transform: rotate(15deg);
    }

    /* Sweeping white curve — right */

    body .digital-final-cta__arc--three {
        width: 1080px;
        height: 620px;

        right: -510px;
        bottom: -360px;

        border: 1.5px solid rgba(255,255,255,0.68);

        transform: rotate(-18deg);
    }

    /* Fine terracotta curve — top right */

    body .digital-final-cta__arc--four {
        width: 850px;
        height: 520px;

        right: -560px;
        top: -340px;

        border: 1.4px dashed rgba(192,103,70,0.44);

        transform: rotate(-23deg);
    }

    /* =========================================
       STAGGERED ENTRANCE
    ========================================= */

    body .digital-final-cta__title,
    body .digital-final-cta__button {
        animation:
            digitalFinalReveal 850ms
            cubic-bezier(0.22,1,0.36,1)
            both;
    }

    body .digital-final-cta__title {
        animation-delay: 120ms;
    }

    body .digital-final-cta__button {
        animation-delay: 290ms;
    }
}

/* =========================================
   ANIMATION KEYFRAMES
========================================= */

@keyframes digitalFinalReveal {
    from {
        opacity: 0;
        translate: 0 24px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    body .digital-final-cta__title,
    body .digital-final-cta__button {
        animation: none;
        opacity: 1;
        translate: none;
    }

    body .digital-final-cta__button,
    body .digital-final-cta__button span {
        transition: none;
    }
}



/* =========================================================
   FRAYORA — WEBSITE & DIGITAL INFRASTRUCTURE
   SECTION 01 — HERO — TABLET
   600px–1100px ONLY

   Floating glass illustration at top-right
   Editorial content below, aligned to header
   Architectural olive background
   Soft luminosity and dimensional shadows
   Staggered entrance and floating animation

   DESKTOP AND MOBILE UNAFFECTED
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    /* =========================================
       HERO BACKGROUND
    ========================================= */

    body .digital-hero {
        position: relative;
        isolation: isolate;

        display: block;

        width: 100%;
        height: auto;
        min-height: 0;
        max-height: none;

        margin: 0;
        padding: 0;

        box-sizing: border-box;
        overflow: hidden;

        background-color: #283429 !important;

        background-image:
            url("../images/Business in a box/herotablet.png")
            !important;

        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;

        color: #F8F3EB;
    }

    /* =========================================
       SOFT OLIVE CONTRAST
    ========================================= */

    body .digital-hero::before {
        content: "";

        position: absolute;
        inset: 0;
        z-index: 0;

        pointer-events: none;

        background: linear-gradient(
            90deg,
            rgba(17, 26, 18, 0.30) 0%,
            rgba(17, 26, 18, 0.17) 60%,
            rgba(17, 26, 18, 0.06) 100%
        );
    }

    /* =========================================
       REFINED SURFACE LUMINOSITY
    ========================================= */

    body .digital-hero::after {
        content: "";

        position: absolute;
        inset: 0;
        z-index: 1;

        pointer-events: none;

        background: linear-gradient(
            125deg,
            transparent 38%,
            rgba(255, 250, 235, 0.015) 65%,
            rgba(255, 250, 235, 0.045) 100%
        );

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.07),
            inset 0 -20px 40px -45px rgba(0,0,0,0.20);
    }

    /* =========================================
       TABLET LAYOUT
       VISUAL FIRST, TEXT SECOND
    ========================================= */

    body .digital-hero__inner {
        position: relative;
        z-index: 2;

        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;

        width: 100%;
        max-width: 1100px;

        height: auto;
        min-height: 0;
        max-height: none;

        margin: 0 auto;
        padding: 54px 60px 86px;

        box-sizing: border-box;
    }

    /* =========================================
       FLOATING WEBSITE ILLUSTRATION
    ========================================= */

    body .digital-hero__visual {
        position: relative;
        z-index: 3;

        display: flex;
        align-items: center;
        justify-content: flex-end;

        order: -1;
        align-self: flex-end;

        width: 100%;
        max-width: none;
        height: auto;
        min-height: 0;

        top: auto;
        left: auto;
        right: auto;
        bottom: auto;

        margin: 0 0 24px;
        padding: 0;

        transform: none;

        pointer-events: none;

        filter:
            drop-shadow(
                0 14px 24px rgba(5,15,8,0.14)
            )
            drop-shadow(
                0 30px 48px rgba(5,15,8,0.19)
            );

        animation:
            digitalTabletVisualReveal 1000ms
            cubic-bezier(0.22,1,0.36,1)
            150ms both;
    }

    body .digital-hero__visual img {
        display: block;

        width: clamp(440px, 68vw, 690px);
        max-width: 100%;
        min-width: 0;
        max-height: none;
        height: auto;

        margin: 0;
        padding: 0;

        object-fit: contain;
        object-position: right center;

        filter:
            brightness(1.03)
            contrast(1.02);

        animation:
            digitalTabletVisualFloat 7s
            ease-in-out 1.2s infinite;
    }

    /* =========================================
       LEFT-ALIGNED CONTENT
    ========================================= */

    body .digital-hero__content {
        position: relative;
        z-index: 4;

        display: block;

        order: 1;
        align-self: flex-start;

        width: 100%;
        max-width: 770px;
        min-width: 0;

        margin: 0;
        padding: 0;

        text-align: left;
        transform: none;
    }

    /* =========================================
       EYEBROW
    ========================================= */

    body .digital-hero__eyebrow {
        margin: 0 0 25px;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 12px;
        line-height: 1.4;
        font-weight: 600;

        letter-spacing: 0.17em;
        text-transform: uppercase;

        color: #E8D8C0;

        text-shadow:
            0 1px 5px rgba(0,0,0,0.12);
    }

    /* =========================================
       HERO HEADING
    ========================================= */

    body .digital-hero__title {
        width: 100%;
        max-width: 730px;

        margin: 0;
        padding: 0;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: clamp(44px, 5.5vw, 61px);
        line-height: 1.12;
        font-weight: 600;
        letter-spacing: -0.05em;

        color: #F8F3EB;

        text-align: left;
        text-wrap: balance;

        text-shadow:
            0 3px 16px rgba(0,0,0,0.14);
    }

    /* =========================================
       BODY COPY
    ========================================= */

    body .digital-hero__body {
        width: 100%;
        max-width: 760px;

        margin: 29px 0 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 15px;
        line-height: 1.75;
        font-weight: 400;
        letter-spacing: -0.005em;

        color: rgba(248,243,235,0.93);

        text-shadow:
            0 2px 8px rgba(0,0,0,0.12);
    }

    /* =========================================
       SUPPORTING COPY
    ========================================= */

    body .digital-hero__statement {
        width: 100%;
        max-width: 760px;

        margin: 25px 0 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 15px;
        line-height: 1.65;
        font-weight: 500;

        letter-spacing: -0.01em;

        color: #F8F3EB;
    }

    /* =========================================
       TERRACOTTA CTA
    ========================================= */

    body .digital-hero__button {
        position: relative;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        gap: 15px;

        width: fit-content;
        max-width: 100%;
        min-height: 54px;

        box-sizing: border-box;

        margin: 31px 0 0;
        padding: 15px 28px;

        border: 1px solid rgba(255,255,255,0.13);
        border-radius: 999px;

        background-color: #C96743;
        background-image: none;

        color: #FFFFFF;

        font-family: "Inter", sans-serif;
        font-size: 13px;
        line-height: 1.2;
        font-weight: 600;

        text-decoration: none;

        box-shadow:
            0 5px 12px rgba(11,20,13,0.13),
            0 16px 30px rgba(11,20,13,0.19),
            inset 0 1px 0 rgba(255,255,255,0.15);

        transition:
            background-color 300ms ease,
            transform 300ms ease,
            box-shadow 300ms ease;
    }

    body .digital-hero__button span {
        display: inline-block;

        font-size: 20px;
        line-height: 1;

        transition: transform 300ms ease;
    }

    body .digital-hero__button:hover {
        background-color: #D57450;

        transform: translateY(-3px);

        box-shadow:
            0 8px 16px rgba(11,20,13,0.16),
            0 22px 38px rgba(11,20,13,0.23);
    }

    body .digital-hero__button:hover span {
        transform: translateX(4px);
    }

    body .digital-hero__button:focus-visible {
        outline: 2px solid #F8F3EB;
        outline-offset: 4px;
    }

    /* =========================================
       STAGGERED TEXT ANIMATIONS
    ========================================= */

    body .digital-hero__eyebrow,
    body .digital-hero__title,
    body .digital-hero__body,
    body .digital-hero__statement,
    body .digital-hero__button {
        animation:
            digitalTabletTextReveal 850ms
            cubic-bezier(0.22,1,0.36,1)
            both;
    }

    body .digital-hero__eyebrow {
        animation-delay: 140ms;
    }

    body .digital-hero__title {
        animation-delay: 240ms;
    }

    body .digital-hero__body {
        animation-delay: 340ms;
    }

    body .digital-hero__statement {
        animation-delay: 440ms;
    }

    body .digital-hero__button {
        animation-delay: 540ms;
    }
}

/* =========================================================
   SMALL TABLET ADJUSTMENTS
   600px–749px
========================================================= */

@media (min-width: 600px) and (max-width: 749px) {

    body .digital-hero__inner {
        padding: 45px 45px 72px;
    }

    body .digital-hero__visual {
        margin-bottom: 26px;
    }

    body .digital-hero__visual img {
        width: 100%;
        max-width: 540px;
    }

    body .digital-hero__title {
        font-size: clamp(40px, 6.2vw, 46px);
    }

    body .digital-hero__body {
        font-size: 14px;
    }

    body .digital-hero__statement {
        font-size: 14px;
    }
}

/* =========================================================
   ENTRANCE ANIMATIONS
========================================================= */

@keyframes digitalTabletTextReveal {
    from {
        opacity: 0;
        translate: 0 22px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

@keyframes digitalTabletVisualReveal {
    from {
        opacity: 0;
        translate: 0 22px;
        scale: 0.97;
    }

    to {
        opacity: 1;
        translate: 0 0;
        scale: 1;
    }
}

/* =========================================
   FLOATING GLASS MOTION
========================================= */

@keyframes digitalTabletVisualFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* =========================================================
   ACCESSIBILITY — REDUCED MOTION
========================================================= */

@media (min-width: 600px) and (max-width: 1100px)
       and (prefers-reduced-motion: reduce) {

    body .digital-hero__eyebrow,
    body .digital-hero__title,
    body .digital-hero__body,
    body .digital-hero__statement,
    body .digital-hero__button,
    body .digital-hero__visual,
    body .digital-hero__visual img {
        animation: none;
        opacity: 1;
        translate: none;
        scale: 1;
        transform: none;
    }

    body .digital-hero__button,
    body .digital-hero__button span {
        transition: none;
    }
}


/* =========================================================
   FRAYORA — WEBSITE & DIGITAL INFRASTRUCTURE
   SECTION 01 — TABLET VISUAL SIZE FIX
   600px–1100px ONLY
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .digital-hero__inner {
        padding-top: 40px;
    }

    /* Smaller illustration, aligned right */

    body .digital-hero__visual {
        width: 100%;
        height: auto;

        display: flex;
        align-items: center;
        justify-content: flex-end;

        margin: 0 0 15px;
        padding: 0;

        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
    }

    body .digital-hero__visual img {
        display: block;

        width: clamp(330px, 48vw, 480px);
        max-width: 100%;
        max-height: none;
        height: auto;

        min-width: 0;

        object-fit: contain;
        object-position: right center;
    }
}

/* SMALL TABLET — 600px–749px */

@media (min-width: 600px) and (max-width: 749px) {

    body .digital-hero__visual img {
        width: min(75%, 400px);
    }
}

/* =========================================================
   FRAYORA — WEBSITE & DIGITAL INFRASTRUCTURE
   SECTION 01 — TABLET SPACING REFINEMENT
   600px–1100px ONLY
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    /* Reduce space above the illustration
       and increase space below the CTA */

    body .digital-hero__inner {
        padding-top: 20px !important;
        padding-bottom: 110px !important;
    }

    /* Increase gap between illustration and eyebrow */

    body .digital-hero__visual {
        margin-bottom: -45px !important;
    }

}



/* =========================================================
   FRAYORA — WEBSITE & DIGITAL INFRASTRUCTURE
   SECTION 02 — WHAT WE DESIGN
   TABLET ONLY: 600px–1100px

   Editorial introduction
   Four services in a 2 x 2 grid
   Manrope + Inter typography
   Dimensional circular icons
   Subtle luminosity, shadows and animations

   DESKTOP AND MOBILE UNAFFECTED
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    /* =========================================
       SECTION BACKGROUND
    ========================================= */

    body .digital-design {
        position: relative;
        isolation: isolate;

        display: block;
        width: 100%;
        height: auto;
        min-height: 0;

        margin: 0;
        padding: 85px 0 100px;

        box-sizing: border-box;
        overflow: hidden;

        background-color: #F8F3EB !important;
        background-image: none !important;

        color: #1F211D;
    }

    /* =========================================
       CONTENT CONTAINER
       60px ALIGNMENT WITH TABLET HEADER
    ========================================= */

    body .digital-design__inner {
        position: relative;
        z-index: 2;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        width: 100%;
        max-width: 1100px;

        margin: 0 auto;
        padding: 0 60px;

        box-sizing: border-box;
    }

    /* =========================================
       INTRO
    ========================================= */

    body .digital-design__intro {
        position: relative;

        width: 100%;
        max-width: 850px;

        margin: 0 0 62px;
        padding: 0;
    }

    /* EYEBROW */

    body .digital-design__eyebrow {
        margin: 0 0 24px;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 12px;
        line-height: 1.4;
        font-weight: 600;

        letter-spacing: 0.16em;
        text-transform: uppercase;

        color: #AD7258;
    }

    /* HEADING */

    body .digital-design__title {
        width: 100%;
        max-width: 790px;

        margin: 0;
        padding: 0;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: clamp(39px, 4.6vw, 49px);
        line-height: 1.15;
        font-weight: 600;
        letter-spacing: -0.047em;

        color: #1F211D;

        text-wrap: balance;
    }

    /* DESCRIPTION */

    body .digital-design__body {
        width: 100%;
        max-width: 780px;

        margin: 25px 0 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 15px;
        line-height: 1.75;
        font-weight: 400;

        color: rgba(31, 33, 29, 0.78);
    }

    /* =========================================
       FOUR-SERVICE GRID
       TWO COLUMNS / TWO ROWS
    ========================================= */

    body .digital-design__grid {
        display: grid;

        grid-template-columns: repeat(2, minmax(0, 1fr));

        column-gap: 60px;
        row-gap: 65px;

        align-items: start;

        width: 100%;
        margin: 0;
        padding: 0;

        box-sizing: border-box;
    }

    /* =========================================
       SERVICE ITEMS
    ========================================= */

    body .digital-design__item {
        position: relative;

        display: block;
        min-width: 0;

        margin: 0;
        padding: 0;

        background: transparent;
        border: 0;
        box-shadow: none;

        transition:
            transform 400ms cubic-bezier(0.22,1,0.36,1);
    }

    /* =========================================
       NUMBER + ICON ROW
    ========================================= */

    body .digital-design__top {
        display: flex;
        align-items: center;

        gap: 17px;

        min-height: 82px;
        margin: 0 0 22px;
        padding: 0;
    }

    /* STEP NUMBER */

    body .digital-design__number {
        display: inline-block;
        flex: 0 0 auto;

        font-family: "Inter", sans-serif;
        font-size: 15px;
        line-height: 1;
        font-weight: 600;
        letter-spacing: -0.02em;

        color: #98664D;
    }

    /* =========================================
       DIMENSIONAL ICON CIRCLES
    ========================================= */

    body .digital-design__icon {
        position: relative;

        display: flex;
        align-items: center;
        justify-content: center;

        flex: 0 0 80px;

        width: 80px;
        height: 80px;

        box-sizing: border-box;
        border-radius: 50%;

        background-color: #F1E2D4;

        background-image: linear-gradient(
            145deg,
            rgba(255,255,255,0.68) 0%,
            rgba(241,226,212,0.88) 58%,
            rgba(232,211,194,0.80) 100%
        );

        border: 1px solid rgba(178,133,102,0.13);

        box-shadow:
            0 5px 12px rgba(75,49,34,0.045),
            0 17px 30px rgba(75,49,34,0.075),
            inset 0 2px 1px rgba(255,255,255,0.80),
            inset 0 -5px 12px rgba(136,91,62,0.04);

        transition:
            transform 400ms cubic-bezier(0.22,1,0.36,1),
            box-shadow 400ms ease;
    }

    /* FINE INNER RING */

    body .digital-design__icon::before {
        content: "";

        position: absolute;
        inset: 4px;

        border-radius: 50%;
        border: 1px solid rgba(255,255,255,0.43);

        pointer-events: none;
    }

    /* SVG ICONS */

    body .digital-design__icon svg {
        position: relative;
        z-index: 2;

        display: block;

        width: 34px;
        height: 34px;

        color: #655141;
        stroke: currentColor;
        stroke-width: 1.6;

        stroke-linecap: round;
        stroke-linejoin: round;

        filter:
            drop-shadow(0 2px 2px rgba(61,42,30,0.09));

        transition: transform 400ms ease;
    }

    /* =========================================
       SERVICE HEADINGS
    ========================================= */

    body .digital-design__item h3 {
        margin: 0 0 13px;
        padding: 0;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: 20px;
        line-height: 1.35;
        font-weight: 650;
        letter-spacing: -0.033em;

        color: #1F211D;
    }

    /* SERVICE DESCRIPTIONS */

    body .digital-design__item p {
        margin: 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1.72;
        font-weight: 400;

        color: rgba(31,33,29,0.76);
    }

    /* =========================================
       ARCHITECTURAL CURVES
       BOTTOM LEFT
    ========================================= */

    body .digital-design__art {
        position: absolute;
        z-index: 0;

        left: -285px;
        bottom: -345px;

        width: 750px;
        height: 520px;

        overflow: hidden;
        pointer-events: none;
    }

    body .digital-design__arc {
        position: absolute;

        display: block;

        width: 840px;
        height: 570px;

        box-sizing: border-box;

        border: 1px solid rgba(201,103,67,0.16);
        border-radius: 50%;

        background: transparent;
    }

    body .digital-design__arc--one {
        left: -170px;
        top: 95px;

        transform: rotate(23deg);

        border-color: rgba(201,103,67,0.23);
    }

    body .digital-design__arc--two {
        left: -65px;
        top: 135px;

        transform: rotate(18deg);

        border-color: rgba(201,103,67,0.17);
    }

    body .digital-design__arc--three {
        left: 40px;
        top: 185px;

        transform: rotate(13deg);

        border-color: rgba(201,103,67,0.12);
    }

    /* =========================================
       HOVER INTERACTIONS
    ========================================= */

    @media (hover: hover) {

        body .digital-design__item:hover {
            transform: translateY(-4px);
        }

        body .digital-design__item:hover
        .digital-design__icon {
            transform: translateY(-4px) scale(1.04);

            box-shadow:
                0 8px 16px rgba(75,49,34,0.06),
                0 23px 38px rgba(75,49,34,0.10),
                inset 0 2px 1px rgba(255,255,255,0.87);
        }

        body .digital-design__item:hover svg {
            transform: scale(1.07);
        }
    }

    /* =========================================
       STAGGERED ANIMATIONS
    ========================================= */

    body .digital-design__eyebrow,
    body .digital-design__title,
    body .digital-design__body,
    body .digital-design__item {
        animation:
            digitalDesignReveal 850ms
            cubic-bezier(0.22,1,0.36,1)
            both;
    }

    body .digital-design__eyebrow {
        animation-delay: 70ms;
    }

    body .digital-design__title {
        animation-delay: 160ms;
    }

    body .digital-design__body {
        animation-delay: 250ms;
    }

    body .digital-design__item:nth-child(1) {
        animation-delay: 290ms;
    }

    body .digital-design__item:nth-child(2) {
        animation-delay: 390ms;
    }

    body .digital-design__item:nth-child(3) {
        animation-delay: 490ms;
    }

    body .digital-design__item:nth-child(4) {
        animation-delay: 590ms;
    }
}

/* =========================================================
   SMALL TABLET REFINEMENTS
   600px–749px
========================================================= */

@media (min-width: 600px) and (max-width: 749px) {

    body .digital-design {
        padding: 75px 0 85px;
    }

    body .digital-design__inner {
        padding-left: 45px;
        padding-right: 45px;
    }

    body .digital-design__intro {
        margin-bottom: 52px;
    }

    body .digital-design__title {
        font-size: 39px;
    }

    body .digital-design__grid {
        column-gap: 36px;
        row-gap: 55px;
    }

    body .digital-design__icon {
        flex-basis: 72px;

        width: 72px;
        height: 72px;
    }

    body .digital-design__icon svg {
        width: 31px;
        height: 31px;
    }

    body .digital-design__item h3 {
        font-size: 18px;
    }

    body .digital-design__item p {
        font-size: 13px;
    }
}

/* =========================================================
   ACCESSIBILITY — REDUCED MOTION
========================================================= */

@media (min-width: 600px) and (max-width: 1100px)
       and (prefers-reduced-motion: reduce) {

    body .digital-design__eyebrow,
    body .digital-design__title,
    body .digital-design__body,
    body .digital-design__item {
        animation: none;
        opacity: 1;
        translate: none;
    }

    body .digital-design__item,
    body .digital-design__icon,
    body .digital-design__icon svg {
        transition: none;
    }
}


/* =========================================================
   FRAYORA — WEBSITE & DIGITAL INFRASTRUCTURE
   SECTION 03 — THE IMPACT
   TABLET ONLY: 600px–1100px

   2 x 2 elevated glass card layout
   Soft luminous ivory surfaces
   Dimensional illustrations and shadows
   Editorial Manrope + Inter typography
   Staggered animations

   DESKTOP AND MOBILE UNAFFECTED
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    /* =========================================
       SECTION BACKGROUND
    ========================================= */

    body .digital-benefits {
        position: relative;
        isolation: isolate;

        display: block;
        width: 100%;
        height: auto;
        min-height: 0;

        margin: 0;
        padding: 85px 0 105px;

        box-sizing: border-box;
        overflow: hidden;

        background-color: #F5EDE4 !important;
        background-image: none !important;

        color: #1F211D;
    }

    /* =========================================
       CONTENT CONTAINER
       ALIGNED WITH TABLET HEADER
    ========================================= */

    body .digital-benefits__inner {
        position: relative;
        z-index: 2;

        width: 100%;
        max-width: 1100px;

        margin: 0 auto;
        padding: 0 60px;

        box-sizing: border-box;
    }

    /* =========================================
       HEADING AREA
    ========================================= */

    body .digital-benefits__intro {
        width: 100%;
        max-width: 850px;

        margin: 0 0 53px;
        padding: 0;
    }

    /* EYEBROW */

    body .digital-benefits__eyebrow {
        margin: 0 0 24px;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 12px;
        line-height: 1.4;
        font-weight: 600;

        letter-spacing: 0.16em;
        text-transform: uppercase;

        color: #AD7258;
    }

    /* HEADING */

    body .digital-benefits__title {
        width: 100%;
        max-width: 780px;

        margin: 0;
        padding: 0;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: clamp(39px, 4.6vw, 49px);
        line-height: 1.14;
        font-weight: 600;

        letter-spacing: -0.047em;

        color: #1F211D;
        text-wrap: balance;
    }

    /* =========================================
       TWO-COLUMN CARD GRID
    ========================================= */

    body .digital-benefits__grid {
        display: grid;

        grid-template-columns: repeat(2, minmax(0, 1fr));

        column-gap: 25px;
        row-gap: 28px;

        width: 100%;
        margin: 0;
        padding: 0;

        align-items: stretch;
        box-sizing: border-box;
    }

    /* =========================================
       GLASS CARD SURFACES
    ========================================= */

    body .digital-benefits__card {
        position: relative;
        isolation: isolate;

        display: flex;
        flex-direction: column;

        width: 100%;
        min-width: 0;
        min-height: 315px;

        margin: 0;
        padding: 27px 27px 32px;

        box-sizing: border-box;

        border: 1px solid rgba(255,255,255,0.82);
        border-radius: 15px;

        background-color: rgba(255,253,250,0.84);

        background-image: linear-gradient(
            145deg,
            rgba(255,255,255,0.70) 0%,
            rgba(255,255,255,0.24) 45%,
            rgba(244,230,218,0.10) 75%,
            rgba(255,255,255,0.20) 100%
        );

        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);

        box-shadow:
            0 5px 12px rgba(75,51,36,0.035),
            0 19px 41px rgba(75,51,36,0.075),
            0 35px 65px rgba(75,51,36,0.035),
            inset 0 1px 0 rgba(255,255,255,0.94);

        transition:
            transform 450ms cubic-bezier(0.22,1,0.36,1),
            box-shadow 450ms ease,
            background-color 450ms ease,
            border-color 450ms ease;
    }

    /* SUBTLE GLASS REFLECTION */

    body .digital-benefits__card::before {
        content: "";

        position: absolute;
        inset: 0;
        z-index: 0;

        border-radius: inherit;

        background: linear-gradient(
            130deg,
            rgba(255,255,255,0.23) 0%,
            rgba(255,255,255,0.06) 30%,
            transparent 60%
        );

        pointer-events: none;
    }

    /* KEEP CONTENT ABOVE REFLECTION */

    body .digital-benefits__card > * {
        position: relative;
        z-index: 1;
    }

    /* =========================================
       STEP NUMBER
    ========================================= */

    body .digital-benefits__number {
        position: absolute;
        z-index: 2;

        top: 27px;
        right: 27px;

        font-family: "Inter", sans-serif;
        font-size: 12px;
        line-height: 1;
        font-weight: 600;

        letter-spacing: 0.04em;

        color: #AD7258;
    }

    /* =========================================
       ILLUSTRATION STAGE
    ========================================= */

    body .digital-benefits__visual {
        position: relative;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        height: 132px;

        margin: 0 0 26px;

        border-radius: 12px;

        background: radial-gradient(
            ellipse 65% 70% at 50% 55%,
            rgba(231,204,184,0.20) 0%,
            rgba(245,232,221,0.10) 47%,
            transparent 80%
        );

        transition:
            transform 450ms cubic-bezier(0.22,1,0.36,1);
    }

    /* =========================================
       DIMENSIONAL ICONS
    ========================================= */

    body .digital-benefits__visual svg {
        display: block;

        width: 118px;
        height: 103px;

        overflow: visible;

        filter:
            drop-shadow(0 3px 4px rgba(103,69,48,0.09))
            drop-shadow(0 10px 13px rgba(103,69,48,0.12));

        transition:
            transform 450ms ease,
            filter 450ms ease;
    }

    /* INDIVIDUAL ICON ORIENTATIONS */

    body .digital-benefits__visual--navigation svg {
        transform: rotate(-3deg);
    }

    body .digital-benefits__visual--structure svg {
        transform: perspective(500px) rotateY(-7deg);
    }

    body .digital-benefits__visual--mobile svg {
        transform: rotate(3deg);
    }

    body .digital-benefits__visual--brand svg {
        transform: scale(1.02);
    }

    /* =========================================
       CARD HEADINGS
    ========================================= */

    body .digital-benefits__card h3 {
        margin: 0 0 13px;
        padding: 0;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: 19px;
        line-height: 1.35;
        font-weight: 650;

        letter-spacing: -0.033em;

        color: #1F211D;
    }

    /* =========================================
       CARD DESCRIPTIONS
    ========================================= */

    body .digital-benefits__card p {
        margin: 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1.75;
        font-weight: 400;

        color: rgba(31,33,29,0.75);
    }

    /* =========================================
       DECORATIVE ARCHITECTURAL CURVES
       BOTTOM-RIGHT
    ========================================= */

    body .digital-benefits__art {
        position: absolute;
        z-index: 0;

        right: -310px;
        bottom: -325px;

        width: 770px;
        height: 520px;

        overflow: hidden;
        pointer-events: none;
    }

    body .digital-benefits__arc {
        position: absolute;

        display: block;

        width: 810px;
        height: 550px;

        box-sizing: border-box;
        border-radius: 50%;

        border: 1px solid rgba(201,103,67,0.15);

        background: transparent;
    }

    body .digital-benefits__arc--one {
        left: -5px;
        top: 100px;

        transform: rotate(-20deg);

        border-color: rgba(201,103,67,0.23);
    }

    body .digital-benefits__arc--two {
        left: 105px;
        top: 135px;

        transform: rotate(-15deg);

        border-color: rgba(201,103,67,0.14);
    }

    /* =========================================
       HOVER INTERACTIONS
    ========================================= */

    @media (hover: hover) {

        body .digital-benefits__card:hover {
            transform: translateY(-6px);

            background-color: rgba(255,255,255,0.92);

            border-color: rgba(255,255,255,0.96);

            box-shadow:
                0 9px 19px rgba(75,51,36,0.05),
                0 27px 51px rgba(75,51,36,0.10),
                0 43px 74px rgba(75,51,36,0.045),
                inset 0 1px 0 rgba(255,255,255,1);
        }

        body .digital-benefits__card:hover
        .digital-benefits__visual {
            transform: translateY(-3px);
        }

        body .digital-benefits__card:hover
        .digital-benefits__visual svg {
            filter:
                drop-shadow(0 5px 6px rgba(103,69,48,0.11))
                drop-shadow(0 15px 18px rgba(103,69,48,0.16));
        }
    }

    /* =========================================
       STAGGERED ENTRANCE ANIMATIONS
    ========================================= */

    body .digital-benefits__eyebrow,
    body .digital-benefits__title,
    body .digital-benefits__card {
        animation:
            digitalBenefitsReveal 850ms
            cubic-bezier(0.22,1,0.36,1)
            both;
    }

    body .digital-benefits__eyebrow {
        animation-delay: 80ms;
    }

    body .digital-benefits__title {
        animation-delay: 180ms;
    }

    body .digital-benefits__card:nth-child(1) {
        animation-delay: 250ms;
    }

    body .digital-benefits__card:nth-child(2) {
        animation-delay: 350ms;
    }

    body .digital-benefits__card:nth-child(3) {
        animation-delay: 450ms;
    }

    body .digital-benefits__card:nth-child(4) {
        animation-delay: 550ms;
    }
}

/* =========================================================
   SMALL TABLET REFINEMENTS
   600px–749px
========================================================= */

@media (min-width: 600px) and (max-width: 749px) {

    body .digital-benefits {
        padding: 75px 0 90px;
    }

    body .digital-benefits__inner {
        padding-left: 45px;
        padding-right: 45px;
    }

    body .digital-benefits__intro {
        margin-bottom: 47px;
    }

    body .digital-benefits__title {
        font-size: 39px;
    }

    body .digital-benefits__grid {
        column-gap: 20px;
        row-gap: 22px;
    }

    body .digital-benefits__card {
        min-height: 305px;
        padding: 24px 22px 28px;
    }

    body .digital-benefits__visual {
        height: 115px;
        margin-bottom: 23px;
    }

    body .digital-benefits__visual svg {
        width: 105px;
        height: 92px;
    }

    body .digital-benefits__card h3 {
        font-size: 18px;
    }

    body .digital-benefits__card p {
        font-size: 13px;
    }
}

/* =========================================================
   ACCESSIBILITY — REDUCED MOTION
========================================================= */

@media (min-width: 600px) and (max-width: 1100px)
       and (prefers-reduced-motion: reduce) {

    body .digital-benefits__eyebrow,
    body .digital-benefits__title,
    body .digital-benefits__card {
        animation: none;
        opacity: 1;
        translate: none;
    }

    body .digital-benefits__card,
    body .digital-benefits__visual,
    body .digital-benefits__visual svg {
        transition: none;
    }
}



/* =========================================================
   FRAYORA — WEBSITE & DIGITAL INFRASTRUCTURE
   SECTION 04 — WEBSITE AS INFRASTRUCTURE
   TABLET ONLY: 600px–1100px

   Editorial heading above connected diagram
   Four business components
   Central olive glass website panel
   Five connected digital components
   Bond-inspired luminosity and shadows
   Subtle animations

   DESKTOP AND MOBILE UNAFFECTED
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    /* =========================================
       SECTION BACKGROUND
    ========================================= */

    body .digital-system {
        position: relative;
        isolation: isolate;

        display: block;
        width: 100%;
        height: auto;
        min-height: 0;

        margin: 0;
        padding: 88px 0 100px;

        box-sizing: border-box;
        overflow: hidden;

        background-color: #F8F3EB !important;
        background-image: none !important;

        color: #1F211D;
    }

    /* =========================================
       MAIN CONTAINER
       MATCH TABLET HEADER ALIGNMENT
    ========================================= */

    body .digital-system__inner {
        position: relative;
        z-index: 2;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        width: 100%;
        max-width: 1100px;

        margin: 0 auto;
        padding: 0 60px;

        box-sizing: border-box;
    }

    /* =========================================
       EDITORIAL INTRO
    ========================================= */

    body .digital-system__content {
        width: 100%;
        max-width: 800px;
        min-width: 0;

        margin: 0 0 67px;
        padding: 0;

        text-align: left;
    }

    /* EYEBROW */

    body .digital-system__eyebrow {
        margin: 0 0 24px;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 12px;
        line-height: 1.4;
        font-weight: 600;

        letter-spacing: 0.16em;
        text-transform: uppercase;

        color: #AD7258;
    }

    /* HEADING */

    body .digital-system__title {
        width: 100%;
        max-width: 780px;

        margin: 0;
        padding: 0;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: clamp(39px, 4.6vw, 49px);
        line-height: 1.15;
        font-weight: 600;

        letter-spacing: -0.047em;

        color: #1F211D;
        text-wrap: balance;
    }

    /* BODY COPY */

    body .digital-system__body {
        width: 100%;
        max-width: 760px;

        margin: 27px 0 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 15px;
        line-height: 1.75;
        font-weight: 400;

        color: rgba(31,33,29,0.77);
    }

    /* =========================================
       DIAGRAM CONTAINER
    ========================================= */

    body .digital-system__diagram {
        position: relative;
        isolation: isolate;

        display: flex;
        flex-direction: column;
        align-items: center;

        width: 100%;
        min-width: 0;

        margin: 0;
        padding: 0;

        text-align: center;
    }

    /* =========================================
       DIAGRAM LABEL
    ========================================= */

    body .digital-system__diagram-label {
        margin: 0 0 31px;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 12px;
        line-height: 1.4;
        font-weight: 600;

        letter-spacing: 0.16em;
        text-transform: uppercase;

        color: #AD7258;
    }

    /* =========================================
       COMPONENT ROWS
    ========================================= */

    body .digital-system__business,
    body .digital-system__connected {
        position: relative;
        z-index: 2;

        display: grid;

        width: 100%;
        margin: 0;
        padding: 0;

        align-items: start;
        justify-items: center;

        box-sizing: border-box;
    }

    /* FOUR BUSINESS COMPONENTS */

    body .digital-system__business {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        column-gap: 18px;
    }

    /* FIVE CONNECTED COMPONENTS */

    body .digital-system__connected {
        grid-template-columns:
            repeat(5, minmax(0, 1fr));

        column-gap: 10px;
    }

    /* =========================================
       INDIVIDUAL COMPONENTS
    ========================================= */

    body .digital-system__node {
        position: relative;
        z-index: 2;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;

        gap: 13px;

        width: 100%;
        min-width: 0;

        margin: 0;
        padding: 0;

        text-align: center;

        transition:
            transform 350ms cubic-bezier(0.22,1,0.36,1);
    }

    /* COMPONENT LABELS */

    body .digital-system__node > span {
        display: block;

        width: 100%;
        min-width: 0;

        font-family: "Inter", sans-serif;
        font-size: 12px;
        line-height: 1.5;
        font-weight: 600;

        color: #303B32;

        overflow-wrap: break-word;
    }

    /* =========================================
       LUMINOUS GLASS ICON CIRCLES
    ========================================= */

    body .digital-system__icon {
        position: relative;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 74px;
        height: 74px;
        flex: 0 0 74px;

        box-sizing: border-box;
        border-radius: 50%;

        background-color: #F3E6DA;

        background-image: linear-gradient(
            145deg,
            rgba(255,255,255,0.67) 0%,
            rgba(248,234,220,0.45) 52%,
            rgba(220,190,167,0.19) 100%
        );

        border: 1px solid rgba(194,154,124,0.17);

        box-shadow:
            0 5px 12px rgba(79,53,36,0.045),
            0 17px 30px rgba(79,53,36,0.09),
            inset 0 2px 1px rgba(255,255,255,0.86),
            inset 0 -5px 12px rgba(141,96,67,0.045);

        transition:
            transform 400ms cubic-bezier(0.22,1,0.36,1),
            box-shadow 400ms ease;
    }

    /* DELICATE INNER RING */

    body .digital-system__icon::after {
        content: "";

        position: absolute;
        inset: 4px;

        border-radius: 50%;

        border: 1px solid rgba(255,255,255,0.44);

        pointer-events: none;
    }

    /* ICON LINE ART */

    body .digital-system__icon svg {
        position: relative;
        z-index: 2;

        display: block;

        width: 31px;
        height: 31px;

        fill: none;

        stroke: #725943;
        stroke-width: 1.65;

        stroke-linecap: round;
        stroke-linejoin: round;

        filter:
            drop-shadow(0 2px 2px rgba(82,54,36,0.09));
    }

    /* =========================================
       CONNECTING LINES
    ========================================= */

    body .digital-system__connector {
        position: relative;

        width: 78%;
        height: 56px;

        margin: 0 auto;
        padding: 0;

        pointer-events: none;
    }

    /* HORIZONTAL DASHED LINE */

    body .digital-system__connector::before {
        content: "";

        position: absolute;
        left: 0;
        right: 0;

        border-top:
            1.5px dashed rgba(144,128,105,0.42);
    }

    /* CENTRAL VERTICAL CONNECTION */

    body .digital-system__connector span {
        position: absolute;

        left: 50%;

        width: 0;

        border-left:
            1.5px dashed rgba(144,128,105,0.42);

        transform: translateX(-50%);
    }

    /* UPPER CONNECTOR */

    body .digital-system__connector--top {
        margin-top: 5px;
    }

    body .digital-system__connector--top::before {
        top: 27px;
    }

    body .digital-system__connector--top span {
        top: 27px;
        height: 29px;
    }

    /* LOWER CONNECTOR */

    body .digital-system__connector--bottom {
        margin-bottom: 5px;
    }

    body .digital-system__connector--bottom::before {
        top: 29px;
    }

    body .digital-system__connector--bottom span {
        top: 0;
        height: 29px;
    }

    /* =========================================
       CENTRAL OLIVE WEBSITE PANEL
    ========================================= */

    body .digital-system__website {
        position: relative;
        z-index: 3;

        display: block;

        width: 270px;
        min-height: 130px;

        margin: 0 auto;
        padding: 0;

        box-sizing: border-box;
        overflow: hidden;

        border-radius: 12px;

        background-color: #303B32;

        background-image: linear-gradient(
            145deg,
            rgba(117,135,106,0.36) 0%,
            rgba(65,84,65,0.20) 35%,
            rgba(28,43,31,0.70) 100%
        );

        border: 1px solid rgba(201,214,184,0.35);

        box-shadow:
            0 10px 20px rgba(18,29,20,0.15),
            0 24px 45px rgba(18,29,20,0.18),
            inset 0 1px 1px rgba(255,255,255,0.24),
            inset 0 -10px 20px rgba(7,15,9,0.11);

        transition:
            transform 450ms cubic-bezier(0.22,1,0.36,1),
            box-shadow 450ms ease;
    }

    /* BROWSER HEADER */

    body .digital-system__website-bar {
        display: flex;
        align-items: center;

        gap: 5px;

        height: 27px;
        padding: 0 13px;

        border-bottom:
            1px solid rgba(255,255,255,0.13);
    }

    body .digital-system__website-bar i {
        display: block;

        width: 6px;
        height: 6px;

        border-radius: 50%;

        background-color: #D9B79E;
    }

    body .digital-system__website-bar i:nth-child(2) {
        background-color: #E5D4BD;
    }

    body .digital-system__website-bar i:nth-child(3) {
        background-color: #A1AE94;
    }

    /* WEBSITE LABEL */

    body .digital-system__website-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 10px;

        margin: 0;
        padding: 23px 18px 25px;

        text-align: center;

        color: #F8F3EB;
    }

    body .digital-system__website-content strong {
        font-family: "Manrope", "Inter", sans-serif;
        font-size: 20px;
        line-height: 1.2;
        font-weight: 600;

        letter-spacing: -0.035em;

        color: #F8F3EB;
    }

    body .digital-system__website-content span {
        font-family: "Inter", sans-serif;
        font-size: 13px;
        line-height: 1.4;
        font-weight: 400;

        color: rgba(248,243,235,0.83);
    }

    /* =========================================
       DIAGRAM FOOTER
    ========================================= */

    body .digital-system__footer {
        width: 100%;
        max-width: 760px;

        margin: 48px auto 0;
        padding: 0;

        text-align: center;
    }

    /* SUPPORTING STATEMENT */

    body .digital-system__statement {
        margin: 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 15px;
        line-height: 1.65;
        font-weight: 600;

        color: #303B32;
    }

    /* BOTTOM EXPLANATION */

    body .digital-system__explanation {
        width: 100%;
        max-width: 680px;

        margin: 15px auto 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1.75;
        font-weight: 400;

        color: rgba(31,33,29,0.72);
    }

    /* =========================================
       SUBTLE HOVER INTERACTIONS
    ========================================= */

    @media (hover: hover) {

        body .digital-system__node:hover {
            transform: translateY(-4px);
        }

        body .digital-system__node:hover
        .digital-system__icon {
            transform: translateY(-3px);

            box-shadow:
                0 8px 16px rgba(79,53,36,0.065),
                0 23px 36px rgba(79,53,36,0.11),
                inset 0 2px 1px rgba(255,255,255,0.89);
        }

        body .digital-system__website:hover {
            transform: translateY(-4px);

            box-shadow:
                0 15px 28px rgba(18,29,20,0.17),
                0 31px 54px rgba(18,29,20,0.22),
                inset 0 1px 1px rgba(255,255,255,0.28);
        }
    }

    /* =========================================
       STAGGERED ENTRANCE ANIMATIONS
    ========================================= */

    body .digital-system__eyebrow,
    body .digital-system__title,
    body .digital-system__body,
    body .digital-system__diagram-label,
    body .digital-system__business,
    body .digital-system__website,
    body .digital-system__connected,
    body .digital-system__footer {
        animation:
            digitalSystemReveal 850ms
            cubic-bezier(0.22,1,0.36,1)
            both;
    }

    body .digital-system__eyebrow {
        animation-delay: 70ms;
    }

    body .digital-system__title {
        animation-delay: 160ms;
    }

    body .digital-system__body {
        animation-delay: 250ms;
    }

    body .digital-system__diagram-label {
        animation-delay: 300ms;
    }

    body .digital-system__business {
        animation-delay: 380ms;
    }

    body .digital-system__website {
        animation-delay: 490ms;
    }

    body .digital-system__connected {
        animation-delay: 590ms;
    }

    body .digital-system__footer {
        animation-delay: 690ms;
    }
}

/* =========================================================
   SMALL TABLET — 600px–749px
========================================================= */

@media (min-width: 600px) and (max-width: 749px) {

    /* SECTION SPACING */

    body .digital-system {
        padding: 75px 0 88px;
    }

    /* HEADER ALIGNMENT */

    body .digital-system__inner {
        padding-left: 45px;
        padding-right: 45px;
    }

    /* INTRO */

    body .digital-system__content {
        margin-bottom: 55px;
    }

    body .digital-system__title {
        font-size: 39px;
    }

    body .digital-system__body {
        font-size: 14px;
    }

    /* =========================================
       SLIGHTLY SMALLER DIAGRAM
    ========================================= */

    body .digital-system__business {
        column-gap: 8px;
    }

    body .digital-system__connected {
        column-gap: 4px;
    }

    body .digital-system__node {
        gap: 10px;
    }

    body .digital-system__icon {
        width: 58px;
        height: 58px;

        flex-basis: 58px;
    }

    body .digital-system__icon svg {
        width: 25px;
        height: 25px;
    }

    body .digital-system__node > span {
        font-size: 10px;
        line-height: 1.35;
    }

    /* CENTRAL PANEL */

    body .digital-system__website {
        width: 235px;
        min-height: 116px;
    }

    body .digital-system__website-content {
        padding: 19px 15px 21px;
    }

    body .digital-system__website-content strong {
        font-size: 18px;
    }

    body .digital-system__website-content span {
        font-size: 12px;
    }

    /* CONNECTORS */

    body .digital-system__connector {
        height: 48px;
        width: 78%;
    }

    body .digital-system__connector--top::before {
        top: 24px;
    }

    body .digital-system__connector--top span {
        top: 24px;
        height: 24px;
    }

    body .digital-system__connector--bottom::before {
        top: 24px;
    }

    body .digital-system__connector--bottom span {
        height: 24px;
    }

    /* FOOTER */

    body .digital-system__footer {
        margin-top: 40px;
    }

    body .digital-system__statement {
        font-size: 14px;
    }

    body .digital-system__explanation {
        font-size: 13px;
    }
}

/* =========================================================
   ACCESSIBILITY — REDUCED MOTION
========================================================= */

@media (min-width: 600px) and (max-width: 1100px)
       and (prefers-reduced-motion: reduce) {

    body .digital-system__eyebrow,
    body .digital-system__title,
    body .digital-system__body,
    body .digital-system__diagram-label,
    body .digital-system__business,
    body .digital-system__website,
    body .digital-system__connected,
    body .digital-system__footer {
        animation: none;
        opacity: 1;
        translate: none;
        transform: none;
    }

    body .digital-system__node,
    body .digital-system__icon,
    body .digital-system__website {
        transition: none;
    }
}



/* =========================================================
   FRAYORA — WEBSITE & DIGITAL INFRASTRUCTURE
   SECTION 05 — OUR WEBSITE PROCESS
   TABLET ONLY: 600px–1100px

   Compact editorial introduction
   Two-column process layout
   Fifth step centered below
   Dimensional circular illustrations
   Soft shadows, luminosity and animations

   DESKTOP AND MOBILE UNAFFECTED
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    /* =========================================
       SECTION BACKGROUND
    ========================================= */

    body .digital-process {
        position: relative;
        isolation: isolate;

        display: block;
        width: 100%;
        height: auto;
        min-height: 0;

        margin: 0;
        padding: 0;

        box-sizing: border-box;
        overflow: hidden;

        background-color: #F8F3EB !important;
        background-image: none !important;

        color: #1F211D;
    }

    /* REFINED SURFACE FINISH */

    body .digital-process::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;

        pointer-events: none;

        background: linear-gradient(
            115deg,
            rgba(255,255,255,0.10) 0%,
            transparent 55%,
            rgba(255,255,255,0.05) 100%
        );
    }

    /* ARCHITECTURAL CURVE */

    body .digital-process::after {
        content: "";
        position: absolute;
        z-index: 0;

        left: -28%;
        bottom: -60px;

        width: 80%;
        height: 210px;

        border-top: 1px solid rgba(201,103,67,0.14);
        border-radius: 50%;

        transform: rotate(-7deg);
        pointer-events: none;
    }

    /* =========================================
       MAIN CONTENT CONTAINER
       MATCH TABLET HEADER ALIGNMENT
    ========================================= */

    body .digital-process__inner {
        position: relative;
        z-index: 2;

        display: block;

        width: 100%;
        max-width: 1100px;

        margin: 0 auto;
        padding: 85px 60px 95px;

        box-sizing: border-box;
    }

    /* =========================================
       INTRO
       HEADING AND DESCRIPTION STACKED
    ========================================= */

    body .digital-process__intro {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        width: 100%;
        margin: 0 0 58px;
        padding: 0;

        gap: 0;
    }

    body .digital-process__intro-left,
    body .digital-process__intro-right {
        width: 100%;
        min-width: 0;
        max-width: 850px;

        margin: 0;
        padding: 0;
    }

    /* =========================================
       EYEBROW
    ========================================= */

    body .digital-process__eyebrow {
        margin: 0 0 24px;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 12px;
        line-height: 1.4;
        font-weight: 600;

        letter-spacing: 0.16em;
        text-transform: uppercase;

        color: #AD7258;
    }

    /* =========================================
       HEADING
    ========================================= */

    body .digital-process__title {
        width: 100%;
        max-width: 750px;

        margin: 0;
        padding: 0;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: clamp(39px, 4.6vw, 49px);
        line-height: 1.15;
        font-weight: 600;
        letter-spacing: -0.047em;

        color: #1F211D;
        text-wrap: balance;
    }

    /* =========================================
       BODY DESCRIPTION
    ========================================= */

    body .digital-process__body {
        width: 100%;
        max-width: 770px;

        margin: 25px 0 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 15px;
        line-height: 1.75;
        font-weight: 400;

        color: rgba(31,33,29,0.77);
    }

    /* =========================================
       PROCESS GRID — TWO COLUMNS
    ========================================= */

    body .digital-process__steps {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        column-gap: 52px;
        row-gap: 52px;

        width: 100%;

        margin: 0;
        padding: 0;

        align-items: start;
        box-sizing: border-box;
    }

    /* =========================================
       INDIVIDUAL PROCESS STEP
    ========================================= */

    body .digital-process__step {
        position: relative;

        display: flex;
        flex-direction: column;
        align-items: flex-start;

        width: 100%;
        min-width: 0;

        margin: 0;
        padding: 0;

        background: transparent;
        border: none;
        box-shadow: none;

        text-align: left;

        animation:
            digitalProcessReveal 850ms
            cubic-bezier(0.22,1,0.36,1)
            both;
    }

    /* FIFTH STEP — CENTERED ON LAST ROW */

    body .digital-process__step:nth-child(5) {
        grid-column: 1 / -1;

        width: calc((100% - 52px) / 2);
        max-width: 440px;

        justify-self: center;
    }

    /* =========================================
       NUMBER + ICON ROW
    ========================================= */

    body .digital-process__step-top {
        position: relative;

        display: flex;
        align-items: center;
        justify-content: flex-start;

        width: 100%;
        min-height: 78px;

        margin: 0 0 22px;
        padding: 0;
    }

    /* STEP NUMBERS */

    body .digital-process__number {
        display: inline-block;
        flex: 0 0 auto;

        margin: 0 16px 0 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 17px;
        line-height: 1;
        font-weight: 600;
        letter-spacing: -0.025em;

        color: #A66B50;
    }

    /* =========================================
       DIMENSIONAL ICON CIRCLES
    ========================================= */

    body .digital-process__icon-wrap {
        position: relative;
        flex: 0 0 auto;

        margin: 0;
        padding: 0;
    }

    body .digital-process__icon {
        position: relative;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 76px;
        height: 76px;

        border-radius: 50%;
        box-sizing: border-box;

        background-color: #F1E2D4;

        background-image: linear-gradient(
            145deg,
            rgba(255,255,255,0.68) 0%,
            rgba(241,226,212,0.82) 60%,
            rgba(232,211,194,0.72) 100%
        );

        border: 1px solid rgba(188,145,112,0.14);

        box-shadow:
            0 5px 11px rgba(75,49,34,0.045),
            0 17px 29px rgba(75,49,34,0.08),
            inset 0 2px 1px rgba(255,255,255,0.85),
            inset 0 -5px 12px rgba(136,91,62,0.045);

        transition:
            transform 400ms cubic-bezier(0.22,1,0.36,1),
            box-shadow 400ms ease;
    }

    /* INNER GLASS HIGHLIGHT */

    body .digital-process__icon::before {
        content: "";

        position: absolute;
        inset: 4px;

        border: 1px solid rgba(255,255,255,0.46);
        border-radius: 50%;

        pointer-events: none;
    }

    /* SVG ILLUSTRATIONS */

    body .digital-process__icon svg {
        position: relative;
        z-index: 1;

        display: block;

        width: 30px;
        height: 30px;

        fill: none;

        stroke: #725943;
        stroke-width: 1.7;

        stroke-linecap: round;
        stroke-linejoin: round;

        filter:
            drop-shadow(0 2px 2px rgba(82,54,36,0.09));
    }

    /* =========================================
       CONNECTOR LINES

       Hidden on tablet because the desktop
       horizontal connectors no longer match
       the two-column reading order.
    ========================================= */

    body .digital-process__connector {
        display: none;
    }

    /* =========================================
       PROCESS TITLES
    ========================================= */

    body .digital-process__step-title {
        width: 100%;

        margin: 0 0 12px;
        padding: 0;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: 19px;
        line-height: 1.35;
        font-weight: 650;

        letter-spacing: -0.033em;

        color: #1F211D;
    }

    /* =========================================
       PROCESS DESCRIPTIONS
    ========================================= */

    body .digital-process__step-body {
        width: 100%;
        max-width: 360px;

        margin: 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1.75;
        font-weight: 400;

        color: rgba(31,33,29,0.75);
    }

    /* =========================================
       SUPPORTING STATEMENT
    ========================================= */

    body .digital-process__footer {
        width: 100%;

        margin: 60px 0 0;
        padding: 0;

        text-align: center;
    }

    body .digital-process__support {
        width: 100%;
        max-width: 760px;

        margin: 0 auto;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 15px;
        line-height: 1.7;
        font-weight: 500;

        color: #384238;
        text-align: center;
    }

    /* =========================================
       HOVER INTERACTIONS
    ========================================= */

    @media (hover: hover) {

        body .digital-process__step:hover
        .digital-process__icon {
            transform: translateY(-4px);

            box-shadow:
                0 8px 16px rgba(75,49,34,0.06),
                0 24px 38px rgba(75,49,34,0.11),
                inset 0 2px 1px rgba(255,255,255,0.91);
        }
    }

    /* =========================================
       STAGGERED ENTRANCE
    ========================================= */

    body .digital-process__eyebrow,
    body .digital-process__title,
    body .digital-process__body,
    body .digital-process__support {
        animation:
            digitalProcessReveal 850ms
            cubic-bezier(0.22,1,0.36,1)
            both;
    }

    body .digital-process__eyebrow {
        animation-delay: 70ms;
    }

    body .digital-process__title {
        animation-delay: 160ms;
    }

    body .digital-process__body {
        animation-delay: 250ms;
    }

    body .digital-process__step:nth-child(1) {
        animation-delay: 290ms;
    }

    body .digital-process__step:nth-child(2) {
        animation-delay: 380ms;
    }

    body .digital-process__step:nth-child(3) {
        animation-delay: 470ms;
    }

    body .digital-process__step:nth-child(4) {
        animation-delay: 560ms;
    }

    body .digital-process__step:nth-child(5) {
        animation-delay: 650ms;
    }

    body .digital-process__support {
        animation-delay: 730ms;
    }
}

/* =========================================================
   SMALL TABLET — 600px–749px
========================================================= */

@media (min-width: 600px) and (max-width: 749px) {

    body .digital-process__inner {
        padding: 75px 45px 85px;
    }

    body .digital-process__intro {
        margin-bottom: 50px;
    }

    body .digital-process__title {
        font-size: 39px;
    }

    body .digital-process__body {
        font-size: 14px;
    }

    body .digital-process__steps {
        column-gap: 32px;
        row-gap: 46px;
    }

    body .digital-process__step:nth-child(5) {
        width: calc((100% - 32px) / 2);
    }

    body .digital-process__icon {
        width: 70px;
        height: 70px;
    }

    body .digital-process__icon svg {
        width: 28px;
        height: 28px;
    }

    body .digital-process__step-title {
        font-size: 18px;
    }

    body .digital-process__step-body {
        font-size: 13px;
    }

    body .digital-process__footer {
        margin-top: 50px;
    }

    body .digital-process__support {
        font-size: 14px;
    }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (min-width: 600px) and (max-width: 1100px)
       and (prefers-reduced-motion: reduce) {

    body .digital-process__eyebrow,
    body .digital-process__title,
    body .digital-process__body,
    body .digital-process__step,
    body .digital-process__support {
        animation: none;
        opacity: 1;
        translate: none;
        transform: none;
    }

    body .digital-process__icon {
        transition: none;
    }
}


/* =========================================================
   FRAYORA — WEBSITE & DIGITAL INFRASTRUCTURE
   SECTION 05 — HORIZONTAL PROCESS CAROUSEL
   TABLET ONLY: 600px–1100px

   Replaces 2-column tablet layout
   Two visible steps + next-step preview
   Native horizontal touch / trackpad scrolling
   Soft glass icons and terracotta scrollbar

   NO PHP CHANGES
   DESKTOP AND MOBILE UNAFFECTED
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    /* =========================================
       COMPACT SECTION SPACING
    ========================================= */

    body .digital-process__inner {
        padding-bottom: 85px;
    }

    body .digital-process__intro {
        margin-bottom: 45px;
    }

    /* =========================================
       HORIZONTAL SCROLLING TRACK
    ========================================= */

    body .digital-process__steps {
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;

        gap: 24px;

        width: 100%;
        max-width: 100%;

        margin: 0;
        padding: 0 0 24px;

        overflow-x: auto;
        overflow-y: hidden;

        scroll-snap-type: x mandatory;
        scroll-padding-inline: 0;
        scroll-behavior: smooth;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-inline: contain;

        scrollbar-width: thin;
        scrollbar-color: #BE947E rgba(201,103,67,0.10);
    }

    /* =========================================
       TERRACOTTA SCROLLBAR
    ========================================= */

    body .digital-process__steps::-webkit-scrollbar {
        height: 5px;
    }

    body .digital-process__steps::-webkit-scrollbar-track {
        background: rgba(201,103,67,0.10);
        border-radius: 999px;
    }

    body .digital-process__steps::-webkit-scrollbar-thumb {
        background: #BE947E;
        border-radius: 999px;
    }

    body .digital-process__steps::-webkit-scrollbar-thumb:hover {
        background: #A9755D;
    }

    /* =========================================
       INDIVIDUAL SLIDES
    ========================================= */

    body .digital-process__step,
    body .digital-process__step:nth-child(5) {
        position: relative;

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;

        flex: 0 0 calc((100% - 72px) / 2);
        width: calc((100% - 72px) / 2);
        max-width: none;
        min-width: 0;

        grid-column: auto;
        justify-self: auto;

        margin: 0;
        padding: 18px 6px 22px 0;

        box-sizing: border-box;

        scroll-snap-align: start;
        scroll-snap-stop: normal;

        background: transparent;
        border: none;
        box-shadow: none;

        text-align: left;
    }

    /* =========================================
       NUMBER + ICON
    ========================================= */

    body .digital-process__step-top {
        display: flex;
        align-items: center;

        width: 100%;
        min-height: 78px;

        margin: 0 0 23px;
        padding: 0;
    }

    body .digital-process__number {
        flex: 0 0 auto;

        margin-right: 15px;

        font-size: 17px;
        color: #A66B50;
    }

    body .digital-process__icon {
        width: 76px;
        height: 76px;
    }

    /* =========================================
       HEADINGS AND DESCRIPTIONS
    ========================================= */

    body .digital-process__step-title {
        margin: 0 0 12px;
        font-size: 19px;
    }

    body .digital-process__step-body {
        width: 100%;
        max-width: 300px;

        margin: 0;

        font-size: 14px;
        line-height: 1.75;
    }

    /* Desktop connector lines stay hidden */

    body .digital-process__connector {
        display: none;
    }

    /* =========================================
       SUPPORTING COPY
    ========================================= */

    body .digital-process__footer {
        margin-top: 35px;
    }
}

/* =========================================================
   SMALL TABLET — 600px–749px
========================================================= */

@media (min-width: 600px) and (max-width: 749px) {

    body .digital-process__steps {
        gap: 20px;
    }

    body .digital-process__step,
    body .digital-process__step:nth-child(5) {
        flex-basis: calc((100% - 60px) / 2);
        width: calc((100% - 60px) / 2);
    }

    body .digital-process__step-title {
        font-size: 18px;
    }

    body .digital-process__step-body {
        font-size: 13px;
    }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (min-width: 600px) and (max-width: 1100px)
       and (prefers-reduced-motion: reduce) {

    body .digital-process__steps {
        scroll-behavior: auto;
    }
}



/* =========================================================
   FRAYORA — WEBSITE & DIGITAL INFRASTRUCTURE
   SECTION 06 — FINAL CTA
   TABLET ONLY: 600px–1100px

   Centered editorial composition
   Warm peach and terracotta background
   Delicate architectural curves
   Luminous button and dimensional shadows
   Staggered entrance animations

   DESKTOP AND MOBILE UNAFFECTED
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    /* =========================================
       SECTION BACKGROUND
    ========================================= */

    body .digital-final-cta {
        position: relative;
        isolation: isolate;

        display: block;

        width: 100%;
        height: auto;
        min-height: 470px;

        margin: 0;
        padding: 0;

        box-sizing: border-box;
        overflow: hidden;

        background-color: #F5E8DF !important;

        background-image: linear-gradient(
            115deg,
            #DFB49D 0%,
            #F1DBCC 29%,
            #F9F1EA 53%,
            #F0D9CC 77%,
            #E6BDA7 100%
        ) !important;

        color: #1F211D;
    }

    /* =========================================
       SOFT SURFACE FINISH
    ========================================= */

    body .digital-final-cta::before {
        content: "";

        position: absolute;
        inset: 0;
        z-index: 0;

        pointer-events: none;

        background: none;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.70),
            inset 0 -24px 50px -48px rgba(87,52,36,0.16);
    }

    /* =========================================
       CENTERED CONTENT CONTAINER
    ========================================= */

    body .digital-final-cta__inner {
        position: relative;
        z-index: 3;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        max-width: 1100px;
        min-height: 470px;

        margin: 0 auto;
        padding: 80px 60px;

        box-sizing: border-box;
    }

    body .digital-final-cta__content {
        position: relative;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        width: 100%;
        max-width: 850px;

        margin: 0 auto;
        padding: 0;

        text-align: center;
    }

    /* =========================================
       HEADING
    ========================================= */

    body .digital-final-cta__title {
        width: 100%;
        max-width: 800px;

        margin: 0 auto;
        padding: 0;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: clamp(43px, 5.3vw, 58px);
        line-height: 1.12;
        font-weight: 600;
        letter-spacing: -0.05em;

        color: #1F211D;

        text-align: center;
        text-wrap: balance;

        text-shadow:
            0 2px 12px rgba(255,255,255,0.12);
    }

    /* =========================================
       TERRACOTTA CTA BUTTON
    ========================================= */

    body .digital-final-cta__button {
        position: relative;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        gap: 15px;

        width: fit-content;
        max-width: 100%;
        min-height: 55px;

        margin: 34px auto 0;
        padding: 16px 30px;

        box-sizing: border-box;

        border: 1px solid rgba(255,255,255,0.24);
        border-radius: 999px;

        background-color: #C96743;
        background-image: none;

        color: #FFFFFF;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1.2;
        font-weight: 600;

        text-decoration: none;

        box-shadow:
            0 6px 15px rgba(106,54,36,0.12),
            0 18px 36px rgba(106,54,36,0.17),
            inset 0 1px 0 rgba(255,255,255,0.22);

        transition:
            transform 300ms ease,
            background-color 300ms ease,
            box-shadow 300ms ease;
    }

    body .digital-final-cta__button span {
        display: inline-block;

        font-size: 20px;
        line-height: 1;

        transition: transform 300ms ease;
    }

    /* =========================================
       BUTTON INTERACTIONS
    ========================================= */

    body .digital-final-cta__button:hover {
        background-color: #B95635;

        transform: translateY(-3px);

        box-shadow:
            0 10px 22px rgba(106,54,36,0.15),
            0 24px 46px rgba(106,54,36,0.22),
            inset 0 1px 0 rgba(255,255,255,0.24);
    }

    body .digital-final-cta__button:hover span {
        transform: translateX(4px);
    }

    body .digital-final-cta__button:focus-visible {
        outline: 2px solid #394235;
        outline-offset: 4px;
    }

    /* =========================================
       ARCHITECTURAL CURVES
    ========================================= */

    body .digital-final-cta__art {
        position: absolute;
        inset: 0;
        z-index: 1;

        overflow: hidden;
        pointer-events: none;
    }

    body .digital-final-cta__arc {
        position: absolute;

        display: block;

        box-sizing: border-box;
        border-radius: 50%;

        background: transparent;
    }

    /* LARGE IVORY CURVE — LEFT */

    body .digital-final-cta__arc--one {
        width: 760px;
        height: 590px;

        left: -565px;
        top: -300px;

        border: 1.4px solid rgba(255,255,255,0.67);

        transform: rotate(-23deg);
    }

    /* FINE TERRACOTTA CURVE — LEFT */

    body .digital-final-cta__arc--two {
        width: 850px;
        height: 490px;

        left: -620px;
        top: 165px;

        border: 1.1px solid rgba(178,99,68,0.27);

        transform: rotate(15deg);
    }

    /* SWEEPING IVORY CURVE — RIGHT */

    body .digital-final-cta__arc--three {
        width: 850px;
        height: 570px;

        right: -555px;
        bottom: -330px;

        border: 1.4px solid rgba(255,255,255,0.68);

        transform: rotate(-18deg);
    }

    /* DASHED TERRACOTTA CURVE — TOP RIGHT */

    body .digital-final-cta__arc--four {
        width: 690px;
        height: 450px;

        right: -500px;
        top: -300px;

        border: 1.3px dashed rgba(192,103,70,0.41);

        transform: rotate(-23deg);
    }

    /* =========================================
       STAGGERED ENTRANCE ANIMATIONS
    ========================================= */

    body .digital-final-cta__title,
    body .digital-final-cta__button {
        animation:
            digitalFinalReveal 850ms
            cubic-bezier(0.22,1,0.36,1)
            both;
    }

    body .digital-final-cta__title {
        animation-delay: 120ms;
    }

    body .digital-final-cta__button {
        animation-delay: 290ms;
    }
}

/* =========================================================
   SMALL TABLET — 600px–749px
========================================================= */

@media (min-width: 600px) and (max-width: 749px) {

    body .digital-final-cta {
        min-height: 430px;
    }

    body .digital-final-cta__inner {
        min-height: 430px;
        padding: 70px 45px;
    }

    body .digital-final-cta__title {
        font-size: clamp(40px, 6.3vw, 45px);
    }

    body .digital-final-cta__button {
        margin-top: 31px;
        padding: 15px 27px;
    }

    /* KEEP DECORATIVE CURVES AWAY FROM TEXT */

    body .digital-final-cta__arc--one {
        left: -620px;
    }

    body .digital-final-cta__arc--three {
        right: -625px;
    }
}

/* =========================================================
   ACCESSIBILITY — REDUCED MOTION
========================================================= */

@media (min-width: 600px) and (max-width: 1100px)
       and (prefers-reduced-motion: reduce) {

    body .digital-final-cta__title,
    body .digital-final-cta__button {
        animation: none;
        opacity: 1;
        translate: none;
        transform: none;
    }

    body .digital-final-cta__button,
    body .digital-final-cta__button span {
        transition: none;
    }
}



/* =========================================================
   FRAYORA — WEBSITE & DIGITAL INFRASTRUCTURE
   SECTION 01 — HERO — MOBILE
   599px AND BELOW

   Visual first, content underneath
   Left-aligned with Frayora mobile logo
   Compact, immersive olive hero
   Dimensional glass illustration
   Soft shadows and floating motion

   DESKTOP AND TABLET UNAFFECTED
========================================================= */

@media (max-width: 599px) {

    /* =========================================
       01 — HERO BACKGROUND
    ========================================= */

    body .digital-hero {
        position: relative;
        isolation: isolate;

        display: block;
        width: 100%;

        height: auto;
        min-height: 0;
        max-height: none;

        margin: 0;
        padding: 0;

        box-sizing: border-box;
        overflow: hidden;

        background-color: #283429 !important;

        background-image:
            url("../images/Business in a box/herotablet.png") !important;

        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;

        color: #F8F3EB;
    }

    /* =========================================
       02 — SUBTLE OLIVE OVERLAY
    ========================================= */

    body .digital-hero::before {
        content: "";
        position: absolute;

        inset: 0;
        z-index: 0;

        pointer-events: none;

        background: linear-gradient(
            180deg,
            rgba(17,26,18,0.08) 0%,
            rgba(17,26,18,0.12) 44%,
            rgba(17,26,18,0.25) 100%
        );
    }

    /* REFINED SURFACE FINISH */

    body .digital-hero::after {
        content: "";

        position: absolute;
        inset: 0;
        z-index: 1;

        pointer-events: none;

        background: none;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.07),
            inset 0 -20px 40px -45px rgba(0,0,0,0.20);
    }

    /* =========================================
       03 — MOBILE CONTENT CONTAINER
    ========================================= */

    body .digital-hero__inner {
        position: relative;
        z-index: 2;

        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;

        width: 100%;
        max-width: none;

        height: auto;
        min-height: 0;
        max-height: none;

        margin: 0 auto;
        padding: 48px 28px 88px 34px;

        box-sizing: border-box;
    }

    /* =========================================
       04 — GLASS WEBSITE ILLUSTRATION
       ABOVE ALL HERO TEXT
    ========================================= */

    body .digital-hero__visual {
        position: relative;
        z-index: 3;

        display: flex;
        align-items: center;
        justify-content: center;

        order: -1;
        align-self: center;

        width: 100%;
        max-width: 100%;

        height: auto;
        min-height: 0;

        top: auto;
        right: auto;
        bottom: auto;
        left: auto;

        margin: 0 0 24px;
        padding: 0;

        box-sizing: border-box;

        transform: none;
        pointer-events: none;

        filter:
            drop-shadow(0 12px 20px rgba(5,15,8,0.12))
            drop-shadow(0 25px 36px rgba(5,15,8,0.17));

        animation:
            digitalMobileVisualReveal 950ms
            cubic-bezier(0.22,1,0.36,1)
            120ms both;
    }

    body .digital-hero__visual img {
        display: block;

        width: 100%;
        max-width: 370px;
        min-width: 0;

        height: auto;
        max-height: none;

        margin: 0;
        padding: 0;

        object-fit: contain;
        object-position: center;

        filter:
            brightness(1.03)
            contrast(1.02);

        animation:
            digitalMobileVisualFloat 7s
            ease-in-out 1.2s infinite;
    }

    /* =========================================
       05 — LEFT-ALIGNED HERO COPY
    ========================================= */

    body .digital-hero__content {
        position: relative;
        z-index: 4;

        display: block;

        order: 1;
        align-self: stretch;

        width: 100%;
        max-width: none;
        min-width: 0;

        margin: 0;
        padding: 0;

        text-align: left;
        transform: none;
    }

    /* =========================================
       06 — EYEBROW
    ========================================= */

    body .digital-hero__eyebrow {
        width: 100%;

        margin: 0 0 25px;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 11px;
        line-height: 1.5;
        font-weight: 600;

        letter-spacing: 0.12em;
        text-transform: uppercase;

        color: #E8D8C0;

        text-shadow:
            0 1px 5px rgba(0,0,0,0.12);
    }

    /* =========================================
       07 — HERO HEADING
    ========================================= */

    body .digital-hero__title {
        width: 100%;
        max-width: none;

        margin: 0;
        padding: 0;

        font-family: "Manrope", "Inter", sans-serif;

        font-size: clamp(35px, 8.7vw, 46px);
        line-height: 1.13;
        font-weight: 600;

        letter-spacing: -0.049em;

        color: #F8F3EB;

        text-align: left;
        text-wrap: balance;

        overflow-wrap: normal;

        text-shadow:
            0 3px 16px rgba(0,0,0,0.12);
    }

    /* =========================================
       08 — MAIN BODY COPY
    ========================================= */

    body .digital-hero__body {
        width: 100%;
        max-width: none;

        margin: 29px 0 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1.8;
        font-weight: 400;

        letter-spacing: -0.005em;

        color: rgba(248,243,235,0.93);

        text-shadow:
            0 2px 8px rgba(0,0,0,0.11);
    }

    /* =========================================
       09 — SUPPORTING COPY
    ========================================= */

    body .digital-hero__statement {
        width: 100%;
        max-width: none;

        margin: 26px 0 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1.7;
        font-weight: 600;

        letter-spacing: -0.01em;

        color: #F8F3EB;
    }

    /* =========================================
       10 — TERRACOTTA CTA BUTTON
    ========================================= */

    body .digital-hero__button {
        position: relative;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        gap: 14px;

        width: fit-content;
        max-width: 100%;
        min-height: 54px;

        margin: 33px 0 0;
        padding: 16px 25px;

        box-sizing: border-box;

        border: 1px solid rgba(255,255,255,0.13);
        border-radius: 999px;

        background-color: #C96743;
        background-image: none;

        color: #FFFFFF;

        font-family: "Inter", sans-serif;
        font-size: 13px;
        line-height: 1.3;
        font-weight: 600;

        text-decoration: none;

        box-shadow:
            0 5px 12px rgba(11,20,13,0.13),
            0 16px 30px rgba(11,20,13,0.20),
            inset 0 1px 0 rgba(255,255,255,0.15);

        transition:
            background-color 300ms ease,
            transform 300ms ease,
            box-shadow 300ms ease;
    }

    body .digital-hero__button span {
        display: inline-block;

        font-size: 20px;
        line-height: 1;

        transition: transform 300ms ease;
    }

    body .digital-hero__button:hover {
        background-color: #D57450;
        transform: translateY(-3px);

        box-shadow:
            0 8px 16px rgba(11,20,13,0.16),
            0 22px 38px rgba(11,20,13,0.23);
    }

    body .digital-hero__button:hover span {
        transform: translateX(4px);
    }

    body .digital-hero__button:focus-visible {
        outline: 2px solid #F8F3EB;
        outline-offset: 4px;
    }

    /* =========================================
       11 — STAGGERED TEXT ANIMATIONS
    ========================================= */

    body .digital-hero__eyebrow,
    body .digital-hero__title,
    body .digital-hero__body,
    body .digital-hero__statement,
    body .digital-hero__button {
        animation:
            digitalMobileTextReveal 850ms
            cubic-bezier(0.22,1,0.36,1)
            both;
    }

    body .digital-hero__eyebrow {
        animation-delay: 160ms;
    }

    body .digital-hero__title {
        animation-delay: 250ms;
    }

    body .digital-hero__body {
        animation-delay: 350ms;
    }

    body .digital-hero__statement {
        animation-delay: 450ms;
    }

    body .digital-hero__button {
        animation-delay: 550ms;
    }
}

/* =========================================================
   SMALL MOBILE — 374px AND BELOW
========================================================= */

@media (max-width: 374px) {

    body .digital-hero__inner {
        padding: 40px 23px 78px 29px;
    }

    body .digital-hero__visual {
        margin-bottom: 18px;
    }

    body .digital-hero__visual img {
        max-width: 310px;
    }

    body .digital-hero__eyebrow {
        font-size: 10px;
        letter-spacing: 0.10em;
    }

    body .digital-hero__title {
        font-size: 34px;
        line-height: 1.14;
    }

    body .digital-hero__body,
    body .digital-hero__statement {
        font-size: 13px;
    }

    body .digital-hero__button {
        font-size: 12px;
        padding: 15px 21px;
    }
}

/* =========================================================
   MOBILE ANIMATIONS
========================================================= */

@keyframes digitalMobileVisualReveal {
    from {
        opacity: 0;
        translate: 0 18px;
        scale: 0.97;
    }

    to {
        opacity: 1;
        translate: 0 0;
        scale: 1;
    }
}

@keyframes digitalMobileTextReveal {
    from {
        opacity: 0;
        translate: 0 20px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

@keyframes digitalMobileVisualFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (max-width: 599px) and
       (prefers-reduced-motion: reduce) {

    body .digital-hero__visual,
    body .digital-hero__visual img,
    body .digital-hero__eyebrow,
    body .digital-hero__title,
    body .digital-hero__body,
    body .digital-hero__statement,
    body .digital-hero__button {
        animation: none;
        opacity: 1;
        translate: none;
        scale: 1;
        transform: none;
    }

    body .digital-hero__button,
    body .digital-hero__button span {
        transition: none;
    }
}


/* =========================================================
   FRAYORA — WEBSITE & DIGITAL INFRASTRUCTURE
   SECTION 01 — MOBILE HERO REFINEMENT
   599px AND BELOW

   Smaller floating website illustration
   Reduced top padding
   Tighter visual-to-eyebrow spacing
   Increased bottom padding

   DESKTOP AND TABLET UNAFFECTED
========================================================= */

@media (max-width: 599px) {

    /* =========================================
       HERO SPACING
    ========================================= */

    body .digital-hero__inner {
        padding-top: 26px;
        padding-bottom: 110px;
    }

    /* =========================================
       SMALLER WEBSITE ILLUSTRATION
    ========================================= */

    body .digital-hero__visual {
        width: 100%;
        max-width: 100%;
        position: relative;
        top: -15px;

        margin-top: 0;
        margin-bottom: -45px;

        padding: 0;

        align-self: center;
        justify-content: center;
    }

    body .digital-hero__visual img {
        width: 85%;
        max-width: 315px;
        height: auto;

        margin: 0 auto;

        object-fit: contain;
        object-position: center;

        /* Keep existing floating animation */
    }

    /* =========================================
       EYEBROW SPACING
    ========================================= */

    body .digital-hero__content {
        margin-top: 0;
        padding-top: 0;
    }

    body .digital-hero__eyebrow {
        margin-top: 0;
        margin-bottom: 25px;
    }
}

/* =========================================================
   SMALL MOBILE — 374px AND BELOW
========================================================= */

@media (max-width: 374px) {

    body .digital-hero__inner {
        padding-top: 24px;
        padding-bottom: 95px;
    }

    body .digital-hero__visual {
        margin-bottom: -35px;
    }

    body .digital-hero__visual img {
        width: 88%;
        max-width: 285px;
    }
}



/* =========================================================
   FRAYORA — WEBSITE & DIGITAL INFRASTRUCTURE
   SECTION 02 — WHAT WE DESIGN
   MOBILE ONLY: 599px AND BELOW

   Editorial mobile typography
   Four vertically stacked service items
   Soft glass-like dimensional icons
   Subtle Bond-inspired surface depth
   Warm shadows and staggered animations

   DESKTOP AND TABLET UNAFFECTED
========================================================= */

@media (max-width: 599px) {

    /* =========================================
       SECTION BACKGROUND
    ========================================= */

    body .digital-design {
        position: relative;
        isolation: isolate;

        display: block;
        width: 100%;
        height: auto;
        min-height: 0;

        margin: 0;
        padding: 76px 0 88px;

        box-sizing: border-box;
        overflow: hidden;

        background-color: #F8F3EB !important;
        background-image: none !important;

        color: #1F211D;
    }

    /* =========================================
       CONTENT CONTAINER
       MATCH MOBILE LOGO ALIGNMENT
    ========================================= */

    body .digital-design__inner {
        position: relative;
        z-index: 2;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        width: 100%;
        max-width: none;

        margin: 0 auto;
        padding: 0 28px 0 34px;

        box-sizing: border-box;
    }

    /* =========================================
       EDITORIAL INTRO
    ========================================= */

    body .digital-design__intro {
        position: relative;

        width: 100%;
        max-width: none;

        margin: 0 0 50px;
        padding: 0;

        text-align: left;
    }

    /* EYEBROW */

    body .digital-design__eyebrow {
        margin: 0 0 22px;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 11px;
        line-height: 1.5;
        font-weight: 600;

        letter-spacing: 0.15em;
        text-transform: uppercase;

        color: #AD7258;
    }

    /* =========================================
       MAIN HEADING
    ========================================= */

    body .digital-design__title {
        width: 100%;
        max-width: 500px;

        margin: 0;
        padding: 0;

        font-family: "Manrope", "Inter", sans-serif;

        font-size: clamp(32px, 8vw, 43px);
        line-height: 1.16;
        font-weight: 600;

        letter-spacing: -0.047em;

        color: #1F211D;

        text-align: left;
        text-wrap: balance;
    }

    /* =========================================
       DESCRIPTION
    ========================================= */

    body .digital-design__body {
        display: block;

        width: 100%;
        max-width: 470px;

        margin: 25px 0 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1.8;
        font-weight: 400;

        color: rgba(31,33,29,0.76);

        text-align: left;
    }

    /* =========================================
       SERVICE GRID
       VERTICAL MOBILE LAYOUT
    ========================================= */

    body .digital-design__grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);

        gap: 0;

        width: 100%;
        margin: 0;
        padding: 0;

        box-sizing: border-box;
    }

    /* =========================================
       INDIVIDUAL SERVICE ITEMS
    ========================================= */

    body .digital-design__item {
        position: relative;

        display: block;

        width: 100%;
        min-width: 0;

        margin: 0;
        padding: 0 0 34px;

        background: transparent;
        border: none;
        box-shadow: none;

        text-align: left;

        transition:
            transform 350ms cubic-bezier(0.22,1,0.36,1);
    }

    /* DIVIDERS BETWEEN ITEMS */

    body .digital-design__item:not(:last-child) {
        margin-bottom: 34px;

        border-bottom:
            1px solid rgba(155,120,96,0.16);
    }

    body .digital-design__item:last-child {
        padding-bottom: 0;
    }

    /* =========================================
       NUMBER + ICON ROW
    ========================================= */

    body .digital-design__top {
        display: flex;
        align-items: center;
        justify-content: flex-start;

        gap: 17px;

        width: 100%;
        min-height: 78px;

        margin: 0 0 22px;
        padding: 0;
    }

    /* TERRACOTTA NUMBER */

    body .digital-design__number {
        display: inline-block;
        flex: 0 0 auto;

        margin: 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 17px;
        line-height: 1;
        font-weight: 600;

        letter-spacing: -0.025em;

        color: #98664D;
    }

    /* =========================================
       DIMENSIONAL ICON CIRCLES
    ========================================= */

    body .digital-design__icon {
        position: relative;

        display: flex;
        align-items: center;
        justify-content: center;

        flex: 0 0 78px;

        width: 78px;
        height: 78px;

        box-sizing: border-box;
        border-radius: 50%;

        background-color: #F1E2D4;

        background-image: linear-gradient(
            145deg,
            rgba(255,255,255,0.73) 0%,
            rgba(246,233,221,0.89) 40%,
            rgba(234,213,197,0.90) 100%
        );

        border:
            1px solid rgba(178,133,102,0.14);

        box-shadow:
            0 5px 12px rgba(75,49,34,0.04),
            0 16px 28px rgba(75,49,34,0.09),
            inset 0 2px 1px rgba(255,255,255,0.88),
            inset 0 -5px 12px rgba(136,91,62,0.045);

        transition:
            transform 400ms cubic-bezier(0.22,1,0.36,1),
            box-shadow 400ms ease;
    }

    /* SUBTLE INNER GLASS RING */

    body .digital-design__icon::before {
        content: "";

        position: absolute;
        inset: 4px;

        border-radius: 50%;

        border:
            1px solid rgba(255,255,255,0.48);

        pointer-events: none;
    }

    /* =========================================
       SVG ICONS
    ========================================= */

    body .digital-design__icon svg {
        position: relative;
        z-index: 2;

        display: block;

        width: 34px;
        height: 34px;

        color: #655141;
        stroke: currentColor;
        stroke-width: 1.6;

        stroke-linecap: round;
        stroke-linejoin: round;

        filter:
            drop-shadow(0 2px 2px rgba(61,42,30,0.09));

        transition:
            transform 400ms ease;
    }

    /* =========================================
       SERVICE HEADINGS
    ========================================= */

    body .digital-design__item h3 {
        width: 100%;

        margin: 0 0 13px;
        padding: 0;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: 21px;
        line-height: 1.35;
        font-weight: 650;

        letter-spacing: -0.034em;

        color: #1F211D;
    }

    /* =========================================
       SERVICE DESCRIPTIONS
    ========================================= */

    body .digital-design__item p {
        width: 100%;
        max-width: 440px;

        margin: 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1.75;
        font-weight: 400;

        color: rgba(31,33,29,0.76);
    }

    /* =========================================
       ARCHITECTURAL LINEWORK
       BOTTOM-LEFT
    ========================================= */

    body .digital-design__art {
        position: absolute;
        z-index: 0;

        left: -310px;
        bottom: -370px;

        width: 630px;
        height: 480px;

        pointer-events: none;
        overflow: hidden;
    }

    body .digital-design__arc {
        position: absolute;

        display: block;

        width: 700px;
        height: 510px;

        box-sizing: border-box;

        border:
            1px solid rgba(201,103,67,0.15);

        border-radius: 50%;
        background: transparent;
    }

    body .digital-design__arc--one {
        left: -150px;
        top: 100px;

        transform: rotate(23deg);

        border-color:
            rgba(201,103,67,0.23);
    }

    body .digital-design__arc--two {
        left: -55px;
        top: 135px;

        transform: rotate(18deg);

        border-color:
            rgba(201,103,67,0.16);
    }

    body .digital-design__arc--three {
        left: 40px;
        top: 180px;

        transform: rotate(13deg);

        border-color:
            rgba(201,103,67,0.10);
    }

    /* =========================================
       STAGGERED ENTRANCE ANIMATIONS
    ========================================= */

    body .digital-design__eyebrow,
    body .digital-design__title,
    body .digital-design__body,
    body .digital-design__item {
        animation:
            digitalDesignMobileReveal 850ms
            cubic-bezier(0.22,1,0.36,1)
            both;
    }

    body .digital-design__eyebrow {
        animation-delay: 60ms;
    }

    body .digital-design__title {
        animation-delay: 150ms;
    }

    body .digital-design__body {
        animation-delay: 240ms;
    }

    body .digital-design__item:nth-child(1) {
        animation-delay: 200ms;
    }

    body .digital-design__item:nth-child(2) {
        animation-delay: 300ms;
    }

    body .digital-design__item:nth-child(3) {
        animation-delay: 400ms;
    }

    body .digital-design__item:nth-child(4) {
        animation-delay: 500ms;
    }

    /* =========================================
       TOUCH / HOVER REFINEMENT
    ========================================= */

    @media (hover: hover) {

        body .digital-design__item:hover {
            transform: translateY(-3px);
        }

        body .digital-design__item:hover
        .digital-design__icon {
            transform: translateY(-4px) scale(1.03);

            box-shadow:
                0 8px 16px rgba(75,49,34,0.055),
                0 23px 37px rgba(75,49,34,0.11),
                inset 0 2px 1px rgba(255,255,255,0.88);
        }

        body .digital-design__item:hover svg {
            transform: scale(1.07);
        }
    }
}

/* =========================================================
   SMALL MOBILE — 374px AND BELOW
========================================================= */

@media (max-width: 374px) {

    body .digital-design {
        padding-top: 67px;
        padding-bottom: 75px;
    }

    body .digital-design__inner {
        padding-left: 29px;
        padding-right: 23px;
    }

    body .digital-design__intro {
        margin-bottom: 43px;
    }

    body .digital-design__eyebrow {
        font-size: 10px;
    }

    body .digital-design__title {
        font-size: 31px;
    }

    body .digital-design__body {
        font-size: 13px;
    }

    body .digital-design__icon {
        flex-basis: 70px;

        width: 70px;
        height: 70px;
    }

    body .digital-design__icon svg {
        width: 30px;
        height: 30px;
    }

    body .digital-design__top {
        margin-bottom: 19px;
    }

    body .digital-design__item h3 {
        font-size: 19px;
    }

    body .digital-design__item p {
        font-size: 13px;
    }
}

/* =========================================================
   MOBILE ENTRANCE ANIMATION
========================================================= */

@keyframes digitalDesignMobileReveal {
    from {
        opacity: 0;
        translate: 0 22px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (max-width: 599px) and
       (prefers-reduced-motion: reduce) {

    body .digital-design__eyebrow,
    body .digital-design__title,
    body .digital-design__body,
    body .digital-design__item {
        animation: none;
        opacity: 1;
        translate: none;
        transform: none;
    }

    body .digital-design__item,
    body .digital-design__icon,
    body .digital-design__icon svg {
        transition: none;
    }
}


/* =========================================================
   FRAYORA — WEBSITE & DIGITAL INFRASTRUCTURE
   SECTION 02 — MOBILE SERVICE ALIGNMENT FIX
   599px AND BELOW

   Number above icon
   Centered icon, heading and description
   Refined spacing and shadows

   DESKTOP AND TABLET UNAFFECTED
========================================================= */

@media (max-width: 599px) {

    /* =========================================
       CENTER EACH SERVICE ITEM
    ========================================= */

    body .digital-design__item {
        display: flex;
        flex-direction: column;
        align-items: center;

        width: 100%;
        min-width: 0;

        text-align: center;
    }

    /* =========================================
       NUMBER ABOVE ICON
    ========================================= */

    body .digital-design__top {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 16px;

        width: 100%;
        height: auto;
        min-height: 0;

        margin: 0 0 29px;
        padding: 0;

        text-align: center;
    }

    /* =========================================
       CENTERED NUMBER
    ========================================= */

    body .digital-design__number {
        display: block;

        flex: none;

        width: auto;
        margin: 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 16px;
        line-height: 1.2;
        font-weight: 600;

        letter-spacing: 0.02em;

        color: #98664D;

        text-align: center;
    }

    /* =========================================
       CENTERED GLASS ICON
    ========================================= */

    body .digital-design__icon {
        display: flex;
        align-items: center;
        justify-content: center;

        flex: none;

        width: 82px;
        height: 82px;

        margin: 0 auto;

        border-radius: 50%;

        box-shadow:
            0 6px 14px rgba(75,49,34,0.045),
            0 19px 33px rgba(75,49,34,0.09),
            inset 0 2px 1px rgba(255,255,255,0.88),
            inset 0 -5px 12px rgba(136,91,62,0.045);
    }

    /* =========================================
       CENTER SERVICE HEADING
    ========================================= */

    body .digital-design__item h3 {
        width: 100%;
        max-width: 370px;

        margin: 0 0 14px;
        padding: 0;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: 21px;
        line-height: 1.35;
        font-weight: 650;

        letter-spacing: -0.034em;

        color: #1F211D;

        text-align: center;
    }

    /* =========================================
       CENTER DESCRIPTION
    ========================================= */

    body .digital-design__item p {
        width: 100%;
        max-width: 350px;

        margin: 0 auto;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1.75;
        font-weight: 400;

        color: rgba(31,33,29,0.76);

        text-align: center;
    }

    /* =========================================
       SPACING BETWEEN SERVICE ITEMS
    ========================================= */

    body .digital-design__item {
        padding-bottom: 38px;
    }

    body .digital-design__item:not(:last-child) {
        margin-bottom: 38px;
    }

    body .digital-design__item:last-child {
        padding-bottom: 0;
    }
}

/* =========================================================
   SMALL MOBILE — 374px AND BELOW
========================================================= */

@media (max-width: 374px) {

    body .digital-design__top {
        gap: 14px;
        margin-bottom: 25px;
    }

    body .digital-design__icon {
        width: 74px;
        height: 74px;
    }

    body .digital-design__item h3 {
        font-size: 19px;
    }

    body .digital-design__item p {
        font-size: 13px;
    }
}


/* =========================================================
   FRAYORA — WEBSITE & DIGITAL INFRASTRUCTURE
   SECTION 03 — THE IMPACT
   MOBILE ONLY: 599px AND BELOW

   Single-column frosted glass cards
   Compact editorial typography
   Dimensional illustrations and shadows
   Refined surface luminosity
   Staggered entrance animations

   DESKTOP AND TABLET UNAFFECTED
========================================================= */

@media (max-width: 599px) {

    /* =========================================
       SECTION BACKGROUND
    ========================================= */

    body .digital-benefits {
        position: relative;
        isolation: isolate;

        display: block;
        width: 100%;
        height: auto;
        min-height: 0;

        margin: 0;
        padding: 74px 0 87px;

        box-sizing: border-box;
        overflow: hidden;

        background-color: #F5EDE4 !important;
        background-image: none !important;

        color: #1F211D;
    }

    /* =========================================
       CONTENT CONTAINER
       MATCH MOBILE LOGO ALIGNMENT
    ========================================= */

    body .digital-benefits__inner {
        position: relative;
        z-index: 2;

        display: block;

        width: 100%;
        max-width: none;

        margin: 0 auto;
        padding: 0 28px 0 34px;

        box-sizing: border-box;
    }

    /* =========================================
       EDITORIAL INTRO
    ========================================= */

    body .digital-benefits__intro {
        width: 100%;
        max-width: none;

        margin: 0 0 39px;
        padding: 0;

        text-align: left;
    }

    /* EYEBROW */

    body .digital-benefits__eyebrow {
        margin: 0 0 21px;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 11px;
        line-height: 1.5;
        font-weight: 600;

        letter-spacing: 0.15em;
        text-transform: uppercase;

        color: #AD7258;
    }

    /* HEADING */

    body .digital-benefits__title {
        width: 100%;
        max-width: 480px;

        margin: 0;
        padding: 0;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: clamp(32px, 8vw, 43px);
        line-height: 1.16;
        font-weight: 600;

        letter-spacing: -0.047em;

        color: #1F211D;

        text-align: left;
        text-wrap: balance;
    }

    /* =========================================
       SINGLE-COLUMN GLASS CARD GRID
    ========================================= */

    body .digital-benefits__grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);

        gap: 22px;

        width: 100%;
        margin: 0;
        padding: 0;

        align-items: stretch;
        box-sizing: border-box;
    }

    /* =========================================
       FROSTED GLASS CARD
    ========================================= */

    body .digital-benefits__card {
        position: relative;
        isolation: isolate;

        display: flex;
        flex-direction: column;

        width: 100%;
        min-width: 0;
        min-height: 0;

        margin: 0;
        padding: 23px 25px 29px;

        box-sizing: border-box;

        border: 1px solid rgba(255,255,255,0.84);
        border-radius: 17px;

        background-color: rgba(255,253,250,0.84);

        background-image: linear-gradient(
            145deg,
            rgba(255,255,255,0.68) 0%,
            rgba(255,255,255,0.22) 48%,
            rgba(244,230,218,0.08) 75%,
            rgba(255,255,255,0.18) 100%
        );

        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);

        box-shadow:
            0 5px 13px rgba(75,51,36,0.035),
            0 18px 36px rgba(75,51,36,0.075),
            0 30px 55px rgba(75,51,36,0.03),
            inset 0 1px 0 rgba(255,255,255,0.94);

        transition:
            transform 420ms cubic-bezier(0.22,1,0.36,1),
            box-shadow 420ms ease,
            background-color 420ms ease;
    }

    /* SUBTLE GLASS REFLECTION */

    body .digital-benefits__card::before {
        content: "";

        position: absolute;
        inset: 0;
        z-index: 0;

        border-radius: inherit;

        background: linear-gradient(
            135deg,
            rgba(255,255,255,0.24) 0%,
            rgba(255,255,255,0.05) 35%,
            transparent 68%
        );

        pointer-events: none;
    }

    /* KEEP CONTENT ABOVE GLASS REFLECTION */

    body .digital-benefits__card > * {
        position: relative;
        z-index: 1;
    }

    /* =========================================
       CARD NUMBER
    ========================================= */

    body .digital-benefits__number {
        position: absolute;
        z-index: 3;

        top: 23px;
        right: 25px;

        font-family: "Inter", sans-serif;
        font-size: 12px;
        line-height: 1;
        font-weight: 600;

        letter-spacing: 0.04em;

        color: #AD7258;
    }

    /* =========================================
       CENTERED ILLUSTRATION STAGE
    ========================================= */

    body .digital-benefits__visual {
        position: relative;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        height: 125px;

        margin: 8px 0 19px;

        border-radius: 12px;

        background: none;

        transition:
            transform 420ms cubic-bezier(0.22,1,0.36,1);
    }

    /* =========================================
       DIMENSIONAL ICON ILLUSTRATIONS
    ========================================= */

    body .digital-benefits__visual svg {
        display: block;

        width: 116px;
        height: 102px;

        max-width: 100%;

        overflow: visible;

        filter:
            drop-shadow(0 3px 4px rgba(103,69,48,0.08))
            drop-shadow(0 10px 14px rgba(103,69,48,0.12));

        transition:
            transform 420ms ease,
            filter 420ms ease;
    }

    /* PRESERVE EACH ICON'S INDIVIDUAL CHARACTER */

    body .digital-benefits__visual--navigation svg {
        transform: rotate(-3deg);
    }

    body .digital-benefits__visual--structure svg {
        transform: perspective(500px) rotateY(-7deg);
    }

    body .digital-benefits__visual--mobile svg {
        transform: rotate(3deg);
    }

    body .digital-benefits__visual--brand svg {
        transform: scale(1.02);
    }

    /* =========================================
       CARD HEADINGS
    ========================================= */

    body .digital-benefits__card h3 {
        width: 100%;

        margin: 0 0 11px;
        padding: 0;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: 19px;
        line-height: 1.35;
        font-weight: 650;

        letter-spacing: -0.034em;

        color: #1F211D;
    }

    /* =========================================
       CARD DESCRIPTIONS
    ========================================= */

    body .digital-benefits__card p {
        width: 100%;

        margin: 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1.7;
        font-weight: 400;

        color: rgba(31,33,29,0.76);
    }

    /* =========================================
       ARCHITECTURAL CURVES — BOTTOM RIGHT
    ========================================= */

    body .digital-benefits__art {
        position: absolute;
        z-index: 0;

        right: -335px;
        bottom: -365px;

        width: 650px;
        height: 490px;

        overflow: hidden;
        pointer-events: none;
    }

    body .digital-benefits__arc {
        position: absolute;

        display: block;

        width: 710px;
        height: 510px;

        box-sizing: border-box;

        border: 1px solid rgba(201,103,67,0.14);
        border-radius: 50%;

        background: transparent;
    }

    body .digital-benefits__arc--one {
        left: -5px;
        top: 90px;

        transform: rotate(-20deg);

        border-color: rgba(201,103,67,0.21);
    }

    body .digital-benefits__arc--two {
        left: 100px;
        top: 130px;

        transform: rotate(-15deg);

        border-color: rgba(201,103,67,0.13);
    }

    /* =========================================
       HOVER INTERACTIONS
    ========================================= */

    @media (hover: hover) {

        body .digital-benefits__card:hover {
            transform: translateY(-5px);

            background-color: rgba(255,255,255,0.93);

            box-shadow:
                0 8px 18px rgba(75,51,36,0.05),
                0 25px 48px rgba(75,51,36,0.10),
                inset 0 1px 0 rgba(255,255,255,1);
        }

        body .digital-benefits__card:hover
        .digital-benefits__visual {
            transform: translateY(-3px);
        }
    }

    /* =========================================
       STAGGERED ENTRANCE ANIMATIONS
    ========================================= */

    body .digital-benefits__eyebrow,
    body .digital-benefits__title,
    body .digital-benefits__card {
        animation:
            digitalBenefitsMobileReveal 850ms
            cubic-bezier(0.22,1,0.36,1)
            both;
    }

    body .digital-benefits__eyebrow {
        animation-delay: 60ms;
    }

    body .digital-benefits__title {
        animation-delay: 150ms;
    }

    body .digital-benefits__card:nth-child(1) {
        animation-delay: 200ms;
    }

    body .digital-benefits__card:nth-child(2) {
        animation-delay: 300ms;
    }

    body .digital-benefits__card:nth-child(3) {
        animation-delay: 400ms;
    }

    body .digital-benefits__card:nth-child(4) {
        animation-delay: 500ms;
    }
}

/* =========================================================
   SMALL MOBILE — 374px AND BELOW
========================================================= */

@media (max-width: 374px) {

    body .digital-benefits {
        padding-top: 66px;
        padding-bottom: 76px;
    }

    body .digital-benefits__inner {
        padding-left: 29px;
        padding-right: 23px;
    }

    body .digital-benefits__title {
        font-size: 31px;
    }

    body .digital-benefits__grid {
        gap: 19px;
    }

    body .digital-benefits__card {
        padding: 20px 21px 25px;
    }

    body .digital-benefits__number {
        top: 21px;
        right: 21px;
    }

    body .digital-benefits__visual {
        height: 111px;
        margin-bottom: 16px;
    }

    body .digital-benefits__visual svg {
        width: 101px;
        height: 90px;
    }

    body .digital-benefits__card h3 {
        font-size: 18px;
    }

    body .digital-benefits__card p {
        font-size: 13px;
    }
}

/* =========================================================
   MOBILE ENTRANCE ANIMATION
========================================================= */

@keyframes digitalBenefitsMobileReveal {
    from {
        opacity: 0;
        translate: 0 22px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

/* =========================================================
   ACCESSIBILITY — REDUCED MOTION
========================================================= */

@media (max-width: 599px) and
       (prefers-reduced-motion: reduce) {

    body .digital-benefits__eyebrow,
    body .digital-benefits__title,
    body .digital-benefits__card {
        animation: none;
        opacity: 1;
        translate: none;
        transform: none;
    }

    body .digital-benefits__card,
    body .digital-benefits__visual,
    body .digital-benefits__visual svg {
        transition: none;
    }
}


/* =========================================================
   FRAYORA — WEBSITE & DIGITAL INFRASTRUCTURE
   SECTION 04 — WEBSITE AS INFRASTRUCTURE
   MOBILE ONLY: 599px AND BELOW

   Editorial mobile introduction
   Connected business diagram
   Frosted dimensional icons
   Central olive glass website panel
   Soft shadows + subtle animations
   Desktop and tablet unaffected
========================================================= */

@media (max-width: 599px) {

    /* =========================================
       SECTION BACKGROUND
    ========================================= */

    body .digital-system {
        position: relative;
        isolation: isolate;

        display: block;
        width: 100%;
        height: auto;
        min-height: 0;

        margin: 0;
        padding: 76px 0 88px;

        box-sizing: border-box;
        overflow: hidden;

        background-color: #F8F3EB !important;
        background-image: none !important;

        color: #1F211D;
    }

    body .digital-system *,
    body .digital-system *::before,
    body .digital-system *::after {
        box-sizing: border-box;
    }

    /* =========================================
       MAIN CONTAINER
    ========================================= */

    body .digital-system__inner {
        position: relative;
        z-index: 2;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        width: 100%;
        max-width: none;

        margin: 0 auto;
        padding: 0 28px 0 34px;
    }

    /* =========================================
       EDITORIAL INTRODUCTION
    ========================================= */

    body .digital-system__content {
        width: 100%;
        max-width: none;
        min-width: 0;

        margin: 0 0 49px;
        padding: 0;

        text-align: left;
    }

    /* EYEBROW */

    body .digital-system__eyebrow {
        margin: 0 0 22px;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 11px;
        line-height: 1.5;
        font-weight: 600;

        letter-spacing: 0.15em;
        text-transform: uppercase;

        color: #AD7258;
    }

    /* HEADING */

    body .digital-system__title {
        width: 100%;
        max-width: 500px;

        margin: 0;
        padding: 0;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: clamp(32px, 8vw, 43px);
        line-height: 1.16;
        font-weight: 600;

        letter-spacing: -0.047em;

        color: #1F211D;

        text-align: left;
        text-wrap: balance;
    }

    /* BODY COPY */

    body .digital-system__body {
        width: 100%;
        max-width: none;

        margin: 25px 0 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1.8;
        font-weight: 400;

        color: rgba(31,33,29,0.77);
        text-align: left;
    }

    /* =========================================
       DIAGRAM
    ========================================= */

    body .digital-system__diagram {
        position: relative;
        isolation: isolate;

        display: flex;
        flex-direction: column;
        align-items: center;

        width: 100%;
        min-width: 0;

        margin: 0;
        padding: 0;

        text-align: center;
    }

    /* YOUR BUSINESS LABEL */

    body .digital-system__diagram-label {
        margin: 0 0 29px;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 11px;
        line-height: 1.5;
        font-weight: 600;

        letter-spacing: 0.16em;
        text-transform: uppercase;

        color: #AD7258;
    }

    /* =========================================
       SHARED COMPONENT ROWS
    ========================================= */

    body .digital-system__business,
    body .digital-system__connected {
        position: relative;
        z-index: 2;

        display: grid;

        width: 100%;
        min-width: 0;

        margin: 0;
        padding: 0;

        align-items: start;
        justify-items: center;
    }

    /* =========================================
       TOP — FOUR BUSINESS COMPONENTS
       2 COLUMNS × 2 ROWS
    ========================================= */

    body .digital-system__business {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        column-gap: 20px;
        row-gap: 28px;
    }

    /* =========================================
       BOTTOM — FIVE CONNECTED COMPONENTS
       3 FIRST ROW / 2 SECOND ROW
    ========================================= */

    body .digital-system__connected {
        grid-template-columns:
            repeat(6, minmax(0, 1fr));

        column-gap: 4px;
        row-gap: 29px;
    }

    body .digital-system__connected
    .digital-system__node {
        grid-column: span 2;
    }

    body .digital-system__connected
    .digital-system__node:nth-child(4) {
        grid-column: 2 / span 2;
    }

    body .digital-system__connected
    .digital-system__node:nth-child(5) {
        grid-column: 4 / span 2;
    }

    /* =========================================
       INDIVIDUAL NODES
    ========================================= */

    body .digital-system__node {
        position: relative;
        z-index: 2;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;

        gap: 11px;

        width: 100%;
        min-width: 0;

        margin: 0;
        padding: 0;

        text-align: center;

        transition:
            transform 350ms cubic-bezier(0.22,1,0.36,1);
    }

    /* NODE LABELS */

    body .digital-system__node > span {
        display: block;

        width: 100%;
        min-width: 0;

        font-family: "Inter", sans-serif;
        font-size: 12px;
        line-height: 1.45;
        font-weight: 600;

        color: #303B32;

        text-align: center;
        overflow-wrap: break-word;
    }

    /* =========================================
       FROSTED DIMENSIONAL ICON CIRCLES
    ========================================= */

    body .digital-system__icon {
        position: relative;

        display: flex;
        align-items: center;
        justify-content: center;

        flex: 0 0 68px;

        width: 68px;
        height: 68px;

        border-radius: 50%;

        background-color: #F3E6DA;

        background-image: linear-gradient(
            145deg,
            rgba(255,255,255,0.74) 0%,
            rgba(246,232,219,0.81) 48%,
            rgba(230,207,188,0.82) 100%
        );

        border: 1px solid rgba(194,154,124,0.16);

        box-shadow:
            0 5px 12px rgba(79,53,36,0.045),
            0 16px 28px rgba(79,53,36,0.09),
            inset 0 2px 1px rgba(255,255,255,0.87),
            inset 0 -5px 12px rgba(141,96,67,0.04);

        transition:
            transform 400ms cubic-bezier(0.22,1,0.36,1),
            box-shadow 400ms ease;
    }

    /* INNER GLASS RING */

    body .digital-system__icon::after {
        content: "";

        position: absolute;
        inset: 4px;

        border-radius: 50%;

        border: 1px solid rgba(255,255,255,0.47);

        pointer-events: none;
    }

    /* SVG ICON ART */

    body .digital-system__icon svg {
        position: relative;
        z-index: 2;

        display: block;

        width: 29px;
        height: 29px;

        fill: none;
        stroke: #725943;
        stroke-width: 1.65;

        stroke-linecap: round;
        stroke-linejoin: round;

        filter:
            drop-shadow(0 2px 2px rgba(82,54,36,0.09));
    }

    /* =========================================
       DIAGRAM CONNECTING LINES
       MOBILE VERTICAL VERSION
    ========================================= */

    body .digital-system__connector {
        position: relative;

        display: block;

        width: 100%;
        height: 49px;

        margin: 0;
        padding: 0;

        pointer-events: none;
    }

    /* REMOVE DESKTOP HORIZONTAL LINE */

    body .digital-system__connector::before {
        content: none;
        display: none;
    }

    /* CENTERED VERTICAL CONNECTOR */

    body .digital-system__connector::after {
        content: "";

        position: absolute;

        left: 50%;
        top: 0;

        width: 0;
        height: 100%;

        border-left:
            1.5px dashed rgba(144,128,105,0.42);

        transform: translateX(-50%);
        pointer-events: none;
    }

    body .digital-system__connector span {
        display: none;
    }

    body .digital-system__connector--top {
        margin-top: 15px;
        margin-bottom: 0;
    }

    body .digital-system__connector--bottom {
        margin-top: 0;
        margin-bottom: 17px;
    }

    /* =========================================
       CENTRAL OLIVE WEBSITE PANEL
    ========================================= */

    body .digital-system__website {
        position: relative;
        z-index: 3;

        display: block;

        width: min(100%, 290px);
        min-height: 131px;

        margin: 0 auto;
        padding: 0;

        overflow: hidden;
        border-radius: 13px;

        background-color: #303B32;

        background-image: linear-gradient(
            145deg,
            rgba(117,135,106,0.36) 0%,
            rgba(65,84,65,0.20) 35%,
            rgba(28,43,31,0.70) 100%
        );

        border: 1px solid rgba(201,214,184,0.34);

        box-shadow:
            0 8px 17px rgba(18,29,20,0.13),
            0 22px 42px rgba(18,29,20,0.19),
            inset 0 1px 1px rgba(255,255,255,0.24),
            inset 0 -10px 20px rgba(7,15,9,0.11);

        transition:
            transform 450ms cubic-bezier(0.22,1,0.36,1),
            box-shadow 450ms ease;
    }

    /* BROWSER TOP BAR */

    body .digital-system__website-bar {
        display: flex;
        align-items: center;

        gap: 5px;

        height: 28px;
        padding: 0 13px;

        border-bottom:
            1px solid rgba(255,255,255,0.13);
    }

    body .digital-system__website-bar i {
        display: block;

        width: 6px;
        height: 6px;

        border-radius: 50%;
        background-color: #D9B79E;
    }

    body .digital-system__website-bar i:nth-child(2) {
        background-color: #E5D4BD;
    }

    body .digital-system__website-bar i:nth-child(3) {
        background-color: #A1AE94;
    }

    /* =========================================
       WEBSITE PANEL CONTENT
    ========================================= */

    body .digital-system__website-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 10px;

        margin: 0;
        padding: 23px 18px 27px;

        text-align: center;
    }

    body .digital-system__website-content strong {
        font-family: "Manrope", "Inter", sans-serif;
        font-size: 19px;
        line-height: 1.25;
        font-weight: 600;

        letter-spacing: -0.035em;

        color: #F8F3EB;
    }

    body .digital-system__website-content span {
        font-family: "Inter", sans-serif;
        font-size: 13px;
        line-height: 1.4;
        font-weight: 400;

        color: rgba(248,243,235,0.83);
    }

    /* =========================================
       SUPPORTING STATEMENT + EXPLANATION
    ========================================= */

    body .digital-system__footer {
        width: 100%;
        max-width: 470px;

        margin: 42px auto 0;
        padding: 0;

        text-align: center;
    }

    body .digital-system__statement {
        margin: 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 15px;
        line-height: 1.65;
        font-weight: 600;

        color: #303B32;

        text-align: center;
    }

    body .digital-system__explanation {
        width: 100%;
        max-width: 430px;

        margin: 18px auto 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1.75;
        font-weight: 400;

        color: rgba(31,33,29,0.74);

        text-align: center;
    }

    /* =========================================
       HOVER REFINEMENTS
    ========================================= */

    @media (hover: hover) {

        body .digital-system__node:hover {
            transform: translateY(-4px);
        }

        body .digital-system__node:hover
        .digital-system__icon {
            transform: translateY(-3px);

            box-shadow:
                0 8px 16px rgba(79,53,36,0.065),
                0 23px 36px rgba(79,53,36,0.11),
                inset 0 2px 1px rgba(255,255,255,0.89);
        }

        body .digital-system__website:hover {
            transform: translateY(-4px);

            box-shadow:
                0 14px 26px rgba(18,29,20,0.16),
                0 29px 50px rgba(18,29,20,0.22),
                inset 0 1px 1px rgba(255,255,255,0.28);
        }
    }

    /* =========================================
       STAGGERED ENTRANCE ANIMATIONS
    ========================================= */

    body .digital-system__eyebrow,
    body .digital-system__title,
    body .digital-system__body,
    body .digital-system__diagram-label,
    body .digital-system__business,
    body .digital-system__website,
    body .digital-system__connected,
    body .digital-system__footer {
        animation:
            digitalSystemMobileReveal 850ms
            cubic-bezier(0.22,1,0.36,1)
            both;
    }

    body .digital-system__eyebrow {
        animation-delay: 60ms;
    }

    body .digital-system__title {
        animation-delay: 150ms;
    }

    body .digital-system__body {
        animation-delay: 240ms;
    }

    body .digital-system__diagram-label {
        animation-delay: 300ms;
    }

    body .digital-system__business {
        animation-delay: 390ms;
    }

    body .digital-system__website {
        animation-delay: 500ms;
    }

    body .digital-system__connected {
        animation-delay: 610ms;
    }

    body .digital-system__footer {
        animation-delay: 710ms;
    }
}

/* =========================================================
   SMALL MOBILE — 374px AND BELOW
========================================================= */

@media (max-width: 374px) {

    body .digital-system {
        padding-top: 67px;
        padding-bottom: 76px;
    }

    body .digital-system__inner {
        padding-left: 29px;
        padding-right: 23px;
    }

    body .digital-system__content {
        margin-bottom: 43px;
    }

    body .digital-system__eyebrow,
    body .digital-system__diagram-label {
        font-size: 10px;
    }

    body .digital-system__title {
        font-size: 31px;
    }

    body .digital-system__body {
        font-size: 13px;
    }

    body .digital-system__business {
        column-gap: 12px;
        row-gap: 25px;
    }

    body .digital-system__connected {
        column-gap: 2px;
        row-gap: 25px;
    }

    body .digital-system__icon {
        flex-basis: 60px;
        width: 60px;
        height: 60px;
    }

    body .digital-system__icon svg {
        width: 26px;
        height: 26px;
    }

    body .digital-system__node > span {
        font-size: 11px;
    }

    body .digital-system__website {
        width: min(100%, 260px);
        min-height: 122px;
    }

    body .digital-system__website-content {
        padding: 21px 15px 24px;
    }

    body .digital-system__website-content strong {
        font-size: 18px;
    }

    body .digital-system__website-content span {
        font-size: 12px;
    }

    body .digital-system__footer {
        margin-top: 36px;
    }

    body .digital-system__statement {
        font-size: 14px;
    }

    body .digital-system__explanation {
        font-size: 13px;
    }
}

/* =========================================================
   MOBILE ENTRANCE KEYFRAMES
========================================================= */

@keyframes digitalSystemMobileReveal {
    from {
        opacity: 0;
        translate: 0 22px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

/* =========================================================
   ACCESSIBILITY — REDUCED MOTION
========================================================= */

@media (max-width: 599px) and
       (prefers-reduced-motion: reduce) {

    body .digital-system__eyebrow,
    body .digital-system__title,
    body .digital-system__body,
    body .digital-system__diagram-label,
    body .digital-system__business,
    body .digital-system__website,
    body .digital-system__connected,
    body .digital-system__footer {
        animation: none;
        opacity: 1;
        translate: none;
    }

    body .digital-system__node,
    body .digital-system__icon,
    body .digital-system__website {
        transition: none;
    }
}



/* =========================================================
   FRAYORA — WEBSITE & DIGITAL INFRASTRUCTURE
   SECTION 04 — MOBILE DIAGRAM CONNECTOR FIX
   599px AND BELOW

   Horizontal dashed connection above WEBSITE
   Horizontal dashed connection below WEBSITE
   Short vertical center connections

   DESKTOP AND TABLET UNAFFECTED
========================================================= */

@media (max-width: 599px) {

    /* =========================================
       SHARED CONNECTOR CONTAINER
    ========================================= */

    body .digital-system__connector {
        position: relative;

        display: block;

        width: 100%;
        height: 48px;

        margin-left: auto;
        margin-right: auto;

        padding: 0;

        box-sizing: border-box;
        pointer-events: none;
    }

    /* =========================================
       RESTORE HORIZONTAL DASHED LINE
    ========================================= */

    body .digital-system__connector::before {
        content: "";

        position: absolute;

        display: block;

        left: 5%;
        right: 5%;

        width: auto;

        border-top:
            1.5px dashed rgba(144,128,105,0.46);
    }

    /* =========================================
       RESTORE SHORT VERTICAL CONNECTION
    ========================================= */

    body .digital-system__connector span {
        position: absolute;

        display: block;

        left: 50%;

        width: 0;

        border-left:
            1.5px dashed rgba(144,128,105,0.46);

        transform: translateX(-50%);
    }

    /* =========================================
       REMOVE OLD FULL-HEIGHT VERTICAL LINE
    ========================================= */

    body .digital-system__connector::after {
        content: none;
        display: none;
    }

    /* =========================================
       UPPER CONNECTOR

       Horizontal line near top
       Vertical line reaches WEBSITE panel
    ========================================= */

    body .digital-system__connector--top {
        margin-top: 13px;
        margin-bottom: 0;
    }

    body .digital-system__connector--top::before {
        top: 15px;
    }

    body .digital-system__connector--top span {
        top: 15px;
        height: 33px;
    }

    /* =========================================
       LOWER CONNECTOR

       Vertical line begins at WEBSITE panel
       Horizontal line near bottom
    ========================================= */

    body .digital-system__connector--bottom {
        margin-top: 0;
        margin-bottom: 16px;
    }

    body .digital-system__connector--bottom::before {
        top: 33px;
    }

    body .digital-system__connector--bottom span {
        top: 0;
        height: 33px;
    }
}

/* =========================================================
   SMALL MOBILE — 374px AND BELOW
========================================================= */

@media (max-width: 374px) {

    body .digital-system__connector {
        height: 42px;
    }

    body .digital-system__connector--top::before {
        top: 13px;
    }

    body .digital-system__connector--top span {
        top: 13px;
        height: 29px;
    }

    body .digital-system__connector--bottom::before {
        top: 29px;
    }

    body .digital-system__connector--bottom span {
        height: 29px;
    }
}



/* =========================================================
   FRAYORA — WEBSITE & DIGITAL INFRASTRUCTURE
   SECTION 05 — OUR WEBSITE PROCESS
   MOBILE ONLY: 599px AND BELOW

   Horizontal swipe-through process
   One complete step + next-step preview
   Dimensional frosted-glass icons
   Soft editorial shadows and luminosity
   Terracotta scrolling indicator
   Staggered entrance animations

   DESKTOP AND TABLET UNAFFECTED
========================================================= */

@media (max-width: 599px) {

    /* =========================================
       SECTION BACKGROUND
    ========================================= */

    body .digital-process {
        position: relative;
        isolation: isolate;

        display: block;
        width: 100%;
        height: auto;
        min-height: 0;

        margin: 0;
        padding: 0;

        box-sizing: border-box;
        overflow: hidden;

        background-color: #F8F3EB !important;
        background-image: none !important;

        color: #1F211D;
    }

    /* SUBTLE SURFACE DEPTH */

    body .digital-process::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;

        pointer-events: none;

        background: none;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.65),
            inset 0 -20px 40px -45px rgba(87,65,47,0.09);
    }

    /* DELICATE ARCHITECTURAL CURVE */

    body .digital-process::after {
        content: "";
        position: absolute;
        z-index: 0;

        left: -58%;
        bottom: -95px;

        width: 125%;
        height: 190px;

        border-top: 1px solid rgba(201,103,67,0.14);
        border-radius: 50%;

        transform: rotate(-7deg);
        pointer-events: none;
    }

    /* =========================================
       MAIN MOBILE CONTAINER
    ========================================= */

    body .digital-process__inner {
        position: relative;
        z-index: 2;

        display: block;

        width: 100%;
        max-width: none;

        margin: 0 auto;
        padding: 74px 28px 85px 34px;

        box-sizing: border-box;
    }

    /* =========================================
       EDITORIAL INTRODUCTION
    ========================================= */

    body .digital-process__intro {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        width: 100%;

        margin: 0 0 39px;
        padding: 0;

        gap: 0;
    }

    body .digital-process__intro-left,
    body .digital-process__intro-right {
        width: 100%;
        max-width: none;
        min-width: 0;

        margin: 0;
        padding: 0;
    }

    /* =========================================
       EYEBROW
    ========================================= */

    body .digital-process__eyebrow {
        margin: 0 0 21px;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 11px;
        line-height: 1.5;
        font-weight: 600;

        letter-spacing: 0.15em;
        text-transform: uppercase;

        color: #AD7258;
    }

    /* =========================================
       MAIN HEADING
    ========================================= */

    body .digital-process__title {
        width: 100%;
        max-width: 500px;

        margin: 0;
        padding: 0;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: clamp(32px, 8vw, 43px);
        line-height: 1.16;
        font-weight: 600;

        letter-spacing: -0.047em;

        color: #1F211D;

        text-align: left;
        text-wrap: balance;
    }

    /* =========================================
       BODY DESCRIPTION
    ========================================= */

    body .digital-process__body {
        width: 100%;
        max-width: none;

        margin: 24px 0 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1.8;
        font-weight: 400;

        color: rgba(31,33,29,0.77);
        text-align: left;
    }

    /* =========================================
       HORIZONTAL SCROLLING CAROUSEL
    ========================================= */

    body .digital-process__steps {
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;

        gap: 18px;

        width: 100%;
        max-width: 100%;
        min-width: 0;

        margin: 0;
        padding: 12px 0 24px;

        box-sizing: border-box;

        overflow-x: auto;
        overflow-y: hidden;

        scroll-snap-type: x mandatory;
        scroll-padding-inline: 0;
        scroll-behavior: smooth;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-inline: contain;

        touch-action: pan-x pan-y;

        scrollbar-width: thin;
        scrollbar-color:
            #BE947E rgba(201,103,67,0.10);
    }

    /* =========================================
       TERRACOTTA SCROLLBAR
    ========================================= */

    body .digital-process__steps::-webkit-scrollbar {
        height: 5px;
    }

    body .digital-process__steps::-webkit-scrollbar-track {
        background: rgba(201,103,67,0.10);
        border-radius: 999px;
    }

    body .digital-process__steps::-webkit-scrollbar-thumb {
        background: #BE947E;
        border-radius: 999px;
    }

    body .digital-process__steps::-webkit-scrollbar-thumb:hover {
        background: #A9755D;
    }

    /* =========================================
       INDIVIDUAL PROCESS SLIDES
    ========================================= */

    body .digital-process__step,
    body .digital-process__step:nth-child(5) {
        position: relative;

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;

        flex: 0 0 85%;
        width: 85%;
        max-width: none;
        min-width: 0;

        grid-column: auto;
        justify-self: auto;

        margin: 0;
        padding: 9px 6px 20px 0;

        box-sizing: border-box;

        background: transparent;
        border: none;
        box-shadow: none;

        text-align: left;

        scroll-snap-align: start;
        scroll-snap-stop: normal;

        animation:
            digitalProcessMobileReveal 850ms
            cubic-bezier(0.22,1,0.36,1)
            both;
    }

    /* =========================================
       NUMBER + ICON ROW
    ========================================= */

    body .digital-process__step-top {
        position: relative;

        display: flex;
        align-items: center;
        justify-content: flex-start;

        width: 100%;
        min-height: 74px;

        margin: 0 0 22px;
        padding: 0;
    }

    /* TERRACOTTA NUMBER */

    body .digital-process__number {
        display: inline-block;
        flex: 0 0 auto;

        margin: 0 16px 0 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 17px;
        line-height: 1;
        font-weight: 600;

        letter-spacing: -0.025em;

        color: #A66B50;
    }

    /* =========================================
       ICON WRAPPER
    ========================================= */

    body .digital-process__icon-wrap {
        position: relative;

        display: block;
        flex: 0 0 auto;

        margin: 0;
        padding: 0;
    }

    /* =========================================
       DIMENSIONAL GLASS ICON
    ========================================= */

    body .digital-process__icon {
        position: relative;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 74px;
        height: 74px;

        box-sizing: border-box;
        border-radius: 50%;

        background-color: #F1E2D4;

        background-image: linear-gradient(
            145deg,
            rgba(255,255,255,0.76) 0%,
            rgba(246,233,221,0.87) 45%,
            rgba(232,211,194,0.85) 100%
        );

        border: 1px solid rgba(188,145,112,0.14);

        box-shadow:
            0 5px 12px rgba(75,49,34,0.045),
            0 16px 28px rgba(75,49,34,0.085),
            inset 0 2px 1px rgba(255,255,255,0.87),
            inset 0 -5px 12px rgba(136,91,62,0.045);

        transition:
            transform 400ms cubic-bezier(0.22,1,0.36,1),
            box-shadow 400ms ease;
    }

    /* INNER GLASS RING */

    body .digital-process__icon::before {
        content: "";

        position: absolute;
        inset: 4px;

        border: 1px solid rgba(255,255,255,0.48);
        border-radius: 50%;

        pointer-events: none;
    }

    /* =========================================
       SVG LINE ART
    ========================================= */

    body .digital-process__icon svg {
        position: relative;
        z-index: 2;

        display: block;

        width: 29px;
        height: 29px;

        fill: none;
        stroke: #725943;
        stroke-width: 1.7;

        stroke-linecap: round;
        stroke-linejoin: round;

        filter:
            drop-shadow(0 2px 2px rgba(82,54,36,0.09));
    }

    /* =========================================
       REMOVE DESKTOP CONNECTORS
    ========================================= */

    body .digital-process__connector {
        display: none;
    }

    /* =========================================
       PROCESS HEADINGS
    ========================================= */

    body .digital-process__step-title {
        width: 100%;

        margin: 0 0 12px;
        padding: 0;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: 20px;
        line-height: 1.35;
        font-weight: 650;

        letter-spacing: -0.033em;

        color: #1F211D;
    }

    /* =========================================
       PROCESS DESCRIPTIONS
    ========================================= */

    body .digital-process__step-body {
        width: 100%;
        max-width: 340px;

        margin: 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1.75;
        font-weight: 400;

        color: rgba(31,33,29,0.75);
    }

    /* =========================================
       SUPPORTING COPY
    ========================================= */

    body .digital-process__footer {
        width: 100%;

        margin: 35px 0 0;
        padding: 0;

        text-align: left;
    }

    body .digital-process__support {
        width: 100%;
        max-width: 470px;

        margin: 0;
        padding: 0;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1.7;
        font-weight: 500;

        color: #384238;
        text-align: left;
    }

    /* =========================================
       HOVER DEPTH
    ========================================= */

    @media (hover: hover) {

        body .digital-process__step:hover
        .digital-process__icon {
            transform: translateY(-4px);

            box-shadow:
                0 8px 16px rgba(75,49,34,0.06),
                0 23px 37px rgba(75,49,34,0.11),
                inset 0 2px 1px rgba(255,255,255,0.90);
        }
    }

    /* =========================================
       STAGGERED ENTRANCE ANIMATIONS
    ========================================= */

    body .digital-process__eyebrow,
    body .digital-process__title,
    body .digital-process__body,
    body .digital-process__support {
        animation:
            digitalProcessMobileReveal 850ms
            cubic-bezier(0.22,1,0.36,1)
            both;
    }

    body .digital-process__eyebrow {
        animation-delay: 60ms;
    }

    body .digital-process__title {
        animation-delay: 150ms;
    }

    body .digital-process__body {
        animation-delay: 240ms;
    }

    body .digital-process__step:nth-child(1) {
        animation-delay: 210ms;
    }

    body .digital-process__step:nth-child(2) {
        animation-delay: 280ms;
    }

    body .digital-process__step:nth-child(3) {
        animation-delay: 350ms;
    }

    body .digital-process__step:nth-child(4) {
        animation-delay: 420ms;
    }

    body .digital-process__step:nth-child(5) {
        animation-delay: 490ms;
    }

    body .digital-process__support {
        animation-delay: 560ms;
    }
}

/* =========================================================
   SMALL MOBILE — 374px AND BELOW
========================================================= */

@media (max-width: 374px) {

    body .digital-process__inner {
        padding: 66px 23px 76px 29px;
    }

    body .digital-process__intro {
        margin-bottom: 33px;
    }

    body .digital-process__eyebrow {
        font-size: 10px;
    }

    body .digital-process__title {
        font-size: 31px;
    }

    body .digital-process__body {
        font-size: 13px;
    }

    body .digital-process__steps {
        gap: 15px;
    }

    body .digital-process__step,
    body .digital-process__step:nth-child(5) {
        flex-basis: 88%;
        width: 88%;
    }

    body .digital-process__icon {
        width: 68px;
        height: 68px;
    }

    body .digital-process__icon svg {
        width: 27px;
        height: 27px;
    }

    body .digital-process__number {
        font-size: 16px;
    }

    body .digital-process__step-title {
        font-size: 19px;
    }

    body .digital-process__step-body {
        font-size: 13px;
    }

    body .digital-process__support {
        font-size: 13px;
    }
}

/* =========================================================
   MOBILE REVEAL ANIMATION
========================================================= */

@keyframes digitalProcessMobileReveal {
    from {
        opacity: 0;
        translate: 0 19px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (max-width: 599px) and
       (prefers-reduced-motion: reduce) {

    body .digital-process__eyebrow,
    body .digital-process__title,
    body .digital-process__body,
    body .digital-process__step,
    body .digital-process__support {
        animation: none;
        opacity: 1;
        translate: none;
        transform: none;
    }

    body .digital-process__steps {
        scroll-behavior: auto;
    }

    body .digital-process__icon {
        transition: none;
    }
}


/* =========================================================
   FRAYORA — WEBSITE & DIGITAL INFRASTRUCTURE
   SECTION 06 — FINAL CTA
   MOBILE ONLY: 599px AND BELOW

   Centered editorial composition
   Warm peach architectural background
   Soft ivory luminosity
   Dimensional terracotta CTA
   Delicate curves and entrance animations

   DESKTOP AND TABLET UNAFFECTED
========================================================= */

@media (max-width: 599px) {

    /* =========================================
       SECTION BACKGROUND
    ========================================= */

    body .digital-final-cta {
        position: relative;
        isolation: isolate;

        display: block;

        width: 100%;
        height: auto;
        min-height: 380px;

        margin: 0;
        padding: 0;

        box-sizing: border-box;
        overflow: hidden;

        background-color: #F1D9CB !important;

        background-image: linear-gradient(
            125deg,
            #E5C1AC 0%,
            #F1D9CB 28%,
            #F9EFE7 53%,
            #F0D8CA 77%,
            #E9C8B6 100%
        ) !important;

        color: #1F211D;
    }

    /* =========================================
       SOFT ARCHITECTURAL FINISH
    ========================================= */

    body .digital-final-cta::before {
        content: "";

        position: absolute;
        inset: 0;
        z-index: 0;

        pointer-events: none;

        background: none;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.68),
            inset 0 -22px 44px -45px rgba(87,52,36,0.14);
    }

    /* =========================================
       CENTERED CONTENT CONTAINER
    ========================================= */

    body .digital-final-cta__inner {
        position: relative;
        z-index: 3;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        max-width: none;
        min-height: 380px;

        margin: 0 auto;
        padding: 76px 28px 83px;

        box-sizing: border-box;
    }

    body .digital-final-cta__content {
        position: relative;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        width: 100%;
        max-width: 480px;

        margin: 0 auto;
        padding: 0;

        text-align: center;
    }

    /* =========================================
       HEADING
    ========================================= */

    body .digital-final-cta__title {
        width: 100%;
        max-width: 440px;

        margin: 0 auto;
        padding: 0;

        font-family: "Manrope", "Inter", sans-serif;
        font-size: clamp(34px, 8.5vw, 46px);
        line-height: 1.15;
        font-weight: 600;

        letter-spacing: -0.05em;

        color: #1F211D;

        text-align: center;
        text-wrap: balance;

        text-shadow:
            0 2px 10px rgba(255,255,255,0.10);
    }

    /* =========================================
       TERRACOTTA CTA BUTTON
    ========================================= */

    body .digital-final-cta__button {
        position: relative;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        gap: 14px;

        width: fit-content;
        max-width: 100%;
        min-height: 54px;

        margin: 32px auto 0;
        padding: 16px 26px;

        box-sizing: border-box;

        border: 1px solid rgba(255,255,255,0.24);
        border-radius: 999px;

        background-color: #C96743;
        background-image: none;

        color: #FFFFFF;

        font-family: "Inter", sans-serif;
        font-size: 13px;
        line-height: 1.2;
        font-weight: 600;

        text-decoration: none;

        box-shadow:
            0 6px 14px rgba(106,54,36,0.11),
            0 17px 32px rgba(106,54,36,0.17),
            inset 0 1px 0 rgba(255,255,255,0.22);

        transition:
            transform 300ms ease,
            background-color 300ms ease,
            box-shadow 300ms ease;
    }

    body .digital-final-cta__button span {
        display: inline-block;

        font-size: 19px;
        line-height: 1;

        transition: transform 300ms ease;
    }

    /* =========================================
       BUTTON HOVER
    ========================================= */

    body .digital-final-cta__button:hover {
        background-color: #B95635;
        transform: translateY(-3px);

        box-shadow:
            0 10px 21px rgba(106,54,36,0.15),
            0 23px 40px rgba(106,54,36,0.21),
            inset 0 1px 0 rgba(255,255,255,0.24);
    }

    body .digital-final-cta__button:hover span {
        transform: translateX(4px);
    }

    body .digital-final-cta__button:focus-visible {
        outline: 2px solid #394235;
        outline-offset: 4px;
    }

    /* =========================================
       ARCHITECTURAL CURVES
    ========================================= */

    body .digital-final-cta__art {
        position: absolute;
        inset: 0;
        z-index: 1;

        overflow: hidden;
        pointer-events: none;
    }

    body .digital-final-cta__arc {
        position: absolute;
        display: block;

        box-sizing: border-box;
        border-radius: 50%;

        background: transparent;
    }

    /* LARGE IVORY CURVE — TOP LEFT */

    body .digital-final-cta__arc--one {
        width: 570px;
        height: 460px;

        left: -475px;
        top: -230px;

        border: 1.2px solid rgba(255,255,255,0.72);

        transform: rotate(-23deg);
    }

    /* FINE TERRACOTTA CURVE — BOTTOM LEFT */

    body .digital-final-cta__arc--two {
        width: 650px;
        height: 430px;

        left: -530px;
        top: 190px;

        border: 1px solid rgba(178,99,68,0.25);

        transform: rotate(15deg);
    }

    /* SWEEPING IVORY CURVE — BOTTOM RIGHT */

    body .digital-final-cta__arc--three {
        width: 640px;
        height: 450px;

        right: -515px;
        bottom: -275px;

        border: 1.2px solid rgba(255,255,255,0.72);

        transform: rotate(-18deg);
    }

    /* DASHED TERRACOTTA CURVE — TOP RIGHT */

    body .digital-final-cta__arc--four {
        width: 510px;
        height: 380px;

        right: -425px;
        top: -250px;

        border: 1.2px dashed rgba(192,103,70,0.40);

        transform: rotate(-23deg);
    }

    /* =========================================
       STAGGERED ENTRANCE ANIMATIONS
    ========================================= */

    body .digital-final-cta__title,
    body .digital-final-cta__button {
        animation:
            digitalFinalMobileReveal 850ms
            cubic-bezier(0.22,1,0.36,1)
            both;
    }

    body .digital-final-cta__title {
        animation-delay: 110ms;
    }

    body .digital-final-cta__button {
        animation-delay: 280ms;
    }
}

/* =========================================================
   SMALL MOBILE — 374px AND BELOW
========================================================= */

@media (max-width: 374px) {

    body .digital-final-cta {
        min-height: 350px;
    }

    body .digital-final-cta__inner {
        min-height: 350px;
        padding: 67px 23px 75px;
    }

    body .digital-final-cta__title {
        font-size: clamp(31px, 8.6vw, 35px);
        line-height: 1.16;
    }

    body .digital-final-cta__button {
        margin-top: 29px;
        padding: 15px 23px;

        font-size: 12px;
    }

    /* KEEP CURVES OUTSIDE TEXT AREA */

    body .digital-final-cta__arc--one {
        left: -495px;
    }

    body .digital-final-cta__arc--three {
        right: -535px;
    }
}

/* =========================================================
   MOBILE ENTRANCE ANIMATION
========================================================= */

@keyframes digitalFinalMobileReveal {
    from {
        opacity: 0;
        translate: 0 22px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

/* =========================================================
   ACCESSIBILITY — REDUCED MOTION
========================================================= */

@media (max-width: 599px) and
       (prefers-reduced-motion: reduce) {

    body .digital-final-cta__title,
    body .digital-final-cta__button {
        animation: none;
        opacity: 1;
        translate: none;
        transform: none;
    }

    body .digital-final-cta__button,
    body .digital-final-cta__button span {
        transition: none;
    }
}



/* =========================================================
   FRAYORA — BUSINESS KNOWLEDGE & ORGANIZATION
   SECTION 01 — COMPLETE HERO CSS

   DESKTOP: 1101px+
   TABLET: 600px–1100px
   MOBILE: 599px AND BELOW

   Approved Frayora service-page proportions
   600px desktop hero height
   Architectural olive background
   CSS-only bkhero.png foreground illustration
   Manrope + Inter typography
   Floating animation and dimensional shadows
   Bond-inspired editorial styling
========================================================= */


/* =========================================================
   01 — SHARED HERO FOUNDATION
========================================================= */

body .bk-hero {
    position: relative;
    isolation: isolate;

    display: block;

    width: 100%;
    margin: 0;
    padding: 0;

    box-sizing: border-box;
    overflow: hidden;

    background-color: #1D2A20;

    background-image:
        url("../images/Business in a box/herodesktop.png");

    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;

    color: #F8F3EB;
}

body .bk-hero *,
body .bk-hero *::before,
body .bk-hero *::after {
    box-sizing: border-box;
}

/* =========================================
   HERO INNER CONTAINER
========================================= */

body .bk-hero__inner {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1600px;

    margin: 0 auto;
}

/* =========================================
   HERO CONTENT
========================================= */

body .bk-hero__content {
    position: relative;
    z-index: 4;

    width: 100%;
    min-width: 0;
}

/* =========================================================
   02 — TYPOGRAPHY
========================================================= */

/* EYEBROW */

body .bk-hero__eyebrow {
    margin: 0;
    padding: 0;

    font-family: "Inter", sans-serif;
    font-weight: 600;

    letter-spacing: 0.15em;
    text-transform: uppercase;

    color: #E4D5BF;
}

/* MAIN HEADING */

body .bk-hero__title {
    margin: 0;
    padding: 0;

    font-family: "Manrope", "Inter", sans-serif;
    font-weight: 600;

    letter-spacing: -0.052em;

    color: #F8F3EB;

    text-wrap: balance;
}

/* BODY COPY */

body .bk-hero__body {
    margin: 0;
    padding: 0;

    font-family: "Inter", sans-serif;
    font-weight: 400;

    color: rgba(248,243,235,0.89);
}

/* =========================================================
   03 — TERRACOTTA CTA BUTTON
========================================================= */

body .bk-hero__button {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 18px;

    width: fit-content;
    max-width: 100%;
    min-height: 56px;

    padding: 16px 29px;

    box-sizing: border-box;

    border: 1px solid rgba(255,255,255,0.20);
    border-radius: 999px;

    background-color: #C96743;
    background-image: none;

    color: #FFFFFF;

    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 600;

    text-decoration: none;

    box-shadow:
        0 6px 14px rgba(8,19,10,0.10),
        0 17px 33px rgba(8,19,10,0.20),
        inset 0 1px 0 rgba(255,255,255,0.23);

    transition:
        transform 300ms ease,
        background-color 300ms ease,
        box-shadow 300ms ease;
}

/* CTA ARROW */

body .bk-hero__button-arrow {
    display: inline-block;

    flex: 0 0 auto;

    font-family: "Inter", sans-serif;
    font-size: 23px;
    line-height: 1;

    transition: transform 300ms ease;
}

/* CTA HOVER */

@media (hover: hover) {

    body .bk-hero__button:hover {
        background-color: #B95736;
        color: #FFFFFF;

        transform: translateY(-3px);

        box-shadow:
            0 10px 21px rgba(8,19,10,0.16),
            0 24px 43px rgba(8,19,10,0.24),
            inset 0 1px 0 rgba(255,255,255,0.25);
    }

    body .bk-hero__button:hover
    .bk-hero__button-arrow {
        transform: translateX(5px);
    }
}

/* KEYBOARD ACCESSIBILITY */

body .bk-hero__button:focus-visible {
    outline: 2px solid #F8F3EB;
    outline-offset: 5px;
}

/* =========================================================
   04 — FLOATING HERO VISUAL
   IMAGE IS LOADED THROUGH CSS ONLY
========================================================= */

body .bk-hero__visual {
    position: relative;
    z-index: 3;

    display: block;

    min-width: 0;
    flex-shrink: 0;

    background-image:
        url("../images/Business Knowledge & Organization/bkhero.png");

    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;

    pointer-events: none;

    filter:
        drop-shadow(0 13px 20px rgba(4,13,7,0.12))
        drop-shadow(0 28px 45px rgba(4,13,7,0.19));

    animation:
        bkHeroVisualEntrance 1000ms
        cubic-bezier(0.22,1,0.36,1)
        180ms both,
        bkHeroFloat 7.5s ease-in-out 1300ms infinite;
}

/* =========================================================
   05 — DESKTOP
   1101px AND ABOVE

   MATCHES OUR APPROACH HERO HEIGHT
========================================================= */

@media (min-width: 1101px) {

    /* HERO */

    body .bk-hero {
        height: 600px;
        min-height: 600px;
    }

    /* TWO-COLUMN LAYOUT */

    body .bk-hero__inner {
        display: grid;

        grid-template-columns:
            minmax(0, 1.05fr)
            minmax(0, 0.95fr);

        align-items: center;

        column-gap: 30px;

        height: 600px;
        min-height: 600px;

        padding: 45px 80px;
    }

    /* CONTENT */

    body .bk-hero__content {
        max-width: 650px;
    }

    /* EYEBROW */

    body .bk-hero__eyebrow {
        margin-bottom: 24px;

        font-size: 12px;
        line-height: 1.4;
    }

    /* HEADING */

    body .bk-hero__title {
        max-width: 670px;

        font-size: clamp(37px, 3.35vw, 54px);
        line-height: 1.16;
    }

    /* BODY COPY */

    body .bk-hero__body {
        max-width: 600px;

        margin-top: 27px;

        font-size: 14px;
        line-height: 1.78;
    }

    /* CTA */

    body .bk-hero__button {
        margin-top: 28px;
    }

    /* FLOATING IMAGE */

    body .bk-hero__visual {
        width: clamp(460px, 41vw, 670px);
        max-width: none;

        height: 480px;

        justify-self: center;

        margin: 0;
    }
}

/* =========================================================
   06 — LARGE DESKTOP
   1450px AND ABOVE
========================================================= */

@media (min-width: 1450px) {

    body .bk-hero__title {
        font-size: 52px;
    }

    body .bk-hero__body {
        font-size: 15px;
    }

    body .bk-hero__visual {
        width: min(42vw, 680px);
        height: 500px;
    }
}

/* =========================================================
   07 — TABLET
   600px–1100px

   VISUAL ABOVE, ALIGNED RIGHT
   CONTENT BELOW, LEFT ALIGNED
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    /* HERO */

    body .bk-hero {
        height: auto;
        min-height: 850px;

        background-position: center center;
    }

    /* INNER */

    body .bk-hero__inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        width: 100%;
        min-height: 850px;

        padding: 43px 65px 95px;
    }

    /* VISUAL FIRST */

    body .bk-hero__visual {
        order: -1;

        align-self: flex-end;

        width: clamp(360px, 58vw, 650px);
        max-width: 100%;

        height: clamp(300px, 45vw, 510px);

        margin: 0 -8px 22px 0;
    }

    /* COPY */

    body .bk-hero__content {
        width: 100%;
        max-width: 920px;
    }

    /* EYEBROW */

    body .bk-hero__eyebrow {
        margin-bottom: 27px;

        font-size: 13px;
        line-height: 1.4;
    }

    /* HEADING */

    body .bk-hero__title {
        max-width: 790px;

        font-size: clamp(42px, 5.2vw, 59px);
        line-height: 1.15;
    }

    /* BODY */

    body .bk-hero__body {
        max-width: 850px;

        margin-top: 32px;

        font-size: 16px;
        line-height: 1.8;
    }

    /* BUTTON */

    body .bk-hero__button {
        min-height: 58px;

        margin-top: 31px;
        padding: 17px 32px;

        font-size: 15px;
    }
}

/* =========================================================
   08 — SMALL TABLET
   600px–749px
========================================================= */

@media (min-width: 600px) and (max-width: 749px) {

    body .bk-hero__inner {
        padding: 43px 43px 85px;
    }

    body .bk-hero__visual {
        width: 83%;
        max-width: 510px;

        height: 350px;

        margin-right: 0;
        margin-bottom: 25px;
    }

    body .bk-hero__title {
        font-size: clamp(37px, 6.2vw, 46px);
    }

    body .bk-hero__body {
        font-size: 15px;
    }
}

/* =========================================================
   09 — MOBILE
   599px AND BELOW

   VISUAL FIRST
   LEFT-ALIGNED CONTENT
   COMPACT EDITORIAL SPACING
========================================================= */

@media (max-width: 599px) {

    /* HERO */

    body .bk-hero {
        height: auto;
        min-height: 0;

        background-position: 60% center;
    }

    /* INNER */

    body .bk-hero__inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        width: 100%;

        padding: 34px 28px 96px 34px;
    }

    /* FLOATING ILLUSTRATION */

    body .bk-hero__visual {
        order: -1;

        align-self: center;

        width: 100%;
        max-width: 420px;

        height: clamp(250px, 76vw, 360px);

        margin: 0 auto 27px;
    }

    /* CONTENT */

    body .bk-hero__content {
        width: 100%;
    }

    /* EYEBROW */

    body .bk-hero__eyebrow {
        margin-bottom: 26px;

        font-size: 10px;
        line-height: 1.55;

        letter-spacing: 0.13em;
    }

    /* HEADING */

    body .bk-hero__title {
        width: 100%;
        max-width: 520px;

        font-size: clamp(31px, 8.15vw, 43px);
        line-height: 1.16;

        letter-spacing: -0.05em;

        text-wrap: pretty;
    }

    /* BODY */

    body .bk-hero__body {
        width: 100%;

        margin-top: 28px;

        font-size: 14px;
        line-height: 1.8;
    }

    /* CTA */

    body .bk-hero__button {
        gap: 16px;

        min-height: 55px;

        margin-top: 31px;
        padding: 16px 24px;

        font-size: 13px;
    }

    body .bk-hero__button-arrow {
        font-size: 21px;
    }
}

/* =========================================================
   10 — SMALL MOBILE
   374px AND BELOW
========================================================= */

@media (max-width: 374px) {

    body .bk-hero__inner {
        padding: 29px 23px 85px 29px;
    }

    body .bk-hero__visual {
        width: 100%;
        height: 255px;

        margin-bottom: 23px;
    }

    body .bk-hero__eyebrow {
        margin-bottom: 22px;

        font-size: 9.5px;
    }

    body .bk-hero__title {
        font-size: clamp(29px, 8.3vw, 33px);
    }

    body .bk-hero__body {
        margin-top: 25px;

        font-size: 13px;
    }

    body .bk-hero__button {
        gap: 12px;

        padding: 15px 21px;

        font-size: 12px;
    }
}

/* =========================================================
   11 — STAGGERED TEXT ENTRANCE ANIMATIONS
========================================================= */

body .bk-hero__eyebrow,
body .bk-hero__title,
body .bk-hero__body,
body .bk-hero__button {
    animation:
        bkHeroTextReveal 850ms
        cubic-bezier(0.22,1,0.36,1)
        both;
}

body .bk-hero__eyebrow {
    animation-delay: 80ms;
}

body .bk-hero__title {
    animation-delay: 170ms;
}

body .bk-hero__body {
    animation-delay: 280ms;
}

body .bk-hero__button {
    animation-delay: 390ms;
}

/* TEXT REVEAL */

@keyframes bkHeroTextReveal {

    from {
        opacity: 0;
        translate: 0 22px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

/* =========================================================
   12 — FLOATING VISUAL ANIMATIONS
========================================================= */

/* ENTRANCE */

@keyframes bkHeroVisualEntrance {

    from {
        opacity: 0;
        translate: 0 22px;
        scale: 0.97;
    }

    to {
        opacity: 1;
        translate: 0 0;
        scale: 1;
    }
}

/* CONTINUOUS GENTLE FLOAT */

@keyframes bkHeroFloat {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }
}

/* =========================================================
   13 — REDUCED MOTION ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body .bk-hero__eyebrow,
    body .bk-hero__title,
    body .bk-hero__body,
    body .bk-hero__button,
    body .bk-hero__visual {
        animation: none !important;

        opacity: 1;
        translate: none;
        scale: 1;
        transform: none;
    }

    body .bk-hero__button,
    body .bk-hero__button-arrow {
        transition: none;
    }
}


/* =========================================================
   BUSINESS KNOWLEDGE & ORGANIZATION
   SECTION 01 — RESPONSIVE HERO BACKGROUNDS
========================================================= */

/* DESKTOP — 1101px+ */

@media (min-width: 1101px) {
    body .bk-hero {
        background-image:
            url("../images/Business in a box/herodesktop.png") !important;

        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }
}

/* TABLET — 600px–1100px */

@media (min-width: 600px) and (max-width: 1100px) {
    body .bk-hero {
        background-image:
            url("../images/Business in a box/herotablet.png") !important;

        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }
}

/* MOBILE — 599px AND BELOW */

@media (max-width: 599px) {
    body .bk-hero {
        background-image:
            url("../images/Business in a box/heromobile.png") !important;

        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }
}


/* =========================================================
   FRAYORA — BUSINESS KNOWLEDGE & ORGANIZATION
   SECTION 01 — HERO OVERLAY & SPACING REFINEMENT

   Matches established Business-in-a-Box hero effects

   Desktop: 1101px+
   Tablet: 600px–1100px
   Mobile: 599px and below

   Includes:
   - Dark olive contrast overlay
   - Refined architectural luminosity
   - Stronger text readability
   - Preserved floating bkhero.png
   - Preserved animations and shadows
   - Reduced mobile visual-to-eyebrow spacing
   - No PHP changes
========================================================= */


/* =========================================================
   01 — SHARED HERO LAYER STRUCTURE
========================================================= */

body .bk-hero {
    position: relative;
    isolation: isolate;

    overflow: hidden;

    background-color: #283429 !important;
}

/* =========================================
   DARK OLIVE CONTRAST OVERLAY
========================================= */

body .bk-hero::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 0;

    display: block;

    pointer-events: none;

    background: linear-gradient(
        90deg,
        rgba(17, 26, 18, 0.34) 0%,
        rgba(17, 26, 18, 0.24) 32%,
        rgba(17, 26, 18, 0.08) 65%,
        rgba(17, 26, 18, 0.02) 100%
    );
}

/* =========================================
   REFINED ARCHITECTURAL LUMINOSITY
========================================= */

body .bk-hero::after {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 1;

    display: block;

    pointer-events: none;

    background: linear-gradient(
        115deg,
        transparent 35%,
        rgba(255, 250, 235, 0.012) 60%,
        rgba(255, 250, 235, 0.045) 82%,
        rgba(255, 250, 235, 0.012) 100%
    );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        inset 0 -20px 40px -45px rgba(0,0,0,0.20);
}

/* =========================================
   KEEP CONTENT ABOVE THE OVERLAYS
========================================= */

body .bk-hero__inner {
    position: relative;
    z-index: 2;
}

body .bk-hero__content {
    position: relative;
    z-index: 4;
}

/* =========================================
   PRESERVE FLOATING VISUAL
========================================= */

body .bk-hero__visual {
    position: relative;
    z-index: 3;

    background-image:
        url("../images/Business Knowledge & Organization/bkhero.png");

    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

    pointer-events: none;
}


/* =========================================================
   02 — DESKTOP
   1101px AND ABOVE

   Preserves approved 600px height
========================================================= */

@media (min-width: 1101px) {

    body .bk-hero {
        height: 600px;
        min-height: 600px;

        background-image:
            url("../images/Business in a box/herodesktop.png") !important;

        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    /* DARKER LEFT / CLEARER RIGHT */

    body .bk-hero::before {
        background: linear-gradient(
            90deg,
            rgba(17,26,18,0.38) 0%,
            rgba(17,26,18,0.28) 32%,
            rgba(17,26,18,0.08) 63%,
            transparent 85%
        );
    }

    /* LUMINOUS ARCHITECTURAL FINISH */

    body .bk-hero::after {
        background: linear-gradient(
            115deg,
            transparent 35%,
            rgba(255,250,235,0.012) 60%,
            rgba(255,250,235,0.055) 83%,
            rgba(255,250,235,0.012) 100%
        );
    }

    /* HEADING LEGIBILITY */

    body .bk-hero__title {
        color: #F8F3EB;

        text-shadow:
            0 3px 18px rgba(0,0,0,0.20);
    }

    body .bk-hero__body {
        color: rgba(248,243,235,0.94);
    }

    /* STRONGER CTA DEFINITION */

    body .bk-hero__button {
        box-shadow:
            0 8px 18px rgba(0,0,0,0.15),
            0 17px 34px rgba(0,0,0,0.18),
            inset 0 1px 0 rgba(255,255,255,0.22);
    }
}


/* =========================================================
   03 — TABLET
   600px–1100px

   Balanced contrast for image-first layout
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .bk-hero {
        background-image:
            url("../images/Business in a box/herotablet.png") !important;

        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    /* OLIVE OVERLAY */

    body .bk-hero::before {
        background: linear-gradient(
            180deg,
            rgba(17,26,18,0.15) 0%,
            rgba(17,26,18,0.24) 34%,
            rgba(17,26,18,0.55) 65%,
            rgba(17,26,18,0.62) 100%
        );
    }

    /* SOFT LUMINOSITY */

    body .bk-hero::after {
        background: linear-gradient(
            125deg,
            transparent 35%,
            rgba(255,250,235,0.012) 65%,
            rgba(255,250,235,0.045) 100%
        );

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.07),
            inset 0 -22px 42px -45px rgba(0,0,0,0.22);
    }

    /* TEXT READABILITY */

    body .bk-hero__title {
        color: #F8F3EB;

        text-shadow:
            0 3px 18px rgba(0,0,0,0.22);
    }

    body .bk-hero__body {
        color: rgba(248,243,235,0.94);
    }

    /* CTA DEPTH */

    body .bk-hero__button {
        box-shadow:
            0 8px 20px rgba(0,0,0,0.17),
            0 17px 32px rgba(0,0,0,0.17),
            inset 0 1px 0 rgba(255,255,255,0.22);
    }
}


/* =========================================================
   04 — MOBILE
   599px AND BELOW

   Darkens image behind text
   Reduces space below floating illustration
   Preserves left-aligned hero copy
========================================================= */

@media (max-width: 599px) {

    /* =========================================
       MOBILE BACKGROUND
    ========================================= */

    body .bk-hero {
        height: auto;
        min-height: 0;

        background-image:
            url("../images/Business in a box/heromobile.png") !important;

        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    /* =========================================
       STRONGER MOBILE OLIVE OVERLAY

       Gentle contrast behind visual
       Strong readability behind copy
       No visible gradient patches
    ========================================= */

    body .bk-hero::before {
        background: linear-gradient(
            180deg,
            rgba(16,26,18,0.16) 0%,
            rgba(16,26,18,0.26) 28%,
            rgba(16,26,18,0.53) 48%,
            rgba(16,26,18,0.67) 70%,
            rgba(16,26,18,0.64) 100%
        );
    }

    /* =========================================
       MOBILE LUMINOUS FINISH
    ========================================= */

    body .bk-hero::after {
        background: linear-gradient(
            145deg,
            transparent 38%,
            rgba(255,250,235,0.012) 60%,
            rgba(255,250,235,0.04) 83%,
            rgba(255,250,235,0.012) 100%
        );

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.06),
            inset 0 -24px 45px -45px rgba(0,0,0,0.20);
    }

    /* =========================================
       REDUCE VISUAL-TO-EYEBROW GAP

       Original visual height: 76vw
       Original bottom margin: 27px

       Slightly shorter visual container
       Tighter gap without crowding artwork
    ========================================= */

    body .bk-hero__visual {
        order: -1;

        align-self: center;

        width: 100%;
        max-width: 420px;

        height: clamp(225px, 67vw, 310px);

        margin: 0 auto 12px;

        background-position: center center;
        background-size: contain;
    }

    /* =========================================
       MOBILE TYPOGRAPHY READABILITY
    ========================================= */

    body .bk-hero__eyebrow {
        margin-bottom: 19px;

        color: #E4D5BF;
    }

    body .bk-hero__title {
        color: #F8F3EB;

        text-shadow:
            0 3px 16px rgba(0,0,0,0.20);
    }

    body .bk-hero__body {
        color: rgba(248,243,235,0.95);
    }

    /* =========================================
       CTA BUTTON
    ========================================= */

    body .bk-hero__button {
        background-color: #C96743;
        color: #FFFFFF;

        box-shadow:
            0 8px 20px rgba(0,0,0,0.17),
            0 18px 35px rgba(0,0,0,0.20),
            inset 0 1px 0 rgba(255,255,255,0.22);
    }
}


/* =========================================================
   05 — SMALL MOBILE
   374px AND BELOW
========================================================= */

@media (max-width: 374px) {

    body .bk-hero__visual {
        height: 225px;
        margin-bottom: 10px;
    }

    body .bk-hero__eyebrow {
        margin-bottom: 18px;
    }
}


/* =========================================================
   06 — ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body .bk-hero__visual {
        animation: none !important;

        opacity: 1;
        transform: none;
        translate: none;
        scale: 1;
    }
}


/* =========================================================
   BUSINESS KNOWLEDGE & ORGANIZATION
   SECTION 01 — FINAL HERO PADDING REFINEMENT
   TABLET & MOBILE ONLY
========================================================= */

/* TABLET — 600px–1100px */

@media (min-width: 600px) and (max-width: 1100px) {

    body .bk-hero__inner {
        padding-top: 65px;
        padding-bottom: 115px;
    }
}

/* MOBILE — 599px AND BELOW */

@media (max-width: 599px) {

    body .bk-hero__inner {
        padding-top: 58px;
        padding-bottom: 115px;
    }
}

/* SMALL MOBILE — 374px AND BELOW */

@media (max-width: 374px) {

    body .bk-hero__inner {
        padding-top: 53px;
        padding-bottom: 100px;
    }
}



/* =========================================================
   BUSINESS KNOWLEDGE & ORGANIZATION
   SECTION 01 — MOBILE BOTTOM PADDING ADJUSTMENT
========================================================= */

/* MOBILE — 599px AND BELOW */

@media (max-width: 599px) {

    body .bk-hero__inner {
        padding-bottom: 105px;
    }
}

/* SMALL MOBILE — 374px AND BELOW */

@media (max-width: 374px) {

    body .bk-hero__inner {
        padding-bottom: 90px;
    }
}


/* =========================================================
   FRAYORA — BUSINESS KNOWLEDGE & ORGANIZATION
   SECTION 02 — WHAT THIS SOLVES

   Modern SaaS / Bond-inspired editorial design
   Solid warm ivory section surface
   Asymmetric two-column desktop layout
   Four dimensional information cards
   Soft glass-like circular icons
   Refined layered shadows
   Staggered entrance animations
   Reduced-motion accessibility

   NO VERTICAL DIVIDER
   NO DECORATIVE BACKGROUND IMAGES
========================================================= */


/* =========================================================
   01 — SHARED SECTION FOUNDATION
========================================================= */

body .bk-solves {
    position: relative;
    isolation: isolate;

    width: 100%;
    margin: 0;

    box-sizing: border-box;
    overflow: hidden;

    background-color: #F8F3EB !important;
    background-image: none !important;

    color: #1F211D;
}

body .bk-solves *,
body .bk-solves *::before,
body .bk-solves *::after {
    box-sizing: border-box;
}

/* Ensure no decorative separators */

body .bk-solves::before,
body .bk-solves::after,
body .bk-solves__inner::before,
body .bk-solves__inner::after {
    content: none;
    display: none;
}

/* =========================================================
   02 — INNER CONTAINER
========================================================= */

body .bk-solves__inner {
    position: relative;
    z-index: 2;

    display: grid;

    width: 100%;
    max-width: 1600px;

    margin: 0 auto;
}

/* =========================================================
   03 — LEFT EDITORIAL INTRODUCTION
========================================================= */

body .bk-solves__intro {
    position: relative;

    min-width: 0;
    width: 100%;
}

body .bk-solves__eyebrow {
    margin: 0;

    font-family: "Inter", sans-serif;
    font-weight: 600;

    letter-spacing: 0.16em;
    text-transform: uppercase;

    color: #B76F51;
}

body .bk-solves__title {
    margin: 0;

    font-family: "Manrope", "Inter", sans-serif;
    font-weight: 600;

    letter-spacing: -0.05em;

    color: #1F211D;
    text-wrap: balance;
}

body .bk-solves__support {
    margin: 0;

    font-family: "Inter", sans-serif;
    font-weight: 400;

    color: rgba(31,33,29,0.52);
}

/* =========================================================
   04 — RIGHT CARD GRID
========================================================= */

body .bk-solves__grid {
    display: grid;

    min-width: 0;
    width: 100%;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    align-items: stretch;
}

/* =========================================================
   05 — CARDS
========================================================= */

body .bk-solves__card {
    position: relative;

    display: flex;
    align-items: flex-start;

    min-width: 0;
    height: 100%;

    margin: 0;

    border: 1px solid rgba(255,255,255,0.88);
    border-radius: 18px;

    background-color: #FFFCF8;
    background-image: none;

    box-shadow:
        0 3px 7px rgba(74,54,39,0.025),
        0 13px 27px rgba(74,54,39,0.050),
        0 28px 52px rgba(74,54,39,0.045),
        inset 0 1px 0 rgba(255,255,255,0.92);

    transition:
        transform 420ms cubic-bezier(0.22,1,0.36,1),
        box-shadow 420ms ease,
        border-color 420ms ease;
}

/* =========================================================
   06 — DIMENSIONAL ICONS
========================================================= */

body .bk-solves__icon {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border-radius: 50%;

    background-color: #F0DED0;

    background-image: linear-gradient(
        145deg,
        #FFF8F1 0%,
        #F6E8DC 48%,
        #ECD5C4 100%
    );

    border: 1px solid rgba(173,120,89,0.12);

    box-shadow:
        0 4px 9px rgba(81,51,33,0.035),
        0 14px 26px rgba(81,51,33,0.075),
        inset 0 2px 1px rgba(255,255,255,0.89),
        inset 0 -5px 11px rgba(137,86,55,0.035);

    transition:
        transform 420ms cubic-bezier(0.22,1,0.36,1),
        box-shadow 420ms ease;
}

body .bk-solves__icon::before {
    content: "";

    position: absolute;
    inset: 4px;

    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.55);

    pointer-events: none;
}

/* SVG LINE ART */

body .bk-solves__icon svg {
    position: relative;
    z-index: 2;

    display: block;

    width: 43%;
    height: 43%;

    fill: none;

    stroke: #965C42;
    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;

    color: #965C42;

    filter:
        drop-shadow(0 2px 2px rgba(69,42,28,0.08));
}

/* =========================================================
   07 — CARD TYPOGRAPHY
========================================================= */

body .bk-solves__card-content {
    flex: 1;
    min-width: 0;
}

body .bk-solves__number {
    display: block;

    margin: 0;

    font-family: "Inter", sans-serif;
    font-weight: 700;

    letter-spacing: 0.02em;

    color: #C45F3E;
}

body .bk-solves__card-title {
    margin: 0;

    font-family: "Manrope", "Inter", sans-serif;
    font-weight: 650;

    letter-spacing: -0.035em;

    color: #1F211D;
}

body .bk-solves__card-body {
    margin: 0;

    font-family: "Inter", sans-serif;
    font-weight: 400;

    color: rgba(31,33,29,0.72);
}

/* =========================================================
   08 — DESKTOP
   1101px AND ABOVE
========================================================= */

@media (min-width: 1101px) {

    body .bk-solves {
        min-height: 460px;
        padding: 85px 0 95px;
    }

    body .bk-solves__inner {
        grid-template-columns:
            minmax(0, 0.77fr)
            minmax(0, 1.23fr);

        align-items: center;

        column-gap: 85px;

        padding: 0 80px;
    }

    /* LEFT */

    body .bk-solves__intro {
        max-width: 475px;
    }

    body .bk-solves__eyebrow {
        margin-bottom: 24px;

        font-size: 12px;
        line-height: 1.4;
    }

    body .bk-solves__title {
        max-width: 480px;

        font-size: clamp(33px, 2.95vw, 45px);
        line-height: 1.18;
    }

    body .bk-solves__support {
        margin-top: 27px;

        font-size: 14px;
        line-height: 1.6;
    }

    /* GRID */

    body .bk-solves__grid {
        column-gap: 20px;
        row-gap: 20px;
    }

    /* CARDS */

    body .bk-solves__card {
        gap: 19px;

        min-height: 178px;
        padding: 25px 21px;
    }

    body .bk-solves__icon {
        width: 73px;
        height: 73px;
    }

    body .bk-solves__number {
        margin-bottom: 8px;

        font-size: 12px;
        line-height: 1.2;
    }

    body .bk-solves__card-title {
        margin-bottom: 12px;

        font-size: 16px;
        line-height: 1.33;
    }

    body .bk-solves__card-body {
        font-size: 12px;
        line-height: 1.7;
    }
}

/* =========================================================
   09 — TABLET
   600px–1100px
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .bk-solves {
        padding: 85px 0 95px;
    }

    body .bk-solves__inner {
        display: block;

        padding: 0 60px;
    }

    /* INTRO */

    body .bk-solves__intro {
        max-width: 850px;

        margin-bottom: 45px;
    }

    body .bk-solves__eyebrow {
        margin-bottom: 22px;

        font-size: 12px;
        line-height: 1.4;
    }

    body .bk-solves__title {
        max-width: 740px;

        font-size: clamp(38px, 5vw, 52px);
        line-height: 1.17;
    }

    body .bk-solves__support {
        margin-top: 25px;

        font-size: 14px;
        line-height: 1.7;
    }

    /* GRID */

    body .bk-solves__grid {
        gap: 20px;
    }

    /* CARDS */

    body .bk-solves__card {
        gap: 19px;

        min-height: 185px;
        padding: 25px 21px;
    }

    body .bk-solves__icon {
        width: 72px;
        height: 72px;
    }

    body .bk-solves__number {
        margin-bottom: 9px;

        font-size: 12px;
    }

    body .bk-solves__card-title {
        margin-bottom: 12px;

        font-size: 16px;
        line-height: 1.35;
    }

    body .bk-solves__card-body {
        font-size: 13px;
        line-height: 1.7;
    }
}

/* =========================================================
   10 — SMALL TABLET
   600px–749px
========================================================= */

@media (min-width: 600px) and (max-width: 749px) {

    body .bk-solves {
        padding: 75px 0 85px;
    }

    body .bk-solves__inner {
        padding: 0 42px;
    }

    body .bk-solves__grid {
        gap: 15px;
    }

    body .bk-solves__card {
        flex-direction: column;

        gap: 18px;

        padding: 23px 20px;
    }

    body .bk-solves__icon {
        width: 70px;
        height: 70px;
    }

    body .bk-solves__card-title {
        font-size: 15px;
    }

    body .bk-solves__card-body {
        font-size: 12px;
    }
}

/* =========================================================
   11 — MOBILE
   599px AND BELOW
========================================================= */

@media (max-width: 599px) {

    body .bk-solves {
        padding: 75px 0 88px;
    }

    body .bk-solves__inner {
        display: block;

        padding: 0 28px 0 34px;
    }

    /* INTRO */

    body .bk-solves__intro {
        max-width: none;
        margin-bottom: 40px;
    }

    body .bk-solves__eyebrow {
        margin-bottom: 23px;

        font-size: 11px;
        line-height: 1.45;
    }

    body .bk-solves__title {
        max-width: 520px;

        font-size: clamp(32px, 8vw, 43px);
        line-height: 1.16;
    }

    body .bk-solves__support {
        margin-top: 24px;

        font-size: 13px;
        line-height: 1.65;
    }

    /* SINGLE COLUMN */

    body .bk-solves__grid {
        grid-template-columns: minmax(0, 1fr);

        gap: 17px;
    }

    /* CARDS */

    body .bk-solves__card {
        flex-direction: row;

        gap: 18px;

        min-height: 155px;
        padding: 23px 19px;

        border-radius: 17px;
    }

    body .bk-solves__icon {
        width: 65px;
        height: 65px;
    }

    /* TEXT */

    body .bk-solves__number {
        margin-bottom: 8px;

        font-size: 11px;
    }

    body .bk-solves__card-title {
        margin-bottom: 11px;

        font-size: 16px;
        line-height: 1.35;
    }

    body .bk-solves__card-body {
        font-size: 12px;
        line-height: 1.7;
    }
}

/* =========================================================
   12 — SMALL MOBILE
   374px AND BELOW
========================================================= */

@media (max-width: 374px) {

    body .bk-solves {
        padding: 65px 0 75px;
    }

    body .bk-solves__inner {
        padding: 0 23px 0 29px;
    }

    body .bk-solves__title {
        font-size: 31px;
    }

    body .bk-solves__card {
        gap: 14px;

        padding: 21px 16px;
    }

    body .bk-solves__icon {
        width: 55px;
        height: 55px;
    }

    body .bk-solves__card-title {
        font-size: 15px;
    }

    body .bk-solves__card-body {
        font-size: 11.5px;
    }
}

/* =========================================================
   13 — HOVER INTERACTIONS
========================================================= */

@media (hover: hover) {

    body .bk-solves__card:hover {
        transform: translateY(-5px);

        border-color: rgba(215,177,151,0.35);

        box-shadow:
            0 7px 15px rgba(74,54,39,0.035),
            0 21px 40px rgba(74,54,39,0.085),
            0 36px 65px rgba(74,54,39,0.060),
            inset 0 1px 0 rgba(255,255,255,0.96);
    }

    body .bk-solves__card:hover
    .bk-solves__icon {
        transform: translateY(-3px) scale(1.035);

        box-shadow:
            0 8px 15px rgba(81,51,33,0.05),
            0 19px 32px rgba(81,51,33,0.11),
            inset 0 2px 1px rgba(255,255,255,0.94);
    }
}

/* =========================================================
   14 — STAGGERED ENTRANCE ANIMATIONS
========================================================= */

body .bk-solves__eyebrow,
body .bk-solves__title,
body .bk-solves__support,
body .bk-solves__card {
    animation:
        bkSolvesReveal 850ms
        cubic-bezier(0.22,1,0.36,1)
        both;
}

body .bk-solves__eyebrow {
    animation-delay: 70ms;
}

body .bk-solves__title {
    animation-delay: 150ms;
}

body .bk-solves__support {
    animation-delay: 240ms;
}

body .bk-solves__card:nth-child(1) {
    animation-delay: 180ms;
}

body .bk-solves__card:nth-child(2) {
    animation-delay: 260ms;
}

body .bk-solves__card:nth-child(3) {
    animation-delay: 340ms;
}

body .bk-solves__card:nth-child(4) {
    animation-delay: 420ms;
}

@keyframes bkSolvesReveal {

    from {
        opacity: 0;
        translate: 0 23px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

/* =========================================================
   15 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body .bk-solves__eyebrow,
    body .bk-solves__title,
    body .bk-solves__support,
    body .bk-solves__card {
        animation: none !important;

        opacity: 1;
        translate: none;
    }

    body .bk-solves__card,
    body .bk-solves__icon {
        transition: none;
    }

    body .bk-solves__card:hover,
    body .bk-solves__card:hover
    .bk-solves__icon {
        transform: none;
    }
}


/* =========================================================
   FRAYORA — BUSINESS KNOWLEDGE & ORGANIZATION
   SECTION 03 — WHAT WE BUILD

   Modern SaaS / Bond-inspired editorial styling

   DESKTOP: 1101px+
   TABLET: 600px–1100px
   MOBILE: 599px and below

   Solid warm ivory background
   Asymmetric editorial composition
   Four softly raised service cards
   Olive and terracotta glass-inspired icons
   Layered shadows and subtle highlights
   Scroll entrance animations
   Reduced-motion accessibility

   NO PHP CHANGES BEYOND SECTION MARKUP
   NO DECORATIVE BACKGROUND IMAGES
========================================================= */


/* =========================================================
   01 — SECTION FOUNDATION
========================================================= */

body .bk-build {
    position: relative;
    isolation: isolate;

    width: 100%;
    margin: 0;
    padding: 0;

    box-sizing: border-box;
    overflow: hidden;

    background-color: #F5EDE4 !important;
    background-image: none !important;

    color: #1F211D;
}

body .bk-build *,
body .bk-build *::before,
body .bk-build *::after {
    box-sizing: border-box;
}

/* No decorative background overlays */

body .bk-build::before,
body .bk-build::after {
    content: none !important;
    display: none !important;
}


/* =========================================================
   02 — MAIN CONTENT CONTAINER
========================================================= */

body .bk-build__inner {
    position: relative;
    z-index: 2;

    display: grid;

    width: 100%;
    max-width: 1600px;

    margin: 0 auto;
}


/* =========================================================
   03 — LEFT EDITORIAL INTRO
========================================================= */

body .bk-build__intro {
    position: relative;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    text-align: left;
}

/* EYEBROW */

body .bk-build__eyebrow {
    margin: 0;

    font-family: "Inter", sans-serif !important;
    font-weight: 600;

    line-height: 1.4;
    letter-spacing: 0.15em;
    text-transform: uppercase;

    color: #B66D4E;
}

/* MAIN SECTION HEADING */

body .bk-build__title {
    width: 100%;
    margin: 0;

    font-family: "Manrope", "Inter", sans-serif !important;
    font-weight: 600;

    line-height: 1.16;
    letter-spacing: -0.048em;

    color: #1F211D;

    text-align: left;
    text-wrap: balance;
}


/* =========================================================
   04 — SERVICE CARD GRID
========================================================= */

body .bk-build__grid {
    position: relative;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    width: 100%;
    min-width: 0;

    align-items: stretch;
}


/* =========================================================
   05 — RAISED SAAS CARDS
========================================================= */

body .bk-build__card {
    position: relative;

    display: flex;
    align-items: flex-start;

    width: 100%;
    min-width: 0;
    height: 100%;

    margin: 0;

    border: 1px solid rgba(255,255,255,0.82);
    border-radius: 17px;

    background-color: #FFFCF8;
    background-image: none;

    box-shadow:
        0 4px 10px rgba(64,46,34,0.025),
        0 15px 30px rgba(64,46,34,0.055),
        0 28px 54px rgba(64,46,34,0.04),
        inset 0 1px 0 rgba(255,255,255,0.9);

    transition:
        transform 420ms cubic-bezier(.22,1,.36,1),
        box-shadow 420ms ease,
        border-color 420ms ease;
}

/* No decorative lines or shapes on cards */

body .bk-build__card::before,
body .bk-build__card::after {
    content: none !important;
    display: none !important;
}


/* =========================================================
   06 — DIMENSIONAL ICON SURFACES
========================================================= */

body .bk-build__icon {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border-radius: 50%;

    transition:
        transform 400ms cubic-bezier(.22,1,.36,1),
        box-shadow 400ms ease;
}

/* SOFT OLIVE */

body .bk-build__icon--olive {
    background-color: #E5E6D9;

    background-image: linear-gradient(
        145deg,
        #F4F3EA 0%,
        #E9E8DC 52%,
        #DCDDCF 100%
    );

    border: 1px solid rgba(99,110,88,0.11);

    box-shadow:
        0 5px 11px rgba(52,61,46,0.04),
        0 15px 26px rgba(52,61,46,0.07),
        inset 0 2px 1px rgba(255,255,255,0.9),
        inset 0 -5px 10px rgba(76,91,68,0.045);
}

/* WARM TERRACOTTA */

body .bk-build__icon--terracotta {
    background-color: #F1E0D2;

    background-image: linear-gradient(
        145deg,
        #FFF6EE 0%,
        #F5E4D7 52%,
        #EED7C6 100%
    );

    border: 1px solid rgba(175,114,81,0.12);

    box-shadow:
        0 5px 11px rgba(89,55,35,0.035),
        0 15px 26px rgba(89,55,35,0.075),
        inset 0 2px 1px rgba(255,255,255,0.9),
        inset 0 -5px 10px rgba(139,88,59,0.04);
}

/* THIN INNER GLASS RIM */

body .bk-build__icon::before {
    content: "";

    position: absolute;
    inset: 4px;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,0.62);

    pointer-events: none;
}

/* SVG ICONS */

body .bk-build__icon svg {
    position: relative;
    z-index: 2;

    display: block;

    width: 42%;
    height: 42%;

    fill: none;

    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;

    filter: drop-shadow(
        0 2px 2px rgba(43,40,32,0.09)
    );

    transition: transform 400ms ease;
}

body .bk-build__icon--olive svg {
    stroke: #525D4D;
}

body .bk-build__icon--terracotta svg {
    stroke: #A66346;
}


/* =========================================================
   07 — CARD TYPOGRAPHY
========================================================= */

body .bk-build__card-content {
    flex: 1;

    width: 100%;
    min-width: 0;
}

/* NUMBER */

body .bk-build__number {
    display: block;

    font-family: "Inter", sans-serif !important;
    font-weight: 700;

    line-height: 1.25;
    letter-spacing: 0.02em;

    color: #C96743;
}

/* CARD TITLE */

body .bk-build__card-title {
    margin: 0;

    font-family: "Manrope", "Inter", sans-serif !important;
    font-weight: 650;

    line-height: 1.32;
    letter-spacing: -0.033em;

    color: #1F211D;
}

/* CARD DESCRIPTION */

body .bk-build__card-body {
    margin: 0;

    font-family: "Inter", sans-serif !important;
    font-weight: 400;

    line-height: 1.68;

    color: rgba(31,33,29,0.76);
}


/* =========================================================
   08 — DESKTOP
   1101px AND ABOVE
========================================================= */

@media (min-width: 1101px) {

    /* SECTION SPACING */

    body .bk-build {
        padding: 100px 0 110px;
    }

    /* ASYMMETRIC TWO-COLUMN LAYOUT */

    body .bk-build__inner {
        grid-template-columns:
            minmax(0, 0.82fr)
            minmax(0, 1.18fr);

        column-gap: 75px;

        align-items: center;

        padding: 0 80px;
    }

    /* LEFT CONTENT */

    body .bk-build__intro {
        max-width: 510px;
    }

    body .bk-build__eyebrow {
        margin-bottom: 23px;

        font-size: 12px;
    }

    body .bk-build__title {
        max-width: 510px;

        font-size: clamp(35px, 3vw, 46px);
    }

    /* RIGHT GRID */

    body .bk-build__grid {
        gap: 19px;
    }

    /* CARDS */

    body .bk-build__card {
        gap: 18px;

        min-height: 190px;
        padding: 24px 19px;
    }

    /* ICON SIZE */

    body .bk-build__icon {
        width: 64px;
        height: 64px;
    }

    /* TYPOGRAPHY */

    body .bk-build__number {
        margin-bottom: 7px;
        font-size: 11px;
    }

    body .bk-build__card-title {
        margin-bottom: 11px;
        font-size: 15px;
    }

    body .bk-build__card-body {
        font-size: 12px;
    }
}


/* =========================================================
   09 — MID-SIZE DESKTOP
   1101px–1300px
========================================================= */

@media (min-width: 1101px) and (max-width: 1300px) {

    body .bk-build__inner {
        column-gap: 45px;
        padding: 0 60px;
    }

    body .bk-build__card {
        gap: 13px;
        padding: 22px 15px;
    }

    body .bk-build__icon {
        width: 56px;
        height: 56px;
    }

    body .bk-build__card-title {
        font-size: 14px;
    }

    body .bk-build__card-body {
        font-size: 11.5px;
    }
}


/* =========================================================
   10 — TABLET
   600px–1100px
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .bk-build {
        padding: 85px 0 95px;
    }

    body .bk-build__inner {
        display: block;

        padding: 0 60px;
    }

    /* INTRO ABOVE GRID */

    body .bk-build__intro {
        max-width: 800px;
        margin-bottom: 45px;
    }

    body .bk-build__eyebrow {
        margin-bottom: 21px;
        font-size: 12px;
    }

    body .bk-build__title {
        max-width: 760px;

        font-size: clamp(36px, 4.8vw, 50px);
    }

    /* TWO-COLUMN GRID */

    body .bk-build__grid {
        gap: 19px;
    }

    body .bk-build__card {
        flex-direction: column;

        gap: 18px;

        min-height: 260px;
        padding: 25px 23px;
    }

    body .bk-build__icon {
        width: 72px;
        height: 72px;
    }

    body .bk-build__number {
        margin-bottom: 9px;
        font-size: 12px;
    }

    body .bk-build__card-title {
        margin-bottom: 11px;
        font-size: 17px;
    }

    body .bk-build__card-body {
        font-size: 13px;
    }
}


/* =========================================================
   11 — SMALL TABLET
   600px–749px
========================================================= */

@media (min-width: 600px) and (max-width: 749px) {

    body .bk-build {
        padding: 75px 0 85px;
    }

    body .bk-build__inner {
        padding: 0 42px;
    }

    body .bk-build__intro {
        margin-bottom: 37px;
    }

    body .bk-build__title {
        font-size: clamp(34px, 5.5vw, 41px);
    }

    body .bk-build__grid {
        gap: 14px;
    }

    body .bk-build__card {
        padding: 22px 19px;
        min-height: 265px;
    }

    body .bk-build__icon {
        width: 62px;
        height: 62px;
    }

    body .bk-build__card-title {
        font-size: 15px;
    }

    body .bk-build__card-body {
        font-size: 12px;
    }
}


/* =========================================================
   12 — MOBILE
   599px AND BELOW
========================================================= */

@media (max-width: 599px) {

    body .bk-build {
        padding: 75px 0 85px;
    }

    body .bk-build__inner {
        display: block;

        padding: 0 28px 0 34px;
    }

    /* INTRO */

    body .bk-build__intro {
        margin-bottom: 38px;
    }

    body .bk-build__eyebrow {
        margin-bottom: 21px;

        font-size: 11px;
    }

    body .bk-build__title {
        max-width: 520px;

        font-size: clamp(32px, 8vw, 43px);
    }

    /* STACKED CARDS */

    body .bk-build__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 17px;
    }

    body .bk-build__card {
        flex-direction: row;

        gap: 17px;

        min-height: 0;
        padding: 25px 18px;

        border-radius: 16px;
    }

    body .bk-build__icon {
        width: 59px;
        height: 59px;
    }

    body .bk-build__number {
        margin-bottom: 8px;
        font-size: 11px;
    }

    body .bk-build__card-title {
        margin-bottom: 10px;

        font-size: 16px;
    }

    body .bk-build__card-body {
        font-size: 12px;
        line-height: 1.7;
    }
}


/* =========================================================
   13 — SMALL MOBILE
   374px AND BELOW
========================================================= */

@media (max-width: 374px) {

    body .bk-build {
        padding: 65px 0 75px;
    }

    body .bk-build__inner {
        padding: 0 23px 0 29px;
    }

    body .bk-build__title {
        font-size: 31px;
    }

    body .bk-build__card {
        gap: 13px;
        padding: 21px 15px;
    }

    body .bk-build__icon {
        width: 52px;
        height: 52px;
    }

    body .bk-build__card-title {
        font-size: 15px;
    }

    body .bk-build__card-body {
        font-size: 11.5px;
    }
}


/* =========================================================
   14 — HOVER EFFECTS
========================================================= */

@media (hover: hover) {

    body .bk-build__card:hover {
        transform: translateY(-5px);

        border-color: rgba(200,162,138,0.30);

        box-shadow:
            0 7px 16px rgba(64,46,34,0.04),
            0 22px 42px rgba(64,46,34,0.085),
            0 38px 65px rgba(64,46,34,0.055),
            inset 0 1px 0 rgba(255,255,255,0.96);
    }

    body .bk-build__card:hover .bk-build__icon {
        transform: translateY(-3px) scale(1.035);
    }

    body .bk-build__card:hover .bk-build__icon svg {
        transform: scale(1.07);
    }
}


/* =========================================================
   15 — SCROLL ENTRANCE ANIMATIONS

   Uses CSS scroll timelines when supported.
   Otherwise content remains visible.
========================================================= */

@keyframes bkBuildReveal {
    from {
        opacity: 0;
        translate: 0 21px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

@supports (animation-timeline: view()) {

    body .bk-build__intro {
        animation: bkBuildReveal linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 55%;
    }

    body .bk-build__card {
        animation: bkBuildReveal linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 55%;
    }

    body .bk-build__card:nth-child(2) {
        animation-range: entry 0% entry 62%;
    }

    body .bk-build__card:nth-child(3) {
        animation-range: entry 0% entry 68%;
    }

    body .bk-build__card:nth-child(4) {
        animation-range: entry 0% entry 74%;
    }
}


/* =========================================================
   16 — REDUCED MOTION ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body .bk-build__intro,
    body .bk-build__card {
        animation: none !important;

        opacity: 1 !important;
        translate: none !important;
    }

    body .bk-build__card,
    body .bk-build__icon,
    body .bk-build__icon svg {
        transition: none !important;
    }

    body .bk-build__card:hover,
    body .bk-build__card:hover .bk-build__icon,
    body .bk-build__card:hover .bk-build__icon svg {
        transform: none !important;
    }
}

@media (max-width: 599px) {

    /* Make 03 green instead of terracotta */
    body .bk-build__card:nth-child(3) .bk-build__icon {
        background-color: #F0EFE5;
        background-image: linear-gradient(
            145deg,
            #FBFAF3 0%,
            #F0F0E6 55%,
            #E1E2D6 100%
        );
    }

    body .bk-build__card:nth-child(3) .bk-build__icon svg {
        stroke: #5A6656;
    }

    /* Make 04 terracotta instead of green */
    body .bk-build__card:nth-child(4) .bk-build__icon {
        background-color: #F2E2D6;
        background-image: linear-gradient(
            145deg,
            #FFF6EF 0%,
            #F5E5D9 55%,
            #EDD8C7 100%
        );
    }

    body .bk-build__card:nth-child(4) .bk-build__icon svg {
        stroke: #B66D4E;
    }
}

/* =========================================================
   FRAYORA — BUSINESS KNOWLEDGE & ORGANIZATION
   SECTION 04 — THE OUTCOME

   Modern SaaS / Bond-inspired editorial design

   DESKTOP: 1101px+
   TABLET: 600px–1100px
   MOBILE: 599px and below

   Solid ivory background
   Asymmetric editorial layout
   Three elevated outcome cards
   Sculptural glass-inspired icons
   Layered dimensional shadows
   Subtle terracotta accents
   Scroll entrance animations
   Reduced-motion accessibility

   NO BACKGROUND IMAGES
   NO DECORATIVE SECTION SHAPES
========================================================= */


/* =========================================================
   01 — SECTION FOUNDATION
========================================================= */

body .bk-outcome {
    position: relative;
    isolation: isolate;

    width: 100%;
    margin: 0;
    padding: 0;

    box-sizing: border-box;
    overflow: hidden;

    background-color: #F8F3EB !important;
    background-image: none !important;

    color: #1F211D;
}

body .bk-outcome *,
body .bk-outcome *::before,
body .bk-outcome *::after {
    box-sizing: border-box;
}

/* Remove decorative section overlays */

body .bk-outcome::before,
body .bk-outcome::after {
    content: none !important;
    display: none !important;
}


/* =========================================================
   02 — MAIN CONTENT CONTAINER
========================================================= */

body .bk-outcome__inner {
    position: relative;
    z-index: 2;

    display: grid;

    width: 100%;
    max-width: 1600px;

    margin: 0 auto;
}


/* =========================================================
   03 — LEFT EDITORIAL CONTENT
========================================================= */

body .bk-outcome__intro {
    position: relative;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    text-align: left;
}

/* EYEBROW */

body .bk-outcome__eyebrow {
    margin: 0;

    font-family: "Inter", sans-serif;
    font-weight: 600;

    line-height: 1.4;
    letter-spacing: 0.15em;
    text-transform: uppercase;

    color: #B66D4E;
}

/* HEADING */

body .bk-outcome__title {
    width: 100%;
    margin: 0;

    font-family: "Manrope", "Inter", sans-serif;
    font-weight: 600;

    line-height: 1.16;
    letter-spacing: -0.048em;

    color: #1F211D;

    text-align: left;
    text-wrap: balance;
}

/* BODY */

body .bk-outcome__body {
    width: 100%;
    margin: 0;

    font-family: "Inter", sans-serif;
    font-weight: 400;

    line-height: 1.75;

    color: rgba(31,33,29,0.76);
}


/* =========================================================
   04 — OUTCOME GRID
========================================================= */

body .bk-outcome__grid {
    position: relative;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    width: 100%;
    min-width: 0;

    align-items: stretch;
}


/* =========================================================
   05 — OUTCOME CARDS
========================================================= */

body .bk-outcome__card {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    width: 100%;
    min-width: 0;
    height: 100%;

    margin: 0;

    border: 1px solid rgba(255,255,255,0.85);
    border-radius: 18px;

    background-color: #FFFCF8;
    background-image: none;

    box-shadow:
        0 4px 10px rgba(64,46,34,0.025),
        0 15px 29px rgba(64,46,34,0.055),
        0 30px 55px rgba(64,46,34,0.045),
        inset 0 1px 0 rgba(255,255,255,0.90);

    transition:
        transform 420ms cubic-bezier(.22,1,.36,1),
        box-shadow 420ms ease,
        border-color 420ms ease;
}


/* ALL THREE OUTCOME CARDS — MATCHING IVORY */

body .bk-outcome__card--olive {
    background-color: #FFFCF8;
    border-color: rgba(255,255,255,0.85);
}



/* Other cards: warm elevated ivory */

body .bk-outcome__card--terracotta {
    background-color: #FFFCF8;
}

/* Avoid decorative pseudo-element backgrounds */

body .bk-outcome__card::before,
body .bk-outcome__card::after {
    content: none !important;
    display: none !important;
}


/* =========================================================
   06 — DIMENSIONAL ICON MEDALLIONS
========================================================= */

body .bk-outcome__icon {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,0.72);

    box-shadow:
        0 5px 12px rgba(70,49,33,0.035),
        0 15px 27px rgba(70,49,33,0.065),
        inset 0 2px 1px rgba(255,255,255,0.88),
        inset 0 -4px 9px rgba(105,78,52,0.035);

    transition:
        transform 400ms cubic-bezier(.22,1,.36,1),
        box-shadow 400ms ease;
}


/* OUTCOME 01 — MATCH TERRACOTTA ICONS */

body .bk-outcome__card--olive .bk-outcome__icon {
    background-color: #F2E2D6;

    background-image: linear-gradient(
        145deg,
        #FFF6EF 0%,
        #F5E5D9 55%,
        #EDD8C7 100%
    );
}


/* TERRACOTTA ICONS */

body .bk-outcome__card--terracotta .bk-outcome__icon {
    background-color: #F2E2D6;

    background-image: linear-gradient(
        145deg,
        #FFF6EF 0%,
        #F5E5D9 55%,
        #EDD8C7 100%
    );
}

/* DELICATE GLASS RIM */

body .bk-outcome__icon::before {
    content: "";

    position: absolute;
    inset: 4px;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,0.62);

    pointer-events: none;
}

/* SVG ICONS */

body .bk-outcome__icon svg {
    position: relative;
    z-index: 2;

    display: block;

    width: 47%;
    height: 47%;

    fill: none;
    stroke-width: 1.85;

    stroke-linecap: round;
    stroke-linejoin: round;

    filter: drop-shadow(
        0 2px 2px rgba(45,35,24,0.09)
    );

    transition: transform 400ms ease;
}


body .bk-outcome__card--olive svg {
    stroke: #A46243;
}


body .bk-outcome__card--terracotta svg {
    stroke: #A46243;
}


/* =========================================================
   07 — CARD LABELS AND HEADINGS
========================================================= */

body .bk-outcome__card-content {
    width: 100%;
    min-width: 0;
}

body .bk-outcome__number {
    display: block;

    margin: 0;

    font-family: "Inter", sans-serif;
    font-weight: 700;

    line-height: 1.3;
    letter-spacing: 0.01em;

    color: #C96743;
}

body .bk-outcome__card-title {
    width: 100%;
    margin: 0;

    font-family: "Manrope", "Inter", sans-serif;
    font-weight: 650;

    line-height: 1.3;
    letter-spacing: -0.035em;

    color: #1F211D;
}


/* =========================================================
   08 — TERRACOTTA ACCENT LINES
========================================================= */

body .bk-outcome__accent {
    display: block;

    flex: 0 0 auto;

    width: 44px;
    height: 2px;

    margin-top: auto;

    border-radius: 999px;

    background-color: #C96743;

    box-shadow:
        0 1px 3px rgba(201,103,67,0.15);

    transition:
        width 400ms cubic-bezier(.22,1,.36,1);
}


/* =========================================================
   09 — DESKTOP
   1101px AND ABOVE
========================================================= */

@media (min-width: 1101px) {

    body .bk-outcome {
        padding: 90px 0 105px;
    }

    body .bk-outcome__inner {
        grid-template-columns:
            minmax(0, 0.90fr)
            minmax(0, 1.10fr);

        column-gap: 68px;

        align-items: center;

        padding: 0 80px;
    }

    /* INTRO */

    body .bk-outcome__intro {
        max-width: 570px;
    }

    body .bk-outcome__eyebrow {
        margin-bottom: 22px;

        font-size: 12px;
    }

    body .bk-outcome__title {
        max-width: 565px;

        font-size: clamp(35px, 3.05vw, 47px);
    }

    body .bk-outcome__body {
        max-width: 535px;

        margin-top: 23px;

        font-size: 14px;
    }

    /* OUTCOME GRID */

    body .bk-outcome__grid {
        gap: 17px;
    }

    /* CARDS */

    body .bk-outcome__card {
        min-height: 275px;

        padding: 24px 20px 25px;
    }

    /* ICON */

    body .bk-outcome__icon {
        width: 78px;
        height: 78px;

        margin-bottom: 25px;
    }

    /* CARD TEXT */

    body .bk-outcome__number {
        margin-bottom: 10px;
        font-size: 11px;
    }

    body .bk-outcome__card-title {
        margin-bottom: 22px;
        font-size: 17px;
    }
}


/* =========================================================
   10 — MID-SIZE DESKTOP
   1101px–1300px
========================================================= */

@media (min-width: 1101px) and (max-width: 1300px) {

    body .bk-outcome__inner {
        grid-template-columns:
            minmax(0, 0.85fr)
            minmax(0, 1.15fr);

        column-gap: 42px;

        padding: 0 60px;
    }

    body .bk-outcome__grid {
        gap: 13px;
    }

    body .bk-outcome__card {
        min-height: 265px;
        padding: 21px 15px;
    }

    body .bk-outcome__icon {
        width: 68px;
        height: 68px;

        margin-bottom: 23px;
    }

    body .bk-outcome__card-title {
        font-size: 15px;
    }
}


/* =========================================================
   11 — TABLET
   600px–1100px
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .bk-outcome {
        padding: 85px 0 95px;
    }

    body .bk-outcome__inner {
        display: block;

        padding: 0 60px;
    }

    /* INTRO ABOVE CARDS */

    body .bk-outcome__intro {
        max-width: 840px;

        margin-bottom: 43px;
    }

    body .bk-outcome__eyebrow {
        margin-bottom: 21px;

        font-size: 12px;
    }

    body .bk-outcome__title {
        max-width: 780px;

        font-size: clamp(36px, 4.8vw, 51px);
    }

    body .bk-outcome__body {
        max-width: 780px;

        margin-top: 24px;

        font-size: 15px;
    }

    /* THREE OUTCOME CARDS */

    body .bk-outcome__grid {
        gap: 17px;
    }

    body .bk-outcome__card {
        min-height: 255px;

        padding: 23px 19px 25px;
    }

    body .bk-outcome__icon {
        width: 72px;
        height: 72px;

        margin-bottom: 25px;
    }

    body .bk-outcome__number {
        margin-bottom: 9px;
        font-size: 11px;
    }

    body .bk-outcome__card-title {
        margin-bottom: 25px;
        font-size: 16px;
    }
}


/* =========================================================
   12 — SMALL TABLET
   600px–749px
========================================================= */

@media (min-width: 600px) and (max-width: 749px) {

    body .bk-outcome {
        padding: 75px 0 85px;
    }

    body .bk-outcome__inner {
        padding: 0 42px;
    }

    body .bk-outcome__title {
        font-size: clamp(34px, 5.6vw, 42px);
    }

    body .bk-outcome__grid {
        gap: 12px;
    }

    body .bk-outcome__card {
        min-height: 240px;

        padding: 20px 14px 23px;
    }

    body .bk-outcome__icon {
        width: 62px;
        height: 62px;

        margin-bottom: 22px;
    }

    body .bk-outcome__card-title {
        font-size: 14px;
    }

    body .bk-outcome__accent {
        width: 35px;
    }
}


/* =========================================================
   13 — MOBILE
   599px AND BELOW

   THREE-CARD SINGLE-COLUMN LAYOUT
========================================================= */

@media (max-width: 599px) {

    body .bk-outcome {
        padding: 75px 0 85px;
    }

    body .bk-outcome__inner {
        display: block;

        padding: 0 28px 0 34px;
    }

    /* INTRO */

    body .bk-outcome__intro {
        margin-bottom: 38px;
    }

    body .bk-outcome__eyebrow {
        margin-bottom: 21px;

        font-size: 11px;
    }

    body .bk-outcome__title {
        max-width: 520px;

        font-size: clamp(32px, 8vw, 43px);
    }

    body .bk-outcome__body {
        max-width: 520px;

        margin-top: 25px;

        font-size: 14px;
        line-height: 1.75;
    }

    /* SINGLE COLUMN */

    body .bk-outcome__grid {
        grid-template-columns: minmax(0, 1fr);

        gap: 17px;
    }

    /* HORIZONTAL CARD STRUCTURE */

    body .bk-outcome__card {
        display: grid;

        grid-template-columns: 76px minmax(0, 1fr);
        grid-template-rows: auto auto;

        align-items: center;

        column-gap: 19px;

        min-height: 140px;

        padding: 23px 22px;

        border-radius: 17px;
    }

    /* ICON */

    body .bk-outcome__icon {
        grid-column: 1;
        grid-row: 1 / 3;

        width: 72px;
        height: 72px;

        margin: 0;
    }

    /* TEXT */

    body .bk-outcome__card-content {
        grid-column: 2;
        grid-row: 1;
    }

    body .bk-outcome__number {
        margin-bottom: 9px;

        font-size: 11px;
    }

    body .bk-outcome__card-title {
        margin: 0;

        font-size: 17px;
        line-height: 1.35;
    }

    /* ACCENT LINE */

    body .bk-outcome__accent {
        grid-column: 2;
        grid-row: 2;

        width: 40px;

        margin-top: 17px;
    }
}


/* =========================================================
   14 — SMALL MOBILE
   374px AND BELOW
========================================================= */

@media (max-width: 374px) {

    body .bk-outcome {
        padding: 65px 0 75px;
    }

    body .bk-outcome__inner {
        padding: 0 23px 0 29px;
    }

    body .bk-outcome__title {
        font-size: 31px;
    }

    body .bk-outcome__card {
        grid-template-columns: 62px minmax(0, 1fr);

        column-gap: 15px;

        min-height: 130px;

        padding: 21px 17px;
    }

    body .bk-outcome__icon {
        width: 60px;
        height: 60px;
    }

    body .bk-outcome__card-title {
        font-size: 15px;
    }
}


/* =========================================================
   15 — HOVER EFFECTS
========================================================= */

@media (hover: hover) {

    body .bk-outcome__card:hover {
        transform: translateY(-5px);

        border-color: rgba(191,150,122,0.35);

        box-shadow:
            0 8px 18px rgba(64,46,34,0.04),
            0 23px 43px rgba(64,46,34,0.085),
            0 38px 67px rgba(64,46,34,0.055),
            inset 0 1px 0 rgba(255,255,255,0.94);
    }

    body .bk-outcome__card:hover
    .bk-outcome__icon {
        transform: translateY(-3px) scale(1.045);
    }

    body .bk-outcome__card:hover
    .bk-outcome__icon svg {
        transform: scale(1.07);
    }

    body .bk-outcome__card:hover
    .bk-outcome__accent {
        width: 65px;
    }
}


/* =========================================================
   16 — SCROLL ENTRANCE ANIMATIONS

   CSS-only entrance where view timelines
   are supported. Otherwise content stays visible.
========================================================= */

@keyframes bkOutcomeReveal {

    from {
        opacity: 0;
        translate: 0 22px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

@media (prefers-reduced-motion: no-preference) {

    @supports (animation-timeline: view()) {

        body .bk-outcome__intro {
            animation: bkOutcomeReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 55%;
        }

        body .bk-outcome__card {
            animation: bkOutcomeReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 55%;
        }

        body .bk-outcome__card:nth-child(2) {
            animation-range: entry 0% entry 64%;
        }

        body .bk-outcome__card:nth-child(3) {
            animation-range: entry 0% entry 73%;
        }
    }
}


/* =========================================================
   17 — REDUCED MOTION ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body .bk-outcome__intro,
    body .bk-outcome__card {
        animation: none !important;

        opacity: 1 !important;
        translate: none !important;
    }

    body .bk-outcome__card,
    body .bk-outcome__icon,
    body .bk-outcome__icon svg,
    body .bk-outcome__accent {
        transition: none !important;
    }

    body .bk-outcome__card:hover,
    body .bk-outcome__card:hover .bk-outcome__icon,
    body .bk-outcome__card:hover .bk-outcome__icon svg {
        transform: none !important;
    }
}



/* =========================================================
   FRAYORA — BUSINESS KNOWLEDGE & ORGANIZATION
   SECTION 05 — OUR PROCESS

   Modern SaaS / Bond-inspired design

   Desktop: 1101px+
   Tablet: 600px–1100px
   Mobile: 599px and below

   Solid warm ivory surface
   Five-step process timeline
   Dimensional circular icons
   Refined shadows and luminous highlights
   Terracotta connectors and CTA
   Responsive timeline layouts
   Subtle motion and accessibility
========================================================= */

/* =========================================================
   01 — SECTION FOUNDATION
========================================================= */

body .bk-process {
    position: relative;
    isolation: isolate;

    width: 100%;
    margin: 0;

    overflow: hidden;
    box-sizing: border-box;

    background-color: #F8F3EB !important;
    background-image: none !important;

    color: #1F211D;
}

body .bk-process *,
body .bk-process *::before,
body .bk-process *::after {
    box-sizing: border-box;
}

body .bk-process::before,
body .bk-process::after {
    content: none !important;
    display: none !important;
}

/* =========================================================
   02 — MAIN CONTAINER
========================================================= */

body .bk-process__inner {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1600px;

    margin: 0 auto;
}

body .bk-process__intro {
    max-width: 1000px;
}

/* =========================================================
   03 — SECTION TYPOGRAPHY
========================================================= */

body .bk-process__eyebrow {
    margin: 0;

    font-family: "Inter", sans-serif;
    font-weight: 600;
    line-height: 1.4;

    letter-spacing: 0.15em;
    text-transform: uppercase;

    color: #B66D4E;
}

body .bk-process__title {
    margin: 0;

    font-family: "Manrope", "Inter", sans-serif;
    font-weight: 600;
    line-height: 1.16;

    letter-spacing: -0.048em;
    text-wrap: balance;

    color: #1F211D;
}

body .bk-process__body {
    margin: 0;

    font-family: "Inter", sans-serif;
    font-weight: 400;
    line-height: 1.75;

    color: rgba(31,33,29,0.76);
}

/* =========================================================
   04 — TIMELINE FOUNDATION
========================================================= */

body .bk-process__steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));

    gap: 25px;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    list-style: none;
    list-style-type: none;
}

body .bk-process__step {
    position: relative;

    min-width: 0;
    margin: 0;
    padding: 0;

    list-style: none;

    transition:
        transform 400ms cubic-bezier(.22,1,.36,1);
}

body .bk-process__step::marker {
    content: "";
}

/* =========================================================
   05 — ICON ROW AND CONNECTOR
========================================================= */

body .bk-process__step-top {
    position: relative;

    display: flex;
    align-items: center;

    width: 100%;
    height: 82px;

    margin-bottom: 17px;
}

/* Connector runs from one icon to the next */

body .bk-process__step:not(:last-child)
.bk-process__step-top::after {
    content: "";

    position: absolute;
    z-index: 0;

    top: 50%;
    left: 96px;

    width: calc(100% - 71px);
    height: 1px;

    background-color: rgba(201,103,67,0.37);

    pointer-events: none;
}

/* Small connector endpoint */

body .bk-process__step:not(:last-child)
.bk-process__step-top::before {
    content: "";

    position: absolute;
    z-index: 1;

    top: calc(50% - 3px);
    right: -22px;

    width: 7px;
    height: 7px;

    border: 1px solid rgba(201,103,67,0.65);
    border-radius: 50%;

    background-color: #F8F3EB;

    pointer-events: none;
}

/* =========================================================
   06 — DIMENSIONAL ICONS
========================================================= */

body .bk-process__icon {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 78px;
    height: 78px;

    border-radius: 50%;

    border: 1px solid rgba(191,133,101,0.14);

    background-color: #F3E4D8;

    background-image: linear-gradient(
        145deg,
        #FFF8F1 0%,
        #F6E9DF 52%,
        #EBD6C7 100%
    );

    box-shadow:
        0 5px 12px rgba(82,49,32,0.045),
        0 17px 28px rgba(82,49,32,0.08),
        inset 0 2px 1px rgba(255,255,255,0.88),
        inset 0 -5px 11px rgba(116,68,44,0.045);

    transition:
        transform 400ms cubic-bezier(.22,1,.36,1),
        box-shadow 400ms ease;
}

/* Delicate glass highlight */

body .bk-process__icon::before {
    content: "";

    position: absolute;
    inset: 4px;

    border: 1px solid rgba(255,255,255,0.65);
    border-radius: 50%;

    pointer-events: none;
}

/* Subtle alternating olive tones */

body .bk-process__step:nth-child(odd)
.bk-process__icon {
    background-image: linear-gradient(
        145deg,
        #F9F8F0 0%,
        #ECEDE1 52%,
        #DFE1D4 100%
    );

    border-color: rgba(101,115,91,0.14);
}

/* SVG line art */

body .bk-process__icon svg {
    position: relative;
    z-index: 2;

    display: block;

    width: 34px;
    height: 34px;

    fill: none;

    stroke: #A36143;
    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;

    filter: drop-shadow(
        0 2px 2px rgba(60,41,27,0.08)
    );

    transition: transform 400ms ease;
}

body .bk-process__step:nth-child(odd)
.bk-process__icon svg {
    stroke: #52604E;
}

/* =========================================================
   07 — STEP TYPOGRAPHY
========================================================= */

body .bk-process__number {
    display: block;

    margin: 0;

    font-family: "Inter", sans-serif;
    font-weight: 700;
    line-height: 1.4;

    color: #C96743;
}

body .bk-process__step-title {
    margin: 0;

    font-family: "Manrope", "Inter", sans-serif;
    font-weight: 650;
    line-height: 1.35;

    letter-spacing: -0.035em;

    color: #1F211D;
}

body .bk-process__step-body {
    margin: 0;

    font-family: "Inter", sans-serif;
    font-weight: 400;
    line-height: 1.7;

    color: rgba(31,33,29,0.75);
}

/* =========================================================
   08 — CTA
========================================================= */

body .bk-process__footer {
    display: flex;
    justify-content: center;

    width: 100%;
}

body .bk-process__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 20px;

    min-height: 55px;
    max-width: 100%;

    padding: 15px 30px;

    border: 1px solid rgba(255,255,255,0.24);
    border-radius: 999px;

    background-color: #C96743;
    background-image: none;

    color: #FFFFFF;

    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 600;

    text-decoration: none;

    box-shadow:
        0 7px 16px rgba(111,58,37,0.13),
        0 18px 35px rgba(111,58,37,0.18),
        inset 0 1px 0 rgba(255,255,255,0.22);

    transition:
        transform 300ms ease,
        background-color 300ms ease,
        box-shadow 300ms ease;
}

body .bk-process__arrow {
    font-size: 22px;
    line-height: 1;

    transition: transform 300ms ease;
}

body .bk-process__button:focus-visible {
    outline: 2px solid #394235;
    outline-offset: 4px;
}

/* =========================================================
   09 — DESKTOP
   1101px AND ABOVE
========================================================= */

@media (min-width: 1101px) {

    body .bk-process {
        padding: 85px 0 95px;
    }

    body .bk-process__inner {
        padding: 0 80px;
    }

    /* Intro */

    body .bk-process__intro {
        margin-bottom: 56px;
    }

    body .bk-process__eyebrow {
        margin-bottom: 20px;
        font-size: 12px;
    }

    body .bk-process__title {
        max-width: 950px;

        font-size: clamp(35px, 3vw, 46px);
    }

    body .bk-process__body {
        max-width: 900px;

        margin-top: 22px;
        font-size: 14px;
    }

    /* Timeline */

    body .bk-process__steps {
        gap: 27px;
    }

    body .bk-process__step-top {
        height: 80px;
        margin-bottom: 18px;
    }

    body .bk-process__number {
        margin-bottom: 3px;
        font-size: 12px;
    }

    body .bk-process__step-title {
        margin-bottom: 11px;
        font-size: 18px;
    }

    body .bk-process__step-body {
        max-width: 215px;
        font-size: 12px;
    }

    body .bk-process__footer {
        margin-top: 48px;
    }
}

/* =========================================================
   MID-SIZE DESKTOP
========================================================= */

@media (min-width: 1101px) and (max-width: 1300px) {

    body .bk-process__inner {
        padding: 0 60px;
    }

    body .bk-process__steps {
        gap: 18px;
    }

    body .bk-process__icon {
        width: 70px;
        height: 70px;
    }

    body .bk-process__step-top {
        height: 72px;
    }

    body .bk-process__step:not(:last-child)
    .bk-process__step-top::after {
        left: 85px;
        width: calc(100% - 57px);
    }

    body .bk-process__step-body {
        font-size: 11.5px;
    }
}

/* =========================================================
   10 — TABLET
   600px–1100px

   Horizontal native scrolling
   Scroll snapping
   No cut-off descriptions
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .bk-process {
        padding: 80px 0 90px;
    }

    body .bk-process__inner {
        padding: 0 60px;
    }

    body .bk-process__intro {
        margin-bottom: 43px;
    }

    body .bk-process__eyebrow {
        margin-bottom: 21px;
        font-size: 12px;
    }

    body .bk-process__title {
        font-size: clamp(36px, 4.8vw, 50px);
    }

    body .bk-process__body {
        max-width: 800px;

        margin-top: 22px;
        font-size: 15px;
    }

    /* Horizontal timeline */

    body .bk-process__steps {
        display: flex;
        flex-wrap: nowrap;

        gap: 22px;

        overflow-x: auto;
        overflow-y: hidden;

        padding: 10px 0 25px;

        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;

        scrollbar-width: thin;
        scrollbar-color:
            #BE947E rgba(201,103,67,0.12);
    }

    body .bk-process__steps::-webkit-scrollbar {
        height: 5px;
    }

    body .bk-process__steps::-webkit-scrollbar-track {
        background: rgba(201,103,67,0.12);
        border-radius: 999px;
    }

    body .bk-process__steps::-webkit-scrollbar-thumb {
        background: #BE947E;
        border-radius: 999px;
    }

    body .bk-process__step {
        flex: 0 0 calc((100% - 66px) / 2);

        scroll-snap-align: start;
    }

    body .bk-process__step-top {
        margin-bottom: 18px;
    }

    /* Remove desktop connector lines on scroll */

    body .bk-process__step-top::before,
    body .bk-process__step-top::after {
        display: none !important;
    }

    body .bk-process__number {
        margin-bottom: 4px;
        font-size: 13px;
    }

    body .bk-process__step-title {
        margin-bottom: 10px;
        font-size: 19px;
    }

    body .bk-process__step-body {
        max-width: 350px;
        font-size: 14px;
    }

    body .bk-process__footer {
        margin-top: 40px;
    }
}

/* =========================================================
   SMALL TABLET
   600px–749px
========================================================= */

@media (min-width: 600px) and (max-width: 749px) {

    body .bk-process__inner {
        padding: 0 42px;
    }

    body .bk-process__steps {
        gap: 20px;
    }

    body .bk-process__step {
        flex-basis: calc((100% - 60px) / 2);
    }

    body .bk-process__icon {
        width: 70px;
        height: 70px;
    }

    body .bk-process__step-title {
        font-size: 17px;
    }

    body .bk-process__step-body {
        font-size: 13px;
    }
}

/* =========================================================
   11 — MOBILE
   599px AND BELOW

   Vertical connected process timeline
========================================================= */

@media (max-width: 599px) {

    body .bk-process {
        padding: 75px 0 85px;
    }

    body .bk-process__inner {
        padding: 0 28px 0 34px;
    }

    /* Intro */

    body .bk-process__intro {
        margin-bottom: 39px;
    }

    body .bk-process__eyebrow {
        margin-bottom: 21px;
        font-size: 11px;
    }

    body .bk-process__title {
        font-size: clamp(32px, 8vw, 43px);
    }

    body .bk-process__body {
        margin-top: 24px;

        font-size: 14px;
        line-height: 1.75;
    }

    /* Vertical timeline */

    body .bk-process__steps {
        display: flex;
        flex-direction: column;

        gap: 0;

        overflow: visible;
    }

    body .bk-process__step {
        display: grid;

        grid-template-columns:
            66px minmax(0, 1fr);

        grid-template-rows:
            auto auto auto;

        column-gap: 19px;

        padding: 0 0 37px;

        min-width: 0;
    }

    body .bk-process__step:last-child {
        padding-bottom: 0;
    }

    /* Vertical icon column */

    body .bk-process__step-top {
        grid-column: 1;
        grid-row: 1 / 4;

        align-items: flex-start;

        width: 66px;
        height: auto;
        min-height: 70px;

        margin: 0;
    }

    body .bk-process__icon {
        width: 62px;
        height: 62px;
    }

    body .bk-process__icon svg {
        width: 29px;
        height: 29px;
    }

    /* Vertical connecting line */

    body .bk-process__step:not(:last-child)
    .bk-process__step-top::after {
        display: block;

        position: absolute;

        top: 72px;
        left: 31px;

        width: 1px;
        height: calc(100% - 45px);

        background: rgba(201,103,67,0.32);
    }

    body .bk-process__step-top::before {
        display: none !important;
    }

    /* Text stack */

    body .bk-process__number {
        grid-column: 2;
        grid-row: 1;

        margin: 2px 0 5px;

        font-size: 12px;
    }

    body .bk-process__step-title {
        grid-column: 2;
        grid-row: 2;

        margin: 0 0 10px;

        font-size: 19px;
    }

    body .bk-process__step-body {
        grid-column: 2;
        grid-row: 3;

        max-width: 100%;

        margin: 0;

        font-size: 13px;
        line-height: 1.75;
    }

    body .bk-process__footer {
        margin-top: 42px;
    }

    body .bk-process__button {
        min-height: 55px;

        padding: 16px 26px;
        font-size: 13px;
    }
}

/* =========================================================
   SMALL MOBILE
   374px AND BELOW
========================================================= */

@media (max-width: 374px) {

    body .bk-process {
        padding: 65px 0 75px;
    }

    body .bk-process__inner {
        padding: 0 23px 0 29px;
    }

    body .bk-process__title {
        font-size: 31px;
    }

    body .bk-process__step {
        grid-template-columns: 58px minmax(0, 1fr);
        column-gap: 14px;
    }

    body .bk-process__step-top {
        width: 58px;
    }

    body .bk-process__icon {
        width: 54px;
        height: 54px;
    }

    body .bk-process__step:not(:last-child)
    .bk-process__step-top::after {
        top: 64px;
        left: 27px;
        height: calc(100% - 39px);
    }

    body .bk-process__step-title {
        font-size: 17px;
    }

    body .bk-process__step-body {
        font-size: 12px;
    }
}

/* =========================================================
   12 — HOVER EFFECTS
========================================================= */

@media (hover: hover) {

    body .bk-process__step:hover {
        transform: translateY(-3px);
    }

    body .bk-process__step:hover
    .bk-process__icon {
        transform: translateY(-3px) scale(1.045);

        box-shadow:
            0 8px 17px rgba(82,49,32,0.065),
            0 22px 38px rgba(82,49,32,0.12),
            inset 0 2px 1px rgba(255,255,255,0.94);
    }

    body .bk-process__step:hover svg {
        transform: scale(1.07);
    }

    body .bk-process__button:hover {
        background-color: #B95635;
        color: #FFFFFF;

        transform: translateY(-3px);

        box-shadow:
            0 10px 22px rgba(111,58,37,0.17),
            0 24px 43px rgba(111,58,37,0.23),
            inset 0 1px 0 rgba(255,255,255,0.24);
    }

    body .bk-process__button:hover
    .bk-process__arrow {
        transform: translateX(4px);
    }
}

/* =========================================================
   13 — SUBTLE ENTRANCE ANIMATIONS
========================================================= */

@keyframes bkProcessReveal {
    from {
        opacity: 0;
        translate: 0 20px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

@media (prefers-reduced-motion: no-preference) {

    @supports (animation-timeline: view()) {

        body .bk-process__intro {
            animation: bkProcessReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 48%;
        }

        body .bk-process__step {
            animation: bkProcessReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 55%;
        }

        body .bk-process__footer {
            animation: bkProcessReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 65%;
        }
    }
}

/* =========================================================
   14 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body .bk-process__intro,
    body .bk-process__step,
    body .bk-process__footer {
        animation: none !important;
        opacity: 1 !important;
        translate: none !important;
    }

    body .bk-process__steps {
        scroll-behavior: auto !important;
    }

    body .bk-process__step,
    body .bk-process__icon,
    body .bk-process__icon svg,
    body .bk-process__button,
    body .bk-process__arrow {
        transition: none !important;
    }

    body .bk-process__step:hover,
    body .bk-process__step:hover .bk-process__icon,
    body .bk-process__step:hover svg,
    body .bk-process__button:hover,
    body .bk-process__button:hover .bk-process__arrow {
        transform: none !important;
    }
}


/* =========================================================
   BUSINESS KNOWLEDGE & ORGANIZATION
   SECTION 05 — REMOVE CTA / SPACING REFINEMENT
========================================================= */

/* DESKTOP */

@media (min-width: 1101px) {
    body .bk-process {
        padding-bottom: 90px;
    }
}

/* TABLET */

@media (min-width: 600px) and (max-width: 1100px) {
    body .bk-process {
        padding-bottom: 85px;
    }
}

/* MOBILE */

@media (max-width: 599px) {
    body .bk-process {
        padding-bottom: 75px;
    }
}


/* =========================================================
   FRAYORA — BUSINESS KNOWLEDGE & ORGANIZATION
   SECTION 06 — FINAL CTA

   DESKTOP: 1101px+
   TABLET: 600px–1100px
   MOBILE: 599px and below

   Bond-inspired luminous editorial design
   Warm champagne and ivory surface
   Soft architectural light and curved accents
   Refined terracotta CTA
   Layered depth and subtle animations
   Reduced-motion accessibility

   NO EXTERNAL BACKGROUND IMAGE
========================================================= */


/* =========================================================
   01 — SECTION FOUNDATION
========================================================= */

body .bk-final-cta {
    position: relative;
    isolation: isolate;

    display: block;

    width: 100%;
    margin: 0;
    padding: 0;

    overflow: hidden;
    box-sizing: border-box;

    background-color: #EED8C7 !important;

    background-image: linear-gradient(
        110deg,
        #D9B49B 0%,
        #F0DDCA 23%,
        #FFF5E6 50%,
        #F1DCCA 77%,
        #DEB79F 100%
    ) !important;

    color: #1F211D;
}

body .bk-final-cta *,
body .bk-final-cta *::before,
body .bk-final-cta *::after {
    box-sizing: border-box;
}


/* =========================================================
   02 — ARCHITECTURAL LUMINOUS SURFACE
========================================================= */

/* Large fine architectural elliptical line */

body .bk-final-cta::before {
    content: "";

    position: absolute;
    z-index: 0;

    left: 50%;
    top: 50%;

    width: min(1200px, 110vw);
    height: 750px;

    border: 1px solid rgba(255,255,255,0.67);
    border-radius: 50%;

    transform: translate(-50%, -50%) rotate(-13deg);

    pointer-events: none;
}

/* Soft lighting and dimensional finish */

body .bk-final-cta::after {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 0;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse 38% 88% at 50% 48%,
            rgba(255,253,238,0.48) 0%,
            rgba(255,246,224,0.17) 58%,
            transparent 100%
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.60),
        inset 0 -25px 45px -45px rgba(92,57,37,0.22);
}


/* =========================================================
   03 — MAIN CONTENT CONTAINER
========================================================= */

body .bk-final-cta__inner {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 1600px;

    margin: 0 auto;
}

body .bk-final-cta__content {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;

    margin: 0 auto;

    text-align: center;
}


/* =========================================================
   04 — EDITORIAL HEADING
========================================================= */

body .bk-final-cta__title {
    width: 100%;
    margin: 0;
    padding: 0;

    font-family: "Manrope", "Inter", sans-serif;
    font-weight: 600;

    line-height: 1.14;
    letter-spacing: -0.052em;

    color: #1F211D;

    text-align: center;
    text-wrap: balance;
}


/* =========================================================
   05 — TERRACOTTA CTA
========================================================= */

body .bk-final-cta__button {
    position: relative;
    z-index: 3;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 18px;

    width: fit-content;
    max-width: 100%;

    min-height: 56px;

    margin-left: auto;
    margin-right: auto;

    padding: 16px 32px;

    border: 1px solid rgba(255,255,255,0.28);
    border-radius: 999px;

    background-color: #C96743;
    background-image: none;

    color: #FFFFFF;

    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 600;

    text-align: center;
    text-decoration: none;

    box-shadow:
        0 7px 17px rgba(109,55,36,0.15),
        0 20px 38px rgba(109,55,36,0.20),
        inset 0 1px 0 rgba(255,255,255,0.28);

    transition:
        transform 350ms cubic-bezier(.22,1,.36,1),
        background-color 350ms ease,
        box-shadow 350ms ease;
}

/* Very subtle illuminated upper edge */

body .bk-final-cta__button::before {
    content: "";

    position: absolute;
    inset: 1px;

    border-radius: inherit;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.22);

    pointer-events: none;
}

body .bk-final-cta__arrow {
    display: inline-block;
    flex: 0 0 auto;

    font-size: 22px;
    line-height: 1;

    transition: transform 300ms ease;
}

body .bk-final-cta__button:focus-visible {
    outline: 2px solid #394235;
    outline-offset: 5px;
}


/* =========================================================
   06 — DESKTOP
   1101px AND ABOVE
========================================================= */

@media (min-width: 1101px) {

    body .bk-final-cta {
        min-height: 390px;
    }

    body .bk-final-cta__inner {
        min-height: 390px;
        padding: 70px 80px;
    }

    body .bk-final-cta__content {
        max-width: 1000px;
    }

    body .bk-final-cta__title {
        max-width: 950px;

        font-size: clamp(43px, 3.9vw, 61px);
    }

    body .bk-final-cta__button {
        margin-top: 34px;
    }
}


/* =========================================================
   07 — TABLET
   600px–1100px
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .bk-final-cta {
        min-height: 370px;
    }

    body .bk-final-cta__inner {
        min-height: 370px;
        padding: 75px 60px;
    }

    body .bk-final-cta__content {
        max-width: 850px;
    }

    body .bk-final-cta__title {
        max-width: 800px;

        font-size: clamp(38px, 5.1vw, 54px);
    }

    body .bk-final-cta__button {
        margin-top: 32px;

        min-height: 55px;
        padding: 16px 30px;
    }

    /* Curves remain subtle and away from text */

    body .bk-final-cta::before {
        width: 1100px;
        height: 640px;

        transform:
            translate(-50%, -50%) rotate(-15deg);
    }
}


/* =========================================================
   08 — SMALL TABLET
   600px–749px
========================================================= */

@media (min-width: 600px) and (max-width: 749px) {

    body .bk-final-cta {
        min-height: 350px;
    }

    body .bk-final-cta__inner {
        min-height: 350px;
        padding: 65px 43px;
    }

    body .bk-final-cta__title {
        font-size: clamp(35px, 5.8vw, 43px);
    }

    body .bk-final-cta__button {
        margin-top: 29px;
    }
}


/* =========================================================
   09 — MOBILE
   599px AND BELOW
========================================================= */

@media (max-width: 599px) {

    body .bk-final-cta {
        min-height: 340px;

        background-image: linear-gradient(
            135deg,
            #E2BDA5 0%,
            #F5E5D6 33%,
            #FFF4E7 55%,
            #EDCEB9 100%
        ) !important;
    }

    body .bk-final-cta__inner {
        min-height: 340px;
        padding: 70px 30px;
    }

    body .bk-final-cta__content {
        max-width: 500px;
    }

    body .bk-final-cta__title {
        font-size: clamp(30px, 7.8vw, 42px);
        line-height: 1.18;

        letter-spacing: -0.046em;
    }

    body .bk-final-cta__button {
        margin-top: 30px;

        min-height: 54px;
        padding: 15px 27px;

        gap: 15px;

        font-size: 13px;
    }

    body .bk-final-cta__arrow {
        font-size: 20px;
    }

    /* Scale the architectural line away from text */

    body .bk-final-cta::before {
        width: 680px;
        height: 510px;

        transform:
            translate(-50%, -50%) rotate(-19deg);

        border-color: rgba(255,255,255,0.55);
    }

    /* Keep lighting restrained */

    body .bk-final-cta::after {
        background: radial-gradient(
            ellipse 58% 75% at 50% 45%,
            rgba(255,250,229,0.38) 0%,
            rgba(255,246,228,0.12) 58%,
            transparent 100%
        );
    }
}


/* =========================================================
   10 — SMALL MOBILE
   374px AND BELOW
========================================================= */

@media (max-width: 374px) {

    body .bk-final-cta__inner {
        padding: 65px 23px;
    }

    body .bk-final-cta__title {
        font-size: clamp(27px, 8vw, 31px);
    }

    body .bk-final-cta__button {
        margin-top: 27px;

        padding: 14px 23px;
        font-size: 12px;
    }
}


/* =========================================================
   11 — HOVER INTERACTIONS
========================================================= */

@media (hover: hover) {

    body .bk-final-cta__button:hover {
        background-color: #B95635;
        color: #FFFFFF;

        transform: translateY(-3px);

        box-shadow:
            0 11px 23px rgba(109,55,36,0.18),
            0 26px 46px rgba(109,55,36,0.24),
            inset 0 1px 0 rgba(255,255,255,0.3);
    }

    body .bk-final-cta__button:hover
    .bk-final-cta__arrow {
        transform: translateX(5px);
    }
}


/* =========================================================
   12 — ENTRANCE ANIMATIONS
========================================================= */

@keyframes bkFinalCtaReveal {

    from {
        opacity: 0;
        translate: 0 22px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

@media (prefers-reduced-motion: no-preference) {

    @supports (animation-timeline: view()) {

        body .bk-final-cta__title {
            animation: bkFinalCtaReveal linear both;

            animation-timeline: view();
            animation-range: entry 0% entry 55%;
        }

        body .bk-final-cta__button {
            animation: bkFinalCtaReveal linear both;

            animation-timeline: view();
            animation-range: entry 0% entry 65%;
        }
    }
}


/* =========================================================
   13 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body .bk-final-cta__title,
    body .bk-final-cta__button {
        animation: none !important;

        opacity: 1 !important;
        translate: none !important;
    }

    body .bk-final-cta__button,
    body .bk-final-cta__arrow {
        transition: none !important;
    }

    body .bk-final-cta__button:hover,
    body .bk-final-cta__button:hover
    .bk-final-cta__arrow {
        transform: none !important;
    }
}



/* =========================================================
   FRAYORA — OPERATIONS & SOPS
   SECTION 01 — COMPLETE RESPONSIVE HERO

   Desktop: 1101px+
   Tablet: 600px–1100px
   Mobile: 599px and below

   Approved Frayora service-page standards:
   - Desktop height 600px
   - Manrope + Inter typography
   - Dark architectural olive backgrounds
   - Responsive contrast overlays
   - CSS floating visual: sopshero.png
   - Terracotta pill CTA
   - Dimensional depth and gentle luminosity
   - Reduced-motion accessibility
========================================================= */


/* =========================================================
   01 — HERO FOUNDATION
========================================================= */

body .operations-sops-page .sops-hero {
    position: relative;
    isolation: isolate;

    display: block;

    width: 100%;
    margin: 0;
    padding: 0;

    box-sizing: border-box;
    overflow: hidden;

    background-color: #263428 !important;

    background-image:
        url("../images/Business in a box/herodesktop.png") !important;

    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    color: #F8F3EB;
}

body .operations-sops-page .sops-hero *,
body .operations-sops-page .sops-hero *::before,
body .operations-sops-page .sops-hero *::after {
    box-sizing: border-box;
}


/* =========================================================
   02 — DARK OLIVE OVERLAY
========================================================= */

body .operations-sops-page .sops-hero::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 0;

    display: block;

    background:
        linear-gradient(
            90deg,
            rgba(17, 27, 19, 0.76) 0%,
            rgba(17, 27, 19, 0.62) 30%,
            rgba(17, 27, 19, 0.30) 54%,
            rgba(17, 27, 19, 0.06) 82%,
            rgba(17, 27, 19, 0.04) 100%
        );

    pointer-events: none;
}


/* =========================================================
   03 — SUBTLE LUMINOUS FINISH
========================================================= */

body .operations-sops-page .sops-hero::after {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(
            115deg,
            transparent 34%,
            rgba(255, 248, 225, 0.015) 62%,
            rgba(255, 248, 225, 0.045) 88%,
            transparent 100%
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        inset 0 -22px 42px -45px rgba(0,0,0,0.22);

    pointer-events: none;
}


/* =========================================================
   04 — MAIN CONTENT CONTAINER
========================================================= */

body .operations-sops-page .sops-hero__inner {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1600px;

    margin: 0 auto;
}

body .operations-sops-page .sops-hero__content {
    position: relative;
    z-index: 4;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    text-align: left;
}


/* =========================================================
   05 — EYEBROW
========================================================= */

body .operations-sops-page .sops-hero__eyebrow {
    display: block;

    margin: 0;
    padding: 0;

    font-family: "Inter", sans-serif !important;
    font-weight: 600;

    line-height: 1.4;
    letter-spacing: 0.13em;
    text-transform: uppercase;

    color: #E4D5BF !important;

    text-align: left;
}


/* =========================================================
   06 — MAIN HEADING
========================================================= */

body .operations-sops-page .sops-hero__title {
    display: block;

    width: 100%;

    margin: 0;
    padding: 0;

    font-family: "Manrope", "Inter", sans-serif !important;
    font-weight: 600;

    line-height: 1.13;
    letter-spacing: -0.052em;

    color: #F8F3EB !important;

    text-align: left;
    text-wrap: balance;

    text-shadow:
        0 3px 18px rgba(0,0,0,0.19);
}


/* =========================================================
   07 — BODY COPY
========================================================= */

body .operations-sops-page .sops-hero__body {
    display: block;

    width: 100%;

    margin: 0;
    padding: 0;

    font-family: "Inter", sans-serif !important;
    font-weight: 400;

    line-height: 1.75;

    color: rgba(248,243,235,0.94) !important;

    text-align: left;
}


/* =========================================================
   08 — TERRACOTTA CTA BUTTON
========================================================= */

body .operations-sops-page .sops-hero__button {
    position: relative;
    z-index: 4;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 18px;

    width: fit-content;
    max-width: 100%;
    min-height: 55px;

    padding: 16px 30px;

    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 999px;

    background-color: #C96743 !important;
    background-image: none !important;

    color: #FFFFFF !important;

    font-family: "Inter", sans-serif !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;

    text-decoration: none !important;
    white-space: normal;

    box-shadow:
        0 7px 16px rgba(0,0,0,0.13),
        0 18px 36px rgba(0,0,0,0.20),
        inset 0 1px 0 rgba(255,255,255,0.22);

    transition:
        transform 320ms ease,
        background-color 320ms ease,
        box-shadow 320ms ease;
}

body .operations-sops-page .sops-hero__arrow {
    display: inline-block;
    flex: 0 0 auto;

    font-family: "Inter", sans-serif !important;
    font-size: 22px;
    line-height: 1;

    color: inherit;

    transition: transform 320ms ease;
}

body .operations-sops-page
.sops-hero__button:focus-visible {
    outline: 2px solid #F8F3EB;
    outline-offset: 5px;
}


/* =========================================================
   09 — CSS FLOATING SOP ILLUSTRATION
   CORRECT SERVER FOLDER NAME
========================================================= */

body .operations-sops-page .sops-hero__visual {
    position: relative;
    z-index: 3;

    display: block;

    flex-shrink: 0;
    min-width: 0;

    background-image:
        url("../images/OPERATIONS%20%26%20SOPS/sopshero.png") !important;

    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;

    visibility: visible;

    pointer-events: none;

    filter:
        drop-shadow(0 12px 20px rgba(4,13,7,0.12))
        drop-shadow(0 26px 45px rgba(4,13,7,0.20));

    transform-origin: center;

    animation:
        sopsHeroVisualEntrance 950ms
        cubic-bezier(.22,1,.36,1)
        150ms both,
        sopsHeroFloating 7.5s
        ease-in-out 1200ms infinite;
}


/* =========================================================
   10 — DESKTOP
   1101px AND ABOVE
   APPROVED 600PX HERO HEIGHT
========================================================= */

@media (min-width: 1101px) {

    body .operations-sops-page .sops-hero {
        height: 600px;
        min-height: 600px;
    }

    body .operations-sops-page .sops-hero__inner {
        display: grid;

        grid-template-columns:
            minmax(0, 1.02fr)
            minmax(0, 0.98fr);

        column-gap: 30px;

        align-items: center;

        height: 600px;
        min-height: 600px;

        padding: 45px 80px;
    }

    body .operations-sops-page .sops-hero__content {
        max-width: 650px;
    }

    body .operations-sops-page .sops-hero__eyebrow {
        margin-bottom: 19px;
        font-size: 12px;
    }

    body .operations-sops-page .sops-hero__title {
        max-width: 660px;

        font-size: clamp(38px, 3.25vw, 53px);
    }

    body .operations-sops-page .sops-hero__body {
        max-width: 590px;

        margin-top: 25px;

        font-size: 14px;
    }

    body .operations-sops-page .sops-hero__button {
        margin-top: 27px;
    }

    body .operations-sops-page .sops-hero__visual {
        width: clamp(490px, 42vw, 690px);
        max-width: none;

        height: 500px;

        justify-self: center;
        align-self: center;

        margin: 0;
    }
}


/* =========================================================
   11 — LARGE DESKTOP
========================================================= */

@media (min-width: 1450px) {

    body .operations-sops-page .sops-hero__title {
        font-size: 52px;
    }

    body .operations-sops-page .sops-hero__body {
        font-size: 15px;
    }

    body .operations-sops-page .sops-hero__visual {
        width: min(43vw, 710px);
        height: 520px;
    }
}


/* =========================================================
   12 — TABLET
   600px–1100px
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .operations-sops-page .sops-hero {
        height: auto;
        min-height: 850px;

        background-image:
            url("../images/Business in a box/herotablet.png") !important;

        background-position: center center;
    }

    /* Stronger readability below illustration */

    body .operations-sops-page .sops-hero::before {
        background:
            linear-gradient(
                180deg,
                rgba(17,27,19,0.16) 0%,
                rgba(17,27,19,0.25) 30%,
                rgba(17,27,19,0.54) 58%,
                rgba(17,27,19,0.72) 100%
            );
    }

    body .operations-sops-page .sops-hero__inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        min-height: 850px;

        padding: 65px 60px 115px;
    }

    /* IMAGE FIRST */

    body .operations-sops-page .sops-hero__visual {
        order: -1;

        align-self: flex-end;

        width: clamp(360px, 58vw, 650px);
        max-width: 100%;

        height: clamp(300px, 45vw, 510px);

        margin: 0 -8px 22px 0;
    }

    body .operations-sops-page .sops-hero__content {
        max-width: 920px;
    }

    body .operations-sops-page .sops-hero__eyebrow {
        margin-bottom: 24px;

        font-size: 13px;
    }

    body .operations-sops-page .sops-hero__title {
        max-width: 800px;

        font-size: clamp(42px, 5.2vw, 59px);
        line-height: 1.14;
    }

    body .operations-sops-page .sops-hero__body {
        max-width: 850px;

        margin-top: 30px;

        font-size: 16px;
        line-height: 1.8;
    }

    body .operations-sops-page .sops-hero__button {
        margin-top: 31px;

        min-height: 58px;
        padding: 17px 32px;

        font-size: 15px;
    }
}


/* =========================================================
   13 — SMALL TABLET
   600px–749px
========================================================= */

@media (min-width: 600px) and (max-width: 749px) {

    body .operations-sops-page .sops-hero__inner {
        padding: 65px 43px 115px;
    }

    body .operations-sops-page .sops-hero__visual {
        width: 83%;
        max-width: 510px;

        height: 350px;

        margin-right: 0;
        margin-bottom: 25px;
    }

    body .operations-sops-page .sops-hero__title {
        font-size: clamp(37px, 6.2vw, 46px);
    }

    body .operations-sops-page .sops-hero__body {
        font-size: 15px;
    }
}


/* =========================================================
   14 — MOBILE
   599px AND BELOW
========================================================= */

@media (max-width: 599px) {

    body .operations-sops-page .sops-hero {
        height: auto;
        min-height: 0;

        background-image:
            url("../images/Business in a box/heromobile.png") !important;

        background-position: 60% center;
        background-size: cover;
    }

    body .operations-sops-page .sops-hero::before {
        background:
            linear-gradient(
                180deg,
                rgba(16,26,18,0.16) 0%,
                rgba(16,26,18,0.27) 28%,
                rgba(16,26,18,0.52) 48%,
                rgba(16,26,18,0.68) 70%,
                rgba(16,26,18,0.70) 100%
            );
    }

    body .operations-sops-page .sops-hero__inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        width: 100%;

        padding: 58px 28px 105px 34px;
    }

    /* IMAGE FIRST */

    body .operations-sops-page .sops-hero__visual {
        order: -1;

        align-self: center;

        width: 100%;
        max-width: 420px;

        height: clamp(225px, 67vw, 310px);

        margin: 0 auto 12px;
    }

    body .operations-sops-page .sops-hero__content {
        width: 100%;
    }

    body .operations-sops-page .sops-hero__eyebrow {
        margin-bottom: 19px;

        font-size: 10px;
        line-height: 1.55;

        letter-spacing: 0.13em;
    }

    body .operations-sops-page .sops-hero__title {
        max-width: 520px;

        font-size: clamp(31px, 8.15vw, 43px);
        line-height: 1.16;

        letter-spacing: -0.05em;
        text-wrap: pretty;
    }

    body .operations-sops-page .sops-hero__body {
        max-width: 520px;

        margin-top: 28px;

        font-size: 14px;
        line-height: 1.8;
    }

    body .operations-sops-page .sops-hero__button {
        gap: 16px;

        min-height: 55px;

        margin-top: 31px;
        padding: 16px 24px;

        font-size: 13px;
    }

    body .operations-sops-page .sops-hero__arrow {
        font-size: 21px;
    }
}


/* =========================================================
   15 — SMALL MOBILE
   374px AND BELOW
========================================================= */

@media (max-width: 374px) {

    body .operations-sops-page .sops-hero__inner {
        padding: 53px 23px 90px 29px;
    }

    body .operations-sops-page .sops-hero__visual {
        height: 225px;
        margin-bottom: 10px;
    }

    body .operations-sops-page .sops-hero__eyebrow {
        margin-bottom: 18px;
        font-size: 9.5px;
    }

    body .operations-sops-page .sops-hero__title {
        font-size: clamp(29px, 8.3vw, 33px);
    }

    body .operations-sops-page .sops-hero__body {
        margin-top: 25px;
        font-size: 13px;
    }

    body .operations-sops-page .sops-hero__button {
        gap: 12px;

        padding: 15px 21px;
        font-size: 12px;
    }
}


/* =========================================================
   16 — HOVER INTERACTIONS
========================================================= */

@media (hover: hover) {

    body .operations-sops-page
    .sops-hero__button:hover {
        background-color: #B95635 !important;

        color: #FFFFFF !important;

        transform: translateY(-3px);

        box-shadow:
            0 11px 23px rgba(0,0,0,0.18),
            0 25px 43px rgba(0,0,0,0.22),
            inset 0 1px 0 rgba(255,255,255,0.25);
    }

    body .operations-sops-page
    .sops-hero__button:hover
    .sops-hero__arrow {
        transform: translateX(5px);
    }
}


/* =========================================================
   17 — TEXT ENTRANCE ANIMATIONS
========================================================= */

@keyframes sopsHeroTextEntrance {
    from {
        opacity: 0;
        translate: 0 22px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

@media (prefers-reduced-motion: no-preference) {

    body .operations-sops-page .sops-hero__eyebrow,
    body .operations-sops-page .sops-hero__title,
    body .operations-sops-page .sops-hero__body,
    body .operations-sops-page .sops-hero__button {
        animation:
            sopsHeroTextEntrance 850ms
            cubic-bezier(.22,1,.36,1) both;
    }

    body .operations-sops-page .sops-hero__eyebrow {
        animation-delay: 80ms;
    }

    body .operations-sops-page .sops-hero__title {
        animation-delay: 170ms;
    }

    body .operations-sops-page .sops-hero__body {
        animation-delay: 280ms;
    }

    body .operations-sops-page .sops-hero__button {
        animation-delay: 390ms;
    }
}


/* =========================================================
   18 — FLOATING VISUAL ANIMATIONS
========================================================= */

@keyframes sopsHeroVisualEntrance {
    from {
        opacity: 0;
        translate: 0 22px;
        scale: 0.97;
    }

    to {
        opacity: 1;
        translate: 0 0;
        scale: 1;
    }
}

@keyframes sopsHeroFloating {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }
}


/* =========================================================
   19 — REDUCED MOTION ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body .operations-sops-page .sops-hero__eyebrow,
    body .operations-sops-page .sops-hero__title,
    body .operations-sops-page .sops-hero__body,
    body .operations-sops-page .sops-hero__button,
    body .operations-sops-page .sops-hero__visual {
        animation: none !important;

        opacity: 1 !important;
        translate: none !important;
        scale: 1 !important;
        transform: none !important;
    }

    body .operations-sops-page .sops-hero__button,
    body .operations-sops-page .sops-hero__arrow {
        transition: none !important;
    }
}



/* =========================================================
   FRAYORA — OPERATIONS & SOPS
   SECTION 02 — WHAT THIS SOLVES

   DESKTOP: 1101px+
   TABLET: 600px–1100px
   MOBILE: 599px and below

   Bond-inspired editorial SaaS design
   Solid warm ivory section surface
   Asymmetric desktop composition
   Four softly elevated challenge cards
   Dimensional terracotta icon medallions
   Layered shadows and subtle highlights
   Scroll entrance animations
   Reduced-motion accessibility
========================================================= */


/* =========================================================
   01 — SECTION FOUNDATION
========================================================= */

body .operations-sops-page .sops-solves {
    position: relative;
    isolation: isolate;

    display: block;

    width: 100%;
    margin: 0;
    padding: 0;

    overflow: hidden;
    box-sizing: border-box;

    background-color: #F8F3EB !important;
    background-image: none !important;

    color: #1F211D;
}

body .operations-sops-page .sops-solves *,
body .operations-sops-page .sops-solves *::before,
body .operations-sops-page .sops-solves *::after {
    box-sizing: border-box;
}

/* No decorative background patches */

body .operations-sops-page .sops-solves::before,
body .operations-sops-page .sops-solves::after {
    content: none !important;
    display: none !important;
}


/* =========================================================
   02 — MAIN CONTENT CONTAINER
========================================================= */

body .operations-sops-page .sops-solves__inner {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1600px;

    margin: 0 auto;
}

body .operations-sops-page .sops-solves__intro {
    position: relative;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    text-align: left;
}


/* =========================================================
   03 — INTRO TYPOGRAPHY
========================================================= */

body .operations-sops-page .sops-solves__eyebrow {
    display: block;

    margin: 0;
    padding: 0;

    font-family: "Inter", sans-serif !important;
    font-weight: 600;

    line-height: 1.4;
    letter-spacing: 0.14em;
    text-transform: uppercase;

    color: #C96743;

    text-align: left;
}

body .operations-sops-page .sops-solves__title {
    display: block;

    width: 100%;

    margin: 0;
    padding: 0;

    font-family: "Manrope", "Inter", sans-serif !important;
    font-weight: 600;

    line-height: 1.15;
    letter-spacing: -0.048em;

    color: #1F211D;

    text-align: left;
    text-wrap: balance;
}


/* =========================================================
   04 — CHALLENGE GRID
========================================================= */

body .operations-sops-page .sops-solves__grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    align-items: stretch;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;
}


/* =========================================================
   05 — ELEVATED CARDS
========================================================= */

body .operations-sops-page .sops-solves__card {
    position: relative;
    isolation: isolate;

    display: flex;
    align-items: flex-start;

    min-width: 0;
    margin: 0;

    border: 1px solid rgba(255,255,255,0.88);
    border-radius: 18px;

    background-color: #FFFCF8;
    background-image: none;

    box-shadow:
        0 3px 8px rgba(65,45,32,0.025),
        0 13px 27px rgba(65,45,32,0.045),
        0 26px 46px rgba(65,45,32,0.035),
        inset 0 1px 0 rgba(255,255,255,0.95);

    transition:
        transform 420ms cubic-bezier(.22,1,.36,1),
        box-shadow 420ms ease,
        border-color 420ms ease;
}

/* Restrained surface highlight */

body .operations-sops-page .sops-solves__card::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    border-radius: inherit;

    background: linear-gradient(
        145deg,
        rgba(255,255,255,0.58) 0%,
        rgba(255,255,255,0.09) 48%,
        transparent 85%
    );

    pointer-events: none;
}


/* =========================================================
   06 — SCULPTURAL ICON CIRCLES
========================================================= */

body .operations-sops-page .sops-solves__icon {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border-radius: 50%;

    background-color: #F4E5D9;

    background-image: linear-gradient(
        145deg,
        #FFF7EF 0%,
        #F5E6DA 55%,
        #EFD9CB 100%
    );

    border: 1px solid rgba(189,132,99,0.13);

    box-shadow:
        0 4px 9px rgba(100,59,36,0.035),
        0 13px 24px rgba(100,59,36,0.075),
        inset 0 2px 1px rgba(255,255,255,0.88),
        inset 0 -4px 10px rgba(136,91,62,0.045);

    transition:
        transform 420ms cubic-bezier(.22,1,.36,1),
        box-shadow 420ms ease;
}

/* Delicate inner glass ring */

body .operations-sops-page .sops-solves__icon::before {
    content: "";

    position: absolute;
    inset: 4px;

    border: 1px solid rgba(255,255,255,0.66);
    border-radius: 50%;

    pointer-events: none;
}

/* SVG line icons */

body .operations-sops-page .sops-solves__icon svg {
    position: relative;
    z-index: 2;

    display: block;

    width: 34px;
    height: 34px;

    fill: none;

    color: #AC5E3E;
    stroke: currentColor;

    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    filter:
        drop-shadow(0 2px 2px rgba(80,46,30,0.08));

    transition: transform 420ms ease;
}


/* =========================================================
   07 — CARD COPY
========================================================= */

body .operations-sops-page .sops-solves__card-content {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    flex: 1 1 auto;

    min-width: 0;
    width: 100%;

    margin: 0;
    padding: 0;

    text-align: left;
}

/* Number */

body .operations-sops-page .sops-solves__number {
    display: block;

    margin: 0;

    font-family: "Inter", sans-serif !important;
    font-weight: 700;

    line-height: 1.2;
    letter-spacing: -0.02em;

    color: #C96743;
}

/* Card heading */

body .operations-sops-page .sops-solves__card-title {
    display: block;

    width: 100%;
    margin: 0;

    font-family: "Manrope", "Inter", sans-serif !important;
    font-weight: 650;

    line-height: 1.3;
    letter-spacing: -0.035em;

    color: #1F211D;

    overflow-wrap: break-word;
    text-align: left;
}

/* Description */

body .operations-sops-page .sops-solves__card-description {
    width: 100%;
    margin: 0;

    font-family: "Inter", sans-serif !important;
    font-weight: 400;

    line-height: 1.7;

    color: rgba(31,33,29,0.74);

    overflow-wrap: break-word;
    text-align: left;
}


/* =========================================================
   08 — DESKTOP
   1101px AND ABOVE
========================================================= */

@media (min-width: 1101px) {

    body .operations-sops-page .sops-solves {
        padding: 105px 0 110px;
    }

    body .operations-sops-page .sops-solves__inner {
        display: grid;

        grid-template-columns:
            minmax(0, 0.86fr)
            minmax(0, 1.14fr);

        column-gap: 75px;

        align-items: center;

        padding: 0 80px;
    }

    /* Editorial intro */

    body .operations-sops-page .sops-solves__intro {
        max-width: 540px;
    }

    body .operations-sops-page .sops-solves__eyebrow {
        margin-bottom: 23px;
        font-size: 12px;
    }

    body .operations-sops-page .sops-solves__title {
        max-width: 540px;

        font-size: clamp(36px, 3vw, 46px);
    }

    /* Grid */

    body .operations-sops-page .sops-solves__grid {
        gap: 18px;
    }

    /* Cards */

    body .operations-sops-page .sops-solves__card {
        min-height: 190px;

        padding: 23px 19px;

        gap: 15px;
    }

    body .operations-sops-page .sops-solves__icon {
        width: 64px;
        height: 64px;
    }

    body .operations-sops-page .sops-solves__icon svg {
        width: 29px;
        height: 29px;
    }

    body .operations-sops-page .sops-solves__number {
        margin-bottom: 6px;
        font-size: 12px;
    }

    body .operations-sops-page .sops-solves__card-title {
        margin-bottom: 10px;
        font-size: 16px;
    }

    body .operations-sops-page .sops-solves__card-description {
        font-size: 12px;
    }
}


/* =========================================================
   09 — SMALLER DESKTOP
   1101px–1350px
========================================================= */

@media (min-width: 1101px) and (max-width: 1350px) {

    body .operations-sops-page .sops-solves__inner {
        column-gap: 47px;
        padding: 0 60px;
    }

    body .operations-sops-page .sops-solves__grid {
        gap: 14px;
    }

    body .operations-sops-page .sops-solves__card {
        min-height: 196px;

        padding: 20px 15px;
        gap: 12px;
    }

    body .operations-sops-page .sops-solves__icon {
        width: 56px;
        height: 56px;
    }

    body .operations-sops-page .sops-solves__icon svg {
        width: 27px;
        height: 27px;
    }

    body .operations-sops-page .sops-solves__card-title {
        font-size: 14px;
    }

    body .operations-sops-page .sops-solves__card-description {
        font-size: 11px;
    }
}


/* =========================================================
   10 — TABLET
   600px–1100px
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .operations-sops-page .sops-solves {
        padding: 85px 0 95px;
    }

    body .operations-sops-page .sops-solves__inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        padding: 0 60px;
    }

    body .operations-sops-page .sops-solves__intro {
        max-width: 850px;
        margin-bottom: 45px;
    }

    body .operations-sops-page .sops-solves__eyebrow {
        margin-bottom: 21px;
        font-size: 12px;
    }

    body .operations-sops-page .sops-solves__title {
        max-width: 800px;

        font-size: clamp(36px, 4.7vw, 51px);
    }

    body .operations-sops-page .sops-solves__grid {
        gap: 22px;
    }

    body .operations-sops-page .sops-solves__card {
        min-height: 205px;

        padding: 25px 22px;

        gap: 18px;
    }

    body .operations-sops-page .sops-solves__icon {
        width: 65px;
        height: 65px;
    }

    body .operations-sops-page .sops-solves__icon svg {
        width: 30px;
        height: 30px;
    }

    body .operations-sops-page .sops-solves__number {
        margin-bottom: 7px;

        font-size: 13px;
    }

    body .operations-sops-page .sops-solves__card-title {
        margin-bottom: 11px;
        font-size: 17px;
    }

    body .operations-sops-page .sops-solves__card-description {
        font-size: 13px;
    }
}


/* =========================================================
   11 — SMALL TABLET
   600px–749px
========================================================= */

@media (min-width: 600px) and (max-width: 749px) {

    body .operations-sops-page .sops-solves__inner {
        padding: 0 42px;
    }

    body .operations-sops-page .sops-solves__grid {
        gap: 16px;
    }

    body .operations-sops-page .sops-solves__card {
        min-height: 225px;

        padding: 20px 16px;
        gap: 12px;
    }

    body .operations-sops-page .sops-solves__icon {
        width: 53px;
        height: 53px;
    }

    body .operations-sops-page .sops-solves__icon svg {
        width: 26px;
        height: 26px;
    }

    body .operations-sops-page .sops-solves__card-title {
        font-size: 15px;
    }

    body .operations-sops-page .sops-solves__card-description {
        font-size: 12px;
    }
}


/* =========================================================
   12 — MOBILE
   599px AND BELOW
========================================================= */

@media (max-width: 599px) {

    body .operations-sops-page .sops-solves {
        padding: 75px 0 85px;
    }

    body .operations-sops-page .sops-solves__inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        padding: 0 28px 0 34px;
    }

    body .operations-sops-page .sops-solves__intro {
        margin-bottom: 35px;
    }

    body .operations-sops-page .sops-solves__eyebrow {
        margin-bottom: 19px;

        font-size: 11px;
    }

    body .operations-sops-page .sops-solves__title {
        font-size: clamp(31px, 8vw, 43px);
        line-height: 1.16;
    }

    body .operations-sops-page .sops-solves__grid {
        grid-template-columns: minmax(0, 1fr);

        gap: 19px;
    }

    body .operations-sops-page .sops-solves__card {
        min-height: 0;

        padding: 25px 22px;

        gap: 17px;

        border-radius: 20px;
    }

    body .operations-sops-page .sops-solves__icon {
        width: 65px;
        height: 65px;
    }

    body .operations-sops-page .sops-solves__icon svg {
        width: 29px;
        height: 29px;
    }

    body .operations-sops-page .sops-solves__number {
        margin-bottom: 7px;
        font-size: 13px;
    }

    body .operations-sops-page .sops-solves__card-title {
        margin-bottom: 10px;

        font-size: 17px;
    }

    body .operations-sops-page .sops-solves__card-description {
        font-size: 13px;
        line-height: 1.75;
    }
}


/* =========================================================
   13 — SMALL MOBILE
   374px AND BELOW
========================================================= */

@media (max-width: 374px) {

    body .operations-sops-page .sops-solves {
        padding: 65px 0 75px;
    }

    body .operations-sops-page .sops-solves__inner {
        padding: 0 23px 0 29px;
    }

    body .operations-sops-page .sops-solves__title {
        font-size: 30px;
    }

    body .operations-sops-page .sops-solves__card {
        padding: 22px 17px;
        gap: 13px;
    }

    body .operations-sops-page .sops-solves__icon {
        width: 55px;
        height: 55px;
    }

    body .operations-sops-page .sops-solves__icon svg {
        width: 25px;
        height: 25px;
    }

    body .operations-sops-page .sops-solves__card-title {
        font-size: 16px;
    }

    body .operations-sops-page .sops-solves__card-description {
        font-size: 12px;
    }
}


/* =========================================================
   14 — HOVER INTERACTIONS
========================================================= */

@media (hover: hover) and (pointer: fine) {

    body .operations-sops-page .sops-solves__card:hover {
        transform: translateY(-5px);

        border-color: rgba(223,192,171,0.55);

        box-shadow:
            0 9px 17px rgba(65,45,32,0.045),
            0 22px 39px rgba(65,45,32,0.085),
            0 34px 55px rgba(65,45,32,0.065),
            inset 0 1px 0 rgba(255,255,255,0.98);
    }

    body .operations-sops-page
    .sops-solves__card:hover .sops-solves__icon {
        transform: translateY(-3px) scale(1.045);

        box-shadow:
            0 7px 14px rgba(100,59,36,0.055),
            0 18px 32px rgba(100,59,36,0.105),
            inset 0 2px 1px rgba(255,255,255,0.94);
    }

    body .operations-sops-page
    .sops-solves__card:hover svg {
        transform: scale(1.08);
    }
}


/* =========================================================
   15 — ENTRANCE ANIMATIONS
========================================================= */

@keyframes sopsSolvesReveal {
    from {
        opacity: 0;
        translate: 0 22px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

@media (prefers-reduced-motion: no-preference) {

    @supports (animation-timeline: view()) {

        body .operations-sops-page .sops-solves__intro {
            animation: sopsSolvesReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 55%;
        }

        body .operations-sops-page .sops-solves__card {
            animation: sopsSolvesReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 65%;
        }
    }
}


/* =========================================================
   16 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body .operations-sops-page .sops-solves__intro,
    body .operations-sops-page .sops-solves__card {
        animation: none !important;

        opacity: 1 !important;
        translate: none !important;
        transform: none !important;
    }

    body .operations-sops-page .sops-solves__card,
    body .operations-sops-page .sops-solves__icon,
    body .operations-sops-page .sops-solves__icon svg {
        transition: none !important;
    }
}



/* =========================================================
   FRAYORA — OPERATIONS & SOPS
   SECTION 03 — WHAT WE BUILD

   DESKTOP: 1101px+
   TABLET: 600px–1100px
   MOBILE: 599px and below

   Bond-inspired modern SaaS design
   Solid warm ivory background
   Asymmetric editorial layout
   Four elevated horizontal service rows
   Alternating olive / terracotta icons
   Refined layered shadows
   Subtle luminous card highlights
   Scroll entrance animations
   Reduced-motion accessibility
========================================================= */


/* =========================================================
   01 — SECTION FOUNDATION
========================================================= */

body .operations-sops-page .sops-build {
    position: relative;
    isolation: isolate;

    display: block;
    width: 100%;

    margin: 0;
    padding: 0;

    box-sizing: border-box;
    overflow: hidden;

    background-color: #F5EDE4 !important;
    background-image: none !important;

    color: #1F211D;
}

body .operations-sops-page .sops-build *,
body .operations-sops-page .sops-build *::before,
body .operations-sops-page .sops-build *::after {
    box-sizing: border-box;
}

/* No decorative section backgrounds */

body .operations-sops-page .sops-build::before,
body .operations-sops-page .sops-build::after {
    content: none !important;
    display: none !important;
}


/* =========================================================
   02 — MAIN CONTAINER
========================================================= */

body .operations-sops-page .sops-build__inner {
    position: relative;
    z-index: 2;

    display: grid;

    width: 100%;
    max-width: 1600px;

    margin: 0 auto;
}

body .operations-sops-page .sops-build__intro {
    position: relative;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    text-align: left;
}


/* =========================================================
   03 — INTRO TYPOGRAPHY
========================================================= */

body .operations-sops-page .sops-build__eyebrow {
    margin: 0;

    font-family: "Inter", sans-serif !important;
    font-weight: 600;

    line-height: 1.4;
    letter-spacing: 0.15em;
    text-transform: uppercase;

    color: #C96743;
}

body .operations-sops-page .sops-build__title {
    width: 100%;
    margin: 0;

    font-family: "Manrope", "Inter", sans-serif !important;
    font-weight: 600;

    line-height: 1.16;
    letter-spacing: -0.05em;

    color: #1F211D;

    text-align: left;
    text-wrap: balance;
}


/* =========================================================
   04 — SERVICE LIST
========================================================= */

body .operations-sops-page .sops-build__list {
    display: flex;
    flex-direction: column;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;
}


/* =========================================================
   05 — ELEVATED SERVICE ROWS
========================================================= */

body .operations-sops-page .sops-build__item {
    position: relative;
    isolation: isolate;

    display: grid;

    grid-template-columns:
        auto auto minmax(0, 1fr);

    align-items: center;

    width: 100%;
    min-width: 0;
    margin: 0;

    border: 1px solid rgba(255,255,255,0.88);
    border-radius: 17px;

    background-color: #FFFCF8;
    background-image: none;

    box-shadow:
        0 3px 8px rgba(66,46,33,0.025),
        0 12px 25px rgba(66,46,33,0.045),
        0 24px 48px rgba(66,46,33,0.035),
        inset 0 1px 0 rgba(255,255,255,0.95);

    transition:
        transform 420ms cubic-bezier(.22,1,.36,1),
        box-shadow 420ms ease,
        border-color 420ms ease;
}

/* Delicate luminous surface finish */

body .operations-sops-page .sops-build__item::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 0;

    border-radius: inherit;

    background: linear-gradient(
        145deg,
        rgba(255,255,255,0.28) 0%,
        transparent 65%
    );

    pointer-events: none;
}


/* =========================================================
   06 — DIMENSIONAL ICON MEDALLIONS
========================================================= */

body .operations-sops-page .sops-build__icon {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border-radius: 50%;

    transition:
        transform 420ms cubic-bezier(.22,1,.36,1),
        box-shadow 420ms ease;
}

/* 01 AND 03 — OLIVE */

body .operations-sops-page .sops-build__icon--olive {
    background-color: #E6E9DF;

    background-image: linear-gradient(
        145deg,
        #F6F7EF 0%,
        #E9ECE2 52%,
        #DCE2D5 100%
    );

    border: 1px solid rgba(86,108,83,0.12);

    box-shadow:
        0 5px 11px rgba(49,65,46,0.04),
        0 15px 27px rgba(49,65,46,0.075),
        inset 0 2px 1px rgba(255,255,255,0.9),
        inset 0 -5px 10px rgba(75,93,68,0.04);
}

/* 02 AND 04 — TERRACOTTA */

body .operations-sops-page .sops-build__icon--terracotta {
    background-color: #F3E1D5;

    background-image: linear-gradient(
        145deg,
        #FFF6EF 0%,
        #F5E5D8 52%,
        #ECD5C5 100%
    );

    border: 1px solid rgba(181,112,78,0.13);

    box-shadow:
        0 5px 11px rgba(89,55,35,0.035),
        0 15px 27px rgba(89,55,35,0.075),
        inset 0 2px 1px rgba(255,255,255,0.9),
        inset 0 -5px 10px rgba(137,87,58,0.04);
}

/* Fine luminous inner ring */

body .operations-sops-page .sops-build__icon::before {
    content: "";

    position: absolute;
    inset: 4px;

    border: 1px solid rgba(255,255,255,0.65);
    border-radius: 50%;

    pointer-events: none;
}

/* SVG icon details */

body .operations-sops-page .sops-build__icon svg {
    position: relative;
    z-index: 2;

    display: block;

    width: 43%;
    height: 43%;

    fill: none;

    stroke-width: 1.85;
    stroke-linecap: round;
    stroke-linejoin: round;

    filter:
        drop-shadow(0 2px 2px rgba(43,40,32,0.08));

    transition: transform 400ms ease;
}

body .operations-sops-page
.sops-build__icon--olive svg {
    stroke: #4D604C;
}

body .operations-sops-page
.sops-build__icon--terracotta svg {
    stroke: #B65D3A;
}


/* =========================================================
   07 — NUMBER + COPY
========================================================= */

body .operations-sops-page .sops-build__number {
    position: relative;
    z-index: 1;

    display: block;

    align-self: center;

    font-family: "Inter", sans-serif !important;
    font-weight: 700;

    line-height: 1.2;
    letter-spacing: 0.01em;

    color: #C96743;
}

body .operations-sops-page .sops-build__copy {
    position: relative;
    z-index: 1;

    width: 100%;
    min-width: 0;

    border-left: 1px solid rgba(201,103,67,0.24);
}

body .operations-sops-page .sops-build__item-title {
    margin: 0;

    font-family: "Manrope", "Inter", sans-serif !important;
    font-weight: 650;

    line-height: 1.3;
    letter-spacing: -0.034em;

    color: #1F211D;

    overflow-wrap: break-word;
}

body .operations-sops-page .sops-build__description {
    margin: 0;

    font-family: "Inter", sans-serif !important;
    font-weight: 400;

    line-height: 1.65;

    color: rgba(31,33,29,0.76);
}


/* =========================================================
   08 — DESKTOP
   1101px AND ABOVE
========================================================= */

@media (min-width: 1101px) {

    body .operations-sops-page .sops-build {
        padding: 100px 0 110px;
    }

    body .operations-sops-page .sops-build__inner {
        grid-template-columns:
            minmax(0, 0.73fr)
            minmax(0, 1.27fr);

        column-gap: 85px;
        align-items: center;

        padding: 0 80px;
    }

    /* Left editorial heading */

    body .operations-sops-page .sops-build__intro {
        max-width: 495px;
    }

    body .operations-sops-page .sops-build__eyebrow {
        margin-bottom: 24px;
        font-size: 12px;
    }

    body .operations-sops-page .sops-build__title {
        max-width: 480px;

        font-size: clamp(36px, 3vw, 46px);
    }

    /* Vertical service rows */

    body .operations-sops-page .sops-build__list {
        gap: 16px;
    }

    body .operations-sops-page .sops-build__item {
        grid-template-columns:
            66px 32px minmax(0, 1fr);

        column-gap: 15px;

        min-height: 126px;

        padding: 18px 22px;
    }

    body .operations-sops-page .sops-build__icon {
        width: 66px;
        height: 66px;
    }

    body .operations-sops-page .sops-build__number {
        font-size: 12px;
    }

    body .operations-sops-page .sops-build__copy {
        padding-left: 19px;
    }

    body .operations-sops-page .sops-build__item-title {
        margin-bottom: 8px;
        font-size: 17px;
    }

    body .operations-sops-page .sops-build__description {
        font-size: 12px;
    }
}


/* =========================================================
   09 — SMALLER DESKTOP
   1101px–1350px
========================================================= */

@media (min-width: 1101px) and (max-width: 1350px) {

    body .operations-sops-page .sops-build__inner {
        column-gap: 50px;
        padding: 0 60px;
    }

    body .operations-sops-page .sops-build__item {
        grid-template-columns:
            58px 27px minmax(0, 1fr);

        column-gap: 12px;
        padding: 17px 17px;
    }

    body .operations-sops-page .sops-build__icon {
        width: 58px;
        height: 58px;
    }

    body .operations-sops-page .sops-build__copy {
        padding-left: 15px;
    }

    body .operations-sops-page .sops-build__item-title {
        font-size: 15px;
    }
}


/* =========================================================
   10 — TABLET
   600px–1100px
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .operations-sops-page .sops-build {
        padding: 85px 0 95px;
    }

    body .operations-sops-page .sops-build__inner {
        display: block;
        padding: 0 60px;
    }

    body .operations-sops-page .sops-build__intro {
        max-width: 780px;
        margin-bottom: 44px;
    }

    body .operations-sops-page .sops-build__eyebrow {
        margin-bottom: 21px;
        font-size: 12px;
    }

    body .operations-sops-page .sops-build__title {
        max-width: 760px;

        font-size: clamp(36px, 4.8vw, 51px);
    }

    /* Full-width horizontal cards */

    body .operations-sops-page .sops-build__list {
        gap: 17px;
    }

    body .operations-sops-page .sops-build__item {
        grid-template-columns:
            76px 36px minmax(0, 1fr);

        column-gap: 19px;

        min-height: 130px;
        padding: 20px 24px;
    }

    body .operations-sops-page .sops-build__icon {
        width: 76px;
        height: 76px;
    }

    body .operations-sops-page .sops-build__number {
        font-size: 13px;
    }

    body .operations-sops-page .sops-build__copy {
        padding-left: 22px;
    }

    body .operations-sops-page .sops-build__item-title {
        margin-bottom: 9px;
        font-size: 18px;
    }

    body .operations-sops-page .sops-build__description {
        font-size: 14px;
    }
}


/* =========================================================
   11 — SMALL TABLET
   600px–749px
========================================================= */

@media (min-width: 600px) and (max-width: 749px) {

    body .operations-sops-page .sops-build {
        padding: 75px 0 85px;
    }

    body .operations-sops-page .sops-build__inner {
        padding: 0 42px;
    }

    body .operations-sops-page .sops-build__item {
        grid-template-columns:
            64px 30px minmax(0, 1fr);

        column-gap: 13px;

        padding: 20px 18px;
    }

    body .operations-sops-page .sops-build__icon {
        width: 64px;
        height: 64px;
    }

    body .operations-sops-page .sops-build__copy {
        padding-left: 16px;
    }

    body .operations-sops-page .sops-build__item-title {
        font-size: 16px;
    }

    body .operations-sops-page .sops-build__description {
        font-size: 13px;
    }
}


/* =========================================================
   12 — MOBILE
   599px AND BELOW
========================================================= */

@media (max-width: 599px) {

    body .operations-sops-page .sops-build {
        padding: 75px 0 85px;
    }

    body .operations-sops-page .sops-build__inner {
        display: block;
        padding: 0 28px 0 34px;
    }

    body .operations-sops-page .sops-build__intro {
        margin-bottom: 38px;
    }

    body .operations-sops-page .sops-build__eyebrow {
        margin-bottom: 20px;
        font-size: 11px;
    }

    body .operations-sops-page .sops-build__title {
        font-size: clamp(32px, 8vw, 43px);
        line-height: 1.16;
    }

    /* Raised mobile service rows */

    body .operations-sops-page .sops-build__list {
        gap: 17px;
    }

    body .operations-sops-page .sops-build__item {
        grid-template-columns:
            60px minmax(0, 1fr);

        grid-template-rows: auto auto;

        column-gap: 15px;
        row-gap: 10px;

        align-items: start;

        min-height: 0;

        padding: 24px 20px;

        border-radius: 18px;
    }

    /* Icon in left column */

    body .operations-sops-page .sops-build__icon {
        grid-column: 1;
        grid-row: 1 / 3;

        width: 60px;
        height: 60px;

        align-self: start;
    }

    /* Number above card heading */

    body .operations-sops-page .sops-build__number {
        grid-column: 2;
        grid-row: 1;

        align-self: end;

        font-size: 12px;
    }

    body .operations-sops-page .sops-build__copy {
        grid-column: 2;
        grid-row: 2;

        padding: 0;
        border: none;
    }

    body .operations-sops-page .sops-build__item-title {
        margin-bottom: 10px;

        font-size: 17px;
    }

    body .operations-sops-page .sops-build__description {
        font-size: 13px;
        line-height: 1.72;
    }
}


/* =========================================================
   13 — SMALL MOBILE
   374px AND BELOW
========================================================= */

@media (max-width: 374px) {

    body .operations-sops-page .sops-build {
        padding: 65px 0 75px;
    }

    body .operations-sops-page .sops-build__inner {
        padding: 0 23px 0 29px;
    }

    body .operations-sops-page .sops-build__title {
        font-size: 30px;
    }

    body .operations-sops-page .sops-build__item {
        grid-template-columns:
            53px minmax(0, 1fr);

        column-gap: 13px;
        padding: 21px 16px;
    }

    body .operations-sops-page .sops-build__icon {
        width: 53px;
        height: 53px;
    }

    body .operations-sops-page .sops-build__item-title {
        font-size: 15px;
    }

    body .operations-sops-page .sops-build__description {
        font-size: 12px;
    }
}


/* =========================================================
   14 — HOVER EFFECTS
========================================================= */

@media (hover: hover) and (pointer: fine) {

    body .operations-sops-page .sops-build__item:hover {
        transform: translateY(-4px);

        border-color: rgba(216,181,156,0.45);

        box-shadow:
            0 8px 16px rgba(66,46,33,0.04),
            0 23px 43px rgba(66,46,33,0.085),
            0 36px 62px rgba(66,46,33,0.055),
            inset 0 1px 0 rgba(255,255,255,0.98);
    }

    body .operations-sops-page
    .sops-build__item:hover .sops-build__icon {
        transform: translateY(-2px) scale(1.04);
    }

    body .operations-sops-page
    .sops-build__item:hover svg {
        transform: scale(1.08);
    }
}


/* =========================================================
   15 — SCROLL ENTRANCE ANIMATIONS
========================================================= */

@keyframes sopsBuildReveal {
    from {
        opacity: 0;
        translate: 0 22px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

@media (prefers-reduced-motion: no-preference) {

    @supports (animation-timeline: view()) {

        body .operations-sops-page .sops-build__intro {
            animation: sopsBuildReveal linear both;

            animation-timeline: view();
            animation-range: entry 0% entry 55%;
        }

        body .operations-sops-page .sops-build__item {
            animation: sopsBuildReveal linear both;

            animation-timeline: view();
            animation-range: entry 0% entry 65%;
        }
    }
}


/* =========================================================
   16 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body .operations-sops-page .sops-build__intro,
    body .operations-sops-page .sops-build__item {
        animation: none !important;

        opacity: 1 !important;
        translate: none !important;
    }

    body .operations-sops-page .sops-build__item,
    body .operations-sops-page .sops-build__icon,
    body .operations-sops-page .sops-build__icon svg {
        transition: none !important;
    }

    body .operations-sops-page .sops-build__item:hover,
    body .operations-sops-page .sops-build__item:hover
    .sops-build__icon {
        transform: none !important;
    }
}


/* =========================================================
   FRAYORA — OPERATIONS & SOPS
   SECTION 03 — DESKTOP LAYOUT REFINEMENT

   Fixes:
   - Shorter, more compact cards
   - Less unnecessary horizontal whitespace
   - Heading positioned higher
   - Better editorial balance
   - Preserves depth, shadows, and animations

   DESKTOP ONLY: 1101px+
========================================================= */

@media (min-width: 1101px) {

    /* =========================================
       SECTION SPACING
    ========================================= */

    body .operations-sops-page .sops-build {
        padding-top: 100px;
        padding-bottom: 105px;
    }

    /* =========================================
       MAIN GRID — BETTER PROPORTIONS
    ========================================= */

    body .operations-sops-page .sops-build__inner {
        display: grid;

        grid-template-columns:
            minmax(0, 0.90fr)
            minmax(0, 1.10fr);

        column-gap: 75px;

        align-items: start;

        max-width: 1450px;
        padding: 0 80px;
    }

    /* =========================================
       LEFT CONTENT — POSITION HIGHER
    ========================================= */

    body .operations-sops-page .sops-build__intro {
        align-self: start;

        width: 100%;
        max-width: 510px;

        margin: 0;
        padding-top: 28px;
    }

    body .operations-sops-page .sops-build__eyebrow {
        margin-bottom: 22px;
    }

    body .operations-sops-page .sops-build__title {
        max-width: 510px;

        font-size: clamp(36px, 3vw, 45px);
        line-height: 1.16;
    }

    /* =========================================
       RIGHT LIST — COMPACT WIDTH
    ========================================= */

    body .operations-sops-page .sops-build__list {
        display: flex;
        flex-direction: column;

        width: 100%;
        max-width: 670px;

        justify-self: start;

        gap: 14px;
    }

    /* =========================================
       SERVICE ROWS — SHORTER & TIGHTER
    ========================================= */

    body .operations-sops-page .sops-build__item {
        display: grid;

        grid-template-columns:
            58px 25px minmax(0, 1fr);

        column-gap: 15px;

        align-items: center;

        min-height: 105px;
        height: auto;

        padding: 17px 22px;

        border-radius: 16px;
    }

    /* =========================================
       ICON SIZE
    ========================================= */

    body .operations-sops-page .sops-build__icon {
        width: 58px;
        height: 58px;
    }

    /* =========================================
       NUMBER & DIVIDER
    ========================================= */

    body .operations-sops-page .sops-build__number {
        font-size: 12px;
    }

    body .operations-sops-page .sops-build__copy {
        padding-left: 16px;
    }

    /* =========================================
       CARD TYPOGRAPHY
    ========================================= */

    body .operations-sops-page .sops-build__item-title {
        margin-bottom: 6px;

        font-size: 16px;
        line-height: 1.3;
    }

    body .operations-sops-page .sops-build__description {
        font-size: 12px;
        line-height: 1.6;

        max-width: 490px;
    }
}

/* =========================================================
   SMALLER DESKTOP — 1101px–1350px
========================================================= */

@media (min-width: 1101px) and (max-width: 1350px) {

    body .operations-sops-page .sops-build__inner {
        grid-template-columns:
            minmax(0, 0.82fr)
            minmax(0, 1.18fr);

        column-gap: 45px;

        padding: 0 60px;
    }

    body .operations-sops-page .sops-build__intro {
        padding-top: 20px;
    }

    body .operations-sops-page .sops-build__list {
        max-width: 630px;
    }

    body .operations-sops-page .sops-build__item {
        grid-template-columns:
            54px 24px minmax(0, 1fr);

        column-gap: 12px;

        min-height: 100px;
        padding: 15px 18px;
    }

    body .operations-sops-page .sops-build__icon {
        width: 54px;
        height: 54px;
    }

    body .operations-sops-page .sops-build__item-title {
        font-size: 15px;
    }
}

/* =========================================================
   OPERATIONS & SOPS — SECTION 03
   DESKTOP REFINEMENT
   Fix:
   - move left text further left
   - reduce awkward empty space
   - keep right cards compact
   - add subtle bottom-left line art
========================================================= */

@media (min-width: 1101px) {

    body .operations-sops-page .sops-build {
        position: relative;
        overflow: hidden;
        padding: 108px 0 110px;
    }

    /* -----------------------------------------
       subtle bottom-left editorial linework
    ----------------------------------------- */

    body .operations-sops-page .sops-build::before,
    body .operations-sops-page .sops-build::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
        z-index: 0;
    }

    body .operations-sops-page .sops-build::before {
        width: 620px;
        height: 430px;
        left: -360px;
        bottom: -250px;
        border: 1.2px solid rgba(201, 103, 67, 0.14);
        transform: rotate(14deg);
    }

    body .operations-sops-page .sops-build::after {
        width: 500px;
        height: 340px;
        left: -255px;
        bottom: -205px;
        border: 1.2px solid rgba(214, 186, 167, 0.42);
        transform: rotate(10deg);
    }

    body .operations-sops-page .sops-build__inner {
        position: relative;
        z-index: 2;

        display: grid;
        grid-template-columns: minmax(320px, 500px) minmax(640px, 800px);
        justify-content: space-between;
        align-items: start;
        column-gap: 56px;

        width: 100%;
        max-width: 1600px;
        margin: 0 auto;
        padding: 0 80px;
        box-sizing: border-box;
    }

    /* -----------------------------------------
       LEFT INTRO — pull it left and higher
    ----------------------------------------- */

    body .operations-sops-page .sops-build__intro {
        width: 100%;
        max-width: 500px;
        margin: 0;
        padding-top: 36px;
        align-self: start;
        justify-self: start;
    }

    body .operations-sops-page .sops-build__eyebrow {
        margin: 0 0 22px;
    }

    body .operations-sops-page .sops-build__title {
        width: 100%;
        max-width: 500px;
        margin: 0;

        font-size: clamp(42px, 3.2vw, 56px);
        line-height: 1.12;
        letter-spacing: -0.05em;
        text-wrap: balance;
    }

    /* -----------------------------------------
       RIGHT COLUMN — cards not too long
    ----------------------------------------- */

    body .operations-sops-page .sops-build__list {
        width: 100%;
        max-width: 800px;
        justify-self: end;

        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    body .operations-sops-page .sops-build__item {
        display: grid;
        grid-template-columns: 74px 34px minmax(0, 1fr);
        align-items: center;
        column-gap: 18px;

        min-height: 126px;
        padding: 22px 24px 22px 22px;

        border-radius: 24px;

        background: rgba(255,255,255,0.78);
        box-shadow:
            0 12px 28px rgba(87, 59, 40, 0.06),
            0 24px 42px rgba(87, 59, 40, 0.05),
            inset 0 1px 0 rgba(255,255,255,0.70);
    }

    body .operations-sops-page .sops-build__icon {
        width: 62px;
        height: 62px;
    }

    body .operations-sops-page .sops-build__number {
        margin: 0;
        font-size: 13px;
        line-height: 1;
        font-weight: 700;
    }

    body .operations-sops-page .sops-build__copy {
        padding-left: 18px;
        border-left: 1px solid rgba(201, 103, 67, 0.15);
    }

    body .operations-sops-page .sops-build__item-title {
        margin: 0 0 7px;
        font-size: 18px;
        line-height: 1.3;
    }

    body .operations-sops-page .sops-build__description {
        max-width: 540px;
        font-size: 14px;
        line-height: 1.65;
    }
}

/* =========================================================
   SLIGHTLY SMALLER DESKTOP
========================================================= */

@media (min-width: 1101px) and (max-width: 1360px) {

    body .operations-sops-page .sops-build__inner {
        grid-template-columns: minmax(300px, 450px) minmax(580px, 740px);
        column-gap: 44px;
        padding: 0 64px;
    }

    body .operations-sops-page .sops-build__intro {
        padding-top: 24px;
        max-width: 450px;
    }

    body .operations-sops-page .sops-build__title {
        max-width: 450px;
        font-size: clamp(38px, 3vw, 48px);
    }

    body .operations-sops-page .sops-build__list {
        max-width: 740px;
    }

    body .operations-sops-page .sops-build__item {
        min-height: 118px;
        padding: 20px 22px 20px 20px;
    }

    body .operations-sops-page .sops-build__description {
        max-width: 500px;
        font-size: 13px;
    }
}


/* =========================================================
   FRAYORA — OPERATIONS & SOPS
   SECTION 03 — FINAL DESKTOP ALIGNMENT FIX

   Match Section 02 exactly:
   - Same container width
   - Same left/right column proportions
   - Same horizontal padding
   - Same card-column starting position

   Preserve:
   - Higher left heading position
   - Compact horizontal service cards
   - Existing icon colors and shadows
   - Tablet and mobile unchanged
========================================================= */

@media (min-width: 1101px) {

    /* =========================================
       MATCH SECTION 02 GRID
    ========================================= */

    body .operations-sops-page .sops-build__inner {
        display: grid;

        grid-template-columns:
            minmax(0, 0.86fr)
            minmax(0, 1.14fr);

        column-gap: 75px;

        justify-content: normal;
        align-items: start;

        width: 100%;
        max-width: 1600px;

        margin: 0 auto;
        padding: 0 80px;

        box-sizing: border-box;
    }

    /* =========================================
       LEFT TEXT — KEEP CORRECT ALIGNMENT
    ========================================= */

    body .operations-sops-page .sops-build__intro {
        width: 100%;
        max-width: 510px;

        margin: 0;
        padding-top: 28px;

        justify-self: start;
        align-self: start;
    }

    body .operations-sops-page .sops-build__title {
        width: 100%;
        max-width: 510px;

        font-size: clamp(36px, 3vw, 45px);
        line-height: 1.16;
    }

    /* =========================================
       RIGHT CARDS — ALIGN WITH SECTION 02
    ========================================= */

    body .operations-sops-page .sops-build__list {
        display: flex;
        flex-direction: column;

        width: 100%;
        max-width: none;

        margin: 0;
        padding: 0;

        justify-self: stretch;
        align-self: start;

        gap: 15px;
    }

    /* =========================================
       KEEP CARDS COMPACT
    ========================================= */

    body .operations-sops-page .sops-build__item {
        grid-template-columns:
            62px 30px minmax(0, 1fr);

        column-gap: 15px;

        width: 100%;
        min-height: 108px;
        height: auto;

        padding: 17px 21px;

        border-radius: 17px;
    }

    body .operations-sops-page .sops-build__icon {
        width: 58px;
        height: 58px;
    }

    body .operations-sops-page .sops-build__number {
        font-size: 12px;
    }

    body .operations-sops-page .sops-build__copy {
        min-width: 0;
        padding-left: 17px;
    }

    body .operations-sops-page .sops-build__item-title {
        margin-bottom: 6px;

        font-size: 16px;
        line-height: 1.3;
    }

    body .operations-sops-page .sops-build__description {
        width: 100%;
        max-width: 540px;

        font-size: 12px;
        line-height: 1.65;
    }
}


/* =========================================================
   SMALLER DESKTOP — MATCH SECTION 02
   1101px–1350px
========================================================= */

@media (min-width: 1101px) and (max-width: 1350px) {

    body .operations-sops-page .sops-build__inner {
        grid-template-columns:
            minmax(0, 0.86fr)
            minmax(0, 1.14fr);

        column-gap: 47px;

        padding: 0 60px;
    }

    body .operations-sops-page .sops-build__intro {
        max-width: 460px;
        padding-top: 24px;
    }

    body .operations-sops-page .sops-build__title {
        max-width: 460px;

        font-size: clamp(36px, 3vw, 43px);
    }

    body .operations-sops-page .sops-build__list {
        width: 100%;
        max-width: none;

        gap: 14px;
    }

    body .operations-sops-page .sops-build__item {
        grid-template-columns:
            54px 26px minmax(0, 1fr);

        column-gap: 12px;

        min-height: 105px;
        padding: 16px 18px;
    }

    body .operations-sops-page .sops-build__icon {
        width: 54px;
        height: 54px;
    }

    body .operations-sops-page .sops-build__copy {
        padding-left: 14px;
    }

    body .operations-sops-page .sops-build__item-title {
        font-size: 15px;
    }

    body .operations-sops-page .sops-build__description {
        font-size: 12px;
    }
}

/* =========================================================
   FRAYORA — OPERATIONS & SOPS
   SECTION 04 — THE IMPACT

   DESKTOP: 1101px+
   TABLET: 600px–1100px
   MOBILE: 599px and below

   Modern SaaS / Bond-inspired editorial styling
   Uniform solid warm ivory background
   Four elevated impact cards
   Sculptural terracotta icon medallions
   Refined material depth and soft shadows
   Subtle hover and scroll entrance animations
   Reduced-motion accessibility

   NO BACKGROUND IMAGES
   NO RANDOM DECORATIVE SHAPES
========================================================= */


/* =========================================================
   01 — SECTION FOUNDATION
========================================================= */

body .operations-sops-page .sops-impact {
    position: relative;
    isolation: isolate;

    display: block;
    width: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;
    box-sizing: border-box;

    background-color: #F8F3EB !important;
    background-image: none !important;

    color: #1F211D;
}

body .operations-sops-page .sops-impact *,
body .operations-sops-page .sops-impact *::before,
body .operations-sops-page .sops-impact *::after {
    box-sizing: border-box;
}

body .operations-sops-page .sops-impact::before,
body .operations-sops-page .sops-impact::after {
    content: none !important;
    display: none !important;
}


/* =========================================================
   02 — MAIN CONTAINER
========================================================= */

body .operations-sops-page .sops-impact__inner {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1600px;

    margin: 0 auto;
}

body .operations-sops-page .sops-impact__intro {
    position: relative;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    text-align: left;
}


/* =========================================================
   03 — SECTION TYPOGRAPHY
========================================================= */

body .operations-sops-page .sops-impact__eyebrow {
    display: block;

    margin: 0;

    font-family: "Inter", sans-serif !important;
    font-weight: 600;

    line-height: 1.4;
    letter-spacing: 0.15em;
    text-transform: uppercase;

    color: #C96743;

    text-align: left;
}

body .operations-sops-page .sops-impact__title {
    width: 100%;
    margin: 0;

    font-family: "Manrope", "Inter", sans-serif !important;
    font-weight: 600;

    line-height: 1.15;
    letter-spacing: -0.05em;

    color: #1F211D;

    text-align: left;
    text-wrap: balance;
}


/* =========================================================
   04 — FOUR-CARD GRID
========================================================= */

body .operations-sops-page .sops-impact__grid {
    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    align-items: stretch;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;
}


/* =========================================================
   05 — ELEVATED IMPACT CARDS
========================================================= */

body .operations-sops-page .sops-impact__card {
    position: relative;
    isolation: isolate;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    width: 100%;
    min-width: 0;
    height: 100%;

    margin: 0;

    border: 1px solid rgba(255,255,255,0.88);
    border-radius: 19px;

    background-color: #FFFCF8;
    background-image: none;

    box-shadow:
        0 4px 10px rgba(66,46,33,0.025),
        0 15px 30px rgba(66,46,33,0.055),
        0 30px 54px rgba(66,46,33,0.04),
        inset 0 1px 0 rgba(255,255,255,0.95);

    transition:
        transform 420ms cubic-bezier(.22,1,.36,1),
        border-color 420ms ease,
        box-shadow 420ms ease;
}

/* Luminous card finish, not a section background */

body .operations-sops-page .sops-impact__card::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 0;

    border-radius: inherit;

    background: linear-gradient(
        145deg,
        rgba(255,255,255,0.45) 0%,
        rgba(255,255,255,0.10) 45%,
        transparent 85%
    );

    pointer-events: none;
}


/* =========================================================
   06 — DIMENSIONAL TERRACOTTA ICONS
========================================================= */

body .operations-sops-page .sops-impact__icon {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border-radius: 50%;

    background-color: #F3E1D5;

    background-image: linear-gradient(
        145deg,
        #FFF7EF 0%,
        #F5E5D8 53%,
        #ECD5C5 100%
    );

    border: 1px solid rgba(181,112,78,0.12);

    box-shadow:
        0 5px 11px rgba(89,55,35,0.035),
        0 15px 27px rgba(89,55,35,0.075),
        inset 0 2px 1px rgba(255,255,255,0.90),
        inset 0 -5px 10px rgba(137,87,58,0.045);

    transition:
        transform 420ms cubic-bezier(.22,1,.36,1),
        box-shadow 420ms ease;
}

/* Thin luminous ring */

body .operations-sops-page .sops-impact__icon::before {
    content: "";

    position: absolute;
    inset: 4px;

    border: 1px solid rgba(255,255,255,0.67);
    border-radius: 50%;

    pointer-events: none;
}

/* SVG LINE ART */

body .operations-sops-page .sops-impact__icon svg {
    position: relative;
    z-index: 2;

    display: block;

    width: 43%;
    height: 43%;

    fill: none;
    stroke: #B65D3A;
    stroke-width: 1.85;

    stroke-linecap: round;
    stroke-linejoin: round;

    filter:
        drop-shadow(0 2px 2px rgba(80,46,30,0.09));

    transition: transform 400ms ease;
}


/* =========================================================
   07 — CARD TYPOGRAPHY
========================================================= */

body .operations-sops-page .sops-impact__content {
    position: relative;
    z-index: 1;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;
}

body .operations-sops-page .sops-impact__number {
    display: block;

    margin: 0;

    font-family: "Inter", sans-serif !important;
    font-weight: 700;

    line-height: 1.3;
    letter-spacing: 0.01em;

    color: #C96743;
}

body .operations-sops-page .sops-impact__card-title {
    width: 100%;
    margin: 0;

    font-family: "Manrope", "Inter", sans-serif !important;
    font-weight: 650;

    line-height: 1.32;
    letter-spacing: -0.035em;

    color: #1F211D;

    overflow-wrap: break-word;
}

body .operations-sops-page .sops-impact__description {
    width: 100%;
    margin: 0;

    font-family: "Inter", sans-serif !important;
    font-weight: 400;

    line-height: 1.72;

    color: rgba(31,33,29,0.75);

    overflow-wrap: break-word;
}


/* =========================================================
   08 — DESKTOP
   1101px AND ABOVE
========================================================= */

@media (min-width: 1101px) {

    body .operations-sops-page .sops-impact {
        padding: 100px 0 115px;
    }

    body .operations-sops-page .sops-impact__inner {
        padding: 0 80px;
    }

    /* INTRO */

    body .operations-sops-page .sops-impact__intro {
        max-width: 880px;
        margin-bottom: 55px;
    }

    body .operations-sops-page .sops-impact__eyebrow {
        margin-bottom: 23px;
        font-size: 12px;
    }

    body .operations-sops-page .sops-impact__title {
        max-width: 850px;

        font-size: clamp(39px, 3.4vw, 53px);
    }

    /* FOUR COLUMNS */

    body .operations-sops-page .sops-impact__grid {
        gap: 20px;
    }

    /* CARDS */

    body .operations-sops-page .sops-impact__card {
        min-height: 295px;
        padding: 29px 25px 32px;
    }

    /* ICON */

    body .operations-sops-page .sops-impact__icon {
        width: 75px;
        height: 75px;

        margin-bottom: 31px;
    }

    /* TEXT */

    body .operations-sops-page .sops-impact__number {
        margin-bottom: 8px;
        font-size: 12px;
    }

    body .operations-sops-page .sops-impact__card-title {
        margin-bottom: 15px;
        font-size: 18px;
    }

    body .operations-sops-page .sops-impact__description {
        font-size: 13px;
    }
}


/* =========================================================
   09 — SMALLER DESKTOP
   1101px–1350px
========================================================= */

@media (min-width: 1101px) and (max-width: 1350px) {

    body .operations-sops-page .sops-impact__inner {
        padding: 0 60px;
    }

    body .operations-sops-page .sops-impact__grid {
        gap: 15px;
    }

    body .operations-sops-page .sops-impact__card {
        min-height: 290px;
        padding: 25px 18px 29px;
    }

    body .operations-sops-page .sops-impact__icon {
        width: 66px;
        height: 66px;

        margin-bottom: 28px;
    }

    body .operations-sops-page .sops-impact__card-title {
        font-size: 16px;
    }

    body .operations-sops-page .sops-impact__description {
        font-size: 12px;
    }
}


/* =========================================================
   10 — TABLET
   600px–1100px
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .operations-sops-page .sops-impact {
        padding: 85px 0 95px;
    }

    body .operations-sops-page .sops-impact__inner {
        padding: 0 60px;
    }

    /* INTRO */

    body .operations-sops-page .sops-impact__intro {
        max-width: 850px;
        margin-bottom: 45px;
    }

    body .operations-sops-page .sops-impact__eyebrow {
        margin-bottom: 21px;
        font-size: 12px;
    }

    body .operations-sops-page .sops-impact__title {
        max-width: 780px;

        font-size: clamp(37px, 4.8vw, 50px);
    }

    /* TWO COLUMNS */

    body .operations-sops-page .sops-impact__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    body .operations-sops-page .sops-impact__card {
        min-height: 270px;
        padding: 28px 25px;
    }

    body .operations-sops-page .sops-impact__icon {
        width: 75px;
        height: 75px;

        margin-bottom: 27px;
    }

    body .operations-sops-page .sops-impact__number {
        margin-bottom: 9px;
        font-size: 12px;
    }

    body .operations-sops-page .sops-impact__card-title {
        margin-bottom: 13px;
        font-size: 18px;
    }

    body .operations-sops-page .sops-impact__description {
        font-size: 14px;
    }
}


/* =========================================================
   11 — SMALL TABLET
   600px–749px
========================================================= */

@media (min-width: 600px) and (max-width: 749px) {

    body .operations-sops-page .sops-impact {
        padding: 75px 0 85px;
    }

    body .operations-sops-page .sops-impact__inner {
        padding: 0 42px;
    }

    body .operations-sops-page .sops-impact__title {
        font-size: clamp(35px, 5.5vw, 43px);
    }

    body .operations-sops-page .sops-impact__grid {
        gap: 16px;
    }

    body .operations-sops-page .sops-impact__card {
        min-height: 270px;
        padding: 24px 19px;
    }

    body .operations-sops-page .sops-impact__icon {
        width: 67px;
        height: 67px;

        margin-bottom: 25px;
    }

    body .operations-sops-page .sops-impact__card-title {
        font-size: 16px;
    }

    body .operations-sops-page .sops-impact__description {
        font-size: 13px;
    }
}


/* =========================================================
   12 — MOBILE
   599px AND BELOW
========================================================= */

@media (max-width: 599px) {

    body .operations-sops-page .sops-impact {
        padding: 75px 0 85px;
    }

    body .operations-sops-page .sops-impact__inner {
        padding: 0 28px 0 34px;
    }

    /* INTRO */

    body .operations-sops-page .sops-impact__intro {
        margin-bottom: 38px;
    }

    body .operations-sops-page .sops-impact__eyebrow {
        margin-bottom: 20px;
        font-size: 11px;
    }

    body .operations-sops-page .sops-impact__title {
        font-size: clamp(32px, 8vw, 43px);
        line-height: 1.16;
    }

    /* SINGLE COLUMN */

    body .operations-sops-page .sops-impact__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    /* COMPACT MOBILE CARDS */

    body .operations-sops-page .sops-impact__card {
        display: grid;

        grid-template-columns: 72px minmax(0, 1fr);

        align-items: center;
        column-gap: 20px;

        min-height: 155px;

        padding: 25px 22px;

        border-radius: 18px;
    }

    body .operations-sops-page .sops-impact__icon {
        grid-column: 1;

        width: 68px;
        height: 68px;

        margin: 0;
    }

    body .operations-sops-page .sops-impact__content {
        grid-column: 2;
    }

    body .operations-sops-page .sops-impact__number {
        margin-bottom: 7px;

        font-size: 12px;
    }

    body .operations-sops-page .sops-impact__card-title {
        margin-bottom: 10px;

        font-size: 17px;
    }

    body .operations-sops-page .sops-impact__description {
        font-size: 13px;
        line-height: 1.7;
    }
}


/* =========================================================
   13 — SMALL MOBILE
   374px AND BELOW
========================================================= */

@media (max-width: 374px) {

    body .operations-sops-page .sops-impact {
        padding: 65px 0 75px;
    }

    body .operations-sops-page .sops-impact__inner {
        padding: 0 23px 0 29px;
    }

    body .operations-sops-page .sops-impact__title {
        font-size: 30px;
    }

    body .operations-sops-page .sops-impact__card {
        grid-template-columns: 58px minmax(0, 1fr);

        column-gap: 14px;

        padding: 22px 17px;
    }

    body .operations-sops-page .sops-impact__icon {
        width: 56px;
        height: 56px;
    }

    body .operations-sops-page .sops-impact__card-title {
        font-size: 15px;
    }

    body .operations-sops-page .sops-impact__description {
        font-size: 12px;
    }
}


/* =========================================================
   14 — REFINED HOVER INTERACTIONS
========================================================= */

@media (hover: hover) and (pointer: fine) {

    body .operations-sops-page .sops-impact__card:hover {
        transform: translateY(-5px);

        border-color: rgba(216,181,156,0.42);

        box-shadow:
            0 8px 17px rgba(66,46,33,0.04),
            0 23px 43px rgba(66,46,33,0.09),
            0 38px 64px rgba(66,46,33,0.055),
            inset 0 1px 0 rgba(255,255,255,0.98);
    }

    body .operations-sops-page
    .sops-impact__card:hover .sops-impact__icon {
        transform: translateY(-3px) scale(1.045);

        box-shadow:
            0 8px 15px rgba(89,55,35,0.05),
            0 20px 34px rgba(89,55,35,0.11),
            inset 0 2px 1px rgba(255,255,255,0.95);
    }

    body .operations-sops-page
    .sops-impact__card:hover svg {
        transform: scale(1.08);
    }
}


/* =========================================================
   15 — SCROLL ENTRANCE ANIMATIONS
========================================================= */

@keyframes sopsImpactReveal {
    from {
        opacity: 0;
        translate: 0 22px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

@media (prefers-reduced-motion: no-preference) {

    @supports (animation-timeline: view()) {

        body .operations-sops-page .sops-impact__intro {
            animation: sopsImpactReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 55%;
        }

        body .operations-sops-page .sops-impact__card {
            animation: sopsImpactReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 60%;
        }

        body .operations-sops-page
        .sops-impact__card:nth-child(2) {
            animation-range: entry 0% entry 65%;
        }

        body .operations-sops-page
        .sops-impact__card:nth-child(3) {
            animation-range: entry 0% entry 70%;
        }

        body .operations-sops-page
        .sops-impact__card:nth-child(4) {
            animation-range: entry 0% entry 75%;
        }
    }
}


/* =========================================================
   16 — REDUCED-MOTION ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body .operations-sops-page .sops-impact__intro,
    body .operations-sops-page .sops-impact__card {
        animation: none !important;

        opacity: 1 !important;
        translate: none !important;
    }

    body .operations-sops-page .sops-impact__card,
    body .operations-sops-page .sops-impact__icon,
    body .operations-sops-page .sops-impact__icon svg {
        transition: none !important;
    }

    body .operations-sops-page .sops-impact__card:hover,
    body .operations-sops-page
    .sops-impact__card:hover .sops-impact__icon,
    body .operations-sops-page
    .sops-impact__card:hover svg {
        transform: none !important;
    }
}



/* =========================================================
   FRAYORA — OPERATIONS & SOPS
   SECTION 05 — OUR PROCESS

   Desktop: 1101px+
   Tablet: 600px–1100px
   Mobile: 599px and below

   Bond-inspired editorial SaaS design
   Solid warm ivory section
   Connected five-step process timeline
   Dimensional glass-like icon medallions
   Olive icons: 01 and 03
   Terracotta icons: 02, 04 and 05
   Subtle depth, shadows and luminosity
   Scroll entrances and hover interactions
   Reduced-motion accessible
========================================================= */


/* =========================================================
   01 — SECTION FOUNDATION
========================================================= */

body .operations-sops-page .sops-process {
    position: relative;
    isolation: isolate;

    width: 100%;
    margin: 0;
    padding: 0;

    overflow: hidden;
    box-sizing: border-box;

    background-color: #F8F3EB !important;
    background-image: none !important;

    color: #1F211D;
}

body .operations-sops-page .sops-process *,
body .operations-sops-page .sops-process *::before,
body .operations-sops-page .sops-process *::after {
    box-sizing: border-box;
}

/* Keep the section surface solid */

body .operations-sops-page .sops-process::before,
body .operations-sops-page .sops-process::after {
    content: none !important;
    display: none !important;
}


/* =========================================================
   02 — MAIN CONTAINER
========================================================= */

body .operations-sops-page .sops-process__inner {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1600px;

    margin: 0 auto;
}

body .operations-sops-page .sops-process__intro {
    position: relative;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    text-align: left;
}


/* =========================================================
   03 — INTRODUCTION TYPOGRAPHY
========================================================= */

body .operations-sops-page .sops-process__eyebrow {
    display: block;
    margin: 0;

    font-family: "Inter", sans-serif !important;
    font-weight: 600;
    line-height: 1.4;

    letter-spacing: 0.14em;
    text-transform: uppercase;

    color: #C96743;
    text-align: left;
}

body .operations-sops-page .sops-process__title {
    display: block;

    width: 100%;
    margin: 0;

    font-family: "Manrope", "Inter", sans-serif !important;
    font-weight: 600;

    line-height: 1.14;
    letter-spacing: -0.048em;

    color: #1F211D;

    text-align: left;
    text-wrap: balance;
}


/* =========================================================
   04 — FIVE-STEP PROCESS GRID
========================================================= */

body .operations-sops-page .sops-process__steps {
    position: relative;

    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));

    width: 100%;
    min-width: 0;

    align-items: start;

    margin: 0;
    padding: 0;

    list-style: none;
    list-style-type: none;
}

body .operations-sops-page .sops-process__step {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    min-width: 0;
    margin: 0;
    padding: 0;

    list-style: none;
    text-align: left;

    transition:
        transform 380ms cubic-bezier(.22,1,.36,1);
}

body .operations-sops-page
.sops-process__step::marker {
    content: "";
}


/* =========================================================
   05 — DESKTOP CONNECTION LINE
========================================================= */

/* A continuous line behind the five icons */

body .operations-sops-page .sops-process__steps::before {
    content: "";

    position: absolute;
    z-index: 0;

    top: 38px;
    left: 38px;
    right: calc((100% - 4 * 26px) / 5 - 38px);

    height: 1px;

    background-color: rgba(201,103,67,0.43);

    pointer-events: none;
}

/* Small connector nodes */

body .operations-sops-page
.sops-process__step:not(:last-child)::after {
    content: "";

    position: absolute;
    z-index: 2;

    top: 35px;
    left: calc(100% + 13px);

    width: 7px;
    height: 7px;

    border: 1px solid rgba(201,103,67,0.70);
    border-radius: 50%;

    background: #F8F3EB;

    pointer-events: none;
}


/* =========================================================
   06 — DIMENSIONAL ICON MEDALLIONS
========================================================= */

body .operations-sops-page .sops-process__icon {
    position: relative;
    z-index: 3;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border-radius: 50%;

    transition:
        transform 380ms cubic-bezier(.22,1,.36,1),
        box-shadow 380ms ease;
}


/* =========================================
   OLIVE — ICON 01 AND ICON 03
========================================= */

body .operations-sops-page
.sops-process__icon--olive {
    background-color: #E6E9DF;

    background-image: linear-gradient(
        145deg,
        #F8F9F2 0%,
        #E9ECE2 52%,
        #DCE2D5 100%
    );

    border: 1px solid rgba(85,110,82,0.13);

    box-shadow:
        0 5px 12px rgba(48,65,44,0.04),
        0 16px 28px rgba(48,65,44,0.08),
        inset 0 2px 1px rgba(255,255,255,0.92),
        inset 0 -5px 10px rgba(75,93,68,0.045);
}


/* =========================================
   TERRACOTTA — ICON 02, 04 AND 05
========================================= */

body .operations-sops-page
.sops-process__icon--terracotta {
    background-color: #F3E1D5;

    background-image: linear-gradient(
        145deg,
        #FFF7F0 0%,
        #F5E5D8 52%,
        #ECD5C5 100%
    );

    border: 1px solid rgba(181,112,78,0.13);

    box-shadow:
        0 5px 12px rgba(89,55,35,0.04),
        0 16px 28px rgba(89,55,35,0.08),
        inset 0 2px 1px rgba(255,255,255,0.92),
        inset 0 -5px 10px rgba(137,87,58,0.045);
}


/* =========================================
   INNER LUMINOUS RING
========================================= */

body .operations-sops-page .sops-process__icon::before {
    content: "";

    position: absolute;
    inset: 5px;

    border: 1px solid rgba(255,255,255,0.74);
    border-radius: 50%;

    pointer-events: none;
}


/* =========================================
   SVG ICONS
========================================= */

body .operations-sops-page .sops-process__icon svg {
    position: relative;
    z-index: 2;

    display: block;

    width: 43%;
    height: 43%;

    fill: none;

    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition: transform 380ms ease;
}

body .operations-sops-page
.sops-process__icon--olive svg {
    stroke: #4D604C;
}

body .operations-sops-page
.sops-process__icon--terracotta svg {
    stroke: #B65D3A;
}


/* =========================================================
   07 — STEP TYPOGRAPHY
========================================================= */

body .operations-sops-page .sops-process__number {
    display: block;

    margin: 0;

    font-family: "Inter", sans-serif !important;
    font-weight: 700;
    line-height: 1.3;

    color: #C96743;
}

body .operations-sops-page .sops-process__step-title {
    width: 100%;
    margin: 0;

    font-family: "Manrope", "Inter", sans-serif !important;
    font-weight: 650;

    line-height: 1.32;
    letter-spacing: -0.035em;

    color: #1F211D;
}

body .operations-sops-page .sops-process__description {
    width: 100%;
    margin: 0;

    font-family: "Inter", sans-serif !important;
    font-weight: 400;
    line-height: 1.75;

    color: rgba(31,33,29,0.75);

    overflow-wrap: break-word;
}


/* =========================================================
   08 — DESKTOP
   1101px+
========================================================= */

@media (min-width: 1101px) {

    body .operations-sops-page .sops-process {
        padding: 105px 0 115px;
    }

    body .operations-sops-page .sops-process__inner {
        padding: 0 80px;
    }

    /* INTRO */

    body .operations-sops-page .sops-process__intro {
        max-width: 1120px;
        margin-bottom: 66px;
    }

    body .operations-sops-page .sops-process__eyebrow {
        margin-bottom: 21px;
        font-size: 12px;
    }

    body .operations-sops-page .sops-process__title {
        max-width: 1100px;

        font-size: clamp(38px, 3.3vw, 51px);
    }

    /* TIMELINE */

    body .operations-sops-page .sops-process__steps {
        gap: 26px;
    }

    body .operations-sops-page .sops-process__icon {
        width: 76px;
        height: 76px;

        margin-bottom: 23px;
    }

    body .operations-sops-page .sops-process__number {
        margin-bottom: 6px;
        font-size: 12px;
    }

    body .operations-sops-page .sops-process__step-title {
        margin-bottom: 11px;
        font-size: 19px;
    }

    body .operations-sops-page .sops-process__description {
        max-width: 235px;
        font-size: 13px;
    }
}


/* =========================================================
   09 — SMALL DESKTOP
   1101px–1350px
========================================================= */

@media (min-width: 1101px) and (max-width: 1350px) {

    body .operations-sops-page .sops-process__inner {
        padding: 0 60px;
    }

    body .operations-sops-page .sops-process__steps {
        gap: 20px;
    }

    body .operations-sops-page .sops-process__steps::before {
        top: 34px;
        left: 34px;
        right: calc((100% - 4 * 20px) / 5 - 34px);
    }

    body .operations-sops-page .sops-process__icon {
        width: 68px;
        height: 68px;
    }

    body .operations-sops-page
    .sops-process__step:not(:last-child)::after {
        top: 31px;
        left: calc(100% + 10px);
    }

    body .operations-sops-page .sops-process__step-title {
        font-size: 17px;
    }

    body .operations-sops-page .sops-process__description {
        font-size: 12px;
    }
}


/* =========================================================
   10 — TABLET
   600px–1100px

   Native horizontal scrolling timeline
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .operations-sops-page .sops-process {
        padding: 85px 0 95px;
    }

    body .operations-sops-page .sops-process__inner {
        padding: 0 60px;
    }

    body .operations-sops-page .sops-process__intro {
        max-width: 850px;
        margin-bottom: 45px;
    }

    body .operations-sops-page .sops-process__eyebrow {
        margin-bottom: 21px;
        font-size: 12px;
    }

    body .operations-sops-page .sops-process__title {
        max-width: 830px;

        font-size: clamp(36px, 4.8vw, 50px);
    }

    /* SCROLL TRACK */

    body .operations-sops-page .sops-process__steps {
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;

        gap: 24px;

        overflow-x: auto;
        overflow-y: hidden;

        padding: 15px 0 28px;

        scroll-snap-type: x mandatory;
        scroll-padding-inline: 0;
        scroll-behavior: smooth;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;

        scrollbar-width: thin;
        scrollbar-color:
            #BE947E rgba(201,103,67,0.12);
    }

    body .operations-sops-page
    .sops-process__steps::-webkit-scrollbar {
        height: 5px;
    }

    body .operations-sops-page
    .sops-process__steps::-webkit-scrollbar-track {
        background: rgba(201,103,67,0.12);
        border-radius: 999px;
    }

    body .operations-sops-page
    .sops-process__steps::-webkit-scrollbar-thumb {
        background: #BE947E;
        border-radius: 999px;
    }

    /* TWO STEPS + NEXT PREVIEW */

    body .operations-sops-page .sops-process__step {
        flex: 0 0 calc((100% - 72px) / 2);

        min-width: 0;
        padding: 0 5px 8px 0;

        scroll-snap-align: start;
    }

    /* REMOVE DESKTOP CONNECTORS */

    body .operations-sops-page .sops-process__steps::before,
    body .operations-sops-page
    .sops-process__step::after {
        content: none !important;
        display: none !important;
    }

    body .operations-sops-page .sops-process__icon {
        width: 76px;
        height: 76px;

        margin-bottom: 23px;
    }

    body .operations-sops-page .sops-process__number {
        margin-bottom: 6px;
        font-size: 13px;
    }

    body .operations-sops-page .sops-process__step-title {
        margin-bottom: 11px;
        font-size: 20px;
    }

    body .operations-sops-page .sops-process__description {
        max-width: 360px;
        font-size: 14px;
    }
}


/* =========================================================
   11 — SMALL TABLET
   600px–749px
========================================================= */

@media (min-width: 600px) and (max-width: 749px) {

    body .operations-sops-page .sops-process {
        padding: 75px 0 85px;
    }

    body .operations-sops-page .sops-process__inner {
        padding: 0 42px;
    }

    body .operations-sops-page .sops-process__title {
        font-size: clamp(34px, 5.5vw, 43px);
    }

    body .operations-sops-page .sops-process__steps {
        gap: 20px;
    }

    body .operations-sops-page .sops-process__step {
        flex-basis: calc((100% - 60px) / 2);
    }

    body .operations-sops-page .sops-process__icon {
        width: 68px;
        height: 68px;
    }

    body .operations-sops-page .sops-process__step-title {
        font-size: 18px;
    }

    body .operations-sops-page .sops-process__description {
        font-size: 13px;
    }
}


/* =========================================================
   12 — MOBILE
   599px AND BELOW

   Vertical five-step timeline
========================================================= */

@media (max-width: 599px) {

    body .operations-sops-page .sops-process {
        padding: 75px 0 85px;
    }

    body .operations-sops-page .sops-process__inner {
        padding: 0 28px 0 34px;
    }

    /* INTRO */

    body .operations-sops-page .sops-process__intro {
        margin-bottom: 42px;
    }

    body .operations-sops-page .sops-process__eyebrow {
        margin-bottom: 20px;
        font-size: 11px;
    }

    body .operations-sops-page .sops-process__title {
        font-size: clamp(32px, 8vw, 43px);
        line-height: 1.16;
    }

    /* VERTICAL STEPS */

    body .operations-sops-page .sops-process__steps {
        display: flex;
        flex-direction: column;

        gap: 0;

        overflow: visible;
    }

    body .operations-sops-page .sops-process__steps::before {
        content: none !important;
        display: none !important;
    }

    body .operations-sops-page .sops-process__step {
        display: grid;

        grid-template-columns:
            64px minmax(0, 1fr);

        grid-template-rows:
            auto auto 1fr;

        column-gap: 18px;

        align-items: start;

        width: 100%;
        min-width: 0;

        padding: 0 0 42px;
    }

    body .operations-sops-page
    .sops-process__step:last-child {
        padding-bottom: 0;
    }

    /* MOBILE VERTICAL CONNECTOR */

    body .operations-sops-page
    .sops-process__step:not(:last-child)::before {
        content: "";

        position: absolute;
        z-index: 0;

        top: 69px;
        left: 30px;

        width: 1px;
        height: calc(100% - 77px);

        background: rgba(201,103,67,0.32);

        pointer-events: none;
    }

    body .operations-sops-page
    .sops-process__step::after {
        content: none !important;
        display: none !important;
    }

    /* ICON */

    body .operations-sops-page .sops-process__icon {
        grid-column: 1;
        grid-row: 1 / 4;

        width: 60px;
        height: 60px;

        margin: 0;
    }

    /* NUMBER */

    body .operations-sops-page .sops-process__number {
        grid-column: 2;
        grid-row: 1;

        margin: 1px 0 6px;

        font-size: 12px;
    }

    /* STEP TITLE */

    body .operations-sops-page .sops-process__step-title {
        grid-column: 2;
        grid-row: 2;

        margin: 0 0 10px;

        font-size: 19px;
    }

    /* DESCRIPTION */

    body .operations-sops-page .sops-process__description {
        grid-column: 2;
        grid-row: 3;

        max-width: 100%;

        margin: 0;

        font-size: 13px;
        line-height: 1.75;
    }
}


/* =========================================================
   13 — SMALL MOBILE
   374px AND BELOW
========================================================= */

@media (max-width: 374px) {

    body .operations-sops-page .sops-process {
        padding: 65px 0 75px;
    }

    body .operations-sops-page .sops-process__inner {
        padding: 0 23px 0 29px;
    }

    body .operations-sops-page .sops-process__title {
        font-size: 30px;
    }

    body .operations-sops-page .sops-process__step {
        grid-template-columns:
            54px minmax(0, 1fr);

        column-gap: 14px;
    }

    body .operations-sops-page .sops-process__icon {
        width: 52px;
        height: 52px;
    }

    body .operations-sops-page
    .sops-process__step:not(:last-child)::before {
        top: 60px;
        left: 26px;

        height: calc(100% - 68px);
    }

    body .operations-sops-page .sops-process__step-title {
        font-size: 17px;
    }

    body .operations-sops-page .sops-process__description {
        font-size: 12px;
    }
}


/* =========================================================
   14 — HOVER INTERACTIONS
========================================================= */

@media (hover: hover) and (pointer: fine) {

    body .operations-sops-page
    .sops-process__step:hover .sops-process__icon {
        transform: translateY(-4px) scale(1.045);

        box-shadow:
            0 8px 17px rgba(82,49,32,0.05),
            0 22px 38px rgba(82,49,32,0.11),
            inset 0 2px 1px rgba(255,255,255,0.95);
    }

    body .operations-sops-page
    .sops-process__step:hover svg {
        transform: scale(1.07);
    }
}


/* =========================================================
   15 — SCROLL ENTRANCE ANIMATIONS
========================================================= */

@keyframes sopsProcessReveal {
    from {
        opacity: 0;
        translate: 0 22px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

@media (prefers-reduced-motion: no-preference) {

    @supports (animation-timeline: view()) {

        body .operations-sops-page .sops-process__intro {
            animation: sopsProcessReveal linear both;

            animation-timeline: view();
            animation-range: entry 0% entry 55%;
        }

        body .operations-sops-page .sops-process__step {
            animation: sopsProcessReveal linear both;

            animation-timeline: view();
            animation-range: entry 0% entry 60%;
        }
    }
}


/* =========================================================
   16 — REDUCED-MOTION ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body .operations-sops-page .sops-process__intro,
    body .operations-sops-page .sops-process__step {
        animation: none !important;

        opacity: 1 !important;
        translate: none !important;
        transform: none !important;
    }

    body .operations-sops-page .sops-process__steps {
        scroll-behavior: auto !important;
    }

    body .operations-sops-page .sops-process__step,
    body .operations-sops-page .sops-process__icon,
    body .operations-sops-page .sops-process__icon svg {
        transition: none !important;
    }
}



/* =========================================================
   FRAYORA — OPERATIONS & SOPS
   SECTION 06 — FINAL CTA

   Desktop: 1101px+
   Tablet: 600px–1100px
   Mobile: 599px and below

   Bond-inspired architectural editorial CTA
   Deep olive background
   Luminous terracotta arch
   Fine horizontal architectural lines
   Soft atmospheric lighting
   Refined button shadows
   Responsive composition
   Reduced-motion accessibility

   NO BACKGROUND IMAGE
   NO PHP JAVASCRIPT REQUIRED
========================================================= */


/* =========================================================
   01 — SECTION FOUNDATION
========================================================= */

body .operations-sops-page .sops-final-cta {
    position: relative;
    isolation: isolate;

    display: block;

    width: 100%;
    margin: 0;
    padding: 0;

    overflow: hidden;
    box-sizing: border-box;

    background-color: #263428 !important;
    background-image: none !important;

    color: #F8F3EB;
}

body .operations-sops-page .sops-final-cta *,
body .operations-sops-page .sops-final-cta *::before,
body .operations-sops-page .sops-final-cta *::after {
    box-sizing: border-box;
}

/* Soft overall surface lighting */

body .operations-sops-page .sops-final-cta::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 0;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse 48% 115% at 50% 35%,
            rgba(198,145,91,0.16) 0%,
            rgba(145,119,77,0.065) 48%,
            transparent 100%
        );

    opacity: 0.9;
}

/* Subtle depth toward outer edges */

body .operations-sops-page .sops-final-cta::after {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 0;

    pointer-events: none;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.065),
        inset 0 24px 48px -45px rgba(0,0,0,0.4),
        inset 0 -35px 65px -48px rgba(0,0,0,0.35);
}


/* =========================================================
   02 — ARCHITECTURAL ART LAYER
========================================================= */

body .operations-sops-page .sops-final-cta__art {
    position: absolute;
    inset: 0;
    z-index: 1;

    overflow: hidden;
    pointer-events: none;
}


/* =========================================================
   03 — LARGE LUMINOUS ARCH
========================================================= */

body .operations-sops-page .sops-final-cta__arch {
    position: absolute;

    display: block;

    left: 50%;
    top: 0;

    width: 950px;
    height: 950px;

    border: 1.4px solid rgba(236,168,113,0.66);
    border-radius: 50%;

    transform: translateX(-50%);

    background: transparent;

    box-shadow:
        0 0 7px rgba(255,172,100,0.19),
        0 0 25px rgba(255,150,77,0.09),
        inset 0 0 8px rgba(255,184,124,0.07);
}

/* Delicate halo just outside the arch */

body .operations-sops-page .sops-final-cta__arch::before {
    content: "";

    position: absolute;
    inset: -2px;

    border: 1px solid rgba(244,185,131,0.13);
    border-radius: 50%;

    box-shadow:
        0 0 23px rgba(239,146,78,0.07);

    pointer-events: none;
}


/* =========================================================
   04 — HORIZONTAL ARCHITECTURAL LINE
========================================================= */

body .operations-sops-page .sops-final-cta__horizon {
    position: absolute;

    left: 0;
    right: 0;
    top: 58%;

    height: 1px;

    background: linear-gradient(
        90deg,
        rgba(225,144,87,0.15) 0%,
        rgba(234,151,91,0.65) 13%,
        rgba(234,151,91,0.15) 31%,
        transparent 43%,
        transparent 57%,
        rgba(234,151,91,0.15) 69%,
        rgba(234,151,91,0.65) 87%,
        rgba(225,144,87,0.15) 100%
    );

    pointer-events: none;
}

/* Small luminous endpoints */

body .operations-sops-page
.sops-final-cta__horizon::before,
body .operations-sops-page
.sops-final-cta__horizon::after {
    content: "";

    position: absolute;
    top: -2px;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background-color: #F0B27C;

    box-shadow:
        0 0 7px 2px rgba(255,186,115,0.33),
        0 0 15px rgba(255,163,90,0.24);
}

body .operations-sops-page
.sops-final-cta__horizon::before {
    left: 24%;
}

body .operations-sops-page
.sops-final-cta__horizon::after {
    right: 24%;
}


/* =========================================================
   05 — BOTTOM LIGHT ACCENT
========================================================= */

body .operations-sops-page .sops-final-cta__light {
    position: absolute;

    left: 50%;
    bottom: 9%;

    width: 65%;
    max-width: 980px;
    height: 1px;

    transform: translateX(-50%);

    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(235,153,98,0.24) 23%,
        rgba(255,209,148,0.84) 50%,
        rgba(235,153,98,0.24) 77%,
        transparent 100%
    );

    box-shadow:
        0 0 9px rgba(255,177,101,0.34),
        0 0 24px rgba(255,158,89,0.10);

    pointer-events: none;
}

body .operations-sops-page .sops-final-cta__light::after {
    content: "";

    position: absolute;
    left: 50%;
    top: -2px;

    width: 36px;
    height: 5px;

    transform: translateX(-50%);

    border-radius: 50%;

    background: rgba(255,221,171,0.62);

    filter: blur(4px);
}


/* =========================================================
   06 — MAIN CONTENT CONTAINER
========================================================= */

body .operations-sops-page .sops-final-cta__inner {
    position: relative;
    z-index: 3;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 1600px;

    margin: 0 auto;
}

body .operations-sops-page .sops-final-cta__content {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
    max-width: 950px;

    margin: 0 auto;

    text-align: center;
}


/* =========================================================
   07 — EDITORIAL HEADING
========================================================= */

body .operations-sops-page .sops-final-cta__title {
    width: 100%;
    margin: 0;
    padding: 0;

    font-family: "Manrope", "Inter", sans-serif !important;
    font-weight: 600;

    line-height: 1.13;
    letter-spacing: -0.052em;

    color: #F8F3EB !important;

    text-align: center;
    text-wrap: balance;

    text-shadow:
        0 3px 16px rgba(0,0,0,0.12);
}


/* =========================================================
   08 — FINE TERRACOTTA UNDERLINE
========================================================= */

body .operations-sops-page .sops-final-cta__accent {
    display: block;

    flex: 0 0 auto;

    width: 46px;
    height: 2px;

    border-radius: 999px;

    background-color: #DC7851;

    box-shadow:
        0 0 10px rgba(234,127,77,0.25);
}


/* =========================================================
   09 — TERRACOTTA BUTTON
========================================================= */

body .operations-sops-page .sops-final-cta__button {
    position: relative;
    z-index: 4;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 18px;

    width: fit-content;
    max-width: 100%;
    min-height: 55px;

    padding: 16px 30px;

    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 999px;

    background-color: #C96743 !important;
    background-image: none !important;

    color: #FFFFFF !important;

    font-family: "Inter", sans-serif !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;

    text-align: center;
    text-decoration: none !important;

    box-shadow:
        0 7px 17px rgba(0,0,0,0.16),
        0 20px 38px rgba(0,0,0,0.19),
        0 0 25px rgba(205,111,65,0.10),
        inset 0 1px 0 rgba(255,255,255,0.23);

    transition:
        transform 320ms cubic-bezier(.22,1,.36,1),
        background-color 320ms ease,
        box-shadow 320ms ease;
}

/* Refined top-edge highlight */

body .operations-sops-page
.sops-final-cta__button::before {
    content: "";

    position: absolute;
    inset: 1px;

    border-radius: inherit;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.17);

    pointer-events: none;
}

body .operations-sops-page .sops-final-cta__arrow {
    display: inline-block;
    flex: 0 0 auto;

    font-size: 22px;
    line-height: 1;

    color: inherit;

    transition: transform 300ms ease;
}

body .operations-sops-page
.sops-final-cta__button:focus-visible {
    outline: 2px solid #F8F3EB;
    outline-offset: 5px;
}


/* =========================================================
   10 — DESKTOP
   1101px AND ABOVE
========================================================= */

@media (min-width: 1101px) {

    body .operations-sops-page .sops-final-cta {
        min-height: 400px;
    }

    body .operations-sops-page .sops-final-cta__inner {
        min-height: 400px;
        padding: 72px 80px 78px;
    }

    body .operations-sops-page .sops-final-cta__content {
        max-width: 900px;
    }

    body .operations-sops-page .sops-final-cta__title {
        max-width: 850px;

        font-size: clamp(43px, 3.9vw, 61px);
    }

    body .operations-sops-page .sops-final-cta__accent {
        margin-top: 24px;
    }

    body .operations-sops-page .sops-final-cta__button {
        margin-top: 27px;
    }

    /* Arch extends beyond section boundaries */

    body .operations-sops-page .sops-final-cta__arch {
        width: 1050px;
        height: 1050px;

        top: 17px;
    }
}


/* =========================================================
   11 — TABLET
   600px–1100px
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .operations-sops-page .sops-final-cta {
        min-height: 410px;
    }

    body .operations-sops-page .sops-final-cta__inner {
        min-height: 410px;

        padding: 75px 60px 85px;
    }

    body .operations-sops-page .sops-final-cta__content {
        max-width: 800px;
    }

    body .operations-sops-page .sops-final-cta__title {
        max-width: 750px;

        font-size: clamp(39px, 5.3vw, 55px);
    }

    body .operations-sops-page .sops-final-cta__accent {
        margin-top: 24px;
    }

    body .operations-sops-page .sops-final-cta__button {
        margin-top: 28px;
    }

    /* Tablet architectural arch */

    body .operations-sops-page .sops-final-cta__arch {
        width: 810px;
        height: 810px;

        top: 25px;
    }

    body .operations-sops-page .sops-final-cta__horizon {
        top: 60%;
    }

    body .operations-sops-page
    .sops-final-cta__horizon::before {
        left: 15%;
    }

    body .operations-sops-page
    .sops-final-cta__horizon::after {
        right: 15%;
    }

    body .operations-sops-page .sops-final-cta__light {
        width: 75%;
    }
}


/* =========================================================
   12 — SMALL TABLET
   600px–749px
========================================================= */

@media (min-width: 600px) and (max-width: 749px) {

    body .operations-sops-page .sops-final-cta {
        min-height: 390px;
    }

    body .operations-sops-page .sops-final-cta__inner {
        min-height: 390px;
        padding: 70px 43px 80px;
    }

    body .operations-sops-page .sops-final-cta__title {
        font-size: clamp(36px, 5.8vw, 44px);
    }

    body .operations-sops-page .sops-final-cta__arch {
        width: 700px;
        height: 700px;
    }
}


/* =========================================================
   13 — MOBILE
   599px AND BELOW
========================================================= */

@media (max-width: 599px) {

    body .operations-sops-page .sops-final-cta {
        min-height: 360px;
    }

    body .operations-sops-page .sops-final-cta__inner {
        min-height: 360px;
        padding: 75px 29px 85px;
    }

    body .operations-sops-page .sops-final-cta__content {
        max-width: 480px;
    }

    body .operations-sops-page .sops-final-cta__title {
        font-size: clamp(30px, 8vw, 42px);
        line-height: 1.17;
        letter-spacing: -0.048em;
    }

    body .operations-sops-page .sops-final-cta__accent {
        width: 40px;
        margin-top: 23px;
    }

    body .operations-sops-page .sops-final-cta__button {
        gap: 13px;

        min-height: 54px;
        margin-top: 26px;

        padding: 15px 24px;

        font-size: 13px;
    }

    body .operations-sops-page .sops-final-cta__arrow {
        font-size: 20px;
    }

    /* Arch scaled around mobile heading */

    body .operations-sops-page .sops-final-cta__arch {
        width: 510px;
        height: 510px;

        top: 17px;

        border-color: rgba(236,168,113,0.52);
    }

    /* Less intense atmospheric effect */

    body .operations-sops-page .sops-final-cta::before {
        background:
            radial-gradient(
                ellipse 74% 90% at 50% 38%,
                rgba(198,145,91,0.12) 0%,
                transparent 100%
            );
    }

    body .operations-sops-page .sops-final-cta__horizon {
        top: 63%;
    }

    body .operations-sops-page
    .sops-final-cta__horizon::before {
        left: 6%;
    }

    body .operations-sops-page
    .sops-final-cta__horizon::after {
        right: 6%;
    }

    body .operations-sops-page .sops-final-cta__light {
        width: 78%;
        bottom: 9%;
    }
}


/* =========================================================
   14 — SMALL MOBILE
   374px AND BELOW
========================================================= */

@media (max-width: 374px) {

    body .operations-sops-page .sops-final-cta__inner {
        padding: 70px 23px 80px;
    }

    body .operations-sops-page .sops-final-cta__title {
        font-size: clamp(27px, 8vw, 32px);
    }

    body .operations-sops-page .sops-final-cta__button {
        padding: 14px 20px;
        gap: 11px;
        font-size: 12px;
    }

    body .operations-sops-page .sops-final-cta__arch {
        width: 430px;
        height: 430px;
    }
}


/* =========================================================
   15 — HOVER EFFECTS
========================================================= */

@media (hover: hover) and (pointer: fine) {

    body .operations-sops-page
    .sops-final-cta__button:hover {
        background-color: #B95635 !important;
        color: #FFFFFF !important;

        transform: translateY(-3px);

        box-shadow:
            0 10px 23px rgba(0,0,0,0.19),
            0 25px 45px rgba(0,0,0,0.23),
            0 0 30px rgba(205,111,65,0.14),
            inset 0 1px 0 rgba(255,255,255,0.26);
    }

    body .operations-sops-page
    .sops-final-cta__button:hover
    .sops-final-cta__arrow {
        transform: translateX(5px);
    }
}


/* =========================================================
   16 — ENTRANCE ANIMATIONS
========================================================= */

@keyframes sopsFinalCtaReveal {
    from {
        opacity: 0;
        translate: 0 22px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

@media (prefers-reduced-motion: no-preference) {

    @supports (animation-timeline: view()) {

        body .operations-sops-page .sops-final-cta__title {
            animation: sopsFinalCtaReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 55%;
        }

        body .operations-sops-page .sops-final-cta__accent {
            animation: sopsFinalCtaReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 60%;
        }

        body .operations-sops-page .sops-final-cta__button {
            animation: sopsFinalCtaReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 65%;
        }
    }
}


/* =========================================================
   17 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body .operations-sops-page .sops-final-cta__title,
    body .operations-sops-page .sops-final-cta__accent,
    body .operations-sops-page .sops-final-cta__button {
        animation: none !important;

        opacity: 1 !important;
        translate: none !important;
    }

    body .operations-sops-page .sops-final-cta__button,
    body .operations-sops-page .sops-final-cta__arrow {
        transition: none !important;
    }

    body .operations-sops-page
    .sops-final-cta__button:hover,
    body .operations-sops-page
    .sops-final-cta__button:hover
    .sops-final-cta__arrow {
        transform: none !important;
    }
}




/* =========================================================
   FRAYORA — EMPLOYEE & KNOWLEDGE SYSTEMS
   SECTION 01 — COMPLETE RESPONSIVE HERO

   DESKTOP: 1101px+
   TABLET: 600px–1100px
   MOBILE: 599px AND BELOW

   Approved Frayora service-page standards:
   600px desktop hero height
   Manrope / Inter typography
   Deep olive architectural background
   CSS-only floating illustration
   Contrast overlays and subtle luminosity
   Layered shadows and animations
   Responsive visual-first mobile layout
   Reduced-motion accessibility
========================================================= */


/* =========================================================
   01 — HERO FOUNDATION
========================================================= */

body .employee-knowledge-page .eks-hero {
    position: relative;
    isolation: isolate;

    display: block;

    width: 100%;
    margin: 0;
    padding: 0;

    overflow: hidden;
    box-sizing: border-box;

    background-color: #263428 !important;

    background-image:
        url("../images/Business in a box/herodesktop.png") !important;

    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;

    color: #F8F3EB;
}

body .employee-knowledge-page .eks-hero *,
body .employee-knowledge-page .eks-hero *::before,
body .employee-knowledge-page .eks-hero *::after {
    box-sizing: border-box;
}


/* =========================================================
   02 — DARK OLIVE OVERLAY
========================================================= */

body .employee-knowledge-page .eks-hero::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 0;

    pointer-events: none;

    background: linear-gradient(
        90deg,
        rgba(17,27,19,0.72) 0%,
        rgba(17,27,19,0.55) 33%,
        rgba(17,27,19,0.22) 58%,
        rgba(17,27,19,0.04) 85%
    );
}


/* =========================================================
   03 — SUBTLE LUMINOUS FINISH
========================================================= */

body .employee-knowledge-page .eks-hero::after {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 1;

    pointer-events: none;

    background: linear-gradient(
        115deg,
        transparent 35%,
        rgba(255,248,225,0.012) 60%,
        rgba(255,248,225,0.045) 86%,
        transparent 100%
    );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.07),
        inset 0 -22px 42px -45px rgba(0,0,0,0.24);
}


/* =========================================================
   04 — MAIN HERO CONTAINER
========================================================= */

body .employee-knowledge-page .eks-hero__inner {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1600px;

    margin: 0 auto;
}

body .employee-knowledge-page .eks-hero__content {
    position: relative;
    z-index: 4;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    text-align: left;
}


/* =========================================================
   05 — EYEBROW
========================================================= */

body .employee-knowledge-page .eks-hero__eyebrow {
    display: block;

    margin: 0;
    padding: 0;

    font-family: "Inter", sans-serif !important;
    font-weight: 600;

    line-height: 1.4;
    letter-spacing: 0.14em;
    text-transform: uppercase;

    color: #E4D5BF !important;

    text-align: left;
}


/* =========================================================
   06 — HEADING
========================================================= */

body .employee-knowledge-page .eks-hero__title {
    display: block;

    width: 100%;
    margin: 0;
    padding: 0;

    font-family: "Manrope", "Inter", sans-serif !important;
    font-weight: 600;

    line-height: 1.14;
    letter-spacing: -0.052em;

    color: #F8F3EB !important;

    text-align: left;
    text-wrap: balance;

    text-shadow:
        0 3px 18px rgba(0,0,0,0.18);
}


/* =========================================================
   07 — BODY COPY
========================================================= */

body .employee-knowledge-page .eks-hero__body {
    display: block;

    width: 100%;
    margin: 0;
    padding: 0;

    font-family: "Inter", sans-serif !important;
    font-weight: 400;

    line-height: 1.75;

    color: rgba(248,243,235,0.94) !important;

    text-align: left;
}


/* =========================================================
   08 — TERRACOTTA CTA
========================================================= */

body .employee-knowledge-page .eks-hero__button {
    position: relative;
    z-index: 4;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 18px;

    width: fit-content;
    max-width: 100%;
    min-height: 55px;

    padding: 16px 30px;

    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 999px;

    background-color: #C96743 !important;
    background-image: none !important;

    color: #FFFFFF !important;

    font-family: "Inter", sans-serif !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;

    text-decoration: none !important;

    box-shadow:
        0 7px 17px rgba(0,0,0,0.15),
        0 19px 37px rgba(0,0,0,0.20),
        inset 0 1px 0 rgba(255,255,255,0.23);

    transition:
        transform 320ms cubic-bezier(.22,1,.36,1),
        background-color 320ms ease,
        box-shadow 320ms ease;
}

body .employee-knowledge-page .eks-hero__arrow {
    display: inline-block;
    flex: 0 0 auto;

    font-family: "Inter", sans-serif !important;
    font-size: 22px;
    line-height: 1;

    color: inherit;

    transition: transform 300ms ease;
}

body .employee-knowledge-page
.eks-hero__button:focus-visible {
    outline: 2px solid #F8F3EB;
    outline-offset: 5px;
}


/* =========================================================
   09 — CSS FLOATING HERO VISUAL
========================================================= */

body .employee-knowledge-page .eks-hero__visual {
    position: relative;
    z-index: 3;

    display: block;

    flex-shrink: 0;
    min-width: 0;

    background-image:
        url("../images/employee%20knowledge%20systems/hero.png") !important;

    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;

    pointer-events: none;

    filter:
        drop-shadow(0 14px 22px rgba(4,13,7,0.12))
        drop-shadow(0 28px 48px rgba(4,13,7,0.20));

    transform-origin: center;

    animation:
        eksHeroVisualEntrance 950ms
        cubic-bezier(.22,1,.36,1)
        150ms both,
        eksHeroFloating 7.5s ease-in-out
        1200ms infinite;
}


/* =========================================================
   10 — DESKTOP
   1101px AND ABOVE

   APPROVED 600PX HERO HEIGHT
========================================================= */

@media (min-width: 1101px) {

    body .employee-knowledge-page .eks-hero {
        height: 600px;
        min-height: 600px;
    }

    body .employee-knowledge-page .eks-hero__inner {
        display: grid;

        grid-template-columns:
            minmax(0, 1.02fr)
            minmax(0, 0.98fr);

        column-gap: 30px;
        align-items: center;

        height: 600px;
        min-height: 600px;

        padding: 45px 80px;
    }

    body .employee-knowledge-page .eks-hero__content {
        max-width: 650px;
    }

    body .employee-knowledge-page .eks-hero__eyebrow {
        margin-bottom: 20px;

        font-size: 12px;
    }

    body .employee-knowledge-page .eks-hero__title {
        max-width: 660px;

        font-size: clamp(39px, 3.35vw, 54px);
    }

    body .employee-knowledge-page .eks-hero__body {
        max-width: 590px;

        margin-top: 25px;

        font-size: 14px;
    }

    body .employee-knowledge-page .eks-hero__button {
        margin-top: 28px;
    }

    /* Floating visual */

    body .employee-knowledge-page .eks-hero__visual {
        width: clamp(520px, 43vw, 700px);
        max-width: none;

        height: 515px;

        justify-self: center;
        align-self: center;

        margin: 0;
    }
}


/* =========================================================
   11 — LARGE DESKTOP
   1450px AND ABOVE
========================================================= */

@media (min-width: 1450px) {

    body .employee-knowledge-page .eks-hero__title {
        font-size: 52px;
    }

    body .employee-knowledge-page .eks-hero__body {
        font-size: 15px;
    }

    body .employee-knowledge-page .eks-hero__visual {
        width: min(43vw, 710px);
        height: 530px;
    }
}


/* =========================================================
   12 — TABLET
   600px–1100px

   VISUAL ABOVE CONTENT
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .employee-knowledge-page .eks-hero {
        height: auto;
        min-height: 850px;

        background-image:
            url("../images/Business in a box/herotablet.png") !important;

        background-position: center center;
        background-size: cover;
    }

    /* Darker lower area for copy readability */

    body .employee-knowledge-page .eks-hero::before {
        background: linear-gradient(
            180deg,
            rgba(17,27,19,0.16) 0%,
            rgba(17,27,19,0.25) 32%,
            rgba(17,27,19,0.54) 60%,
            rgba(17,27,19,0.70) 100%
        );
    }

    body .employee-knowledge-page .eks-hero__inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        min-height: 850px;

        padding: 65px 60px 115px;
    }

    /* Visual first */

    body .employee-knowledge-page .eks-hero__visual {
        order: -1;

        align-self: flex-end;

        width: clamp(360px, 58vw, 650px);
        max-width: 100%;

        height: clamp(300px, 45vw, 510px);

        margin: 0 -8px 22px 0;
    }

    body .employee-knowledge-page .eks-hero__content {
        max-width: 920px;
    }

    body .employee-knowledge-page .eks-hero__eyebrow {
        margin-bottom: 24px;

        font-size: 13px;
    }

    body .employee-knowledge-page .eks-hero__title {
        max-width: 810px;

        font-size: clamp(42px, 5.2vw, 59px);
    }

    body .employee-knowledge-page .eks-hero__body {
        max-width: 850px;

        margin-top: 30px;

        font-size: 16px;
        line-height: 1.8;
    }

    body .employee-knowledge-page .eks-hero__button {
        min-height: 58px;

        margin-top: 31px;
        padding: 17px 32px;

        font-size: 15px;
    }
}


/* =========================================================
   13 — SMALL TABLET
   600px–749px
========================================================= */

@media (min-width: 600px) and (max-width: 749px) {

    body .employee-knowledge-page .eks-hero__inner {
        padding: 65px 43px 115px;
    }

    body .employee-knowledge-page .eks-hero__visual {
        width: 83%;
        max-width: 510px;

        height: 350px;

        margin-right: 0;
        margin-bottom: 25px;
    }

    body .employee-knowledge-page .eks-hero__title {
        font-size: clamp(37px, 6.2vw, 46px);
    }

    body .employee-knowledge-page .eks-hero__body {
        font-size: 15px;
    }
}


/* =========================================================
   14 — MOBILE
   599px AND BELOW
========================================================= */

@media (max-width: 599px) {

    body .employee-knowledge-page .eks-hero {
        height: auto;
        min-height: 0;

        background-image:
            url("../images/Business in a box/heromobile.png") !important;

        background-position: 60% center;
        background-size: cover;
    }

    /* Mobile contrast overlay */

    body .employee-knowledge-page .eks-hero::before {
        background: linear-gradient(
            180deg,
            rgba(16,26,18,0.16) 0%,
            rgba(16,26,18,0.27) 28%,
            rgba(16,26,18,0.54) 48%,
            rgba(16,26,18,0.69) 72%,
            rgba(16,26,18,0.70) 100%
        );
    }

    body .employee-knowledge-page .eks-hero__inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        width: 100%;

        padding: 58px 28px 105px 34px;
    }

    /* Floating visual */

    body .employee-knowledge-page .eks-hero__visual {
        order: -1;

        align-self: center;

        width: 100%;
        max-width: 420px;

        height: clamp(225px, 67vw, 310px);

        margin: 0 auto 12px;
    }

    body .employee-knowledge-page .eks-hero__content {
        width: 100%;
    }

    /* Eyebrow */

    body .employee-knowledge-page .eks-hero__eyebrow {
        margin-bottom: 19px;

        font-size: 10px;
        line-height: 1.55;

        letter-spacing: 0.13em;
    }

    /* Heading */

    body .employee-knowledge-page .eks-hero__title {
        max-width: 520px;

        font-size: clamp(31px, 8.15vw, 43px);
        line-height: 1.16;

        letter-spacing: -0.05em;
        text-wrap: pretty;
    }

    /* Body */

    body .employee-knowledge-page .eks-hero__body {
        max-width: 520px;

        margin-top: 28px;

        font-size: 14px;
        line-height: 1.8;
    }

    /* CTA */

    body .employee-knowledge-page .eks-hero__button {
        gap: 16px;

        min-height: 55px;

        margin-top: 31px;
        padding: 16px 24px;

        font-size: 13px;
    }

    body .employee-knowledge-page .eks-hero__arrow {
        font-size: 21px;
    }
}


/* =========================================================
   15 — SMALL MOBILE
   374px AND BELOW
========================================================= */

@media (max-width: 374px) {

    body .employee-knowledge-page .eks-hero__inner {
        padding: 53px 23px 90px 29px;
    }

    body .employee-knowledge-page .eks-hero__visual {
        height: 225px;
        margin-bottom: 10px;
    }

    body .employee-knowledge-page .eks-hero__eyebrow {
        margin-bottom: 18px;
        font-size: 9.5px;
    }

    body .employee-knowledge-page .eks-hero__title {
        font-size: clamp(29px, 8.3vw, 33px);
    }

    body .employee-knowledge-page .eks-hero__body {
        margin-top: 25px;
        font-size: 13px;
    }

    body .employee-knowledge-page .eks-hero__button {
        gap: 12px;

        padding: 15px 21px;
        font-size: 12px;
    }
}


/* =========================================================
   16 — HOVER INTERACTIONS
========================================================= */

@media (hover: hover) and (pointer: fine) {

    body .employee-knowledge-page
    .eks-hero__button:hover {
        background-color: #B95635 !important;
        color: #FFFFFF !important;

        transform: translateY(-3px);

        box-shadow:
            0 11px 23px rgba(0,0,0,0.18),
            0 25px 43px rgba(0,0,0,0.22),
            inset 0 1px 0 rgba(255,255,255,0.26);
    }

    body .employee-knowledge-page
    .eks-hero__button:hover
    .eks-hero__arrow {
        transform: translateX(5px);
    }
}


/* =========================================================
   17 — TEXT ENTRANCE ANIMATION
========================================================= */

@keyframes eksHeroTextEntrance {
    from {
        opacity: 0;
        translate: 0 22px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

@media (prefers-reduced-motion: no-preference) {

    body .employee-knowledge-page .eks-hero__eyebrow,
    body .employee-knowledge-page .eks-hero__title,
    body .employee-knowledge-page .eks-hero__body,
    body .employee-knowledge-page .eks-hero__button {
        animation:
            eksHeroTextEntrance 850ms
            cubic-bezier(.22,1,.36,1) both;
    }

    body .employee-knowledge-page .eks-hero__eyebrow {
        animation-delay: 80ms;
    }

    body .employee-knowledge-page .eks-hero__title {
        animation-delay: 170ms;
    }

    body .employee-knowledge-page .eks-hero__body {
        animation-delay: 280ms;
    }

    body .employee-knowledge-page .eks-hero__button {
        animation-delay: 390ms;
    }
}


/* =========================================================
   18 — FLOATING VISUAL ANIMATIONS
========================================================= */

@keyframes eksHeroVisualEntrance {
    from {
        opacity: 0;
        translate: 0 22px;
        scale: 0.97;
    }

    to {
        opacity: 1;
        translate: 0 0;
        scale: 1;
    }
}

@keyframes eksHeroFloating {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }
}


/* =========================================================
   19 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body .employee-knowledge-page .eks-hero__eyebrow,
    body .employee-knowledge-page .eks-hero__title,
    body .employee-knowledge-page .eks-hero__body,
    body .employee-knowledge-page .eks-hero__button,
    body .employee-knowledge-page .eks-hero__visual {
        animation: none !important;

        opacity: 1 !important;
        translate: none !important;
        scale: 1 !important;
        transform: none !important;
    }

    body .employee-knowledge-page .eks-hero__button,
    body .employee-knowledge-page .eks-hero__arrow {
        transition: none !important;
    }
}



/* =========================================================
   FRAYORA — EMPLOYEE & KNOWLEDGE SYSTEMS
   SECTION 02 — A CLEAR PATH FOR YOUR PEOPLE

   COMPLETE REPLACEMENT CSS

   DESKTOP: 1101px+
   TABLET: 600px–1100px
   MOBILE: 599px and below

   Bond-inspired editorial SaaS design
   Solid ivory background
   Open, connected journey — NO cards
   Alternating olive and terracotta medallions
   Refined shadows, depth and hover interactions
   Scroll-driven entrance animations
   Reduced-motion accessibility
========================================================= */


/* =========================================================
   01 — SECTION FOUNDATION
========================================================= */

body .employee-knowledge-page .eks-path {
    position: relative;
    isolation: isolate;

    width: 100%;
    margin: 0;
    padding: 0;

    box-sizing: border-box;
    overflow: hidden;

    background-color: #F8F3EB !important;
    background-image: none !important;

    color: #1F211D;
}

body .employee-knowledge-page .eks-path *,
body .employee-knowledge-page .eks-path *::before,
body .employee-knowledge-page .eks-path *::after {
    box-sizing: border-box;
}

body .employee-knowledge-page .eks-path::before,
body .employee-knowledge-page .eks-path::after {
    content: none !important;
    display: none !important;
}


/* =========================================================
   02 — MAIN CONTAINER
========================================================= */

body .employee-knowledge-page .eks-path__inner {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1600px;

    margin: 0 auto;
}

body .employee-knowledge-page .eks-path__intro {
    position: relative;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    text-align: left;
}


/* =========================================================
   03 — TYPOGRAPHY
========================================================= */

body .employee-knowledge-page .eks-path__title {
    width: 100%;
    margin: 0;

    font-family: "Manrope", "Inter", sans-serif !important;
    font-weight: 600;

    line-height: 1.15;
    letter-spacing: -0.052em;

    color: #1F211D;

    text-align: left;
    text-wrap: balance;
}

body .employee-knowledge-page .eks-path__body {
    width: 100%;
    margin: 0;

    font-family: "Inter", sans-serif !important;
    font-weight: 400;

    line-height: 1.75;

    color: rgba(31,33,29,0.75);

    text-align: left;
}


/* =========================================================
   04 — OPEN JOURNEY LAYOUT
========================================================= */

body .employee-knowledge-page .eks-path__steps {
    position: relative;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    list-style: none;
    list-style-type: none;
}

body .employee-knowledge-page .eks-path__step {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    list-style: none;

    text-align: left;
}

body .employee-knowledge-page .eks-path__step::marker {
    content: "";
}


/* =========================================================
   05 — DIMENSIONAL ICON MEDALLIONS
========================================================= */

body .employee-knowledge-page .eks-path__icon {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border-radius: 50%;

    transition:
        transform 420ms cubic-bezier(.22,1,.36,1),
        box-shadow 420ms ease;
}

/* OLIVE — 01 AND 03 */

body .employee-knowledge-page .eks-path__icon--olive {
    background-color: #E6E9DF;

    background-image: linear-gradient(
        145deg,
        #F8F9F2 0%,
        #E9ECE2 52%,
        #DCE2D5 100%
    );

    border: 1px solid rgba(85,110,82,0.13);

    box-shadow:
        0 5px 12px rgba(48,65,44,0.04),
        0 16px 28px rgba(48,65,44,0.08),
        inset 0 2px 1px rgba(255,255,255,0.92),
        inset 0 -5px 10px rgba(75,93,68,0.045);
}

/* TERRACOTTA — 02 AND 04 */

body .employee-knowledge-page .eks-path__icon--terracotta {
    background-color: #F3E1D5;

    background-image: linear-gradient(
        145deg,
        #FFF7F0 0%,
        #F5E5D8 52%,
        #ECD5C5 100%
    );

    border: 1px solid rgba(181,112,78,0.13);

    box-shadow:
        0 5px 12px rgba(89,55,35,0.04),
        0 16px 28px rgba(89,55,35,0.08),
        inset 0 2px 1px rgba(255,255,255,0.92),
        inset 0 -5px 10px rgba(137,87,58,0.045);
}

/* Fine inner ring */

body .employee-knowledge-page .eks-path__icon::before {
    content: "";

    position: absolute;
    inset: 5px;

    border: 1px solid rgba(255,255,255,0.72);
    border-radius: 50%;

    pointer-events: none;
}

/* SVG ICONS */

body .employee-knowledge-page .eks-path__icon svg {
    position: relative;
    z-index: 2;

    display: block;

    width: 43%;
    height: 43%;

    fill: none;
    stroke-width: 1.85;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition: transform 420ms ease;
}

body .employee-knowledge-page .eks-path__icon--olive svg {
    stroke: #4D604C;
}

body .employee-knowledge-page .eks-path__icon--terracotta svg {
    stroke: #B65D3A;
}


/* =========================================================
   06 — STEP TYPOGRAPHY
========================================================= */

body .employee-knowledge-page .eks-path__number {
    display: block;

    margin: 0;

    font-family: "Inter", sans-serif !important;
    font-weight: 700;

    line-height: 1.3;
    letter-spacing: 0.01em;

    color: #C96743;
}

body .employee-knowledge-page .eks-path__step-title {
    width: 100%;
    margin: 0;

    font-family: "Manrope", "Inter", sans-serif !important;
    font-weight: 650;

    line-height: 1.32;
    letter-spacing: -0.035em;

    color: #1F211D;

    overflow-wrap: break-word;
}

body .employee-knowledge-page .eks-path__description {
    width: 100%;
    margin: 0;

    font-family: "Inter", sans-serif !important;
    font-weight: 400;

    line-height: 1.75;

    color: rgba(31,33,29,0.75);

    overflow-wrap: break-word;
}


/* =========================================================
   07 — DESKTOP
   1101px AND ABOVE
========================================================= */

@media (min-width: 1101px) {

    body .employee-knowledge-page .eks-path {
        padding: 105px 0 115px;
    }

    body .employee-knowledge-page .eks-path__inner {
        padding: 0 80px;
    }

    body .employee-knowledge-page .eks-path__intro {
        max-width: 1050px;
        margin-bottom: 65px;
    }

    body .employee-knowledge-page .eks-path__title {
        max-width: 1000px;

        font-size: clamp(40px, 3.5vw, 54px);
    }

    body .employee-knowledge-page .eks-path__body {
        max-width: 850px;

        margin-top: 25px;

        font-size: 15px;
        line-height: 1.8;
    }

    /* FOUR-COLUMN JOURNEY */

    body .employee-knowledge-page .eks-path__steps {
        column-gap: 42px;
    }

    body .employee-knowledge-page .eks-path__step {
        padding-right: 5px;
    }

    body .employee-knowledge-page .eks-path__icon {
        width: 92px;
        height: 92px;

        margin-bottom: 34px;
    }

    /* Connector between icon centers */

    body .employee-knowledge-page
    .eks-path__step:not(:last-child)::before {
        content: "";

        position: absolute;
        z-index: 0;

        top: 46px;
        left: 112px;

        width: calc(100% - 65px);
        height: 1px;

        background-color: rgba(201,103,67,0.34);
    }

    body .employee-knowledge-page
    .eks-path__step:not(:last-child)::after {
        content: "";

        position: absolute;
        z-index: 1;

        top: 42px;
        right: -21px;

        width: 8px;
        height: 8px;

        border: 1px solid rgba(201,103,67,0.60);
        border-radius: 50%;

        background-color: #F8F3EB;
    }

    body .employee-knowledge-page .eks-path__number {
        margin-bottom: 8px;
        font-size: 13px;
    }

    body .employee-knowledge-page .eks-path__step-title {
        margin-bottom: 15px;
        font-size: 21px;
    }

    body .employee-knowledge-page .eks-path__description {
        max-width: 310px;
        font-size: 14px;
    }
}


/* =========================================================
   08 — MID-SIZE DESKTOP
   1101px–1350px
========================================================= */

@media (min-width: 1101px) and (max-width: 1350px) {

    body .employee-knowledge-page .eks-path__inner {
        padding: 0 60px;
    }

    body .employee-knowledge-page .eks-path__steps {
        column-gap: 28px;
    }

    body .employee-knowledge-page .eks-path__icon {
        width: 78px;
        height: 78px;
    }

    body .employee-knowledge-page
    .eks-path__step:not(:last-child)::before {
        top: 39px;
        left: 96px;
        width: calc(100% - 52px);
    }

    body .employee-knowledge-page
    .eks-path__step:not(:last-child)::after {
        top: 35px;
        right: -14px;
    }

    body .employee-knowledge-page .eks-path__step-title {
        font-size: 19px;
    }

    body .employee-knowledge-page .eks-path__description {
        font-size: 13px;
    }
}


/* =========================================================
   09 — TABLET
   600px–1100px

   TWO COLUMNS / TWO ROWS
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .employee-knowledge-page .eks-path {
        padding: 90px 0 100px;
    }

    body .employee-knowledge-page .eks-path__inner {
        padding: 0 60px;
    }

    body .employee-knowledge-page .eks-path__intro {
        max-width: 850px;
        margin-bottom: 55px;
    }

    body .employee-knowledge-page .eks-path__title {
        max-width: 800px;

        font-size: clamp(37px, 4.8vw, 51px);
    }

    body .employee-knowledge-page .eks-path__body {
        max-width: 780px;

        margin-top: 24px;

        font-size: 16px;
        line-height: 1.8;
    }

    /* FORCE TWO COLUMNS */

    body .employee-knowledge-page .eks-path__steps {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        column-gap: 60px;
        row-gap: 65px;

        align-items: start;
    }

    body .employee-knowledge-page .eks-path__step {
        width: 100%;
        min-width: 0;

        padding-right: 8px;
    }

    /* ICON */

    body .employee-knowledge-page .eks-path__icon {
        width: 85px;
        height: 85px;

        margin-bottom: 27px;
    }

    /* CONNECTIONS — FIRST AND THIRD STEPS */

    body .employee-knowledge-page
    .eks-path__step::before,
    body .employee-knowledge-page
    .eks-path__step::after {
        content: none;
        display: none;
    }

    body .employee-knowledge-page
    .eks-path__step:nth-child(odd)::before {
        content: "";
        display: block;

        position: absolute;
        z-index: 0;

        top: 42px;
        left: 103px;

        width: calc(100% - 45px);
        height: 1px;

        background-color: rgba(201,103,67,0.32);
    }

    body .employee-knowledge-page
    .eks-path__step:nth-child(odd)::after {
        content: "";
        display: block;

        position: absolute;
        z-index: 1;

        top: 39px;
        right: -30px;

        width: 7px;
        height: 7px;

        border: 1px solid rgba(201,103,67,0.60);
        border-radius: 50%;

        background-color: #F8F3EB;
    }

    /* STEP TYPOGRAPHY */

    body .employee-knowledge-page .eks-path__number {
        margin-bottom: 8px;
        font-size: 13px;
    }

    body .employee-knowledge-page .eks-path__step-title {
        margin-bottom: 13px;
        font-size: 21px;
    }

    body .employee-knowledge-page .eks-path__description {
        max-width: 400px;

        font-size: 14px;
        line-height: 1.8;
    }
}


/* =========================================================
   10 — SMALL TABLET
   600px–749px
========================================================= */

@media (min-width: 600px) and (max-width: 749px) {

    body .employee-knowledge-page .eks-path {
        padding: 80px 0 90px;
    }

    body .employee-knowledge-page .eks-path__inner {
        padding: 0 42px;
    }

    body .employee-knowledge-page .eks-path__steps {
        column-gap: 40px;
        row-gap: 55px;
    }

    body .employee-knowledge-page .eks-path__icon {
        width: 72px;
        height: 72px;
    }

    body .employee-knowledge-page
    .eks-path__step:nth-child(odd)::before {
        top: 36px;
        left: 88px;
        width: calc(100% - 37px);
    }

    body .employee-knowledge-page
    .eks-path__step:nth-child(odd)::after {
        top: 33px;
        right: -20px;
    }

    body .employee-knowledge-page .eks-path__step-title {
        font-size: 19px;
    }

    body .employee-knowledge-page .eks-path__description {
        font-size: 13px;
    }
}


/* =========================================================
   11 — MOBILE
   599px AND BELOW

   VERTICAL CONNECTED JOURNEY
========================================================= */

@media (max-width: 599px) {

    body .employee-knowledge-page .eks-path {
        padding: 75px 0 85px;
    }

    body .employee-knowledge-page .eks-path__inner {
        padding: 0 28px 0 34px;
    }

    body .employee-knowledge-page .eks-path__intro {
        margin-bottom: 42px;
    }

    body .employee-knowledge-page .eks-path__title {
        font-size: clamp(32px, 8vw, 43px);
        line-height: 1.16;
    }

    body .employee-knowledge-page .eks-path__body {
        margin-top: 25px;

        font-size: 14px;
        line-height: 1.8;
    }

    /* FORCE VERTICAL LAYOUT */

    body .employee-knowledge-page .eks-path__steps {
        display: flex;
        flex-direction: column;

        align-items: stretch;
        gap: 0;

        width: 100%;
        overflow: visible;
    }

    body .employee-knowledge-page .eks-path__step {
        display: grid;

        grid-template-columns:
            66px minmax(0, 1fr);

        grid-template-rows:
            auto auto 1fr;

        column-gap: 19px;

        align-items: start;

        width: 100%;
        min-width: 0;

        padding: 0 0 43px;
    }

    body .employee-knowledge-page
    .eks-path__step:last-child {
        padding-bottom: 0;
    }

    /* VERTICAL CONNECTOR */

    body .employee-knowledge-page
    .eks-path__step:not(:last-child)::before {
        content: "";
        display: block;

        position: absolute;
        z-index: 0;

        top: 73px;
        left: 32px;

        width: 1px;
        height: calc(100% - 81px);

        background-color: rgba(201,103,67,0.30);
    }

    body .employee-knowledge-page
    .eks-path__step::after {
        content: none !important;
        display: none !important;
    }

    /* ICONS */

    body .employee-knowledge-page .eks-path__icon {
        grid-column: 1;
        grid-row: 1 / 4;

        width: 64px;
        height: 64px;

        margin: 0;
    }

    /* NUMBER */

    body .employee-knowledge-page .eks-path__number {
        grid-column: 2;
        grid-row: 1;

        margin: 1px 0 6px;

        font-size: 12px;
    }

    /* HEADING */

    body .employee-knowledge-page .eks-path__step-title {
        grid-column: 2;
        grid-row: 2;

        margin: 0 0 10px;

        font-size: 19px;
    }

    /* DESCRIPTION */

    body .employee-knowledge-page .eks-path__description {
        grid-column: 2;
        grid-row: 3;

        width: 100%;
        max-width: none;

        margin: 0;

        font-size: 13px;
        line-height: 1.75;
    }
}


/* =========================================================
   12 — SMALL MOBILE
   374px AND BELOW
========================================================= */

@media (max-width: 374px) {

    body .employee-knowledge-page .eks-path {
        padding: 65px 0 75px;
    }

    body .employee-knowledge-page .eks-path__inner {
        padding: 0 23px 0 29px;
    }

    body .employee-knowledge-page .eks-path__title {
        font-size: 30px;
    }

    body .employee-knowledge-page .eks-path__step {
        grid-template-columns:
            54px minmax(0, 1fr);

        column-gap: 14px;
    }

    body .employee-knowledge-page .eks-path__icon {
        width: 52px;
        height: 52px;
    }

    body .employee-knowledge-page
    .eks-path__step:not(:last-child)::before {
        top: 60px;
        left: 26px;

        height: calc(100% - 68px);
    }

    body .employee-knowledge-page .eks-path__step-title {
        font-size: 17px;
    }

    body .employee-knowledge-page .eks-path__description {
        font-size: 12px;
    }
}


/* =========================================================
   13 — HOVER EFFECTS
========================================================= */

@media (hover: hover) and (pointer: fine) {

    body .employee-knowledge-page
    .eks-path__step:hover .eks-path__icon {
        transform: translateY(-4px) scale(1.045);

        box-shadow:
            0 8px 17px rgba(82,49,32,0.05),
            0 22px 38px rgba(82,49,32,0.11),
            inset 0 2px 1px rgba(255,255,255,0.95);
    }

    body .employee-knowledge-page
    .eks-path__step:hover svg {
        transform: scale(1.08);
    }
}


/* =========================================================
   14 — SCROLL ENTRANCE ANIMATIONS
========================================================= */

@keyframes eksPathReveal {
    from {
        opacity: 0;
        translate: 0 24px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

/* View-driven reveal with staggered timing */

@media (prefers-reduced-motion: no-preference) {

    @supports (animation-timeline: view()) {

        body .employee-knowledge-page .eks-path__intro {
            animation: eksPathReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 48%;
        }

        body .employee-knowledge-page .eks-path__step {
            animation: eksPathReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 55%;
        }

        body .employee-knowledge-page
        .eks-path__step:nth-child(2) {
            animation-range: entry 0% entry 60%;
        }

        body .employee-knowledge-page
        .eks-path__step:nth-child(3) {
            animation-range: entry 0% entry 65%;
        }

        body .employee-knowledge-page
        .eks-path__step:nth-child(4) {
            animation-range: entry 0% entry 70%;
        }
    }
}


/* =========================================================
   15 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body .employee-knowledge-page .eks-path__intro,
    body .employee-knowledge-page .eks-path__step {
        animation: none !important;

        opacity: 1 !important;
        translate: none !important;
        transform: none !important;
    }

    body .employee-knowledge-page .eks-path__icon,
    body .employee-knowledge-page .eks-path__icon svg {
        transition: none !important;
    }
}


/* =========================================================
   FRAYORA — EMPLOYEE & KNOWLEDGE SYSTEMS
   SECTION 03 — THE IMPACT

   DESKTOP: 1101px+
   TABLET: 600px–1100px
   MOBILE: 599px and below

   All 4 icons terracotta
   Bond-inspired editorial SaaS styling
   Solid warm-ivory background
   Elevated, softly luminous cards
   Responsive grid and scroll animations
========================================================= */


/* =========================================================
   01 — SECTION FOUNDATION
========================================================= */

body .employee-knowledge-page .eks-impact {
    position: relative;
    isolation: isolate;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;

    background: #F5EDE4 !important;
    color: #1F211D;
}

body .employee-knowledge-page .eks-impact *,
body .employee-knowledge-page .eks-impact *::before,
body .employee-knowledge-page .eks-impact *::after {
    box-sizing: border-box;
}

body .employee-knowledge-page .eks-impact::before,
body .employee-knowledge-page .eks-impact::after {
    content: none !important;
}


/* =========================================================
   02 — CONTAINER
========================================================= */

body .employee-knowledge-page .eks-impact__inner {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
}

body .employee-knowledge-page .eks-impact__intro {
    width: 100%;
    min-width: 0;
    margin: 0;
    text-align: left;
}


/* =========================================================
   03 — EDITORIAL TYPOGRAPHY
========================================================= */

body .employee-knowledge-page .eks-impact__eyebrow {
    margin: 0;
    font-family: "Inter", sans-serif !important;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #C96743;
}

body .employee-knowledge-page .eks-impact__title {
    width: 100%;
    margin: 0;

    font-family: "Manrope", "Inter", sans-serif !important;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.05em;
    text-wrap: balance;

    color: #1F211D;
}


/* =========================================================
   04 — IMPACT GRID
========================================================= */

body .employee-knowledge-page .eks-impact__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
}


/* =========================================================
   05 — ELEVATED IMPACT CARDS
========================================================= */

body .employee-knowledge-page .eks-impact__card {
    position: relative;
    isolation: isolate;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    width: 100%;
    min-width: 0;
    height: 100%;
    margin: 0;

    border: 1px solid rgba(255,255,255,0.88);
    border-radius: 19px;

    background-color: #FFFCF8;
    background-image: none;

    box-shadow:
        0 4px 10px rgba(66,46,33,0.025),
        0 15px 30px rgba(66,46,33,0.055),
        0 30px 54px rgba(66,46,33,0.04),
        inset 0 1px 0 rgba(255,255,255,0.95);

    transition:
        transform 420ms cubic-bezier(.22,1,.36,1),
        border-color 420ms ease,
        box-shadow 420ms ease;
}

/* Subtle luminous card surface */

body .employee-knowledge-page .eks-impact__card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;

    border-radius: inherit;

    background: linear-gradient(
        145deg,
        rgba(255,255,255,0.42) 0%,
        rgba(255,255,255,0.10) 45%,
        transparent 85%
    );

    pointer-events: none;
}


/* =========================================================
   06 — TERRACOTTA ICON MEDALLIONS
   ALL FOUR ICONS
========================================================= */

body .employee-knowledge-page .eks-impact__icon,
body .employee-knowledge-page .eks-impact__icon--terracotta {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;
    border-radius: 50%;

    background-color: #F3E1D5;

    background-image: linear-gradient(
        145deg,
        #FFF7EF 0%,
        #F5E5D8 53%,
        #ECD5C5 100%
    );

    border: 1px solid rgba(181,112,78,0.12);

    box-shadow:
        0 5px 11px rgba(89,55,35,0.035),
        0 15px 27px rgba(89,55,35,0.075),
        inset 0 2px 1px rgba(255,255,255,0.90),
        inset 0 -5px 10px rgba(137,87,58,0.045);

    transition:
        transform 420ms cubic-bezier(.22,1,.36,1),
        box-shadow 420ms ease;
}

/* Fine luminous inner circle */

body .employee-knowledge-page .eks-impact__icon::before {
    content: "";
    position: absolute;
    inset: 4px;

    border: 1px solid rgba(255,255,255,0.68);
    border-radius: 50%;

    pointer-events: none;
}

/* All icon artwork terracotta */

body .employee-knowledge-page .eks-impact__icon svg {
    position: relative;
    z-index: 2;

    display: block;
    width: 43%;
    height: 43%;

    fill: none;
    stroke: #B65D3A;
    stroke-width: 1.85;
    stroke-linecap: round;
    stroke-linejoin: round;

    filter: drop-shadow(0 2px 2px rgba(80,46,30,0.08));

    transition: transform 400ms ease;
}


/* =========================================================
   07 — CARD TYPOGRAPHY
========================================================= */

body .employee-knowledge-page .eks-impact__content {
    position: relative;
    z-index: 1;
    width: 100%;
    min-width: 0;
    margin: 0;
}

body .employee-knowledge-page .eks-impact__number {
    display: block;
    margin: 0;

    font-family: "Inter", sans-serif !important;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.01em;
    color: #C96743;
}

body .employee-knowledge-page .eks-impact__card-title {
    width: 100%;
    margin: 0;

    font-family: "Manrope", "Inter", sans-serif !important;
    font-weight: 650;
    line-height: 1.32;
    letter-spacing: -0.035em;
    color: #1F211D;

    overflow-wrap: break-word;
}

body .employee-knowledge-page .eks-impact__description {
    width: 100%;
    margin: 0;

    font-family: "Inter", sans-serif !important;
    font-weight: 400;
    line-height: 1.72;
    color: rgba(31,33,29,0.75);

    overflow-wrap: break-word;
}


/* =========================================================
   08 — DESKTOP
   1101px+
========================================================= */

@media (min-width: 1101px) {

    body .employee-knowledge-page .eks-impact {
        padding: 100px 0 115px;
    }

    body .employee-knowledge-page .eks-impact__inner {
        padding: 0 80px;
    }

    body .employee-knowledge-page .eks-impact__intro {
        max-width: 1250px;
        margin-bottom: 50px;
    }

    body .employee-knowledge-page .eks-impact__eyebrow {
        margin-bottom: 22px;
        font-size: 12px;
    }

    body .employee-knowledge-page .eks-impact__title {
        max-width: 1220px;
        font-size: clamp(38px, 3.3vw, 52px);
    }

    body .employee-knowledge-page .eks-impact__grid {
        gap: 20px;
    }

    body .employee-knowledge-page .eks-impact__card {
        min-height: 300px;
        padding: 29px 25px 32px;
    }

    body .employee-knowledge-page .eks-impact__icon {
        width: 75px;
        height: 75px;
        margin-bottom: 30px;
    }

    body .employee-knowledge-page .eks-impact__number {
        margin-bottom: 8px;
        font-size: 12px;
    }

    body .employee-knowledge-page .eks-impact__card-title {
        margin-bottom: 15px;
        font-size: 18px;
    }

    body .employee-knowledge-page .eks-impact__description {
        font-size: 13px;
    }
}


/* =========================================================
   09 — SMALLER DESKTOP
   1101px–1350px
========================================================= */

@media (min-width: 1101px) and (max-width: 1350px) {

    body .employee-knowledge-page .eks-impact__inner {
        padding: 0 60px;
    }

    body .employee-knowledge-page .eks-impact__grid {
        gap: 15px;
    }

    body .employee-knowledge-page .eks-impact__card {
        min-height: 295px;
        padding: 25px 18px 29px;
    }

    body .employee-knowledge-page .eks-impact__icon {
        width: 66px;
        height: 66px;
        margin-bottom: 27px;
    }

    body .employee-knowledge-page .eks-impact__card-title {
        font-size: 16px;
    }

    body .employee-knowledge-page .eks-impact__description {
        font-size: 12px;
    }
}


/* =========================================================
   10 — TABLET
   600px–1100px
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .employee-knowledge-page .eks-impact {
        padding: 85px 0 95px;
    }

    body .employee-knowledge-page .eks-impact__inner {
        padding: 0 60px;
    }

    body .employee-knowledge-page .eks-impact__intro {
        max-width: 850px;
        margin-bottom: 45px;
    }

    body .employee-knowledge-page .eks-impact__eyebrow {
        margin-bottom: 21px;
        font-size: 12px;
    }

    body .employee-knowledge-page .eks-impact__title {
        font-size: clamp(37px, 4.8vw, 50px);
    }

    body .employee-knowledge-page .eks-impact__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    body .employee-knowledge-page .eks-impact__card {
        min-height: 270px;
        padding: 28px 25px;
    }

    body .employee-knowledge-page .eks-impact__icon {
        width: 75px;
        height: 75px;
        margin-bottom: 27px;
    }

    body .employee-knowledge-page .eks-impact__number {
        margin-bottom: 9px;
        font-size: 12px;
    }

    body .employee-knowledge-page .eks-impact__card-title {
        margin-bottom: 13px;
        font-size: 18px;
    }

    body .employee-knowledge-page .eks-impact__description {
        font-size: 14px;
    }
}


/* =========================================================
   11 — SMALL TABLET
   600px–749px
========================================================= */

@media (min-width: 600px) and (max-width: 749px) {

    body .employee-knowledge-page .eks-impact {
        padding: 75px 0 85px;
    }

    body .employee-knowledge-page .eks-impact__inner {
        padding: 0 42px;
    }

    body .employee-knowledge-page .eks-impact__title {
        font-size: clamp(35px, 5.5vw, 43px);
    }

    body .employee-knowledge-page .eks-impact__grid {
        gap: 16px;
    }

    body .employee-knowledge-page .eks-impact__card {
        min-height: 270px;
        padding: 24px 19px;
    }

    body .employee-knowledge-page .eks-impact__icon {
        width: 67px;
        height: 67px;
        margin-bottom: 25px;
    }

    body .employee-knowledge-page .eks-impact__card-title {
        font-size: 16px;
    }

    body .employee-knowledge-page .eks-impact__description {
        font-size: 13px;
    }
}


/* =========================================================
   12 — MOBILE
   599px AND BELOW
========================================================= */

@media (max-width: 599px) {

    body .employee-knowledge-page .eks-impact {
        padding: 75px 0 85px;
    }

    body .employee-knowledge-page .eks-impact__inner {
        padding: 0 28px 0 34px;
    }

    body .employee-knowledge-page .eks-impact__intro {
        margin-bottom: 38px;
    }

    body .employee-knowledge-page .eks-impact__eyebrow {
        margin-bottom: 20px;
        font-size: 11px;
    }

    body .employee-knowledge-page .eks-impact__title {
        font-size: clamp(32px, 8vw, 43px);
        line-height: 1.16;
    }

    body .employee-knowledge-page .eks-impact__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    body .employee-knowledge-page .eks-impact__card {
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr);

        align-items: center;
        column-gap: 20px;

        min-height: 155px;
        padding: 25px 22px;

        border-radius: 18px;
    }

    body .employee-knowledge-page .eks-impact__icon {
        width: 68px;
        height: 68px;
        margin: 0;
    }

    body .employee-knowledge-page .eks-impact__number {
        margin-bottom: 7px;
        font-size: 12px;
    }

    body .employee-knowledge-page .eks-impact__card-title {
        margin-bottom: 10px;
        font-size: 17px;
    }

    body .employee-knowledge-page .eks-impact__description {
        font-size: 13px;
        line-height: 1.7;
    }
}


/* =========================================================
   13 — SMALL MOBILE
   374px AND BELOW
========================================================= */

@media (max-width: 374px) {

    body .employee-knowledge-page .eks-impact {
        padding: 65px 0 75px;
    }

    body .employee-knowledge-page .eks-impact__inner {
        padding: 0 23px 0 29px;
    }

    body .employee-knowledge-page .eks-impact__title {
        font-size: 30px;
    }

    body .employee-knowledge-page .eks-impact__card {
        grid-template-columns: 58px minmax(0, 1fr);
        column-gap: 14px;
        padding: 22px 17px;
    }

    body .employee-knowledge-page .eks-impact__icon {
        width: 56px;
        height: 56px;
    }

    body .employee-knowledge-page .eks-impact__card-title {
        font-size: 15px;
    }

    body .employee-knowledge-page .eks-impact__description {
        font-size: 12px;
    }
}


/* =========================================================
   14 — HOVER INTERACTIONS
========================================================= */

@media (hover: hover) and (pointer: fine) {

    body .employee-knowledge-page .eks-impact__card:hover {
        transform: translateY(-5px);

        border-color: rgba(216,181,156,0.42);

        box-shadow:
            0 8px 17px rgba(66,46,33,0.04),
            0 23px 43px rgba(66,46,33,0.09),
            0 38px 64px rgba(66,46,33,0.055),
            inset 0 1px 0 rgba(255,255,255,0.98);
    }

    body .employee-knowledge-page
    .eks-impact__card:hover .eks-impact__icon {
        transform: translateY(-3px) scale(1.045);

        box-shadow:
            0 8px 15px rgba(89,55,35,0.05),
            0 20px 34px rgba(89,55,35,0.11),
            inset 0 2px 1px rgba(255,255,255,0.95);
    }

    body .employee-knowledge-page
    .eks-impact__card:hover svg {
        transform: scale(1.08);
    }
}


/* =========================================================
   15 — SCROLL ENTRANCE ANIMATIONS
========================================================= */

@keyframes eksImpactReveal {
    from {
        opacity: 0;
        translate: 0 22px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

@media (prefers-reduced-motion: no-preference) {

    @supports (animation-timeline: view()) {

        body .employee-knowledge-page .eks-impact__intro {
            animation: eksImpactReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 55%;
        }

        body .employee-knowledge-page .eks-impact__card {
            animation: eksImpactReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 60%;
        }

        body .employee-knowledge-page
        .eks-impact__card:nth-child(2) {
            animation-range: entry 0% entry 65%;
        }

        body .employee-knowledge-page
        .eks-impact__card:nth-child(3) {
            animation-range: entry 0% entry 70%;
        }

        body .employee-knowledge-page
        .eks-impact__card:nth-child(4) {
            animation-range: entry 0% entry 75%;
        }
    }
}


/* =========================================================
   16 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body .employee-knowledge-page .eks-impact__intro,
    body .employee-knowledge-page .eks-impact__card {
        animation: none !important;
        opacity: 1 !important;
        translate: none !important;
        transform: none !important;
    }

    body .employee-knowledge-page .eks-impact__card,
    body .employee-knowledge-page .eks-impact__icon,
    body .employee-knowledge-page .eks-impact__icon svg {
        transition: none !important;
    }
}



/* =========================================================
   FRAYORA — EMPLOYEE & KNOWLEDGE SYSTEMS
   SECTION 04 — OUR PROCESS

   DESKTOP: 1101px+
   TABLET: 600px–1100px
   MOBILE: 599px and below

   Bond-inspired editorial SaaS design
   Solid warm ivory background
   Five-stage connected timeline
   Olive icons: 01 and 03
   Terracotta icons: 02, 04 and 05
   Dimensional medallions and layered shadows
   Subtle hover and scroll entrance animations
   Reduced-motion safe

   NO CARDS
   NO BACKGROUND VISUALS
   NO PHP CHANGES REQUIRED
========================================================= */


/* =========================================================
   01 — SECTION FOUNDATION
========================================================= */

body .employee-knowledge-page .eks-process {
    position: relative;
    isolation: isolate;

    width: 100%;
    margin: 0;
    padding: 0;

    overflow: hidden;
    box-sizing: border-box;

    background-color: #F8F3EB !important;
    background-image: none !important;

    color: #1F211D;
}

body .employee-knowledge-page .eks-process *,
body .employee-knowledge-page .eks-process *::before,
body .employee-knowledge-page .eks-process *::after {
    box-sizing: border-box;
}

body .employee-knowledge-page .eks-process::before,
body .employee-knowledge-page .eks-process::after {
    content: none !important;
    display: none !important;
}


/* =========================================================
   02 — MAIN CONTAINER
========================================================= */

body .employee-knowledge-page .eks-process__inner {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1600px;

    margin: 0 auto;
}

body .employee-knowledge-page .eks-process__intro {
    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    text-align: left;
}


/* =========================================================
   03 — INTRO TYPOGRAPHY
========================================================= */

body .employee-knowledge-page .eks-process__eyebrow {
    display: block;

    margin: 0;

    font-family: "Inter", sans-serif !important;
    font-weight: 600;

    line-height: 1.4;
    letter-spacing: 0.14em;
    text-transform: uppercase;

    color: #C96743;
}

body .employee-knowledge-page .eks-process__title {
    width: 100%;
    margin: 0;

    font-family: "Manrope", "Inter", sans-serif !important;
    font-weight: 600;

    line-height: 1.15;
    letter-spacing: -0.05em;

    color: #1F211D;

    text-align: left;
    text-wrap: balance;
}


/* =========================================================
   04 — PROCESS TIMELINE FOUNDATION
========================================================= */

body .employee-knowledge-page .eks-process__steps {
    position: relative;

    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));

    align-items: start;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    list-style: none;
    list-style-type: none;
}

body .employee-knowledge-page .eks-process__step {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    min-width: 0;
    margin: 0;
    padding: 0;

    list-style: none;
    text-align: left;
}

body .employee-knowledge-page .eks-process__step::marker {
    content: "";
}


/* =========================================================
   05 — CONNECTED TIMELINE
========================================================= */

/* Connector line between each step */

body .employee-knowledge-page
.eks-process__step:not(:last-child)::before {
    content: "";

    position: absolute;
    z-index: 0;

    top: 38px;
    left: 94px;

    width: calc(100% - 68px);
    height: 1px;

    background-color: rgba(201,103,67,0.38);

    pointer-events: none;
}

/* Small connector nodes */

body .employee-knowledge-page
.eks-process__step:not(:last-child)::after {
    content: "";

    position: absolute;
    z-index: 1;

    top: 34.5px;
    right: -13px;

    width: 8px;
    height: 8px;

    border: 1px solid rgba(201,103,67,0.70);
    border-radius: 50%;

    background-color: #F8F3EB;

    pointer-events: none;
}


/* =========================================================
   06 — DIMENSIONAL ICON MEDALLIONS
========================================================= */

body .employee-knowledge-page .eks-process__icon {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border-radius: 50%;

    transition:
        transform 420ms cubic-bezier(.22,1,.36,1),
        box-shadow 420ms ease;
}


/* OLIVE — STEPS 01 AND 03 */

body .employee-knowledge-page
.eks-process__icon--olive {
    background-color: #E6E9DF;

    background-image: linear-gradient(
        145deg,
        #F8F9F2 0%,
        #E9ECE2 52%,
        #DCE2D5 100%
    );

    border: 1px solid rgba(85,110,82,0.13);

    box-shadow:
        0 5px 12px rgba(48,65,44,0.04),
        0 16px 28px rgba(48,65,44,0.08),
        inset 0 2px 1px rgba(255,255,255,0.92),
        inset 0 -5px 10px rgba(75,93,68,0.045);
}


/* TERRACOTTA — STEPS 02, 04 AND 05 */

body .employee-knowledge-page
.eks-process__icon--terracotta {
    background-color: #F3E1D5;

    background-image: linear-gradient(
        145deg,
        #FFF7F0 0%,
        #F5E5D8 52%,
        #ECD5C5 100%
    );

    border: 1px solid rgba(181,112,78,0.13);

    box-shadow:
        0 5px 12px rgba(89,55,35,0.04),
        0 16px 28px rgba(89,55,35,0.08),
        inset 0 2px 1px rgba(255,255,255,0.92),
        inset 0 -5px 10px rgba(137,87,58,0.045);
}


/* Fine luminous inner ring */

body .employee-knowledge-page .eks-process__icon::before {
    content: "";

    position: absolute;
    inset: 5px;

    border: 1px solid rgba(255,255,255,0.72);
    border-radius: 50%;

    pointer-events: none;
}


/* SVG artwork */

body .employee-knowledge-page .eks-process__icon svg {
    position: relative;
    z-index: 2;

    display: block;

    width: 43%;
    height: 43%;

    fill: none;

    stroke-width: 1.85;
    stroke-linecap: round;
    stroke-linejoin: round;

    filter:
        drop-shadow(0 2px 2px rgba(43,40,32,0.08));

    transition: transform 400ms ease;
}

body .employee-knowledge-page
.eks-process__icon--olive svg {
    stroke: #4D604C;
}

body .employee-knowledge-page
.eks-process__icon--terracotta svg {
    stroke: #B65D3A;
}


/* =========================================================
   07 — STEP TYPOGRAPHY
========================================================= */

body .employee-knowledge-page .eks-process__number {
    display: block;

    margin: 0;

    font-family: "Inter", sans-serif !important;
    font-weight: 700;

    line-height: 1.3;
    letter-spacing: 0.01em;

    color: #C96743;
}

body .employee-knowledge-page .eks-process__step-title {
    width: 100%;
    margin: 0;

    font-family: "Manrope", "Inter", sans-serif !important;
    font-weight: 650;

    line-height: 1.32;
    letter-spacing: -0.035em;

    color: #1F211D;
}

body .employee-knowledge-page .eks-process__description {
    width: 100%;
    margin: 0;

    font-family: "Inter", sans-serif !important;
    font-weight: 400;

    line-height: 1.75;

    color: rgba(31,33,29,0.75);

    overflow-wrap: break-word;
}


/* =========================================================
   08 — DESKTOP
   1101px AND ABOVE
========================================================= */

@media (min-width: 1101px) {

    body .employee-knowledge-page .eks-process {
        padding: 105px 0 115px;
    }

    body .employee-knowledge-page .eks-process__inner {
        padding: 0 80px;
    }

    body .employee-knowledge-page .eks-process__intro {
        max-width: 1150px;
        margin-bottom: 65px;
    }

    body .employee-knowledge-page .eks-process__eyebrow {
        margin-bottom: 22px;
        font-size: 12px;
    }

    body .employee-knowledge-page .eks-process__title {
        max-width: 1100px;

        font-size: clamp(38px, 3.3vw, 51px);
    }

    /* Five-column timeline */

    body .employee-knowledge-page .eks-process__steps {
        column-gap: 26px;
    }

    body .employee-knowledge-page .eks-process__step {
        padding-right: 5px;
    }

    body .employee-knowledge-page .eks-process__icon {
        width: 76px;
        height: 76px;

        margin-bottom: 24px;
    }

    body .employee-knowledge-page .eks-process__number {
        margin-bottom: 7px;
        font-size: 12px;
    }

    body .employee-knowledge-page .eks-process__step-title {
        margin-bottom: 12px;
        font-size: 19px;
    }

    body .employee-knowledge-page .eks-process__description {
        max-width: 240px;
        font-size: 13px;
    }
}


/* =========================================================
   09 — SMALLER DESKTOP
   1101px–1350px
========================================================= */

@media (min-width: 1101px) and (max-width: 1350px) {

    body .employee-knowledge-page .eks-process__inner {
        padding: 0 60px;
    }

    body .employee-knowledge-page .eks-process__steps {
        column-gap: 20px;
    }

    body .employee-knowledge-page .eks-process__icon {
        width: 68px;
        height: 68px;
    }

    body .employee-knowledge-page
    .eks-process__step:not(:last-child)::before {
        top: 34px;
        left: 84px;

        width: calc(100% - 58px);
    }

    body .employee-knowledge-page
    .eks-process__step:not(:last-child)::after {
        top: 30.5px;
        right: -10px;
    }

    body .employee-knowledge-page .eks-process__step-title {
        font-size: 17px;
    }

    body .employee-knowledge-page .eks-process__description {
        font-size: 12px;
    }
}


/* =========================================================
   10 — TABLET
   600px–1100px

   Horizontal swipeable timeline
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .employee-knowledge-page .eks-process {
        padding: 85px 0 95px;
    }

    body .employee-knowledge-page .eks-process__inner {
        padding: 0 60px;
    }

    body .employee-knowledge-page .eks-process__intro {
        max-width: 850px;
        margin-bottom: 45px;
    }

    body .employee-knowledge-page .eks-process__eyebrow {
        margin-bottom: 21px;
        font-size: 12px;
    }

    body .employee-knowledge-page .eks-process__title {
        max-width: 830px;
        font-size: clamp(36px, 4.8vw, 50px);
    }

    /* Native horizontal scroll track */

    body .employee-knowledge-page .eks-process__steps {
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;

        gap: 24px;

        overflow-x: auto;
        overflow-y: hidden;

        width: 100%;

        padding: 12px 0 28px;

        scroll-snap-type: x mandatory;
        scroll-padding-inline: 0;
        scroll-behavior: smooth;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;

        scrollbar-width: thin;
        scrollbar-color:
            #BE947E rgba(201,103,67,0.12);
    }

    /* Terracotta scrollbar */

    body .employee-knowledge-page
    .eks-process__steps::-webkit-scrollbar {
        height: 5px;
    }

    body .employee-knowledge-page
    .eks-process__steps::-webkit-scrollbar-track {
        background: rgba(201,103,67,0.12);
        border-radius: 999px;
    }

    body .employee-knowledge-page
    .eks-process__steps::-webkit-scrollbar-thumb {
        background: #BE947E;
        border-radius: 999px;
    }

    /* Two stages + next-stage preview */

    body .employee-knowledge-page .eks-process__step {
        flex: 0 0 calc((100% - 72px) / 2);

        width: calc((100% - 72px) / 2);
        min-width: 0;

        padding: 0 6px 10px 0;

        scroll-snap-align: start;
    }

    /* Remove connectors inside scroll area */

    body .employee-knowledge-page
    .eks-process__step::before,
    body .employee-knowledge-page
    .eks-process__step::after {
        content: none !important;
        display: none !important;
    }

    body .employee-knowledge-page .eks-process__icon {
        width: 76px;
        height: 76px;

        margin-bottom: 23px;
    }

    body .employee-knowledge-page .eks-process__number {
        margin-bottom: 7px;
        font-size: 13px;
    }

    body .employee-knowledge-page .eks-process__step-title {
        margin-bottom: 11px;
        font-size: 20px;
    }

    body .employee-knowledge-page .eks-process__description {
        max-width: 360px;
        font-size: 14px;
    }
}


/* =========================================================
   11 — SMALL TABLET
   600px–749px
========================================================= */

@media (min-width: 600px) and (max-width: 749px) {

    body .employee-knowledge-page .eks-process {
        padding: 75px 0 85px;
    }

    body .employee-knowledge-page .eks-process__inner {
        padding: 0 42px;
    }

    body .employee-knowledge-page .eks-process__title {
        font-size: clamp(34px, 5.5vw, 43px);
    }

    body .employee-knowledge-page .eks-process__steps {
        gap: 20px;
    }

    body .employee-knowledge-page .eks-process__step {
        flex-basis: calc((100% - 60px) / 2);
        width: calc((100% - 60px) / 2);
    }

    body .employee-knowledge-page .eks-process__icon {
        width: 68px;
        height: 68px;
    }

    body .employee-knowledge-page .eks-process__step-title {
        font-size: 18px;
    }

    body .employee-knowledge-page .eks-process__description {
        font-size: 13px;
    }
}


/* =========================================================
   12 — MOBILE
   599px AND BELOW

   Vertical connected timeline
========================================================= */

@media (max-width: 599px) {

    body .employee-knowledge-page .eks-process {
        padding: 75px 0 85px;
    }

    body .employee-knowledge-page .eks-process__inner {
        padding: 0 28px 0 34px;
    }

    body .employee-knowledge-page .eks-process__intro {
        margin-bottom: 42px;
    }

    body .employee-knowledge-page .eks-process__eyebrow {
        margin-bottom: 20px;
        font-size: 11px;
    }

    body .employee-knowledge-page .eks-process__title {
        font-size: clamp(32px, 8vw, 43px);
        line-height: 1.16;
    }

    /* Vertical steps */

    body .employee-knowledge-page .eks-process__steps {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 0;

        width: 100%;
        overflow: visible;
    }

    body .employee-knowledge-page .eks-process__step {
        display: grid;

        grid-template-columns:
            64px minmax(0, 1fr);

        grid-template-rows:
            auto auto 1fr;

        column-gap: 18px;

        align-items: start;

        width: 100%;
        min-width: 0;

        padding: 0 0 42px;
    }

    body .employee-knowledge-page
    .eks-process__step:last-child {
        padding-bottom: 0;
    }

    /* Mobile vertical connector */

    body .employee-knowledge-page
    .eks-process__step:not(:last-child)::before {
        content: "";
        display: block;

        position: absolute;
        z-index: 0;

        top: 69px;
        left: 30px;

        width: 1px;
        height: calc(100% - 77px);

        background-color: rgba(201,103,67,0.32);

        pointer-events: none;
    }

    body .employee-knowledge-page
    .eks-process__step::after {
        content: none !important;
        display: none !important;
    }

    /* Icon */

    body .employee-knowledge-page .eks-process__icon {
        grid-column: 1;
        grid-row: 1 / 4;

        width: 60px;
        height: 60px;

        margin: 0;
    }

    /* Number */

    body .employee-knowledge-page .eks-process__number {
        grid-column: 2;
        grid-row: 1;

        margin: 1px 0 6px;
        font-size: 12px;
    }

    /* Step title */

    body .employee-knowledge-page .eks-process__step-title {
        grid-column: 2;
        grid-row: 2;

        margin: 0 0 10px;
        font-size: 19px;
    }

    /* Description */

    body .employee-knowledge-page .eks-process__description {
        grid-column: 2;
        grid-row: 3;

        max-width: 100%;
        margin: 0;

        font-size: 13px;
        line-height: 1.75;
    }
}


/* =========================================================
   13 — SMALL MOBILE
   374px AND BELOW
========================================================= */

@media (max-width: 374px) {

    body .employee-knowledge-page .eks-process {
        padding: 65px 0 75px;
    }

    body .employee-knowledge-page .eks-process__inner {
        padding: 0 23px 0 29px;
    }

    body .employee-knowledge-page .eks-process__title {
        font-size: 30px;
    }

    body .employee-knowledge-page .eks-process__step {
        grid-template-columns:
            54px minmax(0, 1fr);

        column-gap: 14px;
    }

    body .employee-knowledge-page .eks-process__icon {
        width: 52px;
        height: 52px;
    }

    body .employee-knowledge-page
    .eks-process__step:not(:last-child)::before {
        top: 60px;
        left: 26px;

        height: calc(100% - 68px);
    }

    body .employee-knowledge-page .eks-process__step-title {
        font-size: 17px;
    }

    body .employee-knowledge-page .eks-process__description {
        font-size: 12px;
    }
}


/* =========================================================
   14 — HOVER INTERACTIONS
========================================================= */

@media (hover: hover) and (pointer: fine) {

    body .employee-knowledge-page
    .eks-process__step:hover .eks-process__icon {
        transform: translateY(-4px) scale(1.045);

        box-shadow:
            0 8px 17px rgba(82,49,32,0.05),
            0 22px 38px rgba(82,49,32,0.11),
            inset 0 2px 1px rgba(255,255,255,0.95);
    }

    body .employee-knowledge-page
    .eks-process__step:hover svg {
        transform: scale(1.07);
    }
}


/* =========================================================
   15 — SCROLL ENTRANCE ANIMATIONS
========================================================= */

@keyframes eksProcessReveal {
    from {
        opacity: 0;
        translate: 0 22px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

@media (prefers-reduced-motion: no-preference) {

    @supports (animation-timeline: view()) {

        body .employee-knowledge-page .eks-process__intro {
            animation: eksProcessReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 55%;
        }

        body .employee-knowledge-page .eks-process__step {
            animation: eksProcessReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 60%;
        }

        body .employee-knowledge-page
        .eks-process__step:nth-child(2) {
            animation-range: entry 0% entry 65%;
        }

        body .employee-knowledge-page
        .eks-process__step:nth-child(3) {
            animation-range: entry 0% entry 70%;
        }

        body .employee-knowledge-page
        .eks-process__step:nth-child(4) {
            animation-range: entry 0% entry 75%;
        }

        body .employee-knowledge-page
        .eks-process__step:nth-child(5) {
            animation-range: entry 0% entry 80%;
        }
    }
}


/* =========================================================
   16 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body .employee-knowledge-page .eks-process__intro,
    body .employee-knowledge-page .eks-process__step {
        animation: none !important;

        opacity: 1 !important;
        translate: none !important;
        transform: none !important;
    }

    body .employee-knowledge-page .eks-process__steps {
        scroll-behavior: auto !important;
    }

    body .employee-knowledge-page .eks-process__icon,
    body .employee-knowledge-page .eks-process__icon svg {
        transition: none !important;
    }
}



/* =========================================================
   FRAYORA — EMPLOYEE & KNOWLEDGE SYSTEMS
   SECTION 05 — FINAL CTA

   COMPLETE CSS REPLACEMENT

   Bond-inspired luminous editorial treatment
   Solid ivory base
   Soft champagne ambient light
   Minimal architectural linework
   Refined dimensional shadows
   Subtle animations
   Desktop / Tablet / Mobile
========================================================= */


/* =========================================================
   01 — SECTION FOUNDATION
========================================================= */

body .employee-knowledge-page .eks-final-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    width: 100%;
    margin: 0;
    padding: 0;

    background-color: #F8F3EB !important;
    background-image: none !important;

    color: #1F211D;
}

body .employee-knowledge-page .eks-final-cta *,
body .employee-knowledge-page .eks-final-cta *::before,
body .employee-knowledge-page .eks-final-cta *::after {
    box-sizing: border-box;
}


/* =========================================================
   02 — SOFT ATMOSPHERIC LIGHT

   Very low opacity.
   No concentrated yellow center.
========================================================= */

body .employee-knowledge-page .eks-final-cta::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 0;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse 72% 115% at 83% 28%,
            rgba(235, 213, 205, 0.13) 0%,
            rgba(235, 213, 205, 0.045) 48%,
            transparent 78%
        ),
        radial-gradient(
            ellipse 62% 115% at 18% 78%,
            rgba(238, 213, 181, 0.12) 0%,
            rgba(238, 213, 181, 0.035) 50%,
            transparent 80%
        );
}

/* Delicate bright surface finish */

body .employee-knowledge-page .eks-final-cta::after {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 0;

    pointer-events: none;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.95),
        inset 0 -1px 0 rgba(180,150,120,0.08);
}


/* =========================================================
   03 — DECORATIVE ART CONTAINER
========================================================= */

body .employee-knowledge-page .eks-final-cta__art {
    position: absolute;
    inset: 0;
    z-index: 1;

    overflow: hidden;
    pointer-events: none;
}


/* =========================================================
   04 — SOFT ARCHITECTURAL ARCS

   Intentionally faint.
   No strong gold outlines.
========================================================= */

body .employee-knowledge-page .eks-final-cta__arc {
    position: absolute;

    display: block;
    left: 50%;

    border-radius: 50%;
    background: transparent;

    pointer-events: none;
}

body .employee-knowledge-page .eks-final-cta__arc--one {
    width: 1250px;
    height: 660px;

    bottom: -440px;

    transform: translateX(-50%);

    border: 1px solid rgba(190,151,104,0.20);

    box-shadow:
        0 0 17px rgba(224,190,146,0.055);
}

body .employee-knowledge-page .eks-final-cta__arc--two {
    width: 980px;
    height: 520px;

    bottom: -370px;

    transform: translateX(-50%);

    border: 1px solid rgba(190,151,104,0.11);

    box-shadow: none;
}


/* =========================================================
   05 — DIFFUSED LIGHT POOLS

   Extremely soft off-center light.
   Not a strong yellow spotlight.
========================================================= */

body .employee-knowledge-page .eks-final-cta__glow {
    position: absolute;

    display: block;
    border-radius: 50%;

    pointer-events: none;
}

body .employee-knowledge-page .eks-final-cta__glow--top {
    left: 76%;
    top: -185px;

    width: 620px;
    height: 350px;

    transform: translateX(-50%);

    background: radial-gradient(
        ellipse at center,
        rgba(255,255,255,0.88) 0%,
        rgba(255,252,245,0.38) 38%,
        transparent 76%
    );

    filter: blur(38px);
    opacity: 0.75;
}

body .employee-knowledge-page .eks-final-cta__glow--bottom {
    left: 23%;
    bottom: -195px;

    width: 720px;
    height: 370px;

    transform: translateX(-50%);

    background: radial-gradient(
        ellipse at center,
        rgba(242,219,190,0.18) 0%,
        rgba(242,219,190,0.065) 43%,
        transparent 78%
    );

    filter: blur(46px);
    opacity: 0.65;
}


/* =========================================================
   06 — MINIMAL VERTICAL LINES
========================================================= */

body .employee-knowledge-page .eks-final-cta__line {
    position: absolute;
    top: 0;

    width: 1px;
    height: 110px;

    background: linear-gradient(
        to bottom,
        rgba(190,151,104,0.20),
        transparent
    );

    pointer-events: none;
}

body .employee-knowledge-page .eks-final-cta__line--left {
    left: 6%;
}

body .employee-knowledge-page .eks-final-cta__line--right {
    right: 6%;
}

body .employee-knowledge-page .eks-final-cta__line::before {
    content: none;
}

body .employee-knowledge-page .eks-final-cta__line::after {
    content: "";

    position: absolute;
    top: 42px;
    left: 50%;

    width: 5px;
    height: 5px;

    transform: translateX(-50%);

    border-radius: 50%;

    background: #D4B184;

    box-shadow:
        0 0 9px rgba(230,191,140,0.28);
}


/* =========================================================
   07 — CONTENT CONTAINER
========================================================= */

body .employee-knowledge-page .eks-final-cta__inner {
    position: relative;
    z-index: 3;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 1600px;

    margin: 0 auto;
}

body .employee-knowledge-page .eks-final-cta__content {
    position: relative;
    z-index: 4;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 1050px;

    margin: 0 auto;

    text-align: center;
}


/* =========================================================
   08 — EDITORIAL HEADING
========================================================= */

body .employee-knowledge-page .eks-final-cta__title {
    width: 100%;
    margin: 0;

    font-family: "Manrope", "Inter", sans-serif !important;
    font-weight: 600;

    line-height: 1.09;
    letter-spacing: -0.052em;

    color: #1F211D !important;

    text-align: center;
    text-wrap: balance;

    text-shadow: none;
}


/* =========================================================
   09 — TERRACOTTA BUTTON
========================================================= */

body .employee-knowledge-page .eks-final-cta__button {
    position: relative;
    z-index: 5;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 16px;

    width: fit-content;
    max-width: 100%;
    min-height: 58px;

    margin: 0;
    padding: 17px 32px;

    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 999px;

    background: #C96743 !important;

    color: #FFFFFF !important;

    font-family: "Inter", sans-serif !important;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;

    text-align: center;
    text-decoration: none !important;

    box-shadow:
        0 8px 18px rgba(118,70,46,0.10),
        0 22px 43px rgba(118,70,46,0.13),
        inset 0 1px 0 rgba(255,255,255,0.26);

    transition:
        transform 350ms cubic-bezier(.22,1,.36,1),
        background-color 350ms ease,
        box-shadow 350ms ease;
}

body .employee-knowledge-page .eks-final-cta__arrow {
    display: inline-block;
    flex: 0 0 auto;

    font-size: 21px;
    line-height: 1;

    transition: transform 300ms ease;
}

body .employee-knowledge-page
.eks-final-cta__button:focus-visible {
    outline: 2px solid #303B32;
    outline-offset: 5px;
}


/* =========================================================
   10 — DESKTOP
   1101px+
========================================================= */

@media (min-width: 1101px) {

    body .employee-knowledge-page .eks-final-cta {
        min-height: 430px;
    }

    body .employee-knowledge-page .eks-final-cta__inner {
        min-height: 430px;

        padding: 90px 80px 95px;
    }

    body .employee-knowledge-page .eks-final-cta__title {
        max-width: 1000px;

        font-size: clamp(46px, 4.5vw, 66px);
    }

    body .employee-knowledge-page .eks-final-cta__button {
        margin-top: 36px;
    }
}


/* =========================================================
   11 — TABLET
   600px–1100px
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .employee-knowledge-page .eks-final-cta {
        min-height: 390px;
    }

    body .employee-knowledge-page .eks-final-cta__inner {
        min-height: 390px;

        padding: 80px 60px 85px;
    }

    body .employee-knowledge-page .eks-final-cta__title {
        max-width: 800px;

        font-size: clamp(39px, 5.5vw, 53px);
    }

    body .employee-knowledge-page .eks-final-cta__button {
        margin-top: 31px;
    }

    body .employee-knowledge-page .eks-final-cta__arc--one {
        width: 900px;
        height: 490px;
        bottom: -340px;
    }

    body .employee-knowledge-page .eks-final-cta__arc--two {
        width: 710px;
        height: 390px;
        bottom: -285px;
    }

    body .employee-knowledge-page .eks-final-cta__glow--top {
        width: 460px;
        height: 260px;
    }

    body .employee-knowledge-page .eks-final-cta__glow--bottom {
        width: 520px;
        height: 280px;
    }
}


/* =========================================================
   12 — MOBILE
   599px AND BELOW
========================================================= */

@media (max-width: 599px) {

    body .employee-knowledge-page .eks-final-cta {
        min-height: 340px;
    }

    body .employee-knowledge-page .eks-final-cta__inner {
        min-height: 340px;

        padding: 72px 28px 78px;
    }

    body .employee-knowledge-page .eks-final-cta__title {
        max-width: 420px;

        font-size: clamp(31px, 8vw, 42px);
        line-height: 1.14;
    }

    body .employee-knowledge-page .eks-final-cta__button {
        gap: 12px;

        min-height: 54px;
        margin-top: 29px;

        padding: 15px 22px;

        font-size: 13px;
    }

    body .employee-knowledge-page .eks-final-cta__arrow {
        font-size: 19px;
    }

    body .employee-knowledge-page .eks-final-cta__arc--one {
        width: 570px;
        height: 330px;
        bottom: -250px;
    }

    body .employee-knowledge-page .eks-final-cta__arc--two {
        width: 440px;
        height: 260px;
        bottom: -210px;
    }

    body .employee-knowledge-page .eks-final-cta__line {
        height: 70px;
    }

    body .employee-knowledge-page .eks-final-cta__line--left {
        left: 18px;
    }

    body .employee-knowledge-page .eks-final-cta__line--right {
        right: 18px;
    }

    body .employee-knowledge-page .eks-final-cta__glow--top {
        left: 80%;
        width: 300px;
        height: 190px;
        top: -100px;
    }

    body .employee-knowledge-page .eks-final-cta__glow--bottom {
        left: 20%;
        width: 330px;
        height: 190px;
        bottom: -115px;
    }
}


/* =========================================================
   13 — SMALL MOBILE
   374px AND BELOW
========================================================= */

@media (max-width: 374px) {

    body .employee-knowledge-page .eks-final-cta__inner {
        padding: 65px 23px 72px;
    }

    body .employee-knowledge-page .eks-final-cta__title {
        font-size: 29px;
    }

    body .employee-knowledge-page .eks-final-cta__button {
        padding: 14px 18px;
        gap: 9px;
        font-size: 12px;
    }
}


/* =========================================================
   14 — HOVER EFFECTS
========================================================= */

@media (hover: hover) and (pointer: fine) {

    body .employee-knowledge-page
    .eks-final-cta__button:hover {
        background: #B95635 !important;
        color: #FFFFFF !important;

        transform: translateY(-3px);

        box-shadow:
            0 12px 22px rgba(118,70,46,0.14),
            0 28px 49px rgba(118,70,46,0.19),
            inset 0 1px 0 rgba(255,255,255,0.26);
    }

    body .employee-knowledge-page
    .eks-final-cta__button:hover
    .eks-final-cta__arrow {
        transform: translateX(4px);
    }
}


/* =========================================================
   15 — ENTRANCE ANIMATION
========================================================= */

@keyframes eksFinalSoftReveal {
    from {
        opacity: 0;
        translate: 0 18px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

@media (prefers-reduced-motion: no-preference) {

    @supports (animation-timeline: view()) {

        body .employee-knowledge-page .eks-final-cta__title {
            animation: eksFinalSoftReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 55%;
        }

        body .employee-knowledge-page .eks-final-cta__button {
            animation: eksFinalSoftReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 65%;
        }
    }
}


/* =========================================================
   16 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body .employee-knowledge-page .eks-final-cta__title,
    body .employee-knowledge-page .eks-final-cta__button,
    body .employee-knowledge-page .eks-final-cta__glow {
        animation: none !important;
        opacity: 1 !important;
        translate: none !important;
        transform: none;
    }

    body .employee-knowledge-page .eks-final-cta__button,
    body .employee-knowledge-page .eks-final-cta__arrow {
        transition: none !important;
    }
}



/* =========================================================
   FRAYORA — WORKFLOWS & AUTOMATION
   SECTION 01 — HERO

   Desktop: 1101px+
   Tablet: 600px–1100px
   Mobile: 599px and below

   Standard 600px desktop service hero
   Deep olive architectural background
   CSS-only floating workflow illustration
   Responsive dark overlays
   Champagne-accented olive CTA
   Layered dimensional depth
   Subtle luminous effects and animations
   Reduced-motion accessibility
========================================================= */


/* =========================================================
   01 — HERO FOUNDATION
========================================================= */

body .workflows-page .wf-hero {
    position: relative;
    isolation: isolate;

    width: 100%;
    margin: 0;
    padding: 0;

    overflow: hidden;
    box-sizing: border-box;

    background-color: #263428 !important;
    background-image:
        url("../images/Business%20in%20a%20box/herodesktop.png") !important;

    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;

    color: #F8F3EB;
}

body .workflows-page .wf-hero *,
body .workflows-page .wf-hero *::before,
body .workflows-page .wf-hero *::after {
    box-sizing: border-box;
}


/* =========================================================
   02 — CONTRAST OVERLAY
========================================================= */

body .workflows-page .wf-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;

    background: linear-gradient(
        90deg,
        rgba(13,24,16,0.79) 0%,
        rgba(15,27,18,0.65) 34%,
        rgba(17,29,20,0.28) 63%,
        rgba(17,29,20,0.10) 100%
    );

    pointer-events: none;
}


/* =========================================================
   03 — REFINED LUMINOUS SURFACE
========================================================= */

body .workflows-page .wf-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background: linear-gradient(
        115deg,
        transparent 38%,
        rgba(255,241,204,0.012) 60%,
        rgba(255,244,215,0.035) 86%,
        transparent 100%
    );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        inset 0 -30px 55px -48px rgba(0,0,0,0.30);

    pointer-events: none;
}


/* =========================================================
   04 — INNER GRID
========================================================= */

body .workflows-page .wf-hero__inner {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1600px;

    margin: 0 auto;
}

body .workflows-page .wf-hero__content {
    position: relative;
    z-index: 4;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    text-align: left;
}


/* =========================================================
   05 — EDITORIAL TYPOGRAPHY
========================================================= */

body .workflows-page .wf-hero__eyebrow {
    display: block;
    margin: 0;

    font-family: "Inter", sans-serif !important;
    font-weight: 600;

    line-height: 1.4;
    letter-spacing: 0.14em;
    text-transform: uppercase;

    color: #E4D5BF !important;
}

body .workflows-page .wf-hero__title {
    width: 100%;
    margin: 0;

    font-family: "Manrope", "Inter", sans-serif !important;
    font-weight: 600;

    line-height: 1.12;
    letter-spacing: -0.052em;

    color: #F8F3EB !important;

    text-align: left;
    text-wrap: balance;

    text-shadow:
        0 3px 18px rgba(0,0,0,0.14);
}

body .workflows-page .wf-hero__body {
    width: 100%;
    margin: 0;

    font-family: "Inter", sans-serif !important;
    font-weight: 400;

    line-height: 1.75;
    color: rgba(248,243,235,0.94) !important;

    text-align: left;
}


/* =========================================================
   06 — OLIVE / CHAMPAGNE CTA
========================================================= */

body .workflows-page .wf-hero__button {
    position: relative;
    z-index: 4;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 17px;

    width: fit-content;
    max-width: 100%;
    min-height: 55px;

    padding: 15px 30px;

    border: 1px solid rgba(230,210,147,0.78);
    border-radius: 999px;

    background-color: #34402D !important;
    background-image: none !important;

    color: #FFFFFF !important;

    font-family: "Inter", sans-serif !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;

    text-align: center;
    text-decoration: none !important;

    box-shadow:
        0 8px 19px rgba(0,0,0,0.18),
        0 20px 38px rgba(0,0,0,0.18),
        0 0 19px rgba(223,198,127,0.08),
        inset 0 1px 0 rgba(255,255,255,0.13);

    transition:
        transform 320ms cubic-bezier(.22,1,.36,1),
        background-color 320ms ease,
        border-color 320ms ease,
        box-shadow 320ms ease;
}

body .workflows-page .wf-hero__button::before {
    content: "";

    position: absolute;
    inset: 2px;

    border-radius: inherit;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.09);

    pointer-events: none;
}

body .workflows-page .wf-hero__arrow {
    display: inline-block;
    flex-shrink: 0;

    font-size: 21px;
    line-height: 1;

    color: inherit;

    transition: transform 320ms ease;
}

body .workflows-page .wf-hero__button:focus-visible {
    outline: 2px solid #F8F3EB;
    outline-offset: 5px;
}


/* =========================================================
   07 — FLOATING WORKFLOW VISUAL

   Existing image:
   assets/images/workflows/hero.png
========================================================= */

body .workflows-page .wf-hero__visual {
    position: relative;
    z-index: 3;

    display: block;
    min-width: 0;
    flex-shrink: 0;

    background-image:
        url("../images/workflows/hero.png") !important;

    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;

    pointer-events: none;

    filter:
        drop-shadow(0 15px 24px rgba(4,13,7,0.14))
        drop-shadow(0 30px 49px rgba(4,13,7,0.20));

    transform-origin: center;
}


/* =========================================================
   08 — DESKTOP
   1101px AND ABOVE

   APPROVED 600PX SERVICE HERO
========================================================= */

@media (min-width: 1101px) {

    body .workflows-page .wf-hero {
        height: 600px;
        min-height: 600px;
    }

    body .workflows-page .wf-hero__inner {
        display: grid;

        grid-template-columns:
            minmax(0, 1.02fr)
            minmax(0, 0.98fr);

        column-gap: 30px;
        align-items: center;

        height: 600px;
        min-height: 600px;

        padding: 45px 80px;
    }

    body .workflows-page .wf-hero__content {
        max-width: 650px;
    }

    body .workflows-page .wf-hero__eyebrow {
        margin-bottom: 21px;
        font-size: 12px;
    }

    body .workflows-page .wf-hero__title {
        max-width: 630px;

        font-size: clamp(42px, 3.65vw, 57px);
    }

    body .workflows-page .wf-hero__body {
        max-width: 580px;

        margin-top: 26px;
        font-size: 14px;
    }

    body .workflows-page .wf-hero__button {
        margin-top: 29px;
    }

    body .workflows-page .wf-hero__visual {
        width: clamp(520px, 43vw, 700px);
        max-width: none;

        height: 515px;

        justify-self: center;
        align-self: center;

        margin: 0;
    }
}


/* =========================================================
   09 — LARGE DESKTOP
   1450px+
========================================================= */

@media (min-width: 1450px) {

    body .workflows-page .wf-hero__title {
        font-size: 55px;
    }

    body .workflows-page .wf-hero__body {
        font-size: 15px;
    }

    body .workflows-page .wf-hero__visual {
        width: min(43vw, 710px);
        height: 535px;
    }
}


/* =========================================================
   10 — TABLET
   600px–1100px

   VISUAL ABOVE CONTENT
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .workflows-page .wf-hero {
        height: auto;
        min-height: 850px;

        background-image:
            url("../images/Business%20in%20a%20box/herotablet.png") !important;

        background-position: center center;
        background-size: cover;
    }

    body .workflows-page .wf-hero::before {
        background: linear-gradient(
            180deg,
            rgba(13,24,16,0.18) 0%,
            rgba(13,24,16,0.25) 30%,
            rgba(13,24,16,0.53) 57%,
            rgba(13,24,16,0.74) 100%
        );
    }

    body .workflows-page .wf-hero__inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        min-height: 850px;

        padding: 66px 60px 112px;
    }

    body .workflows-page .wf-hero__visual {
        order: -1;

        align-self: flex-end;

        width: clamp(380px, 60vw, 660px);
        max-width: 100%;

        height: clamp(320px, 46vw, 510px);

        margin: 0 -8px 22px 0;
    }

    body .workflows-page .wf-hero__content {
        width: 100%;
        max-width: 900px;
    }

    body .workflows-page .wf-hero__eyebrow {
        margin-bottom: 23px;
        font-size: 13px;
    }

    body .workflows-page .wf-hero__title {
        max-width: 800px;

        font-size: clamp(43px, 5.4vw, 60px);
    }

    body .workflows-page .wf-hero__body {
        max-width: 830px;

        margin-top: 28px;

        font-size: 16px;
        line-height: 1.8;
    }

    body .workflows-page .wf-hero__button {
        min-height: 58px;

        margin-top: 32px;
        padding: 17px 32px;

        font-size: 15px;
    }
}


/* =========================================================
   11 — SMALL TABLET
   600px–749px
========================================================= */

@media (min-width: 600px) and (max-width: 749px) {

    body .workflows-page .wf-hero__inner {
        padding: 65px 43px 105px;
    }

    body .workflows-page .wf-hero__visual {
        width: 84%;
        max-width: 530px;

        height: 360px;

        margin-right: 0;
        margin-bottom: 22px;
    }

    body .workflows-page .wf-hero__title {
        font-size: clamp(38px, 6vw, 47px);
    }

    body .workflows-page .wf-hero__body {
        font-size: 15px;
    }
}


/* =========================================================
   12 — MOBILE
   599px AND BELOW
========================================================= */

@media (max-width: 599px) {

    body .workflows-page .wf-hero {
        height: auto;
        min-height: 0;

        background-image:
            url("../images/Business%20in%20a%20box/heromobile.png") !important;

        background-position: 60% center;
        background-size: cover;
    }

    /* Darkened copy area for readability */

    body .workflows-page .wf-hero::before {
        background: linear-gradient(
            180deg,
            rgba(13,24,16,0.17) 0%,
            rgba(13,24,16,0.28) 27%,
            rgba(13,24,16,0.53) 48%,
            rgba(13,24,16,0.70) 73%,
            rgba(13,24,16,0.77) 100%
        );
    }

    body .workflows-page .wf-hero__inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        width: 100%;

        padding: 62px 28px 92px 34px;
    }

    body .workflows-page .wf-hero__visual {
        order: -1;
        align-self: center;

        width: 100%;
        max-width: 440px;

        height: clamp(235px, 70vw, 330px);

        margin: 0 auto 14px;
    }

    body .workflows-page .wf-hero__content {
        width: 100%;
    }

    body .workflows-page .wf-hero__eyebrow {
        margin-bottom: 19px;

        font-size: 10px;
        line-height: 1.5;
        letter-spacing: 0.13em;
    }

    body .workflows-page .wf-hero__title {
        max-width: 520px;

        font-size: clamp(33px, 8.5vw, 45px);
        line-height: 1.15;
        letter-spacing: -0.05em;
    }

    body .workflows-page .wf-hero__body {
        max-width: 520px;

        margin-top: 25px;

        font-size: 14px;
        line-height: 1.8;
    }

    body .workflows-page .wf-hero__button {
        gap: 15px;

        min-height: 55px;
        margin-top: 30px;

        padding: 16px 25px;

        font-size: 13px;
    }
}


/* =========================================================
   13 — SMALL MOBILE
   374px AND BELOW
========================================================= */

@media (max-width: 374px) {

    body .workflows-page .wf-hero__inner {
        padding: 56px 23px 84px 29px;
    }

    body .workflows-page .wf-hero__visual {
        height: 225px;
        margin-bottom: 10px;
    }

    body .workflows-page .wf-hero__eyebrow {
        font-size: 9.5px;
        margin-bottom: 18px;
    }

    body .workflows-page .wf-hero__title {
        font-size: clamp(30px, 8.4vw, 35px);
    }

    body .workflows-page .wf-hero__body {
        margin-top: 23px;
        font-size: 13px;
    }

    body .workflows-page .wf-hero__button {
        gap: 12px;
        padding: 15px 21px;
        font-size: 12px;
    }
}


/* =========================================================
   14 — HOVER INTERACTIONS
========================================================= */

@media (hover: hover) and (pointer: fine) {

    body .workflows-page .wf-hero__button:hover {
        background-color: #435239 !important;
        border-color: rgba(243,220,165,0.95);

        color: #FFFFFF !important;

        transform: translateY(-3px);

        box-shadow:
            0 12px 25px rgba(0,0,0,0.22),
            0 26px 48px rgba(0,0,0,0.19),
            0 0 24px rgba(230,209,142,0.12),
            inset 0 1px 0 rgba(255,255,255,0.16);
    }

    body .workflows-page
    .wf-hero__button:hover .wf-hero__arrow {
        transform: translateX(5px);
    }
}


/* =========================================================
   15 — ENTRANCE ANIMATIONS
========================================================= */

@keyframes wfHeroTextReveal {
    from {
        opacity: 0;
        translate: 0 20px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

@keyframes wfHeroVisualReveal {
    from {
        opacity: 0;
        translate: 0 20px;
        scale: 0.97;
    }

    to {
        opacity: 1;
        translate: 0 0;
        scale: 1;
    }
}

@keyframes wfHeroFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@media (prefers-reduced-motion: no-preference) {

    body .workflows-page .wf-hero__eyebrow,
    body .workflows-page .wf-hero__title,
    body .workflows-page .wf-hero__body,
    body .workflows-page .wf-hero__button {
        animation:
            wfHeroTextReveal 850ms
            cubic-bezier(.22,1,.36,1) both;
    }

    body .workflows-page .wf-hero__eyebrow {
        animation-delay: 80ms;
    }

    body .workflows-page .wf-hero__title {
        animation-delay: 170ms;
    }

    body .workflows-page .wf-hero__body {
        animation-delay: 275ms;
    }

    body .workflows-page .wf-hero__button {
        animation-delay: 380ms;
    }

    body .workflows-page .wf-hero__visual {
        animation:
            wfHeroVisualReveal 950ms
            cubic-bezier(.22,1,.36,1)
            160ms both,
            wfHeroFloat 7.5s ease-in-out 1200ms infinite;
    }
}


/* =========================================================
   16 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body .workflows-page .wf-hero__eyebrow,
    body .workflows-page .wf-hero__title,
    body .workflows-page .wf-hero__body,
    body .workflows-page .wf-hero__button,
    body .workflows-page .wf-hero__visual {
        animation: none !important;

        opacity: 1 !important;
        translate: none !important;
        scale: 1 !important;
        transform: none !important;
    }

    body .workflows-page .wf-hero__button,
    body .workflows-page .wf-hero__arrow {
        transition: none !important;
    }
}



/* =========================================================
   FRAYORA — WORKFLOWS & AUTOMATION
   SECTION 02 — BENEFITS

   COMPLETE RESPONSIVE CSS

   Desktop: 1101px+
   Tablet: 600px–1100px
   Mobile: 599px and below

   Solid ivory section background
   Five elevated benefit cards
   Olive / Terracotta / Olive / Terracotta / Neutral
   Bond-inspired typography and dimensional depth
   Soft shadows and subtle luminous icon finishes
   Responsive layout
   Scroll-driven entrance animations
   Reduced-motion accessibility
========================================================= */


/* =========================================================
   01 — SECTION FOUNDATION
========================================================= */

body .workflows-page .wf-benefits {
    position: relative;
    isolation: isolate;

    width: 100%;
    margin: 0;
    padding: 0;

    overflow: hidden;
    box-sizing: border-box;

    background-color: #F8F3EB !important;
    background-image: none !important;

    color: #1F211D;
}

body .workflows-page .wf-benefits *,
body .workflows-page .wf-benefits *::before,
body .workflows-page .wf-benefits *::after {
    box-sizing: border-box;
}

body .workflows-page .wf-benefits::before,
body .workflows-page .wf-benefits::after {
    content: none !important;
    display: none !important;
}


/* =========================================================
   02 — CONTAINER
========================================================= */

body .workflows-page .wf-benefits__inner {
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: 1600px;

    margin: 0 auto;
}

body .workflows-page .wf-benefits__intro {
    width: 100%;
    margin: 0 auto;

    text-align: center;
}


/* =========================================================
   03 — TYPOGRAPHY
========================================================= */

body .workflows-page .wf-benefits__title {
    width: 100%;
    margin: 0;

    font-family: "Manrope", "Inter", sans-serif !important;
    font-weight: 600;
    line-height: 1.14;
    letter-spacing: -0.05em;

    color: #1F211D;

    text-align: center;
    text-wrap: balance;
}

body .workflows-page .wf-benefits__body {
    width: 100%;
    margin-left: auto;
    margin-right: auto;

    font-family: "Inter", sans-serif !important;
    font-weight: 400;
    line-height: 1.75;

    color: rgba(31,33,29,0.76);

    text-align: center;
}


/* =========================================================
   04 — FIVE-CARD GRID
========================================================= */

body .workflows-page .wf-benefits__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));

    align-items: stretch;

    width: 100%;
    min-width: 0;
    margin: 0;
}


/* =========================================================
   05 — ELEVATED CARD SURFACES
========================================================= */

body .workflows-page .wf-benefits__card {
    position: relative;
    isolation: isolate;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    width: 100%;
    min-width: 0;
    height: 100%;

    margin: 0;

    border: 1px solid rgba(255,255,255,0.70);
    border-radius: 17px;

    background-color: #FFFCF8;
    background-image: none;

    box-shadow:
        0 4px 10px rgba(65,49,36,0.025),
        0 15px 32px rgba(65,49,36,0.055),
        0 28px 52px rgba(65,49,36,0.035),
        inset 0 1px 0 rgba(255,255,255,0.90);

    transition:
        transform 420ms cubic-bezier(.22,1,.36,1),
        box-shadow 420ms ease,
        border-color 420ms ease;
}

/* Alternating subtle card surfaces */

body .workflows-page
.wf-benefits__card:nth-child(odd) {
    background-color: #F4F4ED;
}

body .workflows-page
.wf-benefits__card:nth-child(even) {
    background-color: #F9F0E7;
}

body .workflows-page
.wf-benefits__card:nth-child(5) {
    background-color: #F4F1EB;
}

/* Very fine upper surface highlight */

body .workflows-page .wf-benefits__card::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 0;

    border-radius: inherit;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.70);

    pointer-events: none;
}


/* =========================================================
   06 — CIRCULAR ICONS
========================================================= */

body .workflows-page .wf-benefits__icon {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border-radius: 50%;

    transition:
        transform 420ms cubic-bezier(.22,1,.36,1),
        box-shadow 420ms ease;
}


/* OLIVE — 01 AND 03 */

body .workflows-page
.wf-benefits__icon--olive {
    background-color: #E2E7D7;

    background-image: linear-gradient(
        145deg,
        #F2F5E8 0%,
        #E2E7D7 55%,
        #D6DDC9 100%
    );

    border: 1px solid rgba(81,104,66,0.11);

    box-shadow:
        0 5px 12px rgba(48,65,44,0.035),
        0 13px 24px rgba(48,65,44,0.06),
        inset 0 2px 1px rgba(255,255,255,0.77);
}


/* TERRACOTTA — 02 AND 04 */

body .workflows-page
.wf-benefits__icon--terracotta {
    background-color: #F3DFCB;

    background-image: linear-gradient(
        145deg,
        #FFF1E3 0%,
        #F4DFCB 55%,
        #EED4BE 100%
    );

    border: 1px solid rgba(175,107,72,0.10);

    box-shadow:
        0 5px 12px rgba(89,55,35,0.035),
        0 13px 24px rgba(89,55,35,0.065),
        inset 0 2px 1px rgba(255,255,255,0.81);
}


/* NEUTRAL — 05 */

body .workflows-page
.wf-benefits__icon--neutral {
    background-color: #E8E4DC;

    background-image: linear-gradient(
        145deg,
        #F5F2EC 0%,
        #E9E4DB 58%,
        #DCD7CE 100%
    );

    border: 1px solid rgba(99,91,78,0.10);

    box-shadow:
        0 5px 12px rgba(65,59,48,0.035),
        0 13px 24px rgba(65,59,48,0.055),
        inset 0 2px 1px rgba(255,255,255,0.80);
}


/* INNER LIGHT RING */

body .workflows-page .wf-benefits__icon::before {
    content: "";

    position: absolute;
    inset: 4px;

    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.55);

    pointer-events: none;
}


/* SVG ARTWORK */

body .workflows-page .wf-benefits__icon svg {
    position: relative;
    z-index: 2;

    display: block;

    width: 44%;
    height: 44%;

    fill: none;

    stroke-width: 1.85;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition: transform 380ms ease;
}

body .workflows-page
.wf-benefits__icon--olive svg {
    stroke: #40553D;
}

body .workflows-page
.wf-benefits__icon--terracotta svg {
    stroke: #B35E3C;
}

body .workflows-page
.wf-benefits__icon--neutral svg {
    stroke: #423F38;
}


/* =========================================================
   07 — CARD CONTENT
========================================================= */

body .workflows-page .wf-benefits__card-content {
    position: relative;
    z-index: 1;

    width: 100%;
    min-width: 0;
}

body .workflows-page .wf-benefits__card-title {
    width: 100%;
    margin: 0;

    font-family: "Manrope", "Inter", sans-serif !important;
    font-weight: 650;
    line-height: 1.4;
    letter-spacing: -0.025em;

    color: #1F211D;
}

body .workflows-page .wf-benefits__number {
    font-family: "Inter", sans-serif !important;
    font-weight: 650;
    letter-spacing: 0;

    color: #1F211D;
}

body .workflows-page .wf-benefits__description {
    width: 100%;
    margin: 0;

    font-family: "Inter", sans-serif !important;
    font-weight: 400;
    line-height: 1.7;

    color: rgba(31,33,29,0.77);

    overflow-wrap: break-word;
}


/* =========================================================
   08 — DESKTOP
   1101px AND ABOVE
========================================================= */

@media (min-width: 1101px) {

    body .workflows-page .wf-benefits {
        padding: 100px 0 110px;
    }

    body .workflows-page .wf-benefits__inner {
        padding: 0 80px;
    }

    body .workflows-page .wf-benefits__intro {
        max-width: 950px;
        margin-bottom: 45px;
    }

    body .workflows-page .wf-benefits__title {
        font-size: clamp(37px, 3.15vw, 49px);
    }

    body .workflows-page .wf-benefits__body {
        max-width: 780px;

        margin-top: 22px;

        font-size: 15px;
    }

    body .workflows-page .wf-benefits__grid {
        gap: 17px;
    }

    body .workflows-page .wf-benefits__card {
        min-height: 272px;
        padding: 25px 22px 28px;
    }

    body .workflows-page .wf-benefits__icon {
        width: 65px;
        height: 65px;

        margin-bottom: 25px;
    }

    body .workflows-page .wf-benefits__card-title {
        margin-bottom: 15px;

        font-size: 16px;
    }

    body .workflows-page .wf-benefits__description {
        font-size: 13px;
    }
}


/* =========================================================
   09 — SMALLER DESKTOP
   1101px–1350px
========================================================= */

@media (min-width: 1101px) and (max-width: 1350px) {

    body .workflows-page .wf-benefits__inner {
        padding: 0 60px;
    }

    body .workflows-page .wf-benefits__grid {
        gap: 12px;
    }

    body .workflows-page .wf-benefits__card {
        padding: 22px 15px 25px;
        min-height: 280px;
    }

    body .workflows-page .wf-benefits__icon {
        width: 58px;
        height: 58px;

        margin-bottom: 23px;
    }

    body .workflows-page .wf-benefits__card-title {
        font-size: 14px;
    }

    body .workflows-page .wf-benefits__description {
        font-size: 12px;
    }
}


/* =========================================================
   10 — TABLET
   600px–1100px
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .workflows-page .wf-benefits {
        padding: 85px 0 95px;
    }

    body .workflows-page .wf-benefits__inner {
        padding: 0 60px;
    }

    body .workflows-page .wf-benefits__intro {
        max-width: 850px;
        margin-bottom: 43px;
    }

    body .workflows-page .wf-benefits__title {
        font-size: clamp(36px, 4.8vw, 50px);
    }

    body .workflows-page .wf-benefits__body {
        max-width: 720px;

        margin-top: 22px;

        font-size: 15px;
    }

    /* 3 cards followed by 2 centered cards */

    body .workflows-page .wf-benefits__grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 18px;
    }

    body .workflows-page .wf-benefits__card {
        grid-column: span 2;

        min-height: 265px;
        padding: 25px 22px;
    }

    body .workflows-page .wf-benefits__card:nth-child(4) {
        grid-column: 2 / span 2;
    }

    body .workflows-page .wf-benefits__card:nth-child(5) {
        grid-column: 4 / span 2;
    }

    body .workflows-page .wf-benefits__icon {
        width: 66px;
        height: 66px;

        margin-bottom: 25px;
    }

    body .workflows-page .wf-benefits__card-title {
        margin-bottom: 13px;
        font-size: 16px;
    }

    body .workflows-page .wf-benefits__description {
        font-size: 13px;
    }
}


/* =========================================================
   11 — SMALL TABLET
   600px–749px
========================================================= */

@media (min-width: 600px) and (max-width: 749px) {

    body .workflows-page .wf-benefits {
        padding: 75px 0 85px;
    }

    body .workflows-page .wf-benefits__inner {
        padding: 0 42px;
    }

    body .workflows-page .wf-benefits__title {
        font-size: clamp(33px, 5.6vw, 42px);
    }

    /* Wider two-column cards */

    body .workflows-page .wf-benefits__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    body .workflows-page .wf-benefits__card {
        grid-column: auto !important;
        min-height: 250px;
        padding: 23px 20px;
    }

    body .workflows-page .wf-benefits__card:last-child {
        grid-column: 1 / -1 !important;
        max-width: calc(50% - 8px);
        width: 100%;
        justify-self: center;
    }

    body .workflows-page .wf-benefits__icon {
        width: 62px;
        height: 62px;
    }
}


/* =========================================================
   12 — MOBILE
   599px AND BELOW
========================================================= */

@media (max-width: 599px) {

    body .workflows-page .wf-benefits {
        padding: 75px 0 85px;
    }

    body .workflows-page .wf-benefits__inner {
        padding: 0 28px 0 34px;
    }

    body .workflows-page .wf-benefits__intro {
        margin-bottom: 38px;
    }

    body .workflows-page .wf-benefits__title {
        font-size: clamp(32px, 8vw, 43px);
        line-height: 1.16;
    }

    body .workflows-page .wf-benefits__body {
        margin-top: 23px;

        font-size: 14px;
        line-height: 1.75;
    }

    body .workflows-page .wf-benefits__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    /* Compact horizontal cards */

    body .workflows-page .wf-benefits__card {
        display: grid;
        grid-template-columns: 62px minmax(0, 1fr);

        column-gap: 18px;
        align-items: start;

        min-height: 145px;
        padding: 23px 20px;

        border-radius: 16px;
    }

    body .workflows-page .wf-benefits__icon {
        width: 60px;
        height: 60px;

        margin: 0;
    }

    body .workflows-page .wf-benefits__card-title {
        margin-bottom: 10px;
        font-size: 16px;
    }

    body .workflows-page .wf-benefits__description {
        font-size: 13px;
        line-height: 1.7;
    }
}


/* =========================================================
   13 — SMALL MOBILE
   374px AND BELOW
========================================================= */

@media (max-width: 374px) {

    body .workflows-page .wf-benefits {
        padding: 65px 0 75px;
    }

    body .workflows-page .wf-benefits__inner {
        padding: 0 23px 0 29px;
    }

    body .workflows-page .wf-benefits__title {
        font-size: 30px;
    }

    body .workflows-page .wf-benefits__card {
        grid-template-columns: 52px minmax(0, 1fr);
        column-gap: 13px;

        padding: 20px 16px;
    }

    body .workflows-page .wf-benefits__icon {
        width: 50px;
        height: 50px;
    }

    body .workflows-page .wf-benefits__card-title {
        font-size: 14px;
    }

    body .workflows-page .wf-benefits__description {
        font-size: 12px;
    }
}


/* =========================================================
   14 — HOVER EFFECTS
========================================================= */

@media (hover: hover) and (pointer: fine) {

    body .workflows-page .wf-benefits__card:hover {
        transform: translateY(-5px);

        border-color: rgba(255,255,255,0.92);

        box-shadow:
            0 9px 19px rgba(65,49,36,0.045),
            0 24px 45px rgba(65,49,36,0.085),
            0 40px 66px rgba(65,49,36,0.055),
            inset 0 1px 0 rgba(255,255,255,0.98);
    }

    body .workflows-page
    .wf-benefits__card:hover .wf-benefits__icon {
        transform: translateY(-3px) scale(1.045);
    }

    body .workflows-page
    .wf-benefits__card:hover svg {
        transform: scale(1.08);
    }
}


/* =========================================================
   15 — SCROLL ENTRANCE ANIMATIONS
========================================================= */

@keyframes wfBenefitsReveal {
    from {
        opacity: 0;
        translate: 0 23px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

@media (prefers-reduced-motion: no-preference) {

    @supports (animation-timeline: view()) {

        body .workflows-page .wf-benefits__intro {
            animation: wfBenefitsReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 55%;
        }

        body .workflows-page .wf-benefits__card {
            animation: wfBenefitsReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 60%;
        }

        body .workflows-page
        .wf-benefits__card:nth-child(2) {
            animation-range: entry 0% entry 64%;
        }

        body .workflows-page
        .wf-benefits__card:nth-child(3) {
            animation-range: entry 0% entry 68%;
        }

        body .workflows-page
        .wf-benefits__card:nth-child(4) {
            animation-range: entry 0% entry 72%;
        }

        body .workflows-page
        .wf-benefits__card:nth-child(5) {
            animation-range: entry 0% entry 76%;
        }
    }
}


/* =========================================================
   16 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body .workflows-page .wf-benefits__intro,
    body .workflows-page .wf-benefits__card {
        animation: none !important;

        opacity: 1 !important;
        translate: none !important;
        transform: none !important;
    }

    body .workflows-page .wf-benefits__card,
    body .workflows-page .wf-benefits__icon,
    body .workflows-page .wf-benefits__icon svg {
        transition: none !important;
    }
}

/* =========================================================
   WORKFLOWS & AUTOMATION — SECTION 02
   TABLET CARD WIDTH / HEIGHT FIX
   Narrower cards, taller shape, better proportions
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .workflows-page .wf-benefits__grid {
        display: flex;
        flex-wrap: nowrap;
        gap: 20px;

        overflow-x: auto;
        overflow-y: hidden;

        padding: 10px 0 28px;
        margin: 0;

        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }

    body .workflows-page .wf-benefits__card {
        flex: 0 0 52%;
width: 12%;
min-width: 12%;
max-width: 12%;

        min-height: 360px;
        height: auto;

        padding: 30px 28px 32px;
        border-radius: 24px;

        scroll-snap-align: start;
        align-self: stretch;
    }

    body .workflows-page .wf-benefits__icon {
        width: 76px;
        height: 76px;
        margin-bottom: 26px;
    }

    body .workflows-page .wf-benefits__card-title {
        font-size: 19px;
        line-height: 1.35;
        margin: 0 0 18px;
    }

    body .workflows-page .wf-benefits__description {
        font-size: 15px;
        line-height: 1.8;
    }
}

/* =========================================================
   SMALLER TABLET
========================================================= */

@media (min-width: 600px) and (max-width: 767px) {

    body .workflows-page .wf-benefits__card {
        flex: 0 0 82%;
        width: 82%;
        min-width: 82%;
        max-width: 82%;

        min-height: 330px;
        padding: 28px 24px 30px;
    }

    body .workflows-page .wf-benefits__icon {
        width: 72px;
        height: 72px;
    }

    body .workflows-page .wf-benefits__card-title {
        font-size: 18px;
    }

    body .workflows-page .wf-benefits__description {
        font-size: 14px;
        line-height: 1.75;
    }
}


/* =========================================================
   FRAYORA — WORKFLOWS & AUTOMATION
   SECTION 02 — FINAL TABLET CARD PROPORTIONS FIX

   Narrower, more portrait-style cards
   Remove excessive empty space
   Keep horizontal scrolling
   Tablet only: 600px–1100px
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    /* CAROUSEL */

    body .workflows-page .wf-benefits__grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;

        grid-template-columns: none !important;

        gap: 18px !important;

        width: 100%;
        min-width: 0;

        margin: 0 !important;
        padding: 12px 0 26px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        scroll-snap-type: x mandatory;
        scroll-padding-inline: 0;
        -webkit-overflow-scrolling: touch;
    }

    /* NARROWER CARDS */

    body .workflows-page .wf-benefits__card,
    body .workflows-page .wf-benefits__card:nth-child(4),
    body .workflows-page .wf-benefits__card:nth-child(5),
    body .workflows-page .wf-benefits__card:last-child {
        flex: 0 0 310px !important;

        width: 310px !important;
        min-width: 310px !important;
        max-width: 310px !important;

        height: 340px !important;
        min-height: 0 !important;

        display: flex !important;
        flex-direction: column;

        align-items: flex-start;
        justify-content: flex-start;

        grid-column: auto !important;

        margin: 0 !important;
        padding: 27px 25px 29px !important;

        border-radius: 20px;

        scroll-snap-align: start;
    }

    /* ICON */

    body .workflows-page .wf-benefits__icon {
        width: 68px !important;
        height: 68px !important;

        margin: 0 0 25px !important;
    }

    /* TITLE */

    body .workflows-page .wf-benefits__card-title {
        margin: 0 0 15px !important;

        font-size: 17px !important;
        line-height: 1.38;
    }

    /* DESCRIPTION */

    body .workflows-page .wf-benefits__description {
        margin: 0 !important;

        font-size: 14px !important;
        line-height: 1.7;
    }

    /* SCROLLBAR */

    body .workflows-page
    .wf-benefits__grid::-webkit-scrollbar {
        height: 5px;
    }

    body .workflows-page
    .wf-benefits__grid::-webkit-scrollbar-track {
        background: rgba(201,103,67,0.09);
        border-radius: 999px;
    }

    body .workflows-page
    .wf-benefits__grid::-webkit-scrollbar-thumb {
        background: #BE947E;
        border-radius: 999px;
    }

    /* Prevent view animations fading out carousel cards */

    body .workflows-page .wf-benefits__card {
        animation: none !important;
        opacity: 1 !important;
        translate: none !important;
    }
}


/* =========================================================
   SMALL TABLET — 600px–749px

   Keep card width proportional to screen
   while retaining portrait-like proportions.
========================================================= */

@media (min-width: 600px) and (max-width: 749px) {

    body .workflows-page .wf-benefits__card,
    body .workflows-page .wf-benefits__card:nth-child(4),
    body .workflows-page .wf-benefits__card:nth-child(5),
    body .workflows-page .wf-benefits__card:last-child {
        flex-basis: 275px !important;

        width: 275px !important;
        min-width: 275px !important;
        max-width: 275px !important;

        height: 325px !important;

        padding: 25px 22px 27px !important;
    }

    body .workflows-page .wf-benefits__card-title {
        font-size: 16px !important;
    }

    body .workflows-page .wf-benefits__description {
        font-size: 13px !important;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (min-width: 600px) and (max-width: 1100px)
and (prefers-reduced-motion: reduce) {

    body .workflows-page .wf-benefits__grid {
        scroll-behavior: auto !important;
    }
}


/* =========================================================
   FRAYORA — WORKFLOWS & AUTOMATION
   SECTION 03 — HOW IT WORKS

   COMPLETE RESPONSIVE CSS

   Desktop: 1101px+
   Tablet: 600px–1100px
   Mobile: 599px and below

   Bond-inspired editorial SaaS
   Solid ivory section surface
   Three-stage transformation flow
   Raised dimensional cards
   Olive number markers
   Soft luminous card highlights
   Directional connecting arrows
   Scroll entrance animations
   Reduced-motion accessibility
========================================================= */


/* =========================================================
   01 — SECTION FOUNDATION
========================================================= */

body .workflows-page .wf-transformation {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    width: 100%;
    margin: 0;
    padding: 0;

    background-color: #F5EDE4 !important;
    background-image: none !important;

    color: #1F211D;
}

body .workflows-page .wf-transformation *,
body .workflows-page .wf-transformation *::before,
body .workflows-page .wf-transformation *::after {
    box-sizing: border-box;
}

body .workflows-page .wf-transformation::before,
body .workflows-page .wf-transformation::after {
    content: none !important;
    display: none !important;
}


/* =========================================================
   02 — CONTAINER AND MAIN LAYOUT
========================================================= */

body .workflows-page .wf-transformation__inner {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1600px;

    margin: 0 auto;
}

body .workflows-page .wf-transformation__intro {
    min-width: 0;
    margin: 0;

    text-align: left;
}


/* =========================================================
   03 — EDITORIAL TYPOGRAPHY
========================================================= */

body .workflows-page .wf-transformation__eyebrow {
    margin: 0;

    font-family: "Inter", sans-serif !important;
    font-weight: 600;

    line-height: 1.4;
    letter-spacing: 0.15em;
    text-transform: uppercase;

    color: #687157;
}

body .workflows-page .wf-transformation__title {
    width: 100%;
    margin: 0;

    font-family: "Manrope", "Inter", sans-serif !important;
    font-weight: 600;

    line-height: 1.14;
    letter-spacing: -0.05em;
    text-wrap: balance;

    color: #1F211D;
}

body .workflows-page .wf-transformation__body {
    width: 100%;
    margin: 0;

    font-family: "Inter", sans-serif !important;
    font-weight: 400;

    line-height: 1.75;

    color: rgba(31,33,29,0.74);
}


/* =========================================================
   04 — THREE-STAGE FLOW
========================================================= */

body .workflows-page .wf-transformation__flow {
    position: relative;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    align-items: stretch;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    list-style: none;
    list-style-type: none;
}

body .workflows-page .wf-transformation__stage {
    position: relative;

    min-width: 0;
    margin: 0;
    padding: 0;

    list-style: none;
}

body .workflows-page .wf-transformation__stage::marker {
    content: "";
}


/* =========================================================
   05 — DIMENSIONAL CARDS
========================================================= */

body .workflows-page .wf-transformation__card {
    position: relative;
    isolation: isolate;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    width: 100%;
    height: 100%;
    min-width: 0;

    margin: 0;

    border: 1px solid rgba(255,255,255,0.85);
    border-radius: 18px;

    background-color: #FFFCF8;
    background-image: none;

    box-shadow:
        0 4px 10px rgba(66,48,34,0.025),
        0 15px 32px rgba(66,48,34,0.055),
        0 29px 53px rgba(66,48,34,0.04),
        inset 0 1px 0 rgba(255,255,255,0.95);

    transition:
        transform 400ms cubic-bezier(.22,1,.36,1),
        border-color 400ms ease,
        box-shadow 400ms ease;
}

/* Fine light-catching top edge */

body .workflows-page .wf-transformation__card::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 0;

    border-radius: inherit;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.94);

    pointer-events: none;
}


/* =========================================================
   06 — NUMBER AND STATUS LABEL
========================================================= */

body .workflows-page .wf-transformation__card-top {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    width: 100%;
}

body .workflows-page .wf-transformation__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border-radius: 50%;

    background-color: #3D4C30;
    color: #FFFFFF;

    font-family: "Inter", sans-serif !important;
    font-weight: 600;
    line-height: 1;

    box-shadow:
        0 5px 10px rgba(38,55,32,0.15),
        inset 0 1px 0 rgba(255,255,255,0.18);
}

body .workflows-page .wf-transformation__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: fit-content;
    max-width: 100%;

    border-radius: 999px;

    background-color: #E7E9DC;
    color: #34402D;

    font-family: "Inter", sans-serif !important;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.065em;

    text-transform: uppercase;
}

/* Slightly distinct final-stage label */

body .workflows-page
.wf-transformation__stage:last-child
.wf-transformation__label {
    background-color: #DEE8C9;
}


/* =========================================================
   07 — ICON ILLUSTRATIONS
========================================================= */

body .workflows-page .wf-transformation__icon {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border-radius: 14px;

    background-color: #F4F5EC;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.93),
        0 7px 17px rgba(54,67,43,0.055);

    transition:
        transform 400ms cubic-bezier(.22,1,.36,1),
        box-shadow 400ms ease;
}

body .workflows-page .wf-transformation__icon svg {
    display: block;

    width: 66%;
    height: 66%;

    fill: none;
    stroke: #435638;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;

    filter:
        drop-shadow(0 2px 2px rgba(36,53,31,0.06));

    transition: transform 350ms ease;
}


/* =========================================================
   08 — CARD COPY
========================================================= */

body .workflows-page .wf-transformation__card-title {
    position: relative;
    z-index: 2;

    width: 100%;
    margin: 0;

    font-family: "Manrope", "Inter", sans-serif !important;
    font-weight: 650;
    line-height: 1.33;
    letter-spacing: -0.035em;

    color: #1F211D;
}

body .workflows-page .wf-transformation__description {
    position: relative;
    z-index: 2;

    width: 100%;
    margin: 0;

    font-family: "Inter", sans-serif !important;
    font-weight: 400;
    line-height: 1.7;

    color: rgba(31,33,29,0.76);

    overflow-wrap: break-word;
}


/* =========================================================
   09 — CONNECTING ARROWS

   CSS-only decoration.
   No extra visible text.
========================================================= */

body .workflows-page
.wf-transformation__stage:not(:last-child)::after {
    content: "";

    position: absolute;
    z-index: 3;

    top: 50%;
    right: -30px;

    width: 18px;
    height: 18px;

    border-top: 1.5px solid #495241;
    border-right: 1.5px solid #495241;

    transform:
        translateY(-50%)
        rotate(45deg);

    pointer-events: none;
}

body .workflows-page
.wf-transformation__stage:not(:last-child)::before {
    content: "";

    position: absolute;
    z-index: 3;

    top: 50%;
    right: -27px;

    width: 23px;
    height: 1.5px;

    background-color: #495241;

    transform: translateY(-50%);

    pointer-events: none;
}


/* =========================================================
   10 — DESKTOP
   1101px+
========================================================= */

@media (min-width: 1101px) {

    body .workflows-page .wf-transformation {
        padding: 105px 0 110px;
    }

    body .workflows-page .wf-transformation__inner {
        display: grid;

        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(0, 1.5fr);

        column-gap: 65px;
        align-items: center;

        padding: 0 80px;
    }

    /* LEFT INTRO */

    body .workflows-page .wf-transformation__intro {
        max-width: 500px;
    }

    body .workflows-page .wf-transformation__eyebrow {
        margin-bottom: 22px;
        font-size: 12px;
    }

    body .workflows-page .wf-transformation__title {
        font-size: clamp(36px, 3vw, 46px);
    }

    body .workflows-page .wf-transformation__body {
        max-width: 475px;
        margin-top: 25px;

        font-size: 14px;
    }

    /* RIGHT FLOW */

    body .workflows-page .wf-transformation__flow {
        gap: 38px;
    }

    body .workflows-page .wf-transformation__card {
        min-height: 305px;
        padding: 20px 18px 22px;
    }

    body .workflows-page .wf-transformation__card-top {
        gap: 8px;
        margin-bottom: 19px;
    }

    body .workflows-page .wf-transformation__number {
        width: 32px;
        height: 32px;
        font-size: 11px;
    }

    body .workflows-page .wf-transformation__label {
        min-height: 27px;
        padding: 6px 11px;

        font-size: 9px;
    }

    body .workflows-page .wf-transformation__icon {
        width: 52px;
        height: 52px;

        margin-bottom: 17px;
    }

    body .workflows-page .wf-transformation__card-title {
        margin-bottom: 12px;

        font-size: 15px;
    }

    body .workflows-page .wf-transformation__description {
        font-size: 12px;
        line-height: 1.68;
    }
}


/* =========================================================
   11 — SMALLER DESKTOP
   1101px–1350px
========================================================= */

@media (min-width: 1101px) and (max-width: 1350px) {

    body .workflows-page .wf-transformation__inner {
        grid-template-columns:
            minmax(0, 0.85fr)
            minmax(0, 1.55fr);

        column-gap: 38px;
        padding: 0 60px;
    }

    body .workflows-page .wf-transformation__flow {
        gap: 30px;
    }

    body .workflows-page .wf-transformation__card {
        min-height: 330px;
        padding: 18px 13px 21px;
    }

    body .workflows-page .wf-transformation__number {
        width: 29px;
        height: 29px;
    }

    body .workflows-page .wf-transformation__label {
        padding: 6px 8px;
        font-size: 8px;
    }

    body .workflows-page .wf-transformation__card-title {
        font-size: 13px;
    }

    body .workflows-page .wf-transformation__description {
        font-size: 11px;
    }

    body .workflows-page
    .wf-transformation__stage:not(:last-child)::after {
        right: -25px;
        width: 14px;
        height: 14px;
    }

    body .workflows-page
    .wf-transformation__stage:not(:last-child)::before {
        right: -23px;
        width: 19px;
    }
}


/* =========================================================
   12 — TABLET
   600px–1100px
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .workflows-page .wf-transformation {
        padding: 90px 0 100px;
    }

    body .workflows-page .wf-transformation__inner {
        display: block;
        padding: 0 60px;
    }

    body .workflows-page .wf-transformation__intro {
        max-width: 800px;
        margin-bottom: 48px;
    }

    body .workflows-page .wf-transformation__eyebrow {
        margin-bottom: 20px;
        font-size: 12px;
    }

    body .workflows-page .wf-transformation__title {
        max-width: 780px;
        font-size: clamp(36px, 4.7vw, 50px);
    }

    body .workflows-page .wf-transformation__body {
        max-width: 750px;

        margin-top: 22px;
        font-size: 15px;
    }

    body .workflows-page .wf-transformation__flow {
        gap: 34px;
    }

    body .workflows-page .wf-transformation__card {
        min-height: 315px;
        padding: 20px 17px 23px;
    }

    body .workflows-page .wf-transformation__card-top {
        gap: 8px;
        margin-bottom: 19px;
    }

    body .workflows-page .wf-transformation__number {
        width: 30px;
        height: 30px;
        font-size: 11px;
    }

    body .workflows-page .wf-transformation__label {
        min-height: 26px;
        padding: 6px 9px;
        font-size: 9px;
    }

    body .workflows-page .wf-transformation__icon {
        width: 52px;
        height: 52px;
        margin-bottom: 18px;
    }

    body .workflows-page .wf-transformation__card-title {
        margin-bottom: 12px;
        font-size: 15px;
    }

    body .workflows-page .wf-transformation__description {
        font-size: 12px;
    }
}


/* =========================================================
   13 — SMALL TABLET
   600px–799px

   Switch to vertical sequence to protect copy.
========================================================= */

@media (min-width: 600px) and (max-width: 799px) {

    body .workflows-page .wf-transformation {
        padding: 80px 0 90px;
    }

    body .workflows-page .wf-transformation__inner {
        padding: 0 42px;
    }

    body .workflows-page .wf-transformation__title {
        font-size: clamp(35px, 5.5vw, 43px);
    }

    body .workflows-page .wf-transformation__flow {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;

        max-width: 620px;
        margin: 0 auto;
    }

    body .workflows-page .wf-transformation__card {
        min-height: 0;
        padding: 25px 28px 28px;
    }

    body .workflows-page .wf-transformation__card-top {
        margin-bottom: 15px;
    }

    body .workflows-page .wf-transformation__card-title {
        font-size: 19px;
    }

    body .workflows-page .wf-transformation__description {
        font-size: 14px;
    }

    /* Vertical connectors */

    body .workflows-page
    .wf-transformation__stage:not(:last-child)::after {
        top: auto;
        bottom: -23px;
        left: calc(50% - 7px);
        right: auto;

        width: 14px;
        height: 14px;

        transform: rotate(135deg);
    }

    body .workflows-page
    .wf-transformation__stage:not(:last-child)::before {
        top: auto;
        bottom: -24px;

        left: 50%;
        right: auto;

        width: 1.5px;
        height: 20px;

        transform: translateX(-50%);
    }
}


/* =========================================================
   14 — MOBILE
   599px AND BELOW
========================================================= */

@media (max-width: 599px) {

    body .workflows-page .wf-transformation {
        padding: 75px 0 85px;
    }

    body .workflows-page .wf-transformation__inner {
        display: block;
        padding: 0 28px 0 34px;
    }

    body .workflows-page .wf-transformation__intro {
        margin-bottom: 40px;
    }

    body .workflows-page .wf-transformation__eyebrow {
        margin-bottom: 19px;
        font-size: 11px;
    }

    body .workflows-page .wf-transformation__title {
        font-size: clamp(32px, 8vw, 43px);
    }

    body .workflows-page .wf-transformation__body {
        margin-top: 23px;
        font-size: 14px;
    }

    /* Vertical three-step sequence */

    body .workflows-page .wf-transformation__flow {
        grid-template-columns: minmax(0, 1fr);
        gap: 41px;
    }

    body .workflows-page .wf-transformation__card {
        min-height: 0;
        padding: 24px 23px 27px;
        border-radius: 18px;
    }

    body .workflows-page .wf-transformation__card-top {
        gap: 9px;
        margin-bottom: 18px;
    }

    body .workflows-page .wf-transformation__number {
        width: 33px;
        height: 33px;

        font-size: 11px;
    }

    body .workflows-page .wf-transformation__label {
        padding: 7px 11px;
        font-size: 9px;
    }

    body .workflows-page .wf-transformation__icon {
        width: 54px;
        height: 54px;
        margin-bottom: 17px;
    }

    body .workflows-page .wf-transformation__card-title {
        margin-bottom: 12px;
        font-size: 19px;
    }

    body .workflows-page .wf-transformation__description {
        font-size: 13px;
        line-height: 1.75;
    }

    /* Downward arrows */

    body .workflows-page
    .wf-transformation__stage:not(:last-child)::after {
        top: auto;
        bottom: -24px;
        left: calc(50% - 7px);
        right: auto;

        width: 14px;
        height: 14px;

        transform: rotate(135deg);
    }

    body .workflows-page
    .wf-transformation__stage:not(:last-child)::before {
        top: auto;
        bottom: -24px;
        left: 50%;
        right: auto;

        width: 1.5px;
        height: 20px;

        transform: translateX(-50%);
    }
}


/* =========================================================
   15 — SMALL MOBILE
   374px AND BELOW
========================================================= */

@media (max-width: 374px) {

    body .workflows-page .wf-transformation {
        padding: 65px 0 75px;
    }

    body .workflows-page .wf-transformation__inner {
        padding: 0 23px 0 29px;
    }

    body .workflows-page .wf-transformation__title {
        font-size: 30px;
    }

    body .workflows-page .wf-transformation__card {
        padding: 21px 18px 24px;
    }

    body .workflows-page .wf-transformation__card-title {
        font-size: 17px;
    }

    body .workflows-page .wf-transformation__description {
        font-size: 12px;
    }
}


/* =========================================================
   16 — HOVER INTERACTIONS
========================================================= */

@media (hover: hover) and (pointer: fine) {

    body .workflows-page
    .wf-transformation__card:hover {
        transform: translateY(-4px);

        border-color: rgba(208,195,169,0.45);

        box-shadow:
            0 8px 18px rgba(66,48,34,0.04),
            0 23px 44px rgba(66,48,34,0.09),
            0 39px 65px rgba(66,48,34,0.05),
            inset 0 1px 0 rgba(255,255,255,0.98);
    }

    body .workflows-page
    .wf-transformation__card:hover
    .wf-transformation__icon {
        transform: translateY(-3px);

        box-shadow:
            0 11px 22px rgba(54,67,43,0.10),
            inset 0 1px 0 rgba(255,255,255,0.95);
    }

    body .workflows-page
    .wf-transformation__card:hover svg {
        transform: scale(1.07);
    }
}


/* =========================================================
   17 — SCROLL ENTRANCE ANIMATIONS
========================================================= */

@keyframes wfTransformationReveal {
    from {
        opacity: 0;
        translate: 0 22px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

@media (prefers-reduced-motion: no-preference) {

    @supports (animation-timeline: view()) {

        body .workflows-page .wf-transformation__intro {
            animation: wfTransformationReveal linear both;

            animation-timeline: view();
            animation-range: entry 0% entry 55%;
        }

        body .workflows-page .wf-transformation__stage {
            animation: wfTransformationReveal linear both;

            animation-timeline: view();
            animation-range: entry 0% entry 60%;
        }

        body .workflows-page
        .wf-transformation__stage:nth-child(2) {
            animation-range: entry 0% entry 68%;
        }

        body .workflows-page
        .wf-transformation__stage:nth-child(3) {
            animation-range: entry 0% entry 76%;
        }
    }
}


/* =========================================================
   18 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body .workflows-page .wf-transformation__intro,
    body .workflows-page .wf-transformation__stage {
        animation: none !important;
        opacity: 1 !important;
        translate: none !important;
        transform: none !important;
    }

    body .workflows-page .wf-transformation__card,
    body .workflows-page .wf-transformation__icon,
    body .workflows-page .wf-transformation__icon svg {
        transition: none !important;
    }
}


/* =========================================================
   FRAYORA — WORKFLOWS & AUTOMATION
   SECTION 04 — BUILT AROUND YOUR BUSINESS

   COMPLETE RESPONSIVE CSS

   Desktop: 1101px+
   Tablet: 600px–1100px
   Mobile: 599px and below

   Solid editorial ivory
   Four-stage open workflow
   No cards / no section background visuals
   Olive number markers
   Champagne dimensional icon medallions
   Refined directional connectors
   Subtle scroll reveal and hover animations
   Reduced-motion accessible
========================================================= */


/* =========================================================
   01 — SECTION FOUNDATION
========================================================= */

body .workflows-page .wf-connected {
    position: relative;
    isolation: isolate;

    width: 100%;
    margin: 0;
    padding: 0;

    overflow: hidden;
    box-sizing: border-box;

    background-color: #F8F3EB !important;
    background-image: none !important;

    color: #1F211D;
}

body .workflows-page .wf-connected *,
body .workflows-page .wf-connected *::before,
body .workflows-page .wf-connected *::after {
    box-sizing: border-box;
}

body .workflows-page .wf-connected::before,
body .workflows-page .wf-connected::after {
    content: none !important;
    display: none !important;
}


/* =========================================================
   02 — INNER GRID
========================================================= */

body .workflows-page .wf-connected__inner {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1600px;

    margin: 0 auto;
}

body .workflows-page .wf-connected__intro {
    min-width: 0;
    margin: 0;

    text-align: left;
}


/* =========================================================
   03 — EDITORIAL TYPOGRAPHY
========================================================= */

body .workflows-page .wf-connected__eyebrow {
    display: block;

    margin: 0;

    font-family: "Inter", sans-serif !important;
    font-weight: 600;
    line-height: 1.4;

    letter-spacing: 0.15em;
    text-transform: uppercase;

    color: #687157;
}

body .workflows-page .wf-connected__title {
    width: 100%;
    margin: 0;

    font-family: "Manrope", "Inter", sans-serif !important;
    font-weight: 600;
    line-height: 1.14;

    letter-spacing: -0.05em;
    text-wrap: balance;

    color: #1F211D;
}

body .workflows-page .wf-connected__body {
    width: 100%;
    margin: 0;

    font-family: "Inter", sans-serif !important;
    font-weight: 400;
    line-height: 1.75;

    color: rgba(31,33,29,0.75);
}


/* =========================================================
   04 — WORKFLOW STRUCTURE
========================================================= */

body .workflows-page .wf-connected__flow {
    position: relative;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    list-style: none;
}

body .workflows-page .wf-connected__step {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    min-width: 0;
    margin: 0;
    padding: 0;

    list-style: none;
    text-align: left;
}

body .workflows-page .wf-connected__step::marker {
    content: "";
}


/* =========================================================
   05 — TOP ICON GROUP
========================================================= */

body .workflows-page .wf-connected__step-top {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;

    gap: 11px;

    width: 100%;
}

body .workflows-page .wf-connected__number {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border-radius: 50%;

    background-color: #3D4C30;

    color: #FFFFFF;

    font-family: "Inter", sans-serif !important;
    font-weight: 650;
    line-height: 1;

    box-shadow:
        0 4px 10px rgba(36,55,29,0.14),
        inset 0 1px 0 rgba(255,255,255,0.16);
}


/* =========================================================
   06 — CHAMPAGNE ICON MEDALLIONS
========================================================= */

body .workflows-page .wf-connected__icon {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border-radius: 50%;

    background-color: #F5F1E8;

    background-image: linear-gradient(
        145deg,
        #FFFDF9 0%,
        #F6F1E7 52%,
        #EDE5D8 100%
    );

    border: 1px solid rgba(173,153,119,0.23);

    box-shadow:
        0 5px 11px rgba(76,59,36,0.035),
        0 15px 26px rgba(76,59,36,0.055),
        inset 0 2px 1px rgba(255,255,255,0.93),
        inset 0 -4px 9px rgba(152,121,74,0.035);

    transition:
        transform 420ms cubic-bezier(.22,1,.36,1),
        box-shadow 420ms ease;
}

/* Fine luminous inner ring */

body .workflows-page .wf-connected__icon::before {
    content: "";

    position: absolute;
    inset: 5px;

    border: 1px solid rgba(255,255,255,0.78);
    border-radius: 50%;

    pointer-events: none;
}

/* SVG artwork */

body .workflows-page .wf-connected__icon svg {
    position: relative;
    z-index: 2;

    display: block;

    width: 44%;
    height: 44%;

    fill: none;
    stroke: #66522B;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition: transform 380ms ease;
}


/* =========================================================
   07 — STEP TYPOGRAPHY
========================================================= */

body .workflows-page .wf-connected__step-title {
    width: 100%;
    margin: 0;

    font-family: "Manrope", "Inter", sans-serif !important;
    font-weight: 650;
    line-height: 1.33;

    letter-spacing: -0.035em;
    color: #1F211D;

    overflow-wrap: break-word;
}

body .workflows-page .wf-connected__description {
    width: 100%;
    margin: 0;

    font-family: "Inter", sans-serif !important;
    font-weight: 400;
    line-height: 1.7;

    color: rgba(31,33,29,0.76);

    overflow-wrap: break-word;
}


/* =========================================================
   08 — CONNECTING ARROWS

   Connected visual between workflow stages.
   CSS-only decorative lines.
========================================================= */

body .workflows-page
.wf-connected__step:not(:last-child)::before {
    content: "";

    position: absolute;
    z-index: 0;

    top: 34px;
    left: calc(100% - 7px);

    width: 26px;
    height: 1px;

    background-color: rgba(69,77,62,0.67);

    pointer-events: none;
}

body .workflows-page
.wf-connected__step:not(:last-child)::after {
    content: "";

    position: absolute;
    z-index: 0;

    top: 30px;
    left: calc(100% + 12px);

    width: 9px;
    height: 9px;

    border-top: 1px solid rgba(69,77,62,0.76);
    border-right: 1px solid rgba(69,77,62,0.76);

    transform: rotate(45deg);

    pointer-events: none;
}


/* =========================================================
   09 — DESKTOP
   1101px+
========================================================= */

@media (min-width: 1101px) {

    body .workflows-page .wf-connected {
        padding: 100px 0 110px;
    }

    body .workflows-page .wf-connected__inner {
        display: grid;

        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(0, 1.45fr);

        column-gap: 70px;
        align-items: center;

        padding: 0 80px;
    }

    /* LEFT INTRO */

    body .workflows-page .wf-connected__intro {
        max-width: 520px;
    }

    body .workflows-page .wf-connected__eyebrow {
        margin-bottom: 22px;
        font-size: 12px;
    }

    body .workflows-page .wf-connected__title {
        font-size: clamp(37px, 3.1vw, 47px);
    }

    body .workflows-page .wf-connected__body {
        max-width: 495px;

        margin-top: 25px;
        font-size: 14px;
    }

    /* RIGHT FOUR-STEP DIAGRAM */

    body .workflows-page .wf-connected__flow {
        column-gap: 22px;
    }

    body .workflows-page .wf-connected__step-top {
        gap: 9px;
        margin-bottom: 22px;
    }

    body .workflows-page .wf-connected__number {
        width: 29px;
        height: 29px;

        font-size: 10px;
    }

    body .workflows-page .wf-connected__icon {
        width: 67px;
        height: 67px;
    }

    body .workflows-page .wf-connected__step-title {
        margin-bottom: 12px;

        font-size: 15px;
    }

    body .workflows-page .wf-connected__description {
        font-size: 12px;
    }
}


/* =========================================================
   10 — SMALLER DESKTOP
   1101px–1350px
========================================================= */

@media (min-width: 1101px) and (max-width: 1350px) {

    body .workflows-page .wf-connected__inner {
        grid-template-columns:
            minmax(0, 0.85fr)
            minmax(0, 1.55fr);

        column-gap: 40px;
        padding: 0 60px;
    }

    body .workflows-page .wf-connected__flow {
        column-gap: 17px;
    }

    body .workflows-page .wf-connected__number {
        width: 25px;
        height: 25px;
        font-size: 9px;
    }

    body .workflows-page .wf-connected__icon {
        width: 58px;
        height: 58px;
    }

    body .workflows-page .wf-connected__step-top {
        gap: 7px;
    }

    body .workflows-page .wf-connected__step-title {
        font-size: 13px;
    }

    body .workflows-page .wf-connected__description {
        font-size: 11px;
    }

    body .workflows-page
    .wf-connected__step:not(:last-child)::before {
        top: 29px;
        width: 18px;
    }

    body .workflows-page
    .wf-connected__step:not(:last-child)::after {
        top: 25px;
        left: calc(100% + 4px);
    }
}


/* =========================================================
   11 — TABLET
   600px–1100px

   Open horizontal scrolling workflow
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .workflows-page .wf-connected {
        padding: 85px 0 95px;
    }

    body .workflows-page .wf-connected__inner {
        display: block;
        padding: 0 60px;
    }

    body .workflows-page .wf-connected__intro {
        max-width: 850px;
        margin-bottom: 48px;
    }

    body .workflows-page .wf-connected__eyebrow {
        margin-bottom: 20px;
        font-size: 12px;
    }

    body .workflows-page .wf-connected__title {
        max-width: 820px;
        font-size: clamp(36px, 4.7vw, 50px);
    }

    body .workflows-page .wf-connected__body {
        max-width: 780px;
        margin-top: 24px;

        font-size: 15px;
    }

    /* Swipeable workflow */

    body .workflows-page .wf-connected__flow {
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;

        gap: 55px;

        width: 100%;

        padding: 10px 0 28px;
        margin: 0;

        overflow-x: auto;
        overflow-y: hidden;

        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;

        scrollbar-width: thin;
        scrollbar-color:
            #BE947E rgba(201,103,67,0.10);
    }

    body .workflows-page .wf-connected__step {
        flex: 0 0 38%;

        width: 38%;
        min-width: 0;

        scroll-snap-align: start;
    }

    body .workflows-page .wf-connected__step-top {
        gap: 13px;
        margin-bottom: 23px;
    }

    body .workflows-page .wf-connected__number {
        width: 31px;
        height: 31px;

        font-size: 11px;
    }

    body .workflows-page .wf-connected__icon {
        width: 78px;
        height: 78px;
    }

    body .workflows-page .wf-connected__step-title {
        margin-bottom: 12px;
        font-size: 19px;
    }

    body .workflows-page .wf-connected__description {
        max-width: 270px;
        font-size: 14px;
    }

    /* Tablet connector */

    body .workflows-page
    .wf-connected__step:not(:last-child)::before {
        top: 39px;
        left: calc(100% + 8px);
        width: 38px;
    }

    body .workflows-page
    .wf-connected__step:not(:last-child)::after {
        top: 35px;
        left: calc(100% + 37px);
    }

    /* Subtle scrollbar */

    body .workflows-page
    .wf-connected__flow::-webkit-scrollbar {
        height: 5px;
    }

    body .workflows-page
    .wf-connected__flow::-webkit-scrollbar-track {
        background: rgba(201,103,67,0.10);
        border-radius: 999px;
    }

    body .workflows-page
    .wf-connected__flow::-webkit-scrollbar-thumb {
        background: #BE947E;
        border-radius: 999px;
    }
}


/* =========================================================
   12 — SMALL TABLET
   600px–749px
========================================================= */

@media (min-width: 600px) and (max-width: 749px) {

    body .workflows-page .wf-connected {
        padding: 75px 0 85px;
    }

    body .workflows-page .wf-connected__inner {
        padding: 0 42px;
    }

    body .workflows-page .wf-connected__title {
        font-size: clamp(34px, 5.5vw, 43px);
    }

    body .workflows-page .wf-connected__flow {
        gap: 48px;
    }

    body .workflows-page .wf-connected__step {
        flex-basis: 65%;
        width: 65%;
    }

    body .workflows-page .wf-connected__icon {
        width: 72px;
        height: 72px;
    }

    body .workflows-page
    .wf-connected__step:not(:last-child)::before {
        top: 36px;
        width: 31px;
    }

    body .workflows-page
    .wf-connected__step:not(:last-child)::after {
        top: 32px;
        left: calc(100% + 30px);
    }
}


/* =========================================================
   13 — MOBILE
   599px AND BELOW

   Vertical connected workflow
========================================================= */

@media (max-width: 599px) {

    body .workflows-page .wf-connected {
        padding: 75px 0 85px;
    }

    body .workflows-page .wf-connected__inner {
        display: block;
        padding: 0 28px 0 34px;
    }

    body .workflows-page .wf-connected__intro {
        margin-bottom: 42px;
    }

    body .workflows-page .wf-connected__eyebrow {
        margin-bottom: 19px;
        font-size: 11px;
    }

    body .workflows-page .wf-connected__title {
        font-size: clamp(32px, 8vw, 43px);
    }

    body .workflows-page .wf-connected__body {
        margin-top: 24px;

        font-size: 14px;
        line-height: 1.8;
    }

    /* Vertical workflow */

    body .workflows-page .wf-connected__flow {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 0;

        overflow: visible;
    }

    body .workflows-page .wf-connected__step {
        display: grid;

        grid-template-columns:
            78px minmax(0, 1fr);

        grid-template-rows:
            auto 1fr;

        column-gap: 20px;

        align-items: start;

        width: 100%;
        min-width: 0;

        padding-bottom: 38px;
    }

    body .workflows-page
    .wf-connected__step:last-child {
        padding-bottom: 0;
    }

    body .workflows-page .wf-connected__step-top {
        grid-column: 1;
        grid-row: 1 / 3;

        position: relative;
        display: block;

        width: 78px;
        height: 78px;

        margin: 0;
    }

    body .workflows-page .wf-connected__icon {
        position: absolute;
        top: 0;
        left: 0;

        width: 72px;
        height: 72px;
    }

    body .workflows-page .wf-connected__number {
        position: absolute;
        z-index: 3;

        top: -7px;
        left: -7px;

        width: 25px;
        height: 25px;

        font-size: 9px;
    }

    body .workflows-page .wf-connected__step-title {
        grid-column: 2;
        grid-row: 1;

        margin: 6px 0 10px;

        font-size: 19px;
    }

    body .workflows-page .wf-connected__description {
        grid-column: 2;
        grid-row: 2;

        font-size: 13px;
        line-height: 1.75;
    }

    /* Vertical connecting line */

    body .workflows-page
    .wf-connected__step:not(:last-child)::before {
        top: 85px;
        left: 35px;

        width: 1px;
        height: calc(100% - 92px);

        background-color: rgba(69,77,62,0.35);
    }

    /* Remove horizontal arrowheads */

    body .workflows-page
    .wf-connected__step:not(:last-child)::after {
        content: none !important;
        display: none !important;
    }
}


/* =========================================================
   14 — SMALL MOBILE
   374px AND BELOW
========================================================= */

@media (max-width: 374px) {

    body .workflows-page .wf-connected {
        padding: 65px 0 75px;
    }

    body .workflows-page .wf-connected__inner {
        padding: 0 23px 0 29px;
    }

    body .workflows-page .wf-connected__title {
        font-size: 30px;
    }

    body .workflows-page .wf-connected__step {
        grid-template-columns:
            65px minmax(0, 1fr);

        column-gap: 15px;
    }

    body .workflows-page .wf-connected__step-top {
        width: 65px;
        height: 65px;
    }

    body .workflows-page .wf-connected__icon {
        width: 60px;
        height: 60px;
    }

    body .workflows-page .wf-connected__step-title {
        font-size: 17px;
    }

    body .workflows-page .wf-connected__description {
        font-size: 12px;
    }

    body .workflows-page
    .wf-connected__step:not(:last-child)::before {
        top: 73px;
        left: 29px;

        height: calc(100% - 80px);
    }
}


/* =========================================================
   15 — HOVER INTERACTIONS
========================================================= */

@media (hover: hover) and (pointer: fine) {

    body .workflows-page
    .wf-connected__step:hover .wf-connected__icon {
        transform: translateY(-4px) scale(1.04);

        box-shadow:
            0 9px 18px rgba(76,59,36,0.05),
            0 22px 38px rgba(76,59,36,0.09),
            inset 0 2px 1px rgba(255,255,255,0.95);
    }

    body .workflows-page
    .wf-connected__step:hover svg {
        transform: scale(1.07);
    }
}


/* =========================================================
   16 — SCROLL ENTRANCE ANIMATIONS
========================================================= */

@keyframes wfConnectedReveal {
    from {
        opacity: 0;
        translate: 0 22px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

@media (prefers-reduced-motion: no-preference) {

    @supports (animation-timeline: view()) {

        body .workflows-page .wf-connected__intro {
            animation: wfConnectedReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 55%;
        }

        body .workflows-page .wf-connected__step {
            animation: wfConnectedReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 60%;
        }

        body .workflows-page
        .wf-connected__step:nth-child(2) {
            animation-range: entry 0% entry 65%;
        }

        body .workflows-page
        .wf-connected__step:nth-child(3) {
            animation-range: entry 0% entry 70%;
        }

        body .workflows-page
        .wf-connected__step:nth-child(4) {
            animation-range: entry 0% entry 75%;
        }
    }
}


/* =========================================================
   17 — TABLET SCROLL ANIMATION SAFETY
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    /*
       Avoid horizontally scrolling stages becoming
       invisible due to view-timeline progress.
    */

    body .workflows-page .wf-connected__step {
        animation: none !important;
        opacity: 1 !important;
        translate: none !important;
    }
}


/* =========================================================
   18 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body .workflows-page .wf-connected__intro,
    body .workflows-page .wf-connected__step {
        animation: none !important;

        opacity: 1 !important;
        translate: none !important;
        transform: none !important;
    }

    body .workflows-page .wf-connected__flow {
        scroll-behavior: auto !important;
    }

    body .workflows-page .wf-connected__icon,
    body .workflows-page .wf-connected__icon svg {
        transition: none !important;
    }
}


/* =========================================================
   FRAYORA — WORKFLOWS & AUTOMATION
   SECTION 04 — WORKFLOW CONNECTOR REBUILD

   Correct connection:
   Icon 01 ---> Icon 02 ---> Icon 03 ---> Icon 04

   Desktop: 1101px+
   Tablet: 600px–1100px

   Numbers positioned as icon badges
   Lines connect circular icons, not number badges
   Tablet stages made compact
   Mobile unchanged
========================================================= */


/* =========================================================
   01 — DESKTOP + TABLET FOUNDATION
========================================================= */

@media (min-width: 600px) {

    /* Remove ALL old connector artwork */

    body .workflows-page
    .wf-connected__step:not(:last-child)::before,
    body .workflows-page
    .wf-connected__step:not(:last-child)::after,
    body .workflows-page
    .wf-connected__step-top::before,
    body .workflows-page
    .wf-connected__step-top::after {
        content: none !important;
        display: none !important;
    }

    /*
       Each step uses its icon as the timeline anchor.
       The number overlays the icon's upper-left edge.
    */

    body .workflows-page .wf-connected__step {
        position: relative;
        min-width: 0;
    }

    body .workflows-page .wf-connected__step-top {
        position: relative;

        display: flex;
        align-items: center;
        justify-content: flex-start;

        width: 100%;
        height: 84px;

        gap: 0 !important;
        margin-bottom: 22px;
    }

    body .workflows-page .wf-connected__icon {
        position: relative;
        z-index: 2;

        width: 76px;
        height: 76px;

        margin: 0;
        flex-shrink: 0;
    }

    /* Small olive number badge overlapping icon */

    body .workflows-page .wf-connected__number {
        position: absolute;
        z-index: 4;

        top: -5px;
        left: -12px;

        width: 28px;
        height: 28px;

        margin: 0;

        display: flex;
        align-items: center;
        justify-content: center;

        font-size: 10px;
    }

    /* Horizontal connector shaft */

    body .workflows-page
    .wf-connected__step:not(:last-child)::before {
        content: "" !important;
        display: block !important;

        position: absolute;
        z-index: 0;

        top: 42px;
        left: 93px;

        width: calc(100% - 70px);
        height: 1px;

        background: rgba(77, 84, 68, 0.50);

        pointer-events: none;
    }

    /* Arrowhead near following icon */

    body .workflows-page
    .wf-connected__step:not(:last-child)::after {
        content: "" !important;
        display: block !important;

        position: absolute;
        z-index: 1;

        top: 38px;
        right: -21px;
        left: auto;

        width: 9px;
        height: 9px;

        border-top: 1px solid rgba(77,84,68,0.70);
        border-right: 1px solid rgba(77,84,68,0.70);

        background: transparent;

        transform: rotate(45deg);

        pointer-events: none;
    }
}


/* =========================================================
   02 — DESKTOP
   1101px+
========================================================= */

@media (min-width: 1101px) {

    body .workflows-page .wf-connected__flow {
        display: grid;
        grid-template-columns: repeat(4, minmax(0,1fr));

        column-gap: 30px;
        align-items: start;
    }

    body .workflows-page .wf-connected__step-top {
        height: 84px;
        margin-bottom: 22px;
    }

    body .workflows-page .wf-connected__icon {
        width: 76px;
        height: 76px;
    }

    body .workflows-page .wf-connected__number {
        top: -5px;
        left: -11px;
    }

    body .workflows-page
    .wf-connected__step:not(:last-child)::before {
        top: 42px;
        left: 93px;

        width: calc(100% - 70px);
    }

    body .workflows-page
    .wf-connected__step:not(:last-child)::after {
        top: 38px;
        right: -21px;
    }

    body .workflows-page .wf-connected__step-title {
        margin-bottom: 12px;
    }
}


/* =========================================================
   03 — SMALLER DESKTOP
   1101px–1350px
========================================================= */

@media (min-width: 1101px) and (max-width: 1350px) {

    body .workflows-page .wf-connected__flow {
        column-gap: 23px;
    }

    body .workflows-page .wf-connected__step-top {
        height: 72px;
        margin-bottom: 20px;
    }

    body .workflows-page .wf-connected__icon {
        width: 66px;
        height: 66px;
    }

    body .workflows-page .wf-connected__number {
        width: 25px;
        height: 25px;

        top: -4px;
        left: -9px;
    }

    body .workflows-page
    .wf-connected__step:not(:last-child)::before {
        top: 36px;
        left: 80px;

        width: calc(100% - 62px);
    }

    body .workflows-page
    .wf-connected__step:not(:last-child)::after {
        top: 32px;
        right: -18px;
    }
}


/* =========================================================
   04 — TABLET
   600px–1100px

   Compact horizontally scrollable workflow
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .workflows-page .wf-connected__flow {
        display: flex !important;
        flex-wrap: nowrap !important;

        align-items: flex-start;

        gap: 46px !important;

        width: 100%;
        min-width: 0;

        margin: 0;
        padding: 18px 12px 28px;

        overflow-x: auto;
        overflow-y: hidden;

        scroll-snap-type: x mandatory;
        scroll-padding-inline: 12px;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;

        scrollbar-width: thin;
        scrollbar-color:
            #BE947E rgba(201,103,67,0.10);
    }

    /*
       Fixed width prevents enormous horizontal stages
       and keeps the diagram visually connected.
    */

    body .workflows-page .wf-connected__step {
        flex: 0 0 230px !important;

        width: 230px !important;
        min-width: 230px !important;
        max-width: 230px !important;

        margin: 0;
        padding: 0 0 8px;

        scroll-snap-align: start;
    }

    body .workflows-page .wf-connected__step-top {
        height: 82px;
        margin-bottom: 22px;
    }

    body .workflows-page .wf-connected__icon {
        width: 76px;
        height: 76px;
    }

    body .workflows-page .wf-connected__number {
        width: 28px;
        height: 28px;

        top: -5px;
        left: -10px;

        font-size: 10px;
    }

    /* Connect the icons across the compact stages */

    body .workflows-page
    .wf-connected__step:not(:last-child)::before {
        top: 41px;
        left: 93px;

        width: calc(100% - 65px);
    }

    body .workflows-page
    .wf-connected__step:not(:last-child)::after {
        top: 37px;
        right: -29px;
    }

    body .workflows-page .wf-connected__step-title {
        margin-bottom: 12px;

        font-size: 18px;
        line-height: 1.35;
    }

    body .workflows-page .wf-connected__description {
        max-width: 215px;

        font-size: 13px;
        line-height: 1.75;
    }
}


/* =========================================================
   05 — SMALL TABLET
   600px–749px
========================================================= */

@media (min-width: 600px) and (max-width: 749px) {

    body .workflows-page .wf-connected__flow {
        gap: 40px !important;
    }

    body .workflows-page .wf-connected__step {
        flex-basis: 215px !important;

        width: 215px !important;
        min-width: 215px !important;
        max-width: 215px !important;
    }

    body .workflows-page .wf-connected__icon {
        width: 70px;
        height: 70px;
    }

    body .workflows-page .wf-connected__step-top {
        height: 76px;
    }

    body .workflows-page
    .wf-connected__step:not(:last-child)::before {
        top: 38px;
        left: 86px;
        width: calc(100% - 58px);
    }

    body .workflows-page
    .wf-connected__step:not(:last-child)::after {
        top: 34px;
        right: -26px;
    }
}


/* =========================================================
   06 — TABLET SCROLLBAR
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .workflows-page
    .wf-connected__flow::-webkit-scrollbar {
        height: 5px;
    }

    body .workflows-page
    .wf-connected__flow::-webkit-scrollbar-track {
        background: rgba(201,103,67,0.10);
        border-radius: 999px;
    }

    body .workflows-page
    .wf-connected__flow::-webkit-scrollbar-thumb {
        background: #BE947E;
        border-radius: 999px;
    }
}


/* =========================================================
   07 — REDUCED MOTION
========================================================= */

@media (min-width: 600px) and (max-width: 1100px)
and (prefers-reduced-motion: reduce) {

    body .workflows-page .wf-connected__flow {
        scroll-behavior: auto !important;
    }
}


/* =========================================================
   FRAYORA — WORKFLOWS & AUTOMATION
   SECTION 05 — FINAL CTA

   COMPLETE RESPONSIVE CSS

   Desktop: 1101px+
   Tablet: 600px–1100px
   Mobile: 599px and below

   Bond-inspired champagne editorial design
   Warm ivory / subtle peach illumination
   Soft luminous architectural curves
   Deep olive CTA
   Refined depth and animations
   Reduced-motion accessible
========================================================= */


/* =========================================================
   01 — SECTION FOUNDATION
========================================================= */

body .workflows-page .wf-final-cta {
    position: relative;
    isolation: isolate;

    width: 100%;
    margin: 0;
    padding: 0;

    overflow: hidden;
    box-sizing: border-box;

    background-color: #F7EFE5 !important;
    background-image: none !important;

    color: #1F211D;
}

body .workflows-page .wf-final-cta *,
body .workflows-page .wf-final-cta *::before,
body .workflows-page .wf-final-cta *::after {
    box-sizing: border-box;
}

/* Soft atmospheric champagne illumination */

body .workflows-page .wf-final-cta::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 0;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse 65% 115% at -5% 96%,
            rgba(231,165,114,0.25) 0%,
            rgba(231,165,114,0.10) 45%,
            transparent 79%
        ),
        radial-gradient(
            ellipse 65% 115% at 105% 12%,
            rgba(235,174,126,0.22) 0%,
            rgba(235,174,126,0.08) 45%,
            transparent 79%
        );
}

/* Delicate finished surface */

body .workflows-page .wf-final-cta::after {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 1;

    pointer-events: none;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.84),
        inset 0 -1px 0 rgba(176,121,84,0.10);
}


/* =========================================================
   02 — DECORATIVE LIGHT ART
========================================================= */

body .workflows-page .wf-final-cta__art {
    position: absolute;
    inset: 0;
    z-index: 1;

    overflow: hidden;
    pointer-events: none;
}

/* Fine elliptical light paths */

body .workflows-page .wf-final-cta__orbit {
    position: absolute;
    display: block;

    left: 50%;

    border-radius: 50%;

    background: transparent;
    pointer-events: none;
}

body .workflows-page .wf-final-cta__orbit--one {
    width: 1500px;
    height: 680px;

    bottom: -430px;

    transform: translateX(-50%) rotate(-8deg);

    border: 1px solid rgba(238,195,142,0.48);

    box-shadow:
        0 0 10px rgba(244,195,143,0.16),
        0 0 28px rgba(244,195,143,0.06);
}

body .workflows-page .wf-final-cta__orbit--two {
    width: 1750px;
    height: 770px;

    bottom: -510px;

    transform: translateX(-50%) rotate(10deg);

    border: 1px solid rgba(255,255,255,0.73);

    box-shadow:
        0 0 17px rgba(255,250,237,0.18);
}


/* =========================================================
   03 — DIFFUSED LIGHT BLOOMS
========================================================= */

body .workflows-page .wf-final-cta__light {
    position: absolute;
    display: block;

    border-radius: 50%;
    pointer-events: none;
}

body .workflows-page .wf-final-cta__light--left {
    left: -180px;
    bottom: -210px;

    width: 670px;
    height: 470px;

    background:
        radial-gradient(
            ellipse at center,
            rgba(249,196,153,0.24) 0%,
            rgba(249,196,153,0.10) 46%,
            transparent 76%
        );

    filter: blur(44px);
}

body .workflows-page .wf-final-cta__light--right {
    right: -170px;
    top: -180px;

    width: 650px;
    height: 450px;

    background:
        radial-gradient(
            ellipse at center,
            rgba(250,214,171,0.25) 0%,
            rgba(250,214,171,0.09) 46%,
            transparent 76%
        );

    filter: blur(44px);
}


/* =========================================================
   04 — CONTENT CONTAINER
========================================================= */

body .workflows-page .wf-final-cta__inner {
    position: relative;
    z-index: 3;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 1600px;

    margin: 0 auto;
}

body .workflows-page .wf-final-cta__content {
    position: relative;
    z-index: 4;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 1030px;

    margin: 0 auto;

    text-align: center;
}


/* =========================================================
   05 — TYPOGRAPHY
========================================================= */

body .workflows-page .wf-final-cta__eyebrow {
    display: block;

    margin: 0;

    font-family: "Inter", sans-serif !important;
    font-weight: 600;

    line-height: 1.4;
    letter-spacing: 0.16em;
    text-transform: uppercase;

    color: #4A533C;
}

body .workflows-page .wf-final-cta__title {
    width: 100%;
    margin: 0;

    font-family: "Manrope", "Inter", sans-serif !important;
    font-weight: 600;

    line-height: 1.13;
    letter-spacing: -0.051em;

    color: #1F211D !important;

    text-align: center;
    text-wrap: balance;
}

body .workflows-page .wf-final-cta__body {
    width: 100%;
    margin: 0;

    font-family: "Inter", sans-serif !important;
    font-weight: 400;

    line-height: 1.7;

    color: rgba(31,33,29,0.75) !important;

    text-align: center;
}


/* =========================================================
   06 — DEEP OLIVE CTA BUTTON
========================================================= */

body .workflows-page .wf-final-cta__button {
    position: relative;
    z-index: 5;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 15px;

    width: fit-content;
    max-width: 100%;
    min-height: 55px;

    margin: 0;
    padding: 16px 31px;

    border: 1px solid rgba(234,215,172,0.65);
    border-radius: 999px;

    background-color: #34402D !important;
    background-image: none !important;

    color: #FFFFFF !important;

    font-family: "Inter", sans-serif !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;

    text-decoration: none !important;
    text-align: center;

    box-shadow:
        0 8px 18px rgba(39,51,33,0.16),
        0 22px 41px rgba(39,51,33,0.17),
        inset 0 1px 0 rgba(255,255,255,0.12);

    transition:
        transform 350ms cubic-bezier(.22,1,.36,1),
        background-color 350ms ease,
        border-color 350ms ease,
        box-shadow 350ms ease;
}

body .workflows-page .wf-final-cta__arrow {
    display: inline-block;
    flex: 0 0 auto;

    font-size: 20px;
    line-height: 1;

    transition: transform 300ms ease;
}

body .workflows-page .wf-final-cta__button:focus-visible {
    outline: 2px solid #34402D;
    outline-offset: 5px;
}


/* =========================================================
   07 — DESKTOP
   1101px+
========================================================= */

@media (min-width: 1101px) {

    body .workflows-page .wf-final-cta {
        min-height: 390px;
    }

    body .workflows-page .wf-final-cta__inner {
        min-height: 390px;

        padding: 75px 80px 80px;
    }

    body .workflows-page .wf-final-cta__content {
        max-width: 1020px;
    }

    body .workflows-page .wf-final-cta__eyebrow {
        margin-bottom: 17px;
        font-size: 12px;
    }

    body .workflows-page .wf-final-cta__title {
        max-width: 980px;

        font-size: clamp(38px, 3.65vw, 55px);
    }

    body .workflows-page .wf-final-cta__body {
        max-width: 780px;

        margin-top: 19px;
        font-size: 15px;
    }

    body .workflows-page .wf-final-cta__button {
        margin-top: 27px;
    }
}


/* =========================================================
   08 — TABLET
   600px–1100px
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .workflows-page .wf-final-cta {
        min-height: 370px;
    }

    body .workflows-page .wf-final-cta__inner {
        min-height: 370px;
        padding: 75px 55px 80px;
    }

    body .workflows-page .wf-final-cta__eyebrow {
        margin-bottom: 17px;
        font-size: 12px;
    }

    body .workflows-page .wf-final-cta__title {
        max-width: 800px;

        font-size: clamp(36px, 5vw, 49px);
    }

    body .workflows-page .wf-final-cta__body {
        max-width: 700px;

        margin-top: 19px;
        font-size: 15px;
    }

    body .workflows-page .wf-final-cta__button {
        margin-top: 27px;
    }

    body .workflows-page .wf-final-cta__orbit--one {
        width: 1050px;
        height: 520px;
        bottom: -340px;
    }

    body .workflows-page .wf-final-cta__orbit--two {
        width: 1200px;
        height: 580px;
        bottom: -395px;
    }
}


/* =========================================================
   09 — MOBILE
   599px AND BELOW
========================================================= */

@media (max-width: 599px) {

    body .workflows-page .wf-final-cta {
        min-height: 360px;
    }

    body .workflows-page .wf-final-cta__inner {
        min-height: 360px;

        padding: 68px 28px 75px;
    }

    body .workflows-page .wf-final-cta__content {
        max-width: 100%;
    }

    body .workflows-page .wf-final-cta__eyebrow {
        margin-bottom: 18px;

        font-size: 10px;
        letter-spacing: 0.14em;
    }

    body .workflows-page .wf-final-cta__title {
        max-width: 450px;

        font-size: clamp(31px, 7.7vw, 41px);
        line-height: 1.15;
    }

    body .workflows-page .wf-final-cta__body {
        max-width: 410px;

        margin-top: 21px;

        font-size: 13px;
        line-height: 1.8;
    }

    body .workflows-page .wf-final-cta__button {
        gap: 13px;

        min-height: 54px;

        margin-top: 27px;
        padding: 15px 24px;

        font-size: 13px;
    }

    body .workflows-page .wf-final-cta__orbit--one {
        width: 680px;
        height: 380px;
        bottom: -265px;
    }

    body .workflows-page .wf-final-cta__orbit--two {
        width: 790px;
        height: 450px;
        bottom: -320px;
    }

    body .workflows-page .wf-final-cta__light--left {
        left: -230px;
        bottom: -170px;
        width: 490px;
        height: 340px;
    }

    body .workflows-page .wf-final-cta__light--right {
        right: -220px;
        top: -150px;
        width: 470px;
        height: 330px;
    }
}


/* =========================================================
   10 — SMALL MOBILE
   374px AND BELOW
========================================================= */

@media (max-width: 374px) {

    body .workflows-page .wf-final-cta__inner {
        padding: 61px 23px 68px;
    }

    body .workflows-page .wf-final-cta__title {
        font-size: 29px;
    }

    body .workflows-page .wf-final-cta__body {
        font-size: 12px;
    }

    body .workflows-page .wf-final-cta__button {
        padding: 15px 20px;
        font-size: 12px;
    }
}


/* =========================================================
   11 — HOVER EFFECTS
========================================================= */

@media (hover: hover) and (pointer: fine) {

    body .workflows-page .wf-final-cta__button:hover {
        background-color: #435239 !important;
        color: #FFFFFF !important;

        border-color: rgba(243,224,178,0.92);

        transform: translateY(-3px);

        box-shadow:
            0 12px 23px rgba(39,51,33,0.19),
            0 28px 48px rgba(39,51,33,0.20),
            inset 0 1px 0 rgba(255,255,255,0.16);
    }

    body .workflows-page
    .wf-final-cta__button:hover
    .wf-final-cta__arrow {
        transform: translateX(5px);
    }
}


/* =========================================================
   12 — SOFT ENTRANCE ANIMATIONS
========================================================= */

@keyframes wfFinalReveal {
    from {
        opacity: 0;
        translate: 0 18px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

@keyframes wfFinalLightDrift {
    0%, 100% {
        opacity: 0.75;
        scale: 1;
    }

    50% {
        opacity: 1;
        scale: 1.045;
    }
}

@media (prefers-reduced-motion: no-preference) {

    @supports (animation-timeline: view()) {

        body .workflows-page .wf-final-cta__eyebrow,
        body .workflows-page .wf-final-cta__title,
        body .workflows-page .wf-final-cta__body,
        body .workflows-page .wf-final-cta__button {
            animation: wfFinalReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 55%;
        }

        body .workflows-page .wf-final-cta__body {
            animation-range: entry 0% entry 62%;
        }

        body .workflows-page .wf-final-cta__button {
            animation-range: entry 0% entry 68%;
        }
    }

    body .workflows-page .wf-final-cta__light {
        animation: wfFinalLightDrift 9s ease-in-out infinite;
    }
}


/* =========================================================
   13 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body .workflows-page .wf-final-cta__eyebrow,
    body .workflows-page .wf-final-cta__title,
    body .workflows-page .wf-final-cta__body,
    body .workflows-page .wf-final-cta__button,
    body .workflows-page .wf-final-cta__light {
        animation: none !important;

        opacity: 1 !important;
        translate: none !important;
        scale: 1 !important;
        transform: none !important;
    }

    body .workflows-page .wf-final-cta__button,
    body .workflows-page .wf-final-cta__arrow {
        transition: none !important;
    }
}




/* =========================================================
   FRAYORA — ONGOING IMPROVEMENT
   SECTION 01 — HERO

   COMPLETE RESPONSIVE CSS

   Desktop: 1101px+
   Tablet: 600px–1100px
   Mobile: 599px and below

   Approved Frayora 600px desktop hero
   Workflows architectural backgrounds
   CSS-only floating illustration
   Deep olive + champagne CTA
   Luminous overlay and dimensional depth
   Staggered entrance / floating animations
   Reduced-motion accessible
========================================================= */


/* =========================================================
   01 — HERO FOUNDATION
========================================================= */

body .ongoing-improvement-page .oi-hero {
    position: relative;
    isolation: isolate;

    width: 100%;
    margin: 0;
    padding: 0;

    overflow: hidden;
    box-sizing: border-box;

    background-color: #263428 !important;

    /* Same desktop background as Workflows */

    background-image:
        url("../images/Business%20in%20a%20box/herodesktop.png") !important;

    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;

    color: #F8F3EB;
}

body .ongoing-improvement-page .oi-hero *,
body .ongoing-improvement-page .oi-hero *::before,
body .ongoing-improvement-page .oi-hero *::after {
    box-sizing: border-box;
}


/* =========================================================
   02 — CONTRAST OVERLAY
========================================================= */

body .ongoing-improvement-page .oi-hero::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 0;

    background: linear-gradient(
        90deg,
        rgba(13,24,16,0.83) 0%,
        rgba(15,27,18,0.70) 33%,
        rgba(17,29,20,0.31) 63%,
        rgba(17,29,20,0.10) 100%
    );

    pointer-events: none;
}


/* =========================================================
   03 — REFINED LUMINOUS FINISH
========================================================= */

body .ongoing-improvement-page .oi-hero::after {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 1;

    background: linear-gradient(
        115deg,
        transparent 38%,
        rgba(255,241,204,0.012) 60%,
        rgba(255,244,215,0.035) 86%,
        transparent 100%
    );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        inset 0 -30px 55px -48px rgba(0,0,0,0.30);

    pointer-events: none;
}


/* =========================================================
   04 — CONTENT STRUCTURE
========================================================= */

body .ongoing-improvement-page .oi-hero__inner {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1600px;

    margin: 0 auto;
}

body .ongoing-improvement-page .oi-hero__content {
    position: relative;
    z-index: 4;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    text-align: left;
}


/* =========================================================
   05 — EDITORIAL TYPOGRAPHY
========================================================= */

body .ongoing-improvement-page .oi-hero__eyebrow {
    display: block;
    margin: 0;
    padding: 0;

    font-family: "Inter", sans-serif !important;
    font-weight: 600;

    line-height: 1.4;
    letter-spacing: 0.14em;
    text-transform: uppercase;

    color: #E4D5BF !important;
}

body .ongoing-improvement-page .oi-hero__title {
    width: 100%;
    margin: 0;
    padding: 0;

    font-family: "Manrope", "Inter", sans-serif !important;
    font-weight: 600;

    line-height: 1.12;
    letter-spacing: -0.052em;

    color: #F8F3EB !important;

    text-align: left;
    text-wrap: balance;

    text-shadow:
        0 3px 18px rgba(0,0,0,0.14);
}

body .ongoing-improvement-page .oi-hero__body {
    width: 100%;
    margin: 0;
    padding: 0;

    font-family: "Inter", sans-serif !important;
    font-weight: 400;

    line-height: 1.75;
    color: rgba(248,243,235,0.94) !important;

    text-align: left;
}


/* =========================================================
   06 — WORKFLOWS-STYLE CTA BUTTON
========================================================= */

body .ongoing-improvement-page .oi-hero__button {
    position: relative;
    z-index: 4;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 17px;

    width: fit-content;
    max-width: 100%;
    min-height: 55px;

    margin: 0;
    padding: 15px 30px;

    border: 1px solid rgba(230,210,147,0.78);
    border-radius: 999px;

    background-color: #34402D !important;
    background-image: none !important;

    color: #FFFFFF !important;

    font-family: "Inter", sans-serif !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;

    text-align: center;
    text-decoration: none !important;

    box-shadow:
        0 8px 19px rgba(0,0,0,0.18),
        0 20px 38px rgba(0,0,0,0.18),
        0 0 19px rgba(223,198,127,0.08),
        inset 0 1px 0 rgba(255,255,255,0.13);

    transition:
        transform 320ms cubic-bezier(.22,1,.36,1),
        background-color 320ms ease,
        border-color 320ms ease,
        box-shadow 320ms ease;
}

/* Light-catching inner edge */

body .ongoing-improvement-page .oi-hero__button::before {
    content: "";

    position: absolute;
    inset: 2px;

    border-radius: inherit;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.09);

    pointer-events: none;
}

body .ongoing-improvement-page .oi-hero__arrow {
    display: inline-block;
    flex-shrink: 0;

    font-size: 21px;
    line-height: 1;

    color: inherit;

    transition: transform 320ms ease;
}

body .ongoing-improvement-page .oi-hero__button:focus-visible {
    outline: 2px solid #F8F3EB;
    outline-offset: 5px;
}


/* =========================================================
   07 — SUPPORTING COPY
========================================================= */

body .ongoing-improvement-page .oi-hero__note {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    width: 100%;
    margin: 0;
    padding: 0;

    font-family: "Inter", sans-serif !important;
    font-weight: 400;
    line-height: 1.6;

    color: rgba(248,243,235,0.83) !important;
}

body .ongoing-improvement-page .oi-hero__star {
    display: inline-block;
    flex: 0 0 auto;

    font-size: 16px;
    line-height: 1.45;

    color: #E5A681;

    transform-origin: center;

    transition: transform 400ms ease;
}


/* =========================================================
   08 — FLOATING ILLUSTRATION

   File:
   assets/images/ongoing improvement/hero.png
========================================================= */

body .ongoing-improvement-page .oi-hero__visual {
    position: relative;
    z-index: 3;

    display: block;
    min-width: 0;
    flex-shrink: 0;

    background-image:
        url("../images/ongoing%20improvement/hero.png") !important;

    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;

    pointer-events: none;

    filter:
        drop-shadow(0 15px 24px rgba(4,13,7,0.14))
        drop-shadow(0 30px 49px rgba(4,13,7,0.20));

    transform-origin: center;
}


/* =========================================================
   09 — DESKTOP
   1101px+
   Approved 600px service hero
========================================================= */

@media (min-width: 1101px) {

    body .ongoing-improvement-page .oi-hero {
        height: 600px;
        min-height: 600px;
    }

    body .ongoing-improvement-page .oi-hero__inner {
        display: grid;

        grid-template-columns:
            minmax(0, 1.02fr)
            minmax(0, 0.98fr);

        column-gap: 30px;
        align-items: center;

        height: 600px;
        min-height: 600px;

        padding: 45px 80px;
    }

    body .ongoing-improvement-page .oi-hero__content {
        max-width: 650px;
    }

    body .ongoing-improvement-page .oi-hero__eyebrow {
        margin-bottom: 20px;
        font-size: 12px;
    }

    body .ongoing-improvement-page .oi-hero__title {
        max-width: 640px;

        font-size: clamp(42px, 3.65vw, 57px);
    }

    body .ongoing-improvement-page .oi-hero__body {
        max-width: 580px;

        margin-top: 24px;
        font-size: 14px;
    }

    body .ongoing-improvement-page .oi-hero__button {
        margin-top: 25px;
    }

    body .ongoing-improvement-page .oi-hero__note {
        max-width: 580px;

        margin-top: 19px;
        font-size: 12px;
    }

    body .ongoing-improvement-page .oi-hero__visual {
        width: clamp(500px, 42vw, 690px);
        max-width: none;

        height: 500px;

        justify-self: center;
        align-self: center;

        margin: 0;
    }
}


/* =========================================================
   10 — LARGE DESKTOP
   1450px+
========================================================= */

@media (min-width: 1450px) {

    body .ongoing-improvement-page .oi-hero__title {
        font-size: 55px;
    }

    body .ongoing-improvement-page .oi-hero__body {
        font-size: 15px;
    }

    body .ongoing-improvement-page .oi-hero__visual {
        width: min(43vw, 710px);
        height: 525px;
    }
}


/* =========================================================
   11 — SMALLER DESKTOP
   1101px–1350px
========================================================= */

@media (min-width: 1101px) and (max-width: 1350px) {

    body .ongoing-improvement-page .oi-hero__inner {
        column-gap: 18px;

        padding-left: 60px;
        padding-right: 60px;
    }

    body .ongoing-improvement-page .oi-hero__title {
        font-size: clamp(40px, 3.7vw, 50px);
    }

    body .ongoing-improvement-page .oi-hero__body {
        font-size: 13px;
    }

    body .ongoing-improvement-page .oi-hero__visual {
        width: clamp(460px, 43vw, 600px);
        height: 475px;
    }
}


/* =========================================================
   12 — TABLET
   600px–1100px

   Floating visual above content.
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .ongoing-improvement-page .oi-hero {
        height: auto;
        min-height: 850px;

        background-image:
            url("../images/Business%20in%20a%20box/herotablet.png") !important;

        background-position: center center;
        background-size: cover;
    }

    /* Overlay protects text and button */

    body .ongoing-improvement-page .oi-hero::before {
        background: linear-gradient(
            180deg,
            rgba(13,24,16,0.18) 0%,
            rgba(13,24,16,0.25) 30%,
            rgba(13,24,16,0.53) 57%,
            rgba(13,24,16,0.76) 100%
        );
    }

    body .ongoing-improvement-page .oi-hero__inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        min-height: 850px;

        padding: 68px 60px 108px;
    }

    body .ongoing-improvement-page .oi-hero__visual {
        order: -1;
        align-self: flex-end;

        width: clamp(380px, 60vw, 660px);
        max-width: 100%;

        height: clamp(320px, 46vw, 505px);

        margin: 0 -8px 15px 0;
    }

    body .ongoing-improvement-page .oi-hero__content {
        width: 100%;
        max-width: 900px;
    }

    body .ongoing-improvement-page .oi-hero__eyebrow {
        margin-bottom: 21px;
        font-size: 13px;
    }

    body .ongoing-improvement-page .oi-hero__title {
        max-width: 830px;

        font-size: clamp(43px, 5.4vw, 60px);
    }

    body .ongoing-improvement-page .oi-hero__body {
        max-width: 830px;

        margin-top: 26px;

        font-size: 16px;
        line-height: 1.8;
    }

    body .ongoing-improvement-page .oi-hero__button {
        min-height: 58px;

        margin-top: 30px;
        padding: 17px 32px;

        font-size: 15px;
    }

    body .ongoing-improvement-page .oi-hero__note {
        max-width: 750px;

        margin-top: 22px;

        font-size: 13px;
    }
}


/* =========================================================
   13 — SMALL TABLET
   600px–749px
========================================================= */

@media (min-width: 600px) and (max-width: 749px) {

    body .ongoing-improvement-page .oi-hero__inner {
        padding: 68px 43px 100px;
    }

    body .ongoing-improvement-page .oi-hero__visual {
        width: 84%;
        max-width: 530px;

        height: 355px;

        margin-right: 0;
        margin-bottom: 12px;
    }

    body .ongoing-improvement-page .oi-hero__title {
        font-size: clamp(38px, 6vw, 47px);
    }

    body .ongoing-improvement-page .oi-hero__body {
        font-size: 15px;
    }
}


/* =========================================================
   14 — MOBILE
   599px AND BELOW
========================================================= */

@media (max-width: 599px) {

    body .ongoing-improvement-page .oi-hero {
        height: auto;
        min-height: 0;

        background-image:
            url("../images/Business%20in%20a%20box/heromobile.png") !important;

        background-position: 60% center;
        background-size: cover;
    }

    /* Stronger darkness behind the copy */

    body .ongoing-improvement-page .oi-hero::before {
        background: linear-gradient(
            180deg,
            rgba(13,24,16,0.17) 0%,
            rgba(13,24,16,0.28) 27%,
            rgba(13,24,16,0.56) 48%,
            rgba(13,24,16,0.72) 73%,
            rgba(13,24,16,0.80) 100%
        );
    }

    body .ongoing-improvement-page .oi-hero__inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        width: 100%;

        padding: 65px 28px 86px 34px;
    }

    body .ongoing-improvement-page .oi-hero__visual {
        order: -1;
        align-self: center;

        width: 100%;
        max-width: 440px;

        height: clamp(235px, 70vw, 330px);

        margin: 0 auto 12px;
    }

    body .ongoing-improvement-page .oi-hero__content {
        width: 100%;
    }

    body .ongoing-improvement-page .oi-hero__eyebrow {
        margin-bottom: 18px;

        font-size: 10px;
        line-height: 1.5;
        letter-spacing: 0.13em;
    }

    body .ongoing-improvement-page .oi-hero__title {
        max-width: 520px;

        font-size: clamp(33px, 8.5vw, 45px);
        line-height: 1.15;
        letter-spacing: -0.05em;
    }

    body .ongoing-improvement-page .oi-hero__body {
        max-width: 520px;

        margin-top: 24px;

        font-size: 14px;
        line-height: 1.8;
    }

    body .ongoing-improvement-page .oi-hero__button {
        gap: 15px;

        min-height: 55px;
        margin-top: 28px;

        padding: 16px 25px;

        font-size: 13px;
    }

    body .ongoing-improvement-page .oi-hero__note {
        margin-top: 20px;

        font-size: 12px;
        line-height: 1.65;
    }

    body .ongoing-improvement-page .oi-hero__star {
        font-size: 15px;
    }
}


/* =========================================================
   15 — SMALL MOBILE
   374px AND BELOW
========================================================= */

@media (max-width: 374px) {

    body .ongoing-improvement-page .oi-hero__inner {
        padding: 58px 23px 78px 29px;
    }

    body .ongoing-improvement-page .oi-hero__visual {
        height: 225px;
        margin-bottom: 10px;
    }

    body .ongoing-improvement-page .oi-hero__eyebrow {
        font-size: 9.5px;
        margin-bottom: 17px;
    }

    body .ongoing-improvement-page .oi-hero__title {
        font-size: clamp(30px, 8.4vw, 35px);
    }

    body .ongoing-improvement-page .oi-hero__body {
        margin-top: 22px;
        font-size: 13px;
    }

    body .ongoing-improvement-page .oi-hero__button {
        gap: 12px;
        padding: 15px 21px;
        font-size: 12px;
    }

    body .ongoing-improvement-page .oi-hero__note {
        font-size: 11px;
    }
}


/* =========================================================
   16 — HOVER EFFECTS
========================================================= */

@media (hover: hover) and (pointer: fine) {

    body .ongoing-improvement-page .oi-hero__button:hover {
        background-color: #435239 !important;
        border-color: rgba(243,220,165,0.95);

        color: #FFFFFF !important;

        transform: translateY(-3px);

        box-shadow:
            0 12px 25px rgba(0,0,0,0.22),
            0 26px 48px rgba(0,0,0,0.19),
            0 0 24px rgba(230,209,142,0.12),
            inset 0 1px 0 rgba(255,255,255,0.16);
    }

    body .ongoing-improvement-page
    .oi-hero__button:hover
    .oi-hero__arrow {
        transform: translateX(5px);
    }

    body .ongoing-improvement-page
    .oi-hero__note:hover
    .oi-hero__star {
        transform: rotate(45deg) scale(1.1);
    }
}


/* =========================================================
   17 — ENTRANCE ANIMATIONS
========================================================= */

@keyframes oiHeroTextReveal {
    from {
        opacity: 0;
        translate: 0 20px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

@keyframes oiHeroVisualReveal {
    from {
        opacity: 0;
        translate: 0 20px;
        scale: 0.97;
    }

    to {
        opacity: 1;
        translate: 0 0;
        scale: 1;
    }
}

@keyframes oiHeroFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@media (prefers-reduced-motion: no-preference) {

    body .ongoing-improvement-page .oi-hero__eyebrow,
    body .ongoing-improvement-page .oi-hero__title,
    body .ongoing-improvement-page .oi-hero__body,
    body .ongoing-improvement-page .oi-hero__button,
    body .ongoing-improvement-page .oi-hero__note {
        animation:
            oiHeroTextReveal 850ms
            cubic-bezier(.22,1,.36,1) both;
    }

    body .ongoing-improvement-page .oi-hero__eyebrow {
        animation-delay: 80ms;
    }

    body .ongoing-improvement-page .oi-hero__title {
        animation-delay: 170ms;
    }

    body .ongoing-improvement-page .oi-hero__body {
        animation-delay: 275ms;
    }

    body .ongoing-improvement-page .oi-hero__button {
        animation-delay: 380ms;
    }

    body .ongoing-improvement-page .oi-hero__note {
        animation-delay: 470ms;
    }

    body .ongoing-improvement-page .oi-hero__visual {
        animation:
            oiHeroVisualReveal 950ms
            cubic-bezier(.22,1,.36,1)
            160ms both,
            oiHeroFloat 7.5s ease-in-out 1200ms infinite;
    }
}


/* =========================================================
   18 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body .ongoing-improvement-page .oi-hero__eyebrow,
    body .ongoing-improvement-page .oi-hero__title,
    body .ongoing-improvement-page .oi-hero__body,
    body .ongoing-improvement-page .oi-hero__button,
    body .ongoing-improvement-page .oi-hero__note,
    body .ongoing-improvement-page .oi-hero__visual {
        animation: none !important;

        opacity: 1 !important;
        translate: none !important;
        scale: 1 !important;
        transform: none !important;
    }

    body .ongoing-improvement-page .oi-hero__button,
    body .ongoing-improvement-page .oi-hero__arrow,
    body .ongoing-improvement-page .oi-hero__star {
        transition: none !important;
    }
}



/* =========================================================
   FRAYORA — ONGOING IMPROVEMENT
   SECTION 02 — WHAT WE COVER

   COMPLETE RESPONSIVE CSS

   Desktop: 1101px+
   Tablet: 600px–1100px
   Mobile: 599px and below

   Solid warm-ivory editorial surface
   Open six-item layout — no cards
   No vertical divider
   Dimensional olive / terracotta icons
   Soft layered shadows
   Subtle entrance and hover animations
   Reduced-motion accessible
========================================================= */


/* =========================================================
   01 — SECTION FOUNDATION
========================================================= */

body .ongoing-improvement-page .oi-cover {
    position: relative;
    isolation: isolate;

    width: 100%;
    margin: 0;
    padding: 0;

    overflow: hidden;

    background-color: #F8F3EB !important;
    background-image: none !important;

    color: #1F211D;
}

body .ongoing-improvement-page .oi-cover,
body .ongoing-improvement-page .oi-cover *,
body .ongoing-improvement-page .oi-cover *::before,
body .ongoing-improvement-page .oi-cover *::after {
    box-sizing: border-box;
}

body .ongoing-improvement-page .oi-cover::before,
body .ongoing-improvement-page .oi-cover::after {
    content: none !important;
    display: none !important;
}


/* =========================================================
   02 — SECTION STRUCTURE
========================================================= */

body .ongoing-improvement-page .oi-cover__inner {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1600px;

    margin: 0 auto;
}

body .ongoing-improvement-page .oi-cover__intro {
    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    text-align: left;
}


/* =========================================================
   03 — SECTION TYPOGRAPHY
========================================================= */

body .ongoing-improvement-page .oi-cover__eyebrow {
    display: block;

    margin: 0;
    padding: 0;

    font-family: "Inter", sans-serif !important;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;

    letter-spacing: 0.13em;
    text-transform: uppercase;

    color: #B86448;
}

body .ongoing-improvement-page .oi-cover__title {
    width: 100%;
    margin: 0;
    padding: 0;

    font-family: "Manrope", "Inter", sans-serif !important;
    font-weight: 600;
    line-height: 1.13;

    letter-spacing: -0.05em;

    color: #1F211D !important;

    text-align: left;
    text-wrap: balance;
}

body .ongoing-improvement-page .oi-cover__body {
    width: 100%;
    margin: 0;
    padding: 0;

    font-family: "Inter", sans-serif !important;
    font-weight: 400;
    line-height: 1.75;

    color: rgba(31,33,29,0.73) !important;
    text-align: left;
}


/* =========================================================
   04 — OPEN INFORMATION GRID
========================================================= */

body .ongoing-improvement-page .oi-cover__grid {
    display: grid;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    list-style: none;
}

body .ongoing-improvement-page .oi-cover__item {
    position: relative;

    display: flex;
    align-items: flex-start;

    min-width: 0;
    margin: 0;
    padding: 0;

    gap: 17px;

    list-style: none;
    background: transparent;

    transition: transform 350ms cubic-bezier(.22,1,.36,1);
}

body .ongoing-improvement-page .oi-cover__item::marker {
    content: "";
}

body .ongoing-improvement-page .oi-cover__item-content {
    min-width: 0;
    flex: 1;

    padding-top: 2px;
}


/* =========================================================
   05 — ITEM NUMBER
========================================================= */

body .ongoing-improvement-page .oi-cover__number {
    display: block;

    margin: 0 0 5px;

    font-family: "Inter", sans-serif !important;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.1;

    color: #4C573F;
}


/* =========================================================
   06 — ITEM HEADING & DESCRIPTION
========================================================= */

body .ongoing-improvement-page .oi-cover__item-title {
    margin: 0 0 9px;
    padding: 0;

    font-family: "Manrope", "Inter", sans-serif !important;
    font-weight: 650;
    line-height: 1.28;

    letter-spacing: -0.035em;

    color: #1F211D !important;
}

body .ongoing-improvement-page .oi-cover__description {
    width: 100%;
    margin: 0;
    padding: 0;

    font-family: "Inter", sans-serif !important;
    font-weight: 400;
    line-height: 1.65;

    color: rgba(31,33,29,0.70) !important;
}


/* =========================================================
   07 — DIMENSIONAL ICON MEDALLIONS
========================================================= */

body .ongoing-improvement-page .oi-cover__icon {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.74);

    box-shadow:
        0 8px 15px rgba(65,48,35,0.055),
        0 19px 34px rgba(65,48,35,0.075),
        inset 0 2px 1px rgba(255,255,255,0.88),
        inset 0 -4px 8px rgba(90,65,43,0.045);

    transition:
        transform 400ms cubic-bezier(.22,1,.36,1),
        box-shadow 400ms ease;
}

/* Fine concentric inner ring */

body .ongoing-improvement-page .oi-cover__icon::before {
    content: "";

    position: absolute;
    inset: 5px;

    border: 1px solid rgba(255,255,255,0.78);
    border-radius: 50%;

    pointer-events: none;
}

/* Olive medallions */

body .ongoing-improvement-page .oi-cover__icon--olive {
    background-color: #DEE3D5;

    background-image: linear-gradient(
        145deg,
        #F4F5ED 0%,
        #E5E9DE 45%,
        #D4DAC8 100%
    );
}

/* Terracotta medallions */

body .ongoing-improvement-page .oi-cover__icon--terracotta {
    background-color: #F2DECF;

    background-image: linear-gradient(
        145deg,
        #FFF4EB 0%,
        #F5E5D8 45%,
        #EED5C4 100%
    );
}

/* SVG artwork */

body .ongoing-improvement-page .oi-cover__icon svg {
    position: relative;
    z-index: 2;

    display: block;
    width: 46%;
    height: 46%;

    fill: none;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition: transform 350ms ease;
}

body .ongoing-improvement-page .oi-cover__icon--olive svg {
    stroke: #52644C;
}

body .ongoing-improvement-page .oi-cover__icon--terracotta svg {
    stroke: #BA6544;
}


/* =========================================================
   08 — DESKTOP
   1101px+
========================================================= */

@media (min-width: 1101px) {

    body .ongoing-improvement-page .oi-cover {
        padding: 105px 0 110px;
    }

    body .ongoing-improvement-page .oi-cover__inner {
        display: grid;

        grid-template-columns:
            minmax(0, 0.83fr)
            minmax(0, 1.85fr);

        column-gap: 65px;
        align-items: center;

        padding: 0 80px;
    }

    /* LEFT INTRODUCTION */

    body .ongoing-improvement-page .oi-cover__intro {
        max-width: 420px;
        align-self: center;
    }

    body .ongoing-improvement-page .oi-cover__eyebrow {
        margin-bottom: 20px;
    }

    body .ongoing-improvement-page .oi-cover__title {
        font-size: clamp(36px, 2.7vw, 45px);
    }

    body .ongoing-improvement-page .oi-cover__body {
        max-width: 410px;

        margin-top: 25px;

        font-size: 14px;
    }

    /* RIGHT SIX-ITEM GRID */

    body .ongoing-improvement-page .oi-cover__grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        column-gap: 28px;
        row-gap: 45px;

        align-items: start;
    }

    body .ongoing-improvement-page .oi-cover__item {
        gap: 14px;
    }

    body .ongoing-improvement-page .oi-cover__icon {
        width: 67px;
        height: 67px;
    }

    body .ongoing-improvement-page .oi-cover__number {
        font-size: 11px;
    }

    body .ongoing-improvement-page .oi-cover__item-title {
        font-size: 15px;
    }

    body .ongoing-improvement-page .oi-cover__description {
        font-size: 12px;
    }
}


/* =========================================================
   09 — SMALLER DESKTOP
   1101px–1350px
========================================================= */

@media (min-width: 1101px) and (max-width: 1350px) {

    body .ongoing-improvement-page .oi-cover__inner {
        grid-template-columns:
            minmax(0, 0.75fr)
            minmax(0, 1.85fr);

        column-gap: 38px;

        padding: 0 60px;
    }

    body .ongoing-improvement-page .oi-cover__title {
        font-size: 37px;
    }

    body .ongoing-improvement-page .oi-cover__grid {
        column-gap: 18px;
        row-gap: 35px;
    }

    body .ongoing-improvement-page .oi-cover__item {
        gap: 11px;
    }

    body .ongoing-improvement-page .oi-cover__icon {
        width: 54px;
        height: 54px;
    }

    body .ongoing-improvement-page .oi-cover__item-title {
        font-size: 13px;
    }

    body .ongoing-improvement-page .oi-cover__description {
        font-size: 11px;
        line-height: 1.6;
    }
}


/* =========================================================
   10 — TABLET
   600px–1100px

   Introduction above a two-column grid.
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .ongoing-improvement-page .oi-cover {
        padding: 90px 0 100px;
    }

    body .ongoing-improvement-page .oi-cover__inner {
        display: block;

        padding: 0 54px;
    }

    body .ongoing-improvement-page .oi-cover__intro {
        max-width: 850px;

        margin-bottom: 60px;
    }

    body .ongoing-improvement-page .oi-cover__eyebrow {
        margin-bottom: 19px;

        font-size: 12px;
    }

    body .ongoing-improvement-page .oi-cover__title {
        max-width: 760px;

        font-size: clamp(35px, 4.7vw, 49px);
    }

    body .ongoing-improvement-page .oi-cover__body {
        max-width: 780px;

        margin-top: 25px;

        font-size: 15px;
    }

    /* TWO-COLUMN INFORMATION GRID */

    body .ongoing-improvement-page .oi-cover__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        column-gap: 34px;
        row-gap: 45px;

        align-items: start;
    }

    body .ongoing-improvement-page .oi-cover__item {
        gap: 17px;
    }

    body .ongoing-improvement-page .oi-cover__icon {
        width: 76px;
        height: 76px;
    }

    body .ongoing-improvement-page .oi-cover__item-title {
        font-size: 19px;
    }

    body .ongoing-improvement-page .oi-cover__description {
        font-size: 14px;
        line-height: 1.7;
    }
}


/* =========================================================
   11 — SMALL TABLET
   600px–749px
========================================================= */

@media (min-width: 600px) and (max-width: 749px) {

    body .ongoing-improvement-page .oi-cover {
        padding: 80px 0 90px;
    }

    body .ongoing-improvement-page .oi-cover__inner {
        padding: 0 40px;
    }

    body .ongoing-improvement-page .oi-cover__intro {
        margin-bottom: 50px;
    }

    body .ongoing-improvement-page .oi-cover__title {
        font-size: clamp(33px, 5.2vw, 41px);
    }

    body .ongoing-improvement-page .oi-cover__grid {
        column-gap: 24px;
        row-gap: 38px;
    }

    body .ongoing-improvement-page .oi-cover__item {
        gap: 12px;
    }

    body .ongoing-improvement-page .oi-cover__icon {
        width: 59px;
        height: 59px;
    }

    body .ongoing-improvement-page .oi-cover__item-title {
        font-size: 16px;
    }

    body .ongoing-improvement-page .oi-cover__description {
        font-size: 12px;
    }
}


/* =========================================================
   12 — MOBILE
   599px AND BELOW

   Single-column open editorial list.
========================================================= */

@media (max-width: 599px) {

    body .ongoing-improvement-page .oi-cover {
        padding: 78px 0 85px;
    }

    body .ongoing-improvement-page .oi-cover__inner {
        display: block;

        padding: 0 28px 0 34px;
    }

    body .ongoing-improvement-page .oi-cover__intro {
        margin-bottom: 48px;
    }

    body .ongoing-improvement-page .oi-cover__eyebrow {
        margin-bottom: 18px;

        font-size: 11px;
    }

    body .ongoing-improvement-page .oi-cover__title {
        font-size: clamp(32px, 8.2vw, 43px);
        line-height: 1.15;
    }

    body .ongoing-improvement-page .oi-cover__body {
        margin-top: 23px;

        font-size: 14px;
        line-height: 1.8;
    }

    /* SINGLE-COLUMN ITEM LIST */

    body .ongoing-improvement-page .oi-cover__grid {
        grid-template-columns: minmax(0, 1fr);

        row-gap: 0;
    }

    body .ongoing-improvement-page .oi-cover__item {
        gap: 18px;

        padding: 24px 0;

        border-bottom:
            1px solid rgba(69,78,61,0.13);
    }

    body .ongoing-improvement-page .oi-cover__item:first-child {
        padding-top: 0;
    }

    body .ongoing-improvement-page .oi-cover__item:last-child {
        padding-bottom: 0;
        border-bottom: none;
    }

    body .ongoing-improvement-page .oi-cover__icon {
        width: 72px;
        height: 72px;
    }

    body .ongoing-improvement-page .oi-cover__number {
        margin-bottom: 7px;

        font-size: 12px;
    }

    body .ongoing-improvement-page .oi-cover__item-title {
        margin-bottom: 10px;

        font-size: 19px;
    }

    body .ongoing-improvement-page .oi-cover__description {
        font-size: 13px;
        line-height: 1.75;
    }
}


/* =========================================================
   13 — SMALL MOBILE
   374px AND BELOW
========================================================= */

@media (max-width: 374px) {

    body .ongoing-improvement-page .oi-cover__inner {
        padding: 0 23px 0 29px;
    }

    body .ongoing-improvement-page .oi-cover__title {
        font-size: 30px;
    }

    body .ongoing-improvement-page .oi-cover__body {
        font-size: 13px;
    }

    body .ongoing-improvement-page .oi-cover__item {
        gap: 14px;
    }

    body .ongoing-improvement-page .oi-cover__icon {
        width: 61px;
        height: 61px;
    }

    body .ongoing-improvement-page .oi-cover__item-title {
        font-size: 17px;
    }

    body .ongoing-improvement-page .oi-cover__description {
        font-size: 12px;
    }
}


/* =========================================================
   14 — HOVER EFFECTS
========================================================= */

@media (hover: hover) and (pointer: fine) {

    body .ongoing-improvement-page .oi-cover__item:hover {
        transform: translateY(-4px);
    }

    body .ongoing-improvement-page
    .oi-cover__item:hover
    .oi-cover__icon {
        transform: translateY(-3px) scale(1.045);

        box-shadow:
            0 12px 21px rgba(65,48,35,0.07),
            0 24px 43px rgba(65,48,35,0.10),
            inset 0 2px 1px rgba(255,255,255,0.91);
    }

    body .ongoing-improvement-page
    .oi-cover__item:hover
    .oi-cover__icon svg {
        transform: scale(1.075);
    }
}


/* =========================================================
   15 — SCROLL ENTRANCE ANIMATIONS
========================================================= */

@keyframes oiCoverReveal {
    from {
        opacity: 0;
        translate: 0 22px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

@media (prefers-reduced-motion: no-preference) {

    @supports (animation-timeline: view()) {

        body .ongoing-improvement-page .oi-cover__intro {
            animation: oiCoverReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 60%;
        }

        body .ongoing-improvement-page .oi-cover__item {
            animation: oiCoverReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 60%;
        }
    }
}


/* =========================================================
   16 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body .ongoing-improvement-page .oi-cover__intro,
    body .ongoing-improvement-page .oi-cover__item {
        animation: none !important;

        opacity: 1 !important;
        translate: none !important;
        transform: none !important;
    }

    body .ongoing-improvement-page .oi-cover__item,
    body .ongoing-improvement-page .oi-cover__icon,
    body .ongoing-improvement-page .oi-cover__icon svg {
        transition: none !important;
    }
}


/* =========================================================
   FRAYORA — ONGOING IMPROVEMENT
   SECTION 02 — ICON COLOR CORRECTION

   Desktop + Mobile:
   01, 03, 05 = Terracotta
   02, 04, 06 = Olive

   Tablet retains existing styling
========================================================= */

@media (min-width: 1101px), (max-width: 599px) {

    /* TERRACOTTA — ICONS 01, 03, 05 */

    body .ongoing-improvement-page
    .oi-cover__item:nth-child(odd) .oi-cover__icon {
        background: linear-gradient(
            145deg,
            #FFF4EB 0%,
            #F5E5D8 45%,
            #EED5C4 100%
        ) !important;
    }

    body .ongoing-improvement-page
    .oi-cover__item:nth-child(odd) .oi-cover__icon svg {
        stroke: #BA6544 !important;
    }

    /* OLIVE — ICONS 02, 04, 06 */

    body .ongoing-improvement-page
    .oi-cover__item:nth-child(even) .oi-cover__icon {
        background: linear-gradient(
            145deg,
            #F4F5ED 0%,
            #E5E9DE 45%,
            #D4DAC8 100%
        ) !important;
    }

    body .ongoing-improvement-page
    .oi-cover__item:nth-child(even) .oi-cover__icon svg {
        stroke: #52644C !important;
    }
}


/* =========================================================
   FRAYORA — ONGOING IMPROVEMENT
   SECTION 03 — MORE THAN SUPPORT

   COMPLETE RESPONSIVE CSS

   Desktop: 1101px+
   Tablet: 600px–1100px
   Mobile: 599px and below

   Deep olive editorial surface
   Three open benefit columns
   Delicate vertical separators
   Minimal ivory line icons
   Typography-led SaaS design
   Subtle shadow and hover depth
   Scroll entrance animations
   Reduced-motion safe
========================================================= */


/* =========================================================
   01 — SECTION FOUNDATION
========================================================= */

body .ongoing-improvement-page .oi-partner {
    position: relative;
    isolation: isolate;

    width: 100%;
    margin: 0;
    padding: 0;

    overflow: hidden;

    background-color: #303B32 !important;
    background-image: none !important;

    color: #F8F3EB;
}

body .ongoing-improvement-page .oi-partner,
body .ongoing-improvement-page .oi-partner *,
body .ongoing-improvement-page .oi-partner *::before,
body .ongoing-improvement-page .oi-partner *::after {
    box-sizing: border-box;
}

body .ongoing-improvement-page .oi-partner::before,
body .ongoing-improvement-page .oi-partner::after {
    content: none !important;
    display: none !important;
}


/* =========================================================
   02 — INNER STRUCTURE
========================================================= */

body .ongoing-improvement-page .oi-partner__inner {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1600px;

    margin: 0 auto;
}

body .ongoing-improvement-page .oi-partner__intro {
    min-width: 0;
    text-align: left;
}


/* =========================================================
   03 — INTRODUCTION TYPOGRAPHY
========================================================= */

body .ongoing-improvement-page .oi-partner__eyebrow {
    margin: 0;

    font-family: "Inter", sans-serif !important;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.15em;

    color: #E8D9C5 !important;
}

body .ongoing-improvement-page .oi-partner__title {
    width: 100%;
    margin: 0;

    font-family: "Manrope", "Inter", sans-serif !important;
    font-weight: 600;
    line-height: 1.13;
    letter-spacing: -0.05em;

    color: #FAF6EF !important;

    text-wrap: balance;
}

body .ongoing-improvement-page .oi-partner__body {
    margin: 0;

    font-family: "Inter", sans-serif !important;
    font-weight: 400;
    line-height: 1.75;

    color: rgba(250,246,239,0.82) !important;
}


/* =========================================================
   04 — INFORMATION COLUMNS
========================================================= */

body .ongoing-improvement-page .oi-partner__items {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    list-style: none;
}

body .ongoing-improvement-page .oi-partner__item {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    min-width: 0;
    margin: 0;

    border: none;
    background: transparent;

    list-style: none;

    transition: transform 360ms cubic-bezier(.22,1,.36,1);
}

body .ongoing-improvement-page .oi-partner__item::marker {
    content: "";
}


/* =========================================================
   05 — DELICATE SEPARATORS
========================================================= */

body .ongoing-improvement-page .oi-partner__item::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 1px;

    background: rgba(238,232,218,0.30);

    box-shadow:
        1px 0 0 rgba(255,255,255,0.035);

    pointer-events: none;
}


/* =========================================================
   06 — MINIMAL ICONS
========================================================= */

body .ongoing-improvement-page .oi-partner__icon {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    flex: 0 0 auto;

    color: #EDE9DF;

    filter:
        drop-shadow(0 3px 8px rgba(0,0,0,0.07));
}

body .ongoing-improvement-page .oi-partner__icon svg {
    display: block;

    width: 100%;
    height: 100%;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition: transform 380ms ease;
}


/* =========================================================
   07 — ITEM TEXT
========================================================= */

body .ongoing-improvement-page .oi-partner__number {
    display: block;

    margin: 0;

    font-family: "Inter", sans-serif !important;
    font-weight: 600;

    line-height: 1.2;
    color: rgba(250,246,239,0.78);
}

body .ongoing-improvement-page .oi-partner__label {
    margin: 0;

    font-family: "Inter", sans-serif !important;
    font-weight: 600;

    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;

    color: #E0D7C7 !important;
}

body .ongoing-improvement-page .oi-partner__item-title {
    margin: 0;

    font-family: "Manrope", "Inter", sans-serif !important;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.035em;

    color: #FFFFFF !important;
}

body .ongoing-improvement-page .oi-partner__description {
    margin: 0;

    font-family: "Inter", sans-serif !important;
    font-weight: 400;
    line-height: 1.7;

    color: rgba(250,246,239,0.79) !important;
}


/* =========================================================
   08 — CLOSING STATEMENT
========================================================= */

body .ongoing-improvement-page .oi-partner__closing {
    width: 100%;
    margin: 0;

    font-family: "Manrope", "Inter", sans-serif !important;
    font-weight: 500;

    line-height: 1.5;
    letter-spacing: -0.02em;

    color: #F1E9DB !important;

    text-align: center;
}


/* =========================================================
   09 — DESKTOP
   1101px+
========================================================= */

@media (min-width: 1101px) {

    body .ongoing-improvement-page .oi-partner {
        padding: 105px 0 85px;
    }

    body .ongoing-improvement-page .oi-partner__inner {
        display: grid;

        grid-template-columns:
            minmax(0, 0.95fr)
            minmax(0, 1.55fr);

        column-gap: 65px;
        align-items: start;

        padding: 0 80px;
    }

    /* INTRO */

    body .ongoing-improvement-page .oi-partner__intro {
        max-width: 510px;
    }

    body .ongoing-improvement-page .oi-partner__eyebrow {
        margin-bottom: 19px;
        font-size: 12px;
    }

    body .ongoing-improvement-page .oi-partner__title {
        font-size: clamp(37px, 3vw, 47px);
    }

    body .ongoing-improvement-page .oi-partner__body {
        margin-top: 23px;

        max-width: 500px;
        font-size: 14px;
    }

    /* THREE COLUMNS */

    body .ongoing-improvement-page .oi-partner__items {
        column-gap: 18px;
    }

    body .ongoing-improvement-page .oi-partner__item {
        min-height: 285px;
        padding: 0 16px 0 22px;
    }

    body .ongoing-improvement-page .oi-partner__icon {
        width: 43px;
        height: 43px;

        margin-bottom: 12px;
    }

    body .ongoing-improvement-page .oi-partner__number {
        margin-bottom: 4px;
        font-size: 11px;
    }

    body .ongoing-improvement-page .oi-partner__label {
        margin-bottom: 14px;
        font-size: 10px;
    }

    body .ongoing-improvement-page .oi-partner__item-title {
        margin-bottom: 17px;
        font-size: 19px;
    }

    body .ongoing-improvement-page .oi-partner__description {
        font-size: 12px;
    }

    /* CLOSING ACROSS BOTH COLUMNS */

    body .ongoing-improvement-page .oi-partner__closing {
        grid-column: 1 / -1;

        margin-top: 52px;
        font-size: 17px;
    }
}


/* =========================================================
   10 — SMALLER DESKTOP
   1101px–1350px
========================================================= */

@media (min-width: 1101px) and (max-width: 1350px) {

    body .ongoing-improvement-page .oi-partner__inner {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(0, 1.65fr);

        column-gap: 35px;
        padding: 0 60px;
    }

    body .ongoing-improvement-page .oi-partner__title {
        font-size: 38px;
    }

    body .ongoing-improvement-page .oi-partner__items {
        column-gap: 12px;
    }

    body .ongoing-improvement-page .oi-partner__item {
        padding-left: 17px;
        padding-right: 9px;
    }

    body .ongoing-improvement-page .oi-partner__item-title {
        font-size: 16px;
    }

    body .ongoing-improvement-page .oi-partner__description {
        font-size: 11px;
    }
}


/* =========================================================
   11 — TABLET
   600px–1100px
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .ongoing-improvement-page .oi-partner {
        padding: 90px 0 85px;
    }

    body .ongoing-improvement-page .oi-partner__inner {
        display: block;
        padding: 0 54px;
    }

    body .ongoing-improvement-page .oi-partner__intro {
        max-width: 850px;
        margin-bottom: 60px;
    }

    body .ongoing-improvement-page .oi-partner__eyebrow {
        margin-bottom: 19px;
        font-size: 12px;
    }

    body .ongoing-improvement-page .oi-partner__title {
        max-width: 760px;

        font-size: clamp(37px, 4.9vw, 51px);
    }

    body .ongoing-improvement-page .oi-partner__body {
        max-width: 790px;

        margin-top: 23px;
        font-size: 15px;
    }

    body .ongoing-improvement-page .oi-partner__items {
        column-gap: 15px;
    }

    body .ongoing-improvement-page .oi-partner__item {
        min-height: 280px;
        padding: 0 12px 0 20px;
    }

    body .ongoing-improvement-page .oi-partner__icon {
        width: 43px;
        height: 43px;
        margin-bottom: 13px;
    }

    body .ongoing-improvement-page .oi-partner__number {
        margin-bottom: 5px;
        font-size: 11px;
    }

    body .ongoing-improvement-page .oi-partner__label {
        margin-bottom: 13px;
        font-size: 10px;
    }

    body .ongoing-improvement-page .oi-partner__item-title {
        margin-bottom: 14px;
        font-size: 18px;
    }

    body .ongoing-improvement-page .oi-partner__description {
        font-size: 12px;
    }

    body .ongoing-improvement-page .oi-partner__closing {
        margin-top: 48px;
        font-size: 17px;
    }
}


/* =========================================================
   12 — SMALL TABLET
   600px–749px

   Stacked editorial benefits.
========================================================= */

@media (min-width: 600px) and (max-width: 749px) {

    body .ongoing-improvement-page .oi-partner {
        padding: 80px 0 80px;
    }

    body .ongoing-improvement-page .oi-partner__inner {
        padding: 0 42px;
    }

    body .ongoing-improvement-page .oi-partner__intro {
        margin-bottom: 48px;
    }

    body .ongoing-improvement-page .oi-partner__title {
        font-size: clamp(35px, 5.5vw, 44px);
    }

    body .ongoing-improvement-page .oi-partner__items {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 35px;
    }

    body .ongoing-improvement-page .oi-partner__item {
        min-height: 0;
        padding: 0 0 0 24px;
    }

    body .ongoing-improvement-page .oi-partner__item-title {
        font-size: 21px;
    }

    body .ongoing-improvement-page .oi-partner__description {
        max-width: 560px;
        font-size: 14px;
    }

    body .ongoing-improvement-page .oi-partner__closing {
        margin-top: 50px;
    }
}


/* =========================================================
   13 — MOBILE
   599px AND BELOW
========================================================= */

@media (max-width: 599px) {

    body .ongoing-improvement-page .oi-partner {
        padding: 76px 0 80px;
    }

    body .ongoing-improvement-page .oi-partner__inner {
        display: block;
        padding: 0 28px 0 34px;
    }

    body .ongoing-improvement-page .oi-partner__intro {
        margin-bottom: 43px;
    }

    body .ongoing-improvement-page .oi-partner__eyebrow {
        margin-bottom: 18px;
        font-size: 11px;
    }

    body .ongoing-improvement-page .oi-partner__title {
        font-size: clamp(32px, 8.2vw, 43px);
    }

    body .ongoing-improvement-page .oi-partner__body {
        margin-top: 23px;

        font-size: 14px;
        line-height: 1.8;
    }

    body .ongoing-improvement-page .oi-partner__items {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 36px;
    }

    body .ongoing-improvement-page .oi-partner__item {
        min-height: 0;
        padding: 0 0 0 22px;
    }

    body .ongoing-improvement-page .oi-partner__icon {
        width: 45px;
        height: 45px;

        margin-bottom: 13px;
    }

    body .ongoing-improvement-page .oi-partner__number {
        margin-bottom: 5px;
        font-size: 11px;
    }

    body .ongoing-improvement-page .oi-partner__label {
        margin-bottom: 12px;
        font-size: 10px;
    }

    body .ongoing-improvement-page .oi-partner__item-title {
        margin-bottom: 13px;
        font-size: 20px;
    }

    body .ongoing-improvement-page .oi-partner__description {
        font-size: 13px;
        line-height: 1.75;
    }

    body .ongoing-improvement-page .oi-partner__closing {
        max-width: 390px;

        margin: 45px auto 0;

        font-size: 16px;
        line-height: 1.65;
    }
}


/* =========================================================
   14 — SMALL MOBILE
   374px AND BELOW
========================================================= */

@media (max-width: 374px) {

    body .ongoing-improvement-page .oi-partner__inner {
        padding: 0 23px 0 29px;
    }

    body .ongoing-improvement-page .oi-partner__title {
        font-size: 30px;
    }

    body .ongoing-improvement-page .oi-partner__body {
        font-size: 13px;
    }

    body .ongoing-improvement-page .oi-partner__item-title {
        font-size: 18px;
    }

    body .ongoing-improvement-page .oi-partner__description {
        font-size: 12px;
    }
}


/* =========================================================
   15 — HOVER INTERACTIONS
========================================================= */

@media (hover: hover) and (pointer: fine) {

    body .ongoing-improvement-page .oi-partner__item:hover {
        transform: translateY(-4px);
    }

    body .ongoing-improvement-page
    .oi-partner__item:hover
    .oi-partner__icon svg {
        transform: translateY(-3px) scale(1.04);
    }
}


/* =========================================================
   16 — SCROLL ENTRANCE ANIMATIONS
========================================================= */

@keyframes oiPartnerReveal {
    from {
        opacity: 0;
        translate: 0 20px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

@media (prefers-reduced-motion: no-preference) {

    @supports (animation-timeline: view()) {

        body .ongoing-improvement-page .oi-partner__intro,
        body .ongoing-improvement-page .oi-partner__item,
        body .ongoing-improvement-page .oi-partner__closing {
            animation: oiPartnerReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 60%;
        }
    }
}


/* =========================================================
   17 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body .ongoing-improvement-page .oi-partner__intro,
    body .ongoing-improvement-page .oi-partner__item,
    body .ongoing-improvement-page .oi-partner__closing {
        animation: none !important;

        opacity: 1 !important;
        translate: none !important;
        transform: none !important;
    }

    body .ongoing-improvement-page .oi-partner__item,
    body .ongoing-improvement-page .oi-partner__icon svg {
        transition: none !important;
    }
}



/* =========================================================
   FRAYORA — ONGOING IMPROVEMENT
   SECTION 04 — PLANS & PRICING
   CLEAN REBUILD — DESKTOP / TABLET / MOBILE

   Modern editorial SaaS
   Maintain: light olive
   Improve: warm terracotta
   Evolve: deep olive
   Balanced equal-height cards
   Buttons safely inside cards
   Typography explicitly restored
   Reduced-motion safe
========================================================= */

/* =========================================================
   01 — FOUNDATION
========================================================= */

body .ongoing-improvement-page .oi-pricing {
    --oi-ink: #22251F;
    --oi-muted: #676761;
    --oi-olive: #40513E;
    --oi-terra: #C96743;

    position: relative;
    isolation: isolate;
    overflow: hidden;

    width: 100%;
    margin: 0;
    padding: 100px 0 95px;

    background: #F8F3EB !important;
    color: var(--oi-ink);

    font-family: "Inter", Arial, sans-serif !important;
}

body .ongoing-improvement-page .oi-pricing,
body .ongoing-improvement-page .oi-pricing *,
body .ongoing-improvement-page .oi-pricing *::before,
body .ongoing-improvement-page .oi-pricing *::after {
    box-sizing: border-box;
}

body .ongoing-improvement-page .oi-pricing__inner {
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 80px;
}

/* =========================================================
   02 — TYPOGRAPHY RESET
   Prevent theme serif overrides
========================================================= */

body .ongoing-improvement-page .oi-pricing p,
body .ongoing-improvement-page .oi-pricing li,
body .ongoing-improvement-page .oi-pricing a,
body .ongoing-improvement-page .oi-pricing span {
    font-family: "Inter", Arial, sans-serif !important;
}

body .ongoing-improvement-page .oi-pricing h2,
body .ongoing-improvement-page .oi-pricing h3 {
    font-family: "Manrope", "Inter", Arial, sans-serif !important;
    font-style: normal !important;
    text-transform: none;
}

/* =========================================================
   03 — SECTION INTRODUCTION
========================================================= */

body .ongoing-improvement-page .oi-pricing__header {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, .85fr);
    gap: 60px;
    align-items: start;

    margin-bottom: 58px;
}

body .ongoing-improvement-page .oi-pricing__intro {
    min-width: 0;
}

body .ongoing-improvement-page .oi-pricing__eyebrow {
    margin: 0 0 18px;

    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .13em;

    color: #B86448 !important;
}

body .ongoing-improvement-page .oi-pricing__title {
    margin: 0;

    font-size: clamp(38px, 3.2vw, 50px);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -.05em;

    color: #22251F !important;
    text-wrap: balance;
}

body .ongoing-improvement-page .oi-pricing__body {
    max-width: 810px;
    margin: 22px 0 0;

    font-size: 14px;
    font-weight: 400;
    line-height: 1.8;

    color: #686760 !important;
}

/* =========================================================
   04 — COMPLIMENTARY INTRO CALL
========================================================= */

body .ongoing-improvement-page .oi-pricing__consultation {
    min-width: 0;
    padding: 23px 24px;

    border: 1px solid rgba(176,147,125,.21);
    border-radius: 20px;

    background: #FFFCF8;

    box-shadow:
        0 12px 28px rgba(70,52,39,.045),
        0 24px 42px rgba(70,52,39,.035),
        inset 0 1px 0 rgba(255,255,255,.95);
}

body .ongoing-improvement-page
.oi-pricing__consultation-heading {
    margin: 0;

    font-size: 13px;
    font-weight: 650;
    line-height: 1.6;

    color: #AE5E42 !important;
}

body .ongoing-improvement-page
.oi-pricing__consultation-body {
    margin: 12px 0 0;

    font-size: 12px;
    line-height: 1.75;

    color: #686760 !important;
}

body .ongoing-improvement-page
.oi-pricing__consultation-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    max-width: 100%;
    min-height: 46px;

    margin-top: 18px;
    padding: 12px 21px;

    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;

    background: #C96743 !important;
    color: #FFFFFF !important;

    font-size: 12px;
    font-weight: 650;
    line-height: 1.4;
    text-align: center;
    text-decoration: none !important;

    box-shadow:
        0 8px 18px rgba(171,87,55,.13),
        0 17px 30px rgba(171,87,55,.08),
        inset 0 1px 0 rgba(255,255,255,.18);

    transition: transform .3s ease, box-shadow .3s ease;
}

/* =========================================================
   05 — THREE-CARD GRID
========================================================= */

body .ongoing-improvement-page .oi-pricing__plans {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;

    gap: 20px;
    width: 100%;
    min-width: 0;
}

/* =========================================================
   06 — SHARED CARD STRUCTURE
========================================================= */

body .ongoing-improvement-page .oi-pricing__plan {
    --plan-text: #22251F;
    --plan-muted: #666961;
    --plan-accent: #40513E;
    --plan-divider: rgba(67,82,61,.16);
    --plan-check: #40513E;

    position: relative;
    isolation: isolate;

    display: flex;
    flex-direction: column;

    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;

    margin: 0;
    padding: 0;

    border: 1px solid rgba(112,119,98,.23);
    border-radius: 22px;

    background: #F4F6F0;

    box-shadow:
        0 12px 26px rgba(64,52,38,.045),
        0 26px 50px rgba(64,52,38,.075),
        0 42px 75px rgba(64,52,38,.035),
        inset 0 1px 0 rgba(255,255,255,.91);

    transition:
        transform .35s cubic-bezier(.22,1,.36,1),
        box-shadow .35s ease;
}

/* Fine inner light-catching edge */

body .ongoing-improvement-page .oi-pricing__plan::after {
    content: "";

    position: absolute;
    inset: 1px;
    z-index: 0;

    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.42);

    pointer-events: none;
}

body .ongoing-improvement-page .oi-pricing__plan-inner {
    position: relative;
    z-index: 1;

    display: flex;
    flex: 1;
    flex-direction: column;

    width: 100%;
    min-width: 0;
    min-height: 0;

    padding: 32px 26px 27px;
}

/* =========================================================
   07 — MAINTAIN: SAGE OLIVE
========================================================= */

body .ongoing-improvement-page .oi-pricing__plan--maintain {
    --plan-accent: #52664B;
    --plan-check: #52664B;

    background: #F0F3EB;
    border-color: rgba(99,120,89,.28);
}

/* =========================================================
   08 — IMPROVE: WARM TERRACOTTA
========================================================= */

body .ongoing-improvement-page .oi-pricing__plan--improve {
    --plan-accent: #C96743;
    --plan-check: #C96743;
    --plan-divider: rgba(186,104,72,.18);

    background: #FBF0E9;
    border-color: rgba(197,110,77,.36);

    box-shadow:
        0 15px 29px rgba(143,83,58,.055),
        0 30px 55px rgba(143,83,58,.105),
        0 48px 80px rgba(143,83,58,.045),
        inset 0 1px 0 rgba(255,255,255,.93);
}

/* =========================================================
   09 — EVOLVE: DEEP OLIVE
========================================================= */

body .ongoing-improvement-page .oi-pricing__plan--evolve {
    --plan-text: #F8F3EB;
    --plan-muted: rgba(248,243,235,.78);
    --plan-accent: #E4D5B8;
    --plan-check: #DCC9A8;
    --plan-divider: rgba(246,236,218,.17);

    background: #303B32;
    border-color: rgba(232,219,191,.28);

    box-shadow:
        0 13px 28px rgba(24,34,27,.11),
        0 30px 58px rgba(24,34,27,.19),
        0 49px 79px rgba(24,34,27,.075),
        inset 0 1px 0 rgba(255,255,255,.085);
}

body .ongoing-improvement-page
.oi-pricing__plan--evolve::after {
    border-color: rgba(255,255,255,.055);
}

/* =========================================================
   10 — PLAN BADGES
========================================================= */

body .ongoing-improvement-page .oi-pricing__ribbon {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 38px;
    padding: 10px 14px;

    border-radius: 21px 21px 0 0;

    background: #C96743;
    color: #FFFFFF;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-align: center;
}

body .ongoing-improvement-page
.oi-pricing__plan--improve .oi-pricing__plan-inner {
    padding-top: 26px;
}

body .ongoing-improvement-page .oi-pricing__availability {
    position: absolute;
    top: -16px;
    left: 50%;
    z-index: 4;

    transform: translateX(-50%);

    max-width: 90%;
    padding: 9px 21px;

    border: 1px solid rgba(238,223,198,.25);
    border-radius: 999px;

    background: #465548;
    color: #F8F1E6;

    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .07em;
    text-align: center;
    white-space: nowrap;

    box-shadow: 0 6px 15px rgba(26,35,29,.15);
}

/* =========================================================
   11 — CENTERED PLAN HEADER
========================================================= */

body .ongoing-improvement-page .oi-pricing__plan-top {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
    min-width: 0;

    text-align: center;
}

body .ongoing-improvement-page .oi-pricing__plan-icon {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 68px;
    height: 68px;

    margin: 0 auto 19px;

    border: 1px solid rgba(255,255,255,.85);
    border-radius: 50%;

    background: rgba(255,255,255,.62);

    box-shadow:
        0 7px 17px rgba(52,43,33,.055),
        0 16px 30px rgba(52,43,33,.035),
        inset 0 1px 0 rgba(255,255,255,.93);
}

body .ongoing-improvement-page .oi-pricing__plan-icon::after {
    content: "";

    position: absolute;
    inset: 5px;

    border: 1px solid rgba(255,255,255,.80);
    border-radius: 50%;

    pointer-events: none;
}

body .ongoing-improvement-page .oi-pricing__plan-icon svg {
    display: block;

    width: 31px;
    height: 31px;

    fill: none;
    stroke: var(--plan-accent);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body .ongoing-improvement-page
.oi-pricing__plan--evolve .oi-pricing__plan-icon {
    background: rgba(255,255,255,.065);
    border-color: rgba(246,237,220,.19);

    box-shadow:
        0 9px 20px rgba(0,0,0,.10),
        inset 0 1px 0 rgba(255,255,255,.09);
}

body .ongoing-improvement-page
.oi-pricing__plan--evolve .oi-pricing__plan-icon::after {
    border-color: rgba(255,255,255,.09);
}

body .ongoing-improvement-page .oi-pricing__plan-name {
    margin: 0 0 11px;

    font-size: 23px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.035em;

    color: var(--plan-text) !important;
}

body .ongoing-improvement-page
.oi-pricing__plan-description {
    min-height: 66px;
    max-width: 320px;

    margin: 0 0 23px;

    font-size: 13px;
    font-weight: 400;
    line-height: 1.65;

    color: var(--plan-muted) !important;
    text-wrap: balance;
}

body .ongoing-improvement-page .oi-pricing__capacity {
    margin: 0 0 11px;

    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .1em;

    color: var(--plan-accent) !important;
}

/* =========================================================
   12 — CENTERED PRICE
========================================================= */

body .ongoing-improvement-page .oi-pricing__price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;

    gap: 5px 8px;
    width: 100%;

    margin: 0 0 26px;
    text-align: center;

    color: var(--plan-text) !important;
}

body .ongoing-improvement-page .oi-pricing__amount {
    font-family: "Manrope", "Inter", sans-serif !important;

    font-size: clamp(32px, 2.55vw, 42px);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -.06em;

    color: var(--plan-text) !important;
}

body .ongoing-improvement-page .oi-pricing__starting,
body .ongoing-improvement-page .oi-pricing__period {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;

    color: var(--plan-muted) !important;
}

/* =========================================================
   13 — FEATURE INTRODUCTION
========================================================= */

body .ongoing-improvement-page
.oi-pricing__features-intro {
    margin: 0 0 15px;

    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    text-align: left;

    color: var(--plan-text) !important;
}

/* =========================================================
   14 — FEATURE LIST
========================================================= */

body .ongoing-improvement-page .oi-pricing__features {
    display: flex;
    flex-direction: column;

    gap: 10px;

    width: 100%;
    margin: 0;
    padding: 0;

    list-style: none;
}

body .ongoing-improvement-page .oi-pricing__features li {
    position: relative;

    margin: 0;
    padding: 0 0 0 24px;

    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;

    color: var(--plan-muted) !important;
    list-style: none;
}

body .ongoing-improvement-page
.oi-pricing__features li::before {
    content: "";

    position: absolute;
    top: 6px;
    left: 3px;

    width: 12px;
    height: 7px;

    border-left: 2px solid var(--plan-check);
    border-bottom: 2px solid var(--plan-check);

    transform: rotate(-45deg);
}

/* =========================================================
   15 — BOTTOM AREA
   Buttons always inside cards
========================================================= */

body .ongoing-improvement-page .oi-pricing__plan-bottom {
    display: flex;
    flex-direction: column;

    width: 100%;
    min-width: 0;

    margin-top: auto;
    padding-top: 28px;
}

body .ongoing-improvement-page .oi-pricing__best-for {
    width: 100%;
    min-height: 60px;

    margin: 0 0 18px;
    padding: 17px 0 0;

    border-top: 1px solid var(--plan-divider);

    font-size: 12px;
    font-weight: 400;
    line-height: 1.65;
    text-align: center;

    color: var(--plan-muted) !important;
}

body .ongoing-improvement-page .oi-pricing__plan-button {
    position: relative;
    z-index: 3;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    width: 100%;
    min-width: 0;
    min-height: 49px;

    margin: 0 !important;
    padding: 13px 16px;

    border-radius: 999px;

    font-size: 13px;
    font-weight: 650;
    line-height: 1.35;
    text-align: center;
    text-decoration: none !important;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background-color .3s ease;
}

body .ongoing-improvement-page
.oi-pricing__plan--maintain .oi-pricing__plan-button {
    border: 1px solid #52664B;
    background: #52664B !important;
    color: #FFFFFF !important;

    box-shadow: 0 9px 19px rgba(55,76,49,.15);
}

body .ongoing-improvement-page
.oi-pricing__plan--improve .oi-pricing__plan-button {
    border: 1px solid #C96743;
    background: #C96743 !important;
    color: #FFFFFF !important;

    box-shadow: 0 9px 19px rgba(175,87,55,.15);
}

body .ongoing-improvement-page
.oi-pricing__plan--evolve .oi-pricing__plan-button {
    border: 1px solid rgba(255,255,255,.14);
    background: #F3E9D9 !important;
    color: #253127 !important;

    box-shadow: 0 9px 19px rgba(0,0,0,.12);
}

/* =========================================================
   16 — DISCLAIMERS
========================================================= */

body .ongoing-improvement-page .oi-pricing__disclaimer {
    max-width: 1100px;
    margin: 52px auto 0;

    text-align: center;
}

body .ongoing-improvement-page .oi-pricing__disclaimer p {
    margin: 0;

    font-size: 12px;
    line-height: 1.85;

    color: #78736C !important;
}

body .ongoing-improvement-page
.oi-pricing__disclaimer p + p {
    margin-top: 12px;
}

/* =========================================================
   17 — FRAYORA STAR CLOSING
========================================================= */

body .ongoing-improvement-page .oi-pricing__closing {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    margin: 36px 0 0;

    font-size: 17px;
    font-weight: 600;
    line-height: 1.55;
    text-align: center;

    color: #344333 !important;
}

body .ongoing-improvement-page .oi-pricing__closing-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;
    width: 20px;
    height: 20px;
}

body .ongoing-improvement-page
.oi-pricing__closing-star svg {
    display: block;

    width: 100%;
    height: 100%;

    fill: #C96743;
}

/* =========================================================
   18 — HOVER / FOCUS
========================================================= */

@media (hover: hover) and (pointer: fine) {

    body .ongoing-improvement-page .oi-pricing__plan:hover {
        transform: translateY(-4px);

        box-shadow:
            0 15px 29px rgba(64,52,38,.055),
            0 31px 59px rgba(64,52,38,.105),
            0 48px 80px rgba(64,52,38,.05);
    }

    body .ongoing-improvement-page .oi-pricing__plan-button:hover,
    body .ongoing-improvement-page
    .oi-pricing__consultation-button:hover {
        transform: translateY(-2px);
    }
}

body .ongoing-improvement-page .oi-pricing a:focus-visible {
    outline: 2px solid #C96743;
    outline-offset: 4px;
}

/* =========================================================
   19 — SMALLER DESKTOP
========================================================= */

@media (min-width: 1101px) and (max-width: 1350px) {

    body .ongoing-improvement-page .oi-pricing__inner {
        padding: 0 60px;
    }

    body .ongoing-improvement-page .oi-pricing__header {
        gap: 38px;
    }

    body .ongoing-improvement-page .oi-pricing__plans {
        gap: 15px;
    }

    body .ongoing-improvement-page .oi-pricing__plan-inner {
        padding: 29px 20px 24px;
    }

    body .ongoing-improvement-page .oi-pricing__plan--improve
    .oi-pricing__plan-inner {
        padding-top: 25px;
    }

    body .ongoing-improvement-page .oi-pricing__amount {
        font-size: 34px;
    }

    body .ongoing-improvement-page .oi-pricing__features li {
        font-size: 11.5px;
    }
}

/* =========================================================
   20 — TABLET
   600px–1100px
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .ongoing-improvement-page .oi-pricing {
        padding: 88px 0 90px;
    }

    body .ongoing-improvement-page .oi-pricing__inner {
        padding: 0 48px;
    }

    body .ongoing-improvement-page .oi-pricing__header {
        grid-template-columns: minmax(0,1fr);
        gap: 32px;
        margin-bottom: 55px;
    }

    body .ongoing-improvement-page .oi-pricing__title {
        font-size: clamp(37px, 5vw, 51px);
    }

    body .ongoing-improvement-page .oi-pricing__body {
        max-width: 800px;
        font-size: 15px;
    }

    body .ongoing-improvement-page .oi-pricing__consultation {
        max-width: 650px;
    }

    /* Compact swipeable pricing cards */

    body .ongoing-improvement-page .oi-pricing__plans {
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;

        gap: 22px;

        width: 100%;
        min-width: 0;

        padding: 22px 4px 30px;

        overflow-x: auto;
        overflow-y: hidden;

        scroll-snap-type: x mandatory;
        scroll-padding-inline: 4px;

        scrollbar-width: thin;
        scrollbar-color: #BE947E rgba(201,103,67,.10);

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    body .ongoing-improvement-page .oi-pricing__plan {
        flex: 0 0 350px;

        width: 350px;
        min-width: 350px;
        max-width: 350px;

        height: auto;
        align-self: stretch;

        scroll-snap-align: start;
    }

    body .ongoing-improvement-page .oi-pricing__plan-inner {
        padding: 30px 25px 26px;
    }

    body .ongoing-improvement-page
    .oi-pricing__plan--improve .oi-pricing__plan-inner {
        padding-top: 25px;
    }

    body .ongoing-improvement-page .oi-pricing__amount {
        font-size: 39px;
    }

    body .ongoing-improvement-page
    .oi-pricing__plans::-webkit-scrollbar {
        height: 5px;
    }

    body .ongoing-improvement-page
    .oi-pricing__plans::-webkit-scrollbar-track {
        background: rgba(201,103,67,.10);
        border-radius: 999px;
    }

    body .ongoing-improvement-page
    .oi-pricing__plans::-webkit-scrollbar-thumb {
        background: #BE947E;
        border-radius: 999px;
    }
}

/* =========================================================
   21 — SMALL TABLET
========================================================= */

@media (min-width: 600px) and (max-width: 749px) {

    body .ongoing-improvement-page .oi-pricing__inner {
        padding: 0 40px;
    }

    body .ongoing-improvement-page .oi-pricing__title {
        font-size: clamp(35px, 5.3vw, 43px);
    }

    body .ongoing-improvement-page .oi-pricing__plan {
        flex-basis: 310px;

        width: 310px;
        min-width: 310px;
        max-width: 310px;
    }

    body .ongoing-improvement-page .oi-pricing__plan-inner {
        padding: 27px 22px 24px;
    }
}

/* =========================================================
   22 — MOBILE
   599px AND BELOW
========================================================= */

@media (max-width: 599px) {

    body .ongoing-improvement-page .oi-pricing {
        padding: 76px 0 82px;
    }

    body .ongoing-improvement-page .oi-pricing__inner {
        padding: 0 28px 0 34px;
    }

    body .ongoing-improvement-page .oi-pricing__header {
        grid-template-columns: minmax(0,1fr);
        gap: 28px;

        margin-bottom: 48px;
    }

    body .ongoing-improvement-page .oi-pricing__eyebrow {
        font-size: 11px;
    }

    body .ongoing-improvement-page .oi-pricing__title {
        font-size: clamp(32px, 8vw, 43px);
    }

    body .ongoing-improvement-page .oi-pricing__body {
        font-size: 14px;
    }

    body .ongoing-improvement-page .oi-pricing__consultation {
        padding: 20px;
    }

    body .ongoing-improvement-page
    .oi-pricing__consultation-button {
        width: 100%;
    }

    body .ongoing-improvement-page .oi-pricing__plans {
        display: grid;
        grid-template-columns: minmax(0, 1fr);

        gap: 37px;

        padding: 0;
        overflow: visible;
    }

    body .ongoing-improvement-page .oi-pricing__plan {
        width: 100%;
        min-width: 0;
        max-width: none;

        height: auto;
    }

    body .ongoing-improvement-page .oi-pricing__plan-inner {
        padding: 29px 23px 24px;
    }

    body .ongoing-improvement-page
    .oi-pricing__plan--improve .oi-pricing__plan-inner {
        padding-top: 25px;
    }

    body .ongoing-improvement-page .oi-pricing__plan-icon {
        width: 65px;
        height: 65px;
    }

    body .ongoing-improvement-page
    .oi-pricing__plan-description {
        min-height: 0;
    }

    body .ongoing-improvement-page .oi-pricing__amount {
        font-size: clamp(34px, 9vw, 42px);
    }

    body .ongoing-improvement-page .oi-pricing__features li {
        font-size: 12px;
    }

    body .ongoing-improvement-page .oi-pricing__best-for {
        min-height: 0;
    }

    body .ongoing-improvement-page .oi-pricing__disclaimer {
        margin-top: 45px;
        text-align: left;
    }

    body .ongoing-improvement-page .oi-pricing__disclaimer p {
        font-size: 11px;
    }

    body .ongoing-improvement-page .oi-pricing__closing {
        align-items: flex-start;
        margin-top: 32px;
        font-size: 15px;
    }
}

/* =========================================================
   23 — SMALL MOBILE
========================================================= */

@media (max-width: 374px) {

    body .ongoing-improvement-page .oi-pricing__inner {
        padding: 0 23px 0 29px;
    }

    body .ongoing-improvement-page .oi-pricing__title {
        font-size: 30px;
    }

    body .ongoing-improvement-page .oi-pricing__plan-inner {
        padding: 25px 18px 22px;
    }

    body .ongoing-improvement-page .oi-pricing__amount {
        font-size: 32px;
    }

    body .ongoing-improvement-page .oi-pricing__features li {
        font-size: 11.5px;
    }
}

/* =========================================================
   24 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body .ongoing-improvement-page .oi-pricing__plan,
    body .ongoing-improvement-page .oi-pricing__plan-button,
    body .ongoing-improvement-page
    .oi-pricing__consultation-button {
        animation: none !important;
        transition: none !important;
    }

    body .ongoing-improvement-page .oi-pricing__plans {
        scroll-behavior: auto !important;
    }
}


/* =========================================================
   FRAYORA — ONGOING IMPROVEMENT
   SECTION 04 — FINAL VISUAL REFINEMENT

   More visible package icons
   Refined glass and luminous highlights
   Center-aligned package inclusions
   Stronger dimensional depth
   Mobile horizontally scrolling carousel
   Existing copy and colors preserved
========================================================= */


/* =========================================================
   01 — REFINED GLASS SURFACES
========================================================= */

body .ongoing-improvement-page .oi-pricing__plan {
    position: relative;
    isolation: isolate;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    box-shadow:
        0 12px 25px rgba(63, 49, 37, 0.05),
        0 28px 52px rgba(63, 49, 37, 0.08),
        0 48px 75px rgba(63, 49, 37, 0.035),
        inset 0 1px 0 rgba(255,255,255,0.85);

    transition:
        transform 400ms cubic-bezier(.22,1,.36,1),
        box-shadow 400ms ease;
}

/* Soft, broad light reflection near card tops */

body .ongoing-improvement-page
.oi-pricing__plan::before {
    content: "";

    position: absolute;
    z-index: 0;

    top: 0;
    left: 0;
    right: 0;

    height: 170px;

    border-radius: 21px 21px 0 0;

    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.32) 0%,
        rgba(255,255,255,0.10) 45%,
        transparent 100%
    );

    pointer-events: none;
}

/* MAINTAIN — Sage glass */

body .ongoing-improvement-page
.oi-pricing__plan--maintain {
    border-color: rgba(104,126,94,0.34);

    box-shadow:
        0 12px 25px rgba(68,88,61,0.055),
        0 27px 54px rgba(68,88,61,0.095),
        0 46px 80px rgba(68,88,61,0.045),
        inset 0 1px 0 rgba(255,255,255,0.91);
}

/* IMPROVE — Warm terracotta glass */

body .ongoing-improvement-page
.oi-pricing__plan--improve {
    border-color: rgba(200,110,76,0.39);

    box-shadow:
        0 12px 25px rgba(157,85,58,0.06),
        0 29px 56px rgba(157,85,58,0.105),
        0 49px 82px rgba(157,85,58,0.05),
        inset 0 1px 0 rgba(255,255,255,0.92);
}

/* EVOLVE — Dark polished olive glass */

body .ongoing-improvement-page
.oi-pricing__plan--evolve {
    border-color: rgba(221,210,183,0.31);

    box-shadow:
        0 16px 31px rgba(22,33,26,0.15),
        0 34px 61px rgba(22,33,26,0.21),
        0 55px 85px rgba(22,33,26,0.10),
        inset 0 1px 0 rgba(255,255,255,0.10);
}

body .ongoing-improvement-page
.oi-pricing__plan--evolve::before {
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.075) 0%,
        rgba(255,255,255,0.025) 48%,
        transparent 100%
    );
}


/* =========================================================
   02 — LARGER DIMENSIONAL ICONS
========================================================= */

body .ongoing-improvement-page
.oi-pricing__plan-icon {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 84px;
    height: 84px;

    flex: 0 0 auto;

    margin: 0 auto 22px;

    border-radius: 50%;

    box-shadow:
        0 8px 17px rgba(58,45,34,0.07),
        0 18px 32px rgba(58,45,34,0.06),
        inset 0 2px 1px rgba(255,255,255,0.91);

    transition:
        transform 400ms cubic-bezier(.22,1,.36,1),
        box-shadow 400ms ease;
}

/* Inner luminous ring */

body .ongoing-improvement-page
.oi-pricing__plan-icon::after {
    content: "";

    position: absolute;
    inset: 6px;

    border: 1px solid rgba(255,255,255,0.85);
    border-radius: 50%;

    pointer-events: none;
}

/* Make SVG drawings larger and heavier */

body .ongoing-improvement-page
.oi-pricing__plan-icon svg {
    position: relative;
    z-index: 2;

    display: block;

    width: 41px;
    height: 41px;

    stroke-width: 2.3;
    stroke-linecap: round;
    stroke-linejoin: round;

    fill: none;

    transition: transform 350ms ease;
}


/* =========================================================
   03 — MAINTAIN ICON
   Deep sage olive shield
========================================================= */

body .ongoing-improvement-page
.oi-pricing__plan-icon--maintain {
    background: linear-gradient(
        145deg,
        #F5F8F1 0%,
        #E4EADB 52%,
        #D7E1CE 100%
    );

    border: 1px solid rgba(99,125,90,0.30);
}

body .ongoing-improvement-page
.oi-pricing__plan-icon--maintain svg {
    stroke: #435E3D !important;
}


/* =========================================================
   04 — IMPROVE ICON
   More visible terracotta growth
========================================================= */

body .ongoing-improvement-page
.oi-pricing__plan-icon--improve {
    background: linear-gradient(
        145deg,
        #FFF2EA 0%,
        #F7DDCC 52%,
        #EDC7B2 100%
    );

    border: 1px solid rgba(198,103,67,0.31);

    box-shadow:
        0 8px 17px rgba(150,77,47,0.075),
        0 18px 32px rgba(150,77,47,0.07),
        inset 0 2px 1px rgba(255,255,255,0.85);
}

body .ongoing-improvement-page
.oi-pricing__plan-icon--improve svg {
    stroke: #BD5D38 !important;
}


/* =========================================================
   05 — EVOLVE ICON
   Luminous champagne connected systems
========================================================= */

body .ongoing-improvement-page
.oi-pricing__plan--evolve
.oi-pricing__plan-icon--evolve {
    background: linear-gradient(
        145deg,
        #536255 0%,
        #435246 52%,
        #36463B 100%
    );

    border: 1px solid rgba(237,221,185,0.45);

    box-shadow:
        0 9px 20px rgba(0,0,0,0.14),
        0 19px 34px rgba(0,0,0,0.10),
        0 0 19px rgba(224,203,160,0.08),
        inset 0 2px 1px rgba(255,255,255,0.13);
}

body .ongoing-improvement-page
.oi-pricing__plan--evolve
.oi-pricing__plan-icon--evolve svg {
    stroke: #F3DDB3 !important;
}

body .ongoing-improvement-page
.oi-pricing__plan--evolve
.oi-pricing__plan-icon--evolve::after {
    border-color: rgba(242,224,188,0.28);
}


/* =========================================================
   06 — CENTER PACKAGE CONTENT
========================================================= */

body .ongoing-improvement-page
.oi-pricing__plan-top {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
    text-align: center;
}

body .ongoing-improvement-page
.oi-pricing__plan-name,
body .ongoing-improvement-page
.oi-pricing__plan-description,
body .ongoing-improvement-page
.oi-pricing__capacity,
body .ongoing-improvement-page
.oi-pricing__price,
body .ongoing-improvement-page
.oi-pricing__features-intro,
body .ongoing-improvement-page
.oi-pricing__best-for {
    text-align: center !important;
}


/* =========================================================
   07 — CENTER PACKAGE INCLUSIONS
   All devices
========================================================= */

body .ongoing-improvement-page
.oi-pricing__features {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 11px;

    width: 100%;
    margin: 0;
    padding: 0;

    list-style: none;
}

body .ongoing-improvement-page
.oi-pricing__features li {
    display: block;
    position: relative;

    width: fit-content;
    max-width: 100%;

    margin: 0 !important;
    padding: 0 10px;

    font-size: 12px;
    line-height: 1.7;

    text-align: center !important;
    text-wrap: pretty;
    overflow-wrap: break-word;

    list-style: none;
}

/* Turn tick marks into centered inline symbols */

body .ongoing-improvement-page
.oi-pricing__features li::before {
    content: "✓" !important;

    position: static !important;

    display: inline-block;

    width: auto;
    height: auto;

    margin-right: 9px;

    border: 0 !important;

    transform: none !important;

    background: none !important;

    color: var(--plan-check);

    font-family: "Inter", Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}


/* =========================================================
   08 — REFINED HOVER EFFECTS
========================================================= */

@media (hover: hover) and (pointer: fine) {

    body .ongoing-improvement-page
    .oi-pricing__plan:hover {
        transform: translateY(-5px);
    }

    body .ongoing-improvement-page
    .oi-pricing__plan--maintain:hover {
        box-shadow:
            0 16px 31px rgba(68,88,61,0.07),
            0 34px 63px rgba(68,88,61,0.12),
            0 55px 92px rgba(68,88,61,0.055);
    }

    body .ongoing-improvement-page
    .oi-pricing__plan--improve:hover {
        box-shadow:
            0 17px 34px rgba(157,85,58,0.08),
            0 36px 67px rgba(157,85,58,0.13),
            0 56px 95px rgba(157,85,58,0.06);
    }

    body .ongoing-improvement-page
    .oi-pricing__plan--evolve:hover {
        box-shadow:
            0 18px 36px rgba(22,33,26,0.18),
            0 40px 72px rgba(22,33,26,0.24),
            0 62px 100px rgba(22,33,26,0.12);
    }

    body .ongoing-improvement-page
    .oi-pricing__plan:hover .oi-pricing__plan-icon {
        transform: translateY(-4px) scale(1.035);
    }

    body .ongoing-improvement-page
    .oi-pricing__plan:hover .oi-pricing__plan-icon svg {
        transform: scale(1.055);
    }
}


/* =========================================================
   09 — MOBILE HORIZONTAL PRICING CAROUSEL
   599px AND BELOW
========================================================= */

@media (max-width: 599px) {

    /* Keep the section intro normal */

    body .ongoing-improvement-page
    .oi-pricing__header {
        display: grid;
        grid-template-columns: minmax(0, 1fr);

        gap: 28px;

        margin-bottom: 34px;
    }

    /* Horizontal swiping track */

    body .ongoing-improvement-page
    .oi-pricing__plans {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch;

        grid-template-columns: none !important;

        gap: 16px !important;

        width: 100%;
        min-width: 0;

        margin: 0;

        padding: 24px 3px 30px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        scroll-snap-type: x mandatory;
        scroll-padding-inline: 3px;

        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;

        scrollbar-width: thin;
        scrollbar-color:
            #BE947E rgba(201,103,67,0.10);
    }

    /* One card + preview of next */

    body .ongoing-improvement-page
    .oi-pricing__plan {
        flex: 0 0 87% !important;

        width: 87% !important;
        min-width: 87% !important;
        max-width: 87% !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;

        align-self: stretch;

        scroll-snap-align: start;
        scroll-snap-stop: always;

        border-radius: 22px;
    }

    /* Keep everything inside each card */

    body .ongoing-improvement-page
    .oi-pricing__plan-inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        flex: 1;

        width: 100%;
        min-width: 0;
        min-height: 0;

        padding: 29px 20px 24px;
    }

    body .ongoing-improvement-page
    .oi-pricing__plan--improve .oi-pricing__plan-inner {
        padding-top: 25px;
    }

    /* Centered icons */

    body .ongoing-improvement-page
    .oi-pricing__plan-icon {
        width: 78px;
        height: 78px;

        margin: 0 auto 21px;
    }

    body .ongoing-improvement-page
    .oi-pricing__plan-icon svg {
        width: 38px;
        height: 38px;
    }

    /* Centered package headings */

    body .ongoing-improvement-page
    .oi-pricing__plan-name {
        font-size: 23px;
        text-align: center !important;
    }

    body .ongoing-improvement-page
    .oi-pricing__plan-description {
        max-width: 280px;
        min-height: 0;

        margin-left: auto;
        margin-right: auto;

        font-size: 13px;
        line-height: 1.7;

        text-align: center !important;
    }

    body .ongoing-improvement-page
    .oi-pricing__capacity {
        font-size: 10px;
        text-align: center !important;
    }

    /* Centered price */

    body .ongoing-improvement-page
    .oi-pricing__price {
        justify-content: center;
        text-align: center !important;

        margin-bottom: 25px;
    }

    body .ongoing-improvement-page
    .oi-pricing__amount {
        font-size: clamp(33px, 9vw, 41px);
    }

    /* Centered inclusions */

    body .ongoing-improvement-page
    .oi-pricing__features {
        align-items: center;
        gap: 12px;
    }

    body .ongoing-improvement-page
    .oi-pricing__features li {
        width: 100%;
        max-width: 285px;

        padding: 0 3px;

        font-size: 12px;
        line-height: 1.7;

        text-align: center !important;
    }

    body .ongoing-improvement-page
    .oi-pricing__features-intro {
        font-size: 12px;
        text-align: center !important;
    }

    /* Centered fine print */

    body .ongoing-improvement-page
    .oi-pricing__plan-bottom {
        margin-top: auto;
        padding-top: 30px;
    }

    body .ongoing-improvement-page
    .oi-pricing__best-for {
        min-height: 0;

        padding-top: 19px;
        margin-bottom: 20px;

        font-size: 12px;
        line-height: 1.7;

        text-align: center !important;
    }

    /* Buttons remain inside their cards */

    body .ongoing-improvement-page
    .oi-pricing__plan-button {
        width: 100%;
        max-width: 100%;

        min-height: 50px;

        margin: 0 !important;

        font-size: 12px;
    }

    /* Refined horizontal scrollbar */

    body .ongoing-improvement-page
    .oi-pricing__plans::-webkit-scrollbar {
        height: 5px;
    }

    body .ongoing-improvement-page
    .oi-pricing__plans::-webkit-scrollbar-track {
        background: rgba(201,103,67,0.10);
        border-radius: 999px;
    }

    body .ongoing-improvement-page
    .oi-pricing__plans::-webkit-scrollbar-thumb {
        background: #BE947E;
        border-radius: 999px;
    }
}


/* =========================================================
   10 — SMALL MOBILE
   374px AND BELOW
========================================================= */

@media (max-width: 374px) {

    body .ongoing-improvement-page
    .oi-pricing__plans {
        gap: 13px !important;
    }

    body .ongoing-improvement-page
    .oi-pricing__plan {
        flex-basis: 91% !important;

        width: 91% !important;
        min-width: 91% !important;
        max-width: 91% !important;
    }

    body .ongoing-improvement-page
    .oi-pricing__plan-inner {
        padding: 25px 16px 21px;
    }

    body .ongoing-improvement-page
    .oi-pricing__plan--improve .oi-pricing__plan-inner {
        padding-top: 23px;
    }

    body .ongoing-improvement-page
    .oi-pricing__features li {
        font-size: 11.5px;
    }

    body .ongoing-improvement-page
    .oi-pricing__amount {
        font-size: 33px;
    }
}


/* =========================================================
   11 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body .ongoing-improvement-page
    .oi-pricing__plan,
    body .ongoing-improvement-page
    .oi-pricing__plan-icon,
    body .ongoing-improvement-page
    .oi-pricing__plan-icon svg {
        animation: none !important;
        transition: none !important;
    }

    body .ongoing-improvement-page
    .oi-pricing__plans {
        scroll-behavior: auto !important;
    }
}

/* =========================================================
   ONGOING IMPROVEMENT — SECTION 04 REFINEMENTS
   Put at very bottom of main.css
========================================================= */

/* -----------------------------------------
   PLAN CARD POSITIONING
----------------------------------------- */

body .ongoing-improvement-page .oi-pricing__plan {
    position: relative;
    overflow: visible;
}

/* -----------------------------------------
   BADGES — MAKE IMPROVE MATCH EVOLVE
----------------------------------------- */

body .ongoing-improvement-page .oi-pricing__plan-badge {
    position: absolute;
    top: -17px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 8;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 34px;
    padding: 8px 22px;
    border-radius: 999px;

    font-size: 12px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;

    box-shadow:
        0 8px 18px rgba(49, 39, 31, 0.10),
        inset 0 1px 0 rgba(255,255,255,0.18);
}

/* Improve badge */
body .ongoing-improvement-page .oi-pricing__plan-badge--popular {
    background: #CD6E46;
    color: #FFF7F1;
    border: 1px solid rgba(255,255,255,0.18);
}

/* Evolve badge — make it easier to see */
body .ongoing-improvement-page .oi-pricing__plan-badge--limited {
    background: #556A57;
    color: #FFF9F2;
    border: 1px solid rgba(245, 233, 214, 0.35);
    box-shadow:
        0 10px 22px rgba(31, 43, 35, 0.22),
        0 0 0 1px rgba(255,255,255,0.04),
        inset 0 1px 0 rgba(255,255,255,0.10);
}

/* ensure inner content starts evenly */
body .ongoing-improvement-page .oi-pricing__plan--maintain .oi-pricing__plan-inner,
body .ongoing-improvement-page .oi-pricing__plan--improve .oi-pricing__plan-inner,
body .ongoing-improvement-page .oi-pricing__plan--evolve .oi-pricing__plan-inner {
    padding-top: 64px;
}

/* -----------------------------------------
   GLASS / LUMINOUS REFINEMENT
----------------------------------------- */

body .ongoing-improvement-page .oi-pricing__plan::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.20) 0%,
            rgba(255,255,255,0.08) 18%,
            rgba(255,255,255,0.02) 36%,
            rgba(255,255,255,0.00) 100%
        );
}

body .ongoing-improvement-page .oi-pricing__plan > * {
    position: relative;
    z-index: 2;
}

/* Maintain */
body .ongoing-improvement-page .oi-pricing__plan--maintain {
    box-shadow:
        0 16px 35px rgba(70, 87, 63, 0.08),
        0 38px 64px rgba(70, 87, 63, 0.07),
        inset 0 1px 0 rgba(255,255,255,0.72);
}

/* Improve */
body .ongoing-improvement-page .oi-pricing__plan--improve {
    box-shadow:
        0 16px 35px rgba(166, 92, 57, 0.08),
        0 38px 64px rgba(166, 92, 57, 0.07),
        inset 0 1px 0 rgba(255,255,255,0.76);
}

/* Evolve */
body .ongoing-improvement-page .oi-pricing__plan--evolve {
    box-shadow:
        0 18px 38px rgba(20, 27, 23, 0.18),
        0 40px 76px rgba(20, 27, 23, 0.16),
        0 0 28px rgba(198, 181, 139, 0.05),
        inset 0 1px 0 rgba(255,255,255,0.08);
}

/* -----------------------------------------
   ICONS
----------------------------------------- */

body .ongoing-improvement-page .oi-pricing__plan-icon {
    width: 78px;
    height: 78px;
    margin: 0 auto 22px;
    border-radius: 50%;

    box-shadow:
        0 10px 20px rgba(53, 43, 33, 0.08),
        inset 0 1px 0 rgba(255,255,255,0.80);
}

body .ongoing-improvement-page .oi-pricing__plan-icon svg {
    width: 38px;
    height: 38px;
    stroke-width: 2.3;
}

/* -----------------------------------------
   CENTER THE PACKAGE CONTENT
----------------------------------------- */

body .ongoing-improvement-page .oi-pricing__plan-top,
body .ongoing-improvement-page .oi-pricing__plan-bottom {
    text-align: center;
}

body .ongoing-improvement-page .oi-pricing__plan-name,
body .ongoing-improvement-page .oi-pricing__plan-description,
body .ongoing-improvement-page .oi-pricing__capacity,
body .ongoing-improvement-page .oi-pricing__features-intro,
body .ongoing-improvement-page .oi-pricing__best-for {
    text-align: center !important;
}

/* price */
body .ongoing-improvement-page .oi-pricing__price {
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* -----------------------------------------
   FIX INCLUDED LISTS
   centered overall, but ticks align properly
----------------------------------------- */

body .ongoing-improvement-page .oi-pricing__features {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

body .ongoing-improvement-page .oi-pricing__features li {
    display: inline-grid;
    grid-template-columns: 18px auto;
    align-items: start;
    column-gap: 10px;

    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;

    text-align: left;
    line-height: 1.65;
    list-style: none;
}

body .ongoing-improvement-page .oi-pricing__features li::before {
    content: "✓" !important;
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block;
    width: 18px;
    min-width: 18px;
    height: auto;
    background: none !important;
    border: 0 !important;
    text-align: center;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 700;
    color: var(--plan-check, currentColor);
}

/* -----------------------------------------
   BOTTOM FINE PRINT + CLOSING
----------------------------------------- */

body .ongoing-improvement-page .oi-pricing__footnotes,
body .ongoing-improvement-page .oi-pricing__footnotes p {
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
}

body .ongoing-improvement-page .oi-pricing__footnotes {
    max-width: 980px;
    margin-top: 34px;
}

body .ongoing-improvement-page .oi-pricing__closing {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center !important;
    margin-top: 30px;
}

body .ongoing-improvement-page .oi-pricing__closing-mark {
    display: block;
    margin: 0 auto;
    font-size: 24px;
    line-height: 1;
    color: #CD6E46;
}

body .ongoing-improvement-page .oi-pricing__closing-text {
    display: block;
    text-align: center !important;
}

/* -----------------------------------------
   MOBILE — PRICE SMALLER + HORIZONTAL SCROLL
----------------------------------------- */

@media (max-width: 767px) {

    body .ongoing-improvement-page .oi-pricing__plans {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 16px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 14px 4px 22px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    body .ongoing-improvement-page .oi-pricing__plan {
        flex: 0 0 88%;
        width: 88%;
        min-width: 88%;
        max-width: 88%;
        scroll-snap-align: start;
    }

    body .ongoing-improvement-page .oi-pricing__plan-inner {
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 62px;
    }

    body .ongoing-improvement-page .oi-pricing__plan-name,
    body .ongoing-improvement-page .oi-pricing__plan-description,
    body .ongoing-improvement-page .oi-pricing__capacity,
    body .ongoing-improvement-page .oi-pricing__features-intro,
    body .ongoing-improvement-page .oi-pricing__best-for {
        text-align: center !important;
    }

    body .ongoing-improvement-page .oi-pricing__price {
        justify-content: center;
        gap: 6px;
        margin-bottom: 20px;
    }

    body .ongoing-improvement-page .oi-pricing__amount {
        font-size: clamp(28px, 8vw, 42px);
        line-height: 0.95;
    }

    body .ongoing-improvement-page .oi-pricing__price-prefix,
    body .ongoing-improvement-page .oi-pricing__price-suffix {
        font-size: 16px;
    }

    body .ongoing-improvement-page .oi-pricing__features li {
        margin-left: auto;
        margin-right: auto;
    }

    body .ongoing-improvement-page .oi-pricing__features {
        align-items: center;
    }
}

/* extra small mobile */
@media (max-width: 479px) {
    body .ongoing-improvement-page .oi-pricing__plan {
        flex: 0 0 91%;
        width: 91%;
        min-width: 91%;
        max-width: 91%;
    }

    body .ongoing-improvement-page .oi-pricing__amount {
        font-size: clamp(26px, 7.6vw, 36px);
    }

    body .ongoing-improvement-page .oi-pricing__price-prefix,
    body .ongoing-improvement-page .oi-pricing__price-suffix {
        font-size: 15px;
    }
}


/* =========================================================
   FRAYORA — ONGOING IMPROVEMENT
   SECTION 04 — ALIGNED PACKAGE INCLUSIONS

   Center the complete list within each card.
   Keep checkmarks and text left-aligned.
   Fix zigzag positioning.
   Desktop / Tablet / Mobile
========================================================= */

/* CENTER THE LIST AS ONE BLOCK */

body .ongoing-improvement-page .oi-pricing__features {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;

    justify-items: stretch !important;
    align-items: start !important;

    gap: 11px !important;

    width: max-content !important;
    max-width: 100% !important;

    margin: 0 auto !important;
    padding: 0 !important;

    list-style: none !important;
}

/* ALIGN EVERY ROW TO THE SAME STARTING POINT */

body .ongoing-improvement-page .oi-pricing__features li {
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr) !important;

    align-items: start !important;
    justify-content: start !important;

    column-gap: 10px !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: left !important;

    font-size: 12px;
    line-height: 1.65;

    list-style: none !important;
    white-space: normal !important;
}

/* KEEP CHECKMARKS IN A FIXED COLUMN */

body .ongoing-improvement-page .oi-pricing__features li::before {
    content: "✓" !important;

    position: static !important;
    display: block !important;

    width: 18px !important;
    min-width: 18px !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    border: none !important;
    background: none !important;

    transform: none !important;

    color: var(--plan-check, #40513E) !important;

    font-family: "Inter", Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    text-align: center !important;
}

/* MOBILE — KEEP THE SAME ALIGNMENT */

@media (max-width: 599px) {

    body .ongoing-improvement-page .oi-pricing__features {
        width: max-content !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    body .ongoing-improvement-page .oi-pricing__features li {
        font-size: 12px;
        line-height: 1.7;
    }
}


/* =========================================================
   ONGOING IMPROVEMENT — FIX EVOLVE BADGE CONTRAST
========================================================= */

body .ongoing-improvement-page .oi-pricing__plan-badge--limited {
    background: #F4E7D7 !important;
    color: #B96A46 !important; /* terracotta text */
    border: 1px solid rgba(185, 106, 70, 0.22) !important;

    box-shadow:
        0 10px 24px rgba(87, 59, 40, 0.14),
        inset 0 1px 0 rgba(255,255,255,0.7) !important;
}


/* =========================================================
   FRAYORA — ONGOING IMPROVEMENT
   SECTION 04 — CARD ALIGNMENT & TABLET FIX

   Align all three package icons
   Keep pricing headers level
   Narrower tablet carousel cards
   Protect floating badges from clipping
   Preserve colors, copy and glass styling
========================================================= */


/* =========================================================
   01 — DESKTOP ICON ALIGNMENT
   1101px+
========================================================= */

@media (min-width: 1101px) {

    /*
       Maintain and Evolve have no full-width ribbon.
       Improve has an absolutely positioned badge.

       Give every card the same top padding so
       all three icon centers align.
    */

    body .ongoing-improvement-page
    .oi-pricing__plan--maintain .oi-pricing__plan-inner,

    body .ongoing-improvement-page
    .oi-pricing__plan--improve .oi-pricing__plan-inner,

    body .ongoing-improvement-page
    .oi-pricing__plan--evolve .oi-pricing__plan-inner {
        padding-top: 94px !important;
    }

    /* All circular icons remain identical in size */

    body .ongoing-improvement-page .oi-pricing__plan-icon {
        width: 84px !important;
        height: 84px !important;
        margin-top: 0 !important;
        margin-bottom: 22px !important;
    }
}


/* =========================================================
   02 — TABLET PRICING CAROUSEL
   600px–1100px
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    /*
       Move scrolling to the horizontal track.
       Extra vertical room protects floating badges
       and raised hover cards.
    */

    body .ongoing-improvement-page .oi-pricing__plans {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;

        gap: 20px !important;

        width: 100%;
        min-width: 0;

        margin: 0 !important;

        padding: 42px 5px 40px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        scroll-snap-type: x mandatory;
        scroll-padding-inline: 5px;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    /* Narrower, taller-looking tablet cards */

    body .ongoing-improvement-page .oi-pricing__plan {
        flex: 0 0 290px !important;

        width: 290px !important;
        min-width: 290px !important;
        max-width: 290px !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;

        align-self: stretch;
        scroll-snap-align: start;
    }

    body .ongoing-improvement-page
    .oi-pricing__plan-inner {
        padding:
            78px 21px 25px !important;
    }

    /* Uniform icon positioning */

    body .ongoing-improvement-page
    .oi-pricing__plan-icon {
        width: 76px !important;
        height: 76px !important;

        margin-top: 0 !important;
        margin-bottom: 20px !important;
    }

    body .ongoing-improvement-page
    .oi-pricing__plan-icon svg {
        width: 37px !important;
        height: 37px !important;
    }

    /* Slightly smaller text to fit narrower cards */

    body .ongoing-improvement-page
    .oi-pricing__plan-name {
        font-size: 21px;
    }

    body .ongoing-improvement-page
    .oi-pricing__plan-description {
        font-size: 12px;
        min-height: 0;
    }

    body .ongoing-improvement-page
    .oi-pricing__amount {
        font-size: 34px !important;
    }

    body .ongoing-improvement-page
    .oi-pricing__features li {
        font-size: 11px;
        line-height: 1.65;
    }

    /* Badges remain outside card top */

    body .ongoing-improvement-page
    .oi-pricing__plan-badge--popular,

    body .ongoing-improvement-page
    .oi-pricing__availability {
        top: -16px !important;

        z-index: 10 !important;

        max-width: calc(100% - 28px) !important;

        padding: 9px 17px !important;

        font-size: 10px !important;
        white-space: nowrap;
    }

    /* Gentle hover elevation without clipping */

    @media (hover: hover) and (pointer: fine) {

        body .ongoing-improvement-page
        .oi-pricing__plan:hover {
            transform: translateY(-4px) !important;
        }
    }
}


/* =========================================================
   03 — SMALL TABLET
   600px–749px
========================================================= */

@media (min-width: 600px) and (max-width: 749px) {

    body .ongoing-improvement-page
    .oi-pricing__plan {
        flex-basis: 270px !important;

        width: 270px !important;
        min-width: 270px !important;
        max-width: 270px !important;
    }

    body .ongoing-improvement-page
    .oi-pricing__plan-inner {
        padding: 75px 18px 23px !important;
    }

    body .ongoing-improvement-page
    .oi-pricing__amount {
        font-size: 32px !important;
    }

    body .ongoing-improvement-page
    .oi-pricing__features li {
        font-size: 10.5px;
    }
}


/* =========================================================
   04 — BADGE VISIBILITY
   ALL SCREEN SIZES
========================================================= */

body .ongoing-improvement-page
.oi-pricing__plan-badge--popular,

body .ongoing-improvement-page
.oi-pricing__availability {
    position: absolute !important;

    left: 50% !important;
    transform: translateX(-50%) !important;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    width: max-content !important;
    max-width: calc(100% - 30px);

    border-radius: 999px !important;
    line-height: 1.3 !important;
    text-align: center;
}

/* Maintain the refined terracotta badge */

body .ongoing-improvement-page
.oi-pricing__plan-badge--popular {
    background: #CD6E46 !important;
    color: #FFFFFF !important;
}

/* Stronger contrast for Evolve */

body .ongoing-improvement-page
.oi-pricing__availability {
    background: #F0E4D4 !important;
    color: #303B32 !important;

    border: 1px solid rgba(243,231,210,0.75) !important;

    box-shadow:
        0 9px 22px rgba(15,25,18,0.15),
        inset 0 1px 0 rgba(255,255,255,0.70) !important;
}


/* =========================================================
   05 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body .ongoing-improvement-page
    .oi-pricing__plan {
        transition: none !important;
    }

    body .ongoing-improvement-page
    .oi-pricing__plan:hover {
        transform: none !important;
    }

    body .ongoing-improvement-page
    .oi-pricing__plans {
        scroll-behavior: auto !important;
    }
}



/* =========================================================
   FRAYORA — ONGOING IMPROVEMENT
   SECTION 04 — MOBILE BOTTOM TEXT FIX

   Center both disclaimer paragraphs
   Center Frayora star
   Refine closing statement to 3 lines
========================================================= */

@media (max-width: 599px) {

    /* DISCLAIMER CONTAINER */

    body .ongoing-improvement-page
    .oi-pricing__disclaimer {
        width: 100% !important;
        max-width: 440px !important;

        margin: 42px auto 0 !important;
        padding: 0 5px !important;

        text-align: center !important;
    }

    /* BOTH DISCLAIMER PARAGRAPHS */

    body .ongoing-improvement-page
    .oi-pricing__disclaimer p {
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;

        font-size: 12px;
        line-height: 1.8;

        text-align: center !important;
        text-wrap: pretty;
    }

    body .ongoing-improvement-page
    .oi-pricing__disclaimer p + p {
        margin-top: 20px !important;
    }

    /* CLOSING STATEMENT */

    body .ongoing-improvement-page
    .oi-pricing__closing {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 17px !important;

        width: 100% !important;
        margin: 43px auto 0 !important;

        text-align: center !important;
    }

    /* FRAYORA STAR ABOVE THE TEXT */

    body .ongoing-improvement-page
    .oi-pricing__closing-star {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 24px;
        height: 24px;

        margin: 0 auto !important;
    }

    body .ongoing-improvement-page
    .oi-pricing__closing-star svg {
        width: 100%;
        height: 100%;
        fill: #C96743;
    }

    /* BOLD CLOSING TEXT */

    body .ongoing-improvement-page
    .oi-pricing__closing-text {
        display: block !important;

        width: 100% !important;
        max-width: 315px !important;

        margin: 0 auto !important;

        font-family: "Manrope", "Inter", sans-serif !important;
        font-size: 17px !important;
        font-weight: 650 !important;
        line-height: 1.65 !important;
        letter-spacing: -0.025em;

        color: #344333 !important;

        text-align: center !important;
        text-wrap: balance;
    }
}

/* SMALL MOBILE */

@media (max-width: 374px) {

    body .ongoing-improvement-page
    .oi-pricing__closing-text {
        max-width: 280px !important;
        font-size: 16px !important;
    }
}

body .ongoing-improvement-page .oi-pricing__plan-badge--limited {
    border: 2px solid #2F3A31 !important;
    box-shadow:
        0 8px 18px rgba(33, 42, 35, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}



/* =========================================================
   FRAYORA — ONGOING IMPROVEMENT
   SECTION 05 — THE FRAYORA SYSTEM

   Desktop / Tablet / Mobile
   Deep olive editorial section
   Refined before-and-after comparison
   Solid surfaces, subtle luminous edges
   Layered shadows and scroll animations
   Reduced-motion safe
========================================================= */

/* =========================================================
   01 — SECTION FOUNDATION
========================================================= */

body .ongoing-improvement-page .oi-system {
    position: relative;
    isolation: isolate;

    width: 100%;
    margin: 0;
    padding: 105px 0 110px;

    overflow: hidden;

    background: #303B32 !important;
    background-image: none !important;

    color: #F8F3EB;

    font-family: "Inter", Arial, sans-serif;
}

body .ongoing-improvement-page .oi-system,
body .ongoing-improvement-page .oi-system *,
body .ongoing-improvement-page .oi-system *::before,
body .ongoing-improvement-page .oi-system *::after {
    box-sizing: border-box;
}

body .ongoing-improvement-page .oi-system__inner {
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 80px;
}

/* =========================================================
   02 — INTRODUCTION
========================================================= */

body .ongoing-improvement-page .oi-system__intro {
    max-width: 1050px;
    margin: 0 auto 58px;
    text-align: center;
}

body .ongoing-improvement-page .oi-system__eyebrow {
    margin: 0 0 20px;

    font-family: "Inter", Arial, sans-serif !important;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.14em;

    color: #E0D3BF !important;
}

body .ongoing-improvement-page .oi-system__title {
    max-width: 1000px;
    margin: 0 auto;

    font-family: "Manrope", "Inter", sans-serif !important;
    font-size: clamp(40px, 3.8vw, 58px);
    font-weight: 600;
    line-height: 1.13;
    letter-spacing: -0.05em;

    color: #F8F3EB !important;
    text-wrap: balance;
}

body .ongoing-improvement-page .oi-system__body {
    max-width: 810px;
    margin: 25px auto 0;

    font-family: "Inter", Arial, sans-serif !important;
    font-size: 15px;
    line-height: 1.8;

    color: rgba(248,243,235,0.81) !important;
}

body .ongoing-improvement-page .oi-system__supporting {
    max-width: 800px;
    margin: 25px auto 0;

    font-family: "Manrope", "Inter", sans-serif !important;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.65;

    color: #E9D3B9 !important;
}

/* =========================================================
   03 — COMPARISON LAYOUT
========================================================= */

body .ongoing-improvement-page .oi-system__comparison {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        66px
        minmax(0, 1fr);

    align-items: stretch;

    gap: 20px;

    width: 100%;
    max-width: 1230px;
    margin: 0 auto;
}

/* =========================================================
   04 — COMPARISON PANELS
========================================================= */

body .ongoing-improvement-page .oi-system__panel {
    position: relative;
    isolation: isolate;

    min-width: 0;
    height: 100%;

    padding: 36px 37px 39px;

    border-radius: 24px;

    transition:
        transform 400ms cubic-bezier(.22,1,.36,1),
        box-shadow 400ms ease;
}

/* PATCHWORK — MUTED WARM OLIVE */

body .ongoing-improvement-page .oi-system__panel--patchwork {
    background: #41483E;
    border: 1px solid rgba(239,224,204,0.16);

    box-shadow:
        0 15px 30px rgba(12,20,14,0.10),
        0 28px 52px rgba(12,20,14,0.10),
        inset 0 1px 0 rgba(255,255,255,0.05);
}

/* FRAYORA — RICHER STRUCTURED GREEN */

body .ongoing-improvement-page .oi-system__panel--frayora {
    background: #455648;

    border: 1px solid rgba(232,218,187,0.39);

    box-shadow:
        0 18px 36px rgba(10,18,12,0.15),
        0 37px 65px rgba(10,18,12,0.17),
        0 0 25px rgba(216,194,153,0.035),
        inset 0 1px 0 rgba(255,255,255,0.09);
}

/* Delicate interior highlight */

body .ongoing-improvement-page .oi-system__panel::before {
    content: "";

    position: absolute;
    z-index: 0;

    inset: 1px;

    border-radius: 22px;

    border: 1px solid rgba(255,255,255,0.055);

    pointer-events: none;
}

body .ongoing-improvement-page .oi-system__panel > * {
    position: relative;
    z-index: 1;
}

/* =========================================================
   05 — PANEL HEADERS
========================================================= */

body .ongoing-improvement-page .oi-system__panel-heading {
    display: flex;
    align-items: center;

    gap: 16px;

    margin-bottom: 28px;
}

body .ongoing-improvement-page .oi-system__panel-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 64px;

    width: 64px;
    height: 64px;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,0.17);

    box-shadow:
        0 9px 20px rgba(0,0,0,0.09),
        inset 0 1px 0 rgba(255,255,255,0.09);
}

body .ongoing-improvement-page
.oi-system__panel--patchwork .oi-system__panel-icon {
    background: #555447;
    color: #E7D7C6;
}

body .ongoing-improvement-page
.oi-system__panel--frayora .oi-system__panel-icon {
    background: #5A6D59;
    color: #F0DFB8;

    box-shadow:
        0 9px 19px rgba(0,0,0,0.12),
        0 0 17px rgba(229,205,158,0.06),
        inset 0 1px 0 rgba(255,255,255,0.14);
}

body .ongoing-improvement-page .oi-system__panel-icon svg {
    display: block;
    width: 34px;
    height: 34px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body .ongoing-improvement-page .oi-system__panel-title {
    margin: 0;

    font-family: "Manrope", "Inter", sans-serif !important;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.04em;

    color: #FAF6EE !important;
}

/* =========================================================
   06 — COMPARISON LISTS
========================================================= */

body .ongoing-improvement-page .oi-system__list {
    display: flex;
    flex-direction: column;

    gap: 16px;

    margin: 0;
    padding: 0;

    list-style: none;
}

body .ongoing-improvement-page .oi-system__list li {
    position: relative;

    min-width: 0;

    margin: 0;
    padding: 0 0 0 31px;

    font-family: "Inter", Arial, sans-serif !important;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;

    color: rgba(250,246,239,0.87) !important;

    list-style: none;
}

/* PATCHWORK — MINIMAL DASH */

body .ongoing-improvement-page
.oi-system__panel--patchwork .oi-system__list li::before {
    content: "";

    position: absolute;
    top: 12px;
    left: 2px;

    width: 12px;
    height: 1.5px;

    background: #C9AC98;
}

/* FRAYORA — REFINED CHECKMARK */

body .ongoing-improvement-page
.oi-system__panel--frayora .oi-system__list li::before {
    content: "";

    position: absolute;
    top: 7px;
    left: 4px;

    width: 13px;
    height: 8px;

    border-left: 2px solid #E8D5B0;
    border-bottom: 2px solid #E8D5B0;

    transform: rotate(-45deg);
}

/* =========================================================
   07 — TRANSITION SYMBOL
========================================================= */

body .ongoing-improvement-page .oi-system__transition {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 13px;

    min-width: 0;
}

body .ongoing-improvement-page .oi-system__transition-line {
    display: block;

    width: 1px;
    height: 48px;

    background: rgba(230,209,179,0.29);
}

body .ongoing-improvement-page .oi-system__transition-symbol {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 55px;
    height: 55px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: #EFE6D6;

    border: 1px solid rgba(255,255,255,0.57);

    color: #42513D;

    box-shadow:
        0 9px 20px rgba(0,0,0,0.16),
        0 0 20px rgba(227,207,172,0.10),
        inset 0 1px 0 rgba(255,255,255,0.90);
}

body .ongoing-improvement-page .oi-system__transition-symbol svg {
    width: 24px;
    height: 24px;

    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* =========================================================
   08 — CLOSING
========================================================= */

body .ongoing-improvement-page .oi-system__footer {
    display: flex;
    flex-direction: column;
    align-items: center;

    max-width: 890px;
    margin: 57px auto 0;

    text-align: center;
}

body .ongoing-improvement-page .oi-system__star {
    display: block;

    width: 25px;
    height: 25px;

    margin-bottom: 18px;
}

body .ongoing-improvement-page .oi-system__star svg {
    width: 100%;
    height: 100%;

    fill: #E1B18C;
}

body .ongoing-improvement-page .oi-system__statement {
    margin: 0;

    font-family: "Manrope", "Inter", sans-serif !important;
    font-size: clamp(21px, 2vw, 29px);
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: -0.035em;

    color: #F8F3EB !important;
    text-wrap: balance;
}

body .ongoing-improvement-page .oi-system__explanation {
    max-width: 750px;
    margin: 16px auto 0;

    font-family: "Inter", Arial, sans-serif !important;
    font-size: 13px;
    line-height: 1.75;

    color: rgba(248,243,235,0.74) !important;
}

/* =========================================================
   09 — DESKTOP
========================================================= */

@media (min-width: 1101px) {

    body .ongoing-improvement-page .oi-system__comparison {
        max-width: 1200px;
    }
}

/* =========================================================
   10 — TABLET
   600px–1100px
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .ongoing-improvement-page .oi-system {
        padding: 90px 0 94px;
    }

    body .ongoing-improvement-page .oi-system__inner {
        padding: 0 50px;
    }

    body .ongoing-improvement-page .oi-system__intro {
        margin-bottom: 50px;
    }

    body .ongoing-improvement-page .oi-system__title {
        font-size: clamp(36px, 5vw, 51px);
    }

    body .ongoing-improvement-page .oi-system__body {
        font-size: 15px;
    }

    body .ongoing-improvement-page .oi-system__comparison {
        grid-template-columns:
            minmax(0, 1fr)
            50px
            minmax(0, 1fr);

        gap: 12px;
    }

    body .ongoing-improvement-page .oi-system__panel {
        padding: 29px 23px 32px;
    }

    body .ongoing-improvement-page .oi-system__panel-heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    body .ongoing-improvement-page .oi-system__panel-icon {
        flex-basis: 59px;
        width: 59px;
        height: 59px;
    }

    body .ongoing-improvement-page .oi-system__panel-title {
        font-size: 16px;
    }

    body .ongoing-improvement-page .oi-system__list li {
        font-size: 13px;
        padding-left: 25px;
    }

    body .ongoing-improvement-page .oi-system__transition-symbol {
        width: 43px;
        height: 43px;
    }

    body .ongoing-improvement-page .oi-system__transition-symbol svg {
        width: 20px;
        height: 20px;
    }
}

/* =========================================================
   11 — SMALL TABLET
   600px–749px
========================================================= */

@media (min-width: 600px) and (max-width: 749px) {

    body .ongoing-improvement-page .oi-system__inner {
        padding: 0 40px;
    }

    body .ongoing-improvement-page .oi-system__comparison {
        grid-template-columns: minmax(0,1fr);
        gap: 0;
    }

    body .ongoing-improvement-page .oi-system__transition {
        flex-direction: row;
        gap: 12px;
        padding: 16px 0;
    }

    body .ongoing-improvement-page .oi-system__transition-line {
        width: 65px;
        height: 1px;
    }

    body .ongoing-improvement-page .oi-system__transition-symbol {
        transform: rotate(90deg);
    }

    body .ongoing-improvement-page .oi-system__panel-heading {
        flex-direction: row;
        align-items: center;
    }

    body .ongoing-improvement-page .oi-system__list li {
        font-size: 14px;
    }
}

/* =========================================================
   12 — MOBILE
   599px AND BELOW
========================================================= */

@media (max-width: 599px) {

    body .ongoing-improvement-page .oi-system {
        padding: 77px 0 83px;
    }

    body .ongoing-improvement-page .oi-system__inner {
        padding: 0 28px 0 34px;
    }

    body .ongoing-improvement-page .oi-system__intro {
        margin-bottom: 40px;
    }

    body .ongoing-improvement-page .oi-system__eyebrow {
        margin-bottom: 18px;
        font-size: 11px;
    }

    body .ongoing-improvement-page .oi-system__title {
        font-size: clamp(32px, 8.1vw, 43px);
        line-height: 1.16;
    }

    body .ongoing-improvement-page .oi-system__body {
        margin-top: 22px;
        font-size: 14px;
        line-height: 1.8;
    }

    body .ongoing-improvement-page .oi-system__supporting {
        margin-top: 23px;
        font-size: 15px;
        line-height: 1.7;
    }

    body .ongoing-improvement-page .oi-system__comparison {
        grid-template-columns: minmax(0,1fr);
        gap: 0;
    }

    body .ongoing-improvement-page .oi-system__panel {
        padding: 27px 23px 30px;
        border-radius: 20px;
    }

    body .ongoing-improvement-page .oi-system__panel-heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        margin-bottom: 25px;
    }

    body .ongoing-improvement-page .oi-system__panel-icon {
        flex-basis: 58px;

        width: 58px;
        height: 58px;
    }

    body .ongoing-improvement-page .oi-system__panel-title {
        font-size: 17px;
    }

    body .ongoing-improvement-page .oi-system__list {
        gap: 15px;
    }

    body .ongoing-improvement-page .oi-system__list li {
        padding-left: 26px;
        font-size: 13px;
        line-height: 1.65;
    }

    /* Vertical before → after transition */

    body .ongoing-improvement-page .oi-system__transition {
        flex-direction: row;
        justify-content: center;
        gap: 12px;

        padding: 15px 0;
    }

    body .ongoing-improvement-page .oi-system__transition-line {
        width: 48px;
        height: 1px;
    }

    body .ongoing-improvement-page .oi-system__transition-symbol {
        width: 43px;
        height: 43px;
        transform: rotate(90deg);
    }

    body .ongoing-improvement-page .oi-system__transition-symbol svg {
        width: 19px;
        height: 19px;
    }

    body .ongoing-improvement-page .oi-system__footer {
        margin-top: 44px;
    }

    body .ongoing-improvement-page .oi-system__star {
        width: 23px;
        height: 23px;
        margin-bottom: 16px;
    }

    body .ongoing-improvement-page .oi-system__statement {
        max-width: 380px;
        font-size: 21px;
        line-height: 1.55;
    }

    body .ongoing-improvement-page .oi-system__explanation {
        margin-top: 17px;
        font-size: 12px;
    }
}

/* =========================================================
   13 — SMALL MOBILE
========================================================= */

@media (max-width: 374px) {

    body .ongoing-improvement-page .oi-system__inner {
        padding: 0 23px 0 29px;
    }

    body .ongoing-improvement-page .oi-system__title {
        font-size: 30px;
    }

    body .ongoing-improvement-page .oi-system__panel {
        padding: 24px 19px 27px;
    }

    body .ongoing-improvement-page .oi-system__list li {
        font-size: 12px;
    }
}

/* =========================================================
   14 — HOVER EFFECTS
========================================================= */

@media (hover: hover) and (pointer: fine) {

    body .ongoing-improvement-page .oi-system__panel:hover {
        transform: translateY(-4px);
    }

    body .ongoing-improvement-page
    .oi-system__panel--frayora:hover {
        box-shadow:
            0 22px 43px rgba(10,18,12,0.17),
            0 43px 73px rgba(10,18,12,0.19),
            0 0 30px rgba(216,194,153,0.055),
            inset 0 1px 0 rgba(255,255,255,0.10);
    }
}

/* =========================================================
   15 — SUBTLE SCROLL ANIMATIONS
========================================================= */

@keyframes oiSystemReveal {
    from {
        opacity: 0;
        translate: 0 22px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

@media (prefers-reduced-motion: no-preference) {

    @supports (animation-timeline: view()) {

        body .ongoing-improvement-page .oi-system__intro,
        body .ongoing-improvement-page .oi-system__panel,
        body .ongoing-improvement-page .oi-system__footer {
            animation: oiSystemReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 55%;
        }
    }
}

/* =========================================================
   16 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body .ongoing-improvement-page .oi-system__intro,
    body .ongoing-improvement-page .oi-system__panel,
    body .ongoing-improvement-page .oi-system__footer {
        animation: none !important;
        opacity: 1 !important;
        translate: none !important;
        transform: none !important;
    }

    body .ongoing-improvement-page .oi-system__panel {
        transition: none !important;
    }
}


/* =========================================================
   FRAYORA — ONGOING IMPROVEMENT
   SECTION 05 — COMPARISON RESPONSIVE FIX

   TABLET:
   - Narrower centered comparison panels
   - Centered panel headings and icons
   - Lists centered as complete blocks
   - All dash/checkmark markers aligned

   MOBILE:
   - Center icons
   - Center headings below icons
   - Preserve readable, aligned lists

   Desktop remains unchanged.
========================================================= */


/* =========================================================
   01 — TABLET
   600px–1100px
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    /* Center the complete comparison layout */

    body .ongoing-improvement-page
    .oi-system__comparison {
        width: 100%;
        max-width: 720px;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Two-column layout on larger tablets */

    @media (min-width: 750px) {

        body .ongoing-improvement-page
        .oi-system__comparison {
            grid-template-columns:
                minmax(0, 1fr)
                44px
                minmax(0, 1fr);

            gap: 12px;
        }
    }

    /* Reduce individual panel widths */

    body .ongoing-improvement-page
    .oi-system__panel {
        width: 100%;
        max-width: 520px;

        margin-left: auto;
        margin-right: auto;

        padding: 34px 27px 37px;
    }

    /* Center icon and title */

    body .ongoing-improvement-page
    .oi-system__panel-heading {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 17px;

        width: 100%;
        margin-bottom: 31px;

        text-align: center;
    }

    body .ongoing-improvement-page
    .oi-system__panel-icon {
        flex: 0 0 64px;

        width: 64px;
        height: 64px;

        margin: 0 auto;
    }

    body .ongoing-improvement-page
    .oi-system__panel-title {
        width: 100%;
        margin: 0;

        font-size: 18px;
        line-height: 1.4;

        text-align: center !important;
        text-wrap: balance;
    }

    /* Center the entire list, NOT individual rows */

    body .ongoing-improvement-page
    .oi-system__list {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;

        justify-items: stretch !important;

        gap: 16px;

        width: max-content;
        max-width: 100%;

        margin: 0 auto !important;
        padding: 0 !important;

        list-style: none !important;
    }

    /* Every item starts at exactly the same position */

    body .ongoing-improvement-page
    .oi-system__list li {
        position: relative;

        display: block;

        width: 100%;

        margin: 0 !important;
        padding: 0 0 0 29px !important;

        font-size: 13px;
        line-height: 1.7;

        text-align: left !important;
        overflow-wrap: break-word;
    }

    /* Dashes align vertically */

    body .ongoing-improvement-page
    .oi-system__panel--patchwork
    .oi-system__list li::before {
        left: 3px !important;
        top: 11px;
    }

    /* Checkmarks align vertically */

    body .ongoing-improvement-page
    .oi-system__panel--frayora
    .oi-system__list li::before {
        left: 4px !important;
        top: 8px;
    }
}


/* =========================================================
   02 — SMALL TABLET
   600px–749px

   Stacked, narrower panels.
========================================================= */

@media (min-width: 600px) and (max-width: 749px) {

    body .ongoing-improvement-page
    .oi-system__comparison {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;

        width: 100%;
        max-width: 500px;
        gap: 0;
    }

    body .ongoing-improvement-page
    .oi-system__panel {
        max-width: 500px;
        padding: 33px 32px 37px;
    }

    body .ongoing-improvement-page
    .oi-system__panel-title {
        font-size: 19px;
    }

    body .ongoing-improvement-page
    .oi-system__list li {
        font-size: 14px;
    }

    /* Preserve the downward transition */

    body .ongoing-improvement-page
    .oi-system__transition {
        justify-self: center;
        width: 100%;
        padding: 19px 0;
    }
}


/* =========================================================
   03 — MOBILE
   599px AND BELOW
========================================================= */

@media (max-width: 599px) {

    /* Center the icon and heading */

    body .ongoing-improvement-page
    .oi-system__panel-heading {
        display: flex !important;
        flex-direction: column !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 18px !important;

        width: 100%;
        margin-bottom: 29px !important;

        text-align: center !important;
    }

    /* Circular icon */

    body .ongoing-improvement-page
    .oi-system__panel-icon {
        display: flex;
        align-items: center;
        justify-content: center;

        flex: 0 0 64px;

        width: 64px;
        height: 64px;

        margin: 0 auto !important;
    }

    /* Heading directly underneath */

    body .ongoing-improvement-page
    .oi-system__panel-title {
        width: 100%;
        max-width: 300px;

        margin: 0 auto !important;

        font-size: 19px;
        line-height: 1.4;

        text-align: center !important;
        text-wrap: balance;
    }

    /* Keep list readable and markers aligned */

    body .ongoing-improvement-page
    .oi-system__list {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;

        gap: 16px;

        width: max-content;
        max-width: 100%;

        margin: 0 auto !important;
        padding: 0 !important;
    }

    body .ongoing-improvement-page
    .oi-system__list li {
        width: 100%;
        margin: 0 !important;
        padding-left: 28px !important;

        font-size: 13px;
        line-height: 1.7;

        text-align: left !important;
    }

    body .ongoing-improvement-page
    .oi-system__panel--patchwork
    .oi-system__list li::before {
        left: 2px !important;
    }

    body .ongoing-improvement-page
    .oi-system__panel--frayora
    .oi-system__list li::before {
        left: 4px !important;
    }
}


/* =========================================================
   04 — SMALL MOBILE
   374px AND BELOW
========================================================= */

@media (max-width: 374px) {

    body .ongoing-improvement-page
    .oi-system__panel-title {
        font-size: 18px;
    }

    body .ongoing-improvement-page
    .oi-system__panel-icon {
        width: 59px;
        height: 59px;

        flex-basis: 59px;
    }

    body .ongoing-improvement-page
    .oi-system__list li {
        font-size: 12px;
        padding-left: 25px !important;
    }
}



/* =========================================================
   FRAYORA — ONGOING IMPROVEMENT
   SECTION 05 — DESKTOP CONTENT ALIGNMENT

   Reduce excessive right-side empty space
   Center the content group inside each panel
   Keep headings and icons aligned
   Keep all list markers in one vertical column
   Tablet and mobile unchanged
========================================================= */

@media (min-width: 1101px) {

    /* Maintain balanced overall comparison width */

    body .ongoing-improvement-page
    .oi-system__comparison {
        width: 100%;
        max-width: 1120px;

        margin-left: auto;
        margin-right: auto;

        display: grid;
        grid-template-columns:
            minmax(0, 1fr)
            66px
            minmax(0, 1fr);

        column-gap: 22px;
        align-items: stretch;
    }

    /* Keep both panels equal and comfortably sized */

    body .ongoing-improvement-page
    .oi-system__panel {
        width: 100%;
        min-width: 0;
        min-height: 0;

        padding: 39px 30px 43px;
    }

    /* Center the heading group */

    body .ongoing-improvement-page
    .oi-system__panel-heading {
        display: flex;
        align-items: center;
        justify-content: flex-start;

        gap: 16px;

        width: fit-content;
        max-width: 100%;
        margin: 0 auto 30px;
    }

    body .ongoing-improvement-page
    .oi-system__panel-icon {
        flex: 0 0 64px;
        width: 64px;
        height: 64px;
    }

    body .ongoing-improvement-page
    .oi-system__panel-title {
        font-size: 17px;
        line-height: 1.4;
        white-space: normal;
    }

    /* Center each complete list as one block */

    body .ongoing-improvement-page
    .oi-system__list {
        display: grid;
        grid-template-columns: minmax(0, 1fr);

        width: max-content;
        max-width: 100%;

        margin: 0 auto;
        padding: 0;

        gap: 17px;
    }

    /* Keep all lines and markers aligned */

    body .ongoing-improvement-page
    .oi-system__list li {
        position: relative;

        width: 100%;
        margin: 0;
        padding: 0 0 0 30px;

        font-size: 13px;
        line-height: 1.7;

        text-align: left;
        white-space: normal;
    }

    /* Consistent patchwork dash positions */

    body .ongoing-improvement-page
    .oi-system__panel--patchwork
    .oi-system__list li::before {
        left: 3px;
        top: 11px;
    }

    /* Consistent Frayora checkmark positions */

    body .ongoing-improvement-page
    .oi-system__panel--frayora
    .oi-system__list li::before {
        left: 4px;
        top: 8px;
    }

    /* Keep the transition centered between panels */

    body .ongoing-improvement-page
    .oi-system__transition {
        width: 66px;
        min-width: 0;

        justify-self: center;
        align-self: center;
    }
}


/* =========================================================
   FRAYORA — ONGOING IMPROVEMENT
   SECTION 06 — OUR APPROACH

   Five-step editorial process timeline
   Bond-inspired refinement
   Solid warm ivory surface
   Olive / terracotta icon alternation
   Desktop horizontal journey
   Tablet responsive process grid
   Mobile vertical timeline
   Scroll entrance animation
   Reduced-motion safe
========================================================= */

/* =========================================================
   01 — SECTION FOUNDATION
========================================================= */

body .ongoing-improvement-page .oi-approach {
    position: relative;
    isolation: isolate;
    width: 100%;
    margin: 0;
    padding: 104px 0 100px;
    overflow: hidden;

    background: #F8F3EB !important;
    background-image: none !important;

    color: #23251F;
    font-family: "Inter", Arial, sans-serif !important;
}

body .ongoing-improvement-page .oi-approach,
body .ongoing-improvement-page .oi-approach *,
body .ongoing-improvement-page .oi-approach *::before,
body .ongoing-improvement-page .oi-approach *::after {
    box-sizing: border-box;
}

body .ongoing-improvement-page .oi-approach__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 80px;
}

/* =========================================================
   02 — INTRODUCTION
========================================================= */

body .ongoing-improvement-page .oi-approach__intro {
    max-width: 1010px;
    margin-bottom: 70px;
}

body .ongoing-improvement-page .oi-approach__eyebrow {
    margin: 0 0 19px;

    font-family: "Inter", Arial, sans-serif !important;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .13em;

    color: #B86448 !important;
}

body .ongoing-improvement-page .oi-approach__title {
    max-width: 900px;
    margin: 0;

    font-family: "Manrope", "Inter", Arial, sans-serif !important;
    font-size: clamp(40px, 3.5vw, 56px);
    font-weight: 600;
    line-height: 1.13;
    letter-spacing: -.052em;

    color: #22251F !important;
    text-wrap: balance;
}

body .ongoing-improvement-page .oi-approach__body {
    max-width: 790px;
    margin: 22px 0 0;

    font-family: "Inter", Arial, sans-serif !important;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.8;

    color: #686760 !important;
}

/* =========================================================
   03 — FIVE-STEP GRID
========================================================= */

body .ongoing-improvement-page .oi-approach__steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));

    gap: 24px;

    width: 100%;
    margin: 0;
    padding: 0;

    list-style: none;
}

body .ongoing-improvement-page .oi-approach__step {
    position: relative;
    min-width: 0;
    margin: 0;
    padding: 0;

    list-style: none;
}

body .ongoing-improvement-page .oi-approach__step::marker {
    content: "";
}

/* =========================================================
   04 — ICON MEDALLIONS
========================================================= */

body .ongoing-improvement-page .oi-approach__icon {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 72px;
    height: 72px;
    flex: 0 0 auto;

    margin: 0 0 23px;

    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.86);

    box-shadow:
        0 9px 21px rgba(68,51,38,.075),
        0 20px 34px rgba(68,51,38,.045),
        inset 0 2px 1px rgba(255,255,255,.8);

    transition:
        transform .4s cubic-bezier(.22,1,.36,1),
        box-shadow .4s ease;
}

body .ongoing-improvement-page .oi-approach__icon::after {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(255,255,255,.83);
    border-radius: 50%;
    pointer-events: none;
}

body .ongoing-improvement-page .oi-approach__icon svg {
    display: block;
    width: 33px;
    height: 33px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* OLIVE — 01, 03, 05 */

body .ongoing-improvement-page .oi-approach__icon--olive {
    background: linear-gradient(
        145deg,
        #F4F6EF 0%,
        #E5EBDD 50%,
        #D6E0CC 100%
    );

    color: #4E6547;
    border-color: rgba(117,139,105,.2);
}

/* TERRACOTTA — 02, 04 */

body .ongoing-improvement-page .oi-approach__icon--terracotta {
    background: linear-gradient(
        145deg,
        #FFF3EB 0%,
        #F5E0D1 50%,
        #ECCFBD 100%
    );

    color: #BE633F;
    border-color: rgba(196,109,74,.20);
}

/* =========================================================
   05 — CONNECTING LINE AND ARROWS
   Desktop timeline
========================================================= */

@media (min-width: 1101px) {

    body .ongoing-improvement-page
    .oi-approach__step:not(:last-child)::before {
        content: "";

        position: absolute;
        z-index: 0;

        top: 36px;
        left: 86px;
        right: -13px;

        height: 1px;

        background: linear-gradient(
            90deg,
            rgba(193,111,77,.50),
            rgba(193,111,77,.24)
        );

        pointer-events: none;
    }

    body .ongoing-improvement-page
    .oi-approach__step:not(:last-child)::after {
        content: "";

        position: absolute;
        z-index: 2;

        top: 31px;
        right: -13px;

        width: 10px;
        height: 10px;

        border-top: 1.5px solid #C47858;
        border-right: 1.5px solid #C47858;

        transform: rotate(45deg);
        pointer-events: none;
    }
}

/* =========================================================
   06 — STEP TYPOGRAPHY
========================================================= */

body .ongoing-improvement-page .oi-approach__step-content {
    min-width: 0;
    text-align: left;
}

body .ongoing-improvement-page .oi-approach__number {
    display: block;
    margin: 0 0 7px;

    font-family: "Inter", Arial, sans-serif !important;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;

    color: #C96743 !important;
}

body .ongoing-improvement-page .oi-approach__label {
    margin: 0 0 12px;

    font-family: "Inter", Arial, sans-serif !important;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .11em;

    color: #69735F !important;
}

body .ongoing-improvement-page .oi-approach__step-title {
    margin: 0 0 13px;

    font-family: "Manrope", "Inter", Arial, sans-serif !important;
    font-size: 19px;
    font-weight: 650;
    line-height: 1.35;
    letter-spacing: -.035em;

    color: #242720 !important;
}

body .ongoing-improvement-page .oi-approach__description {
    margin: 0;

    font-family: "Inter", Arial, sans-serif !important;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.75;

    color: #696861 !important;
}

/* =========================================================
   07 — CLOSING STATEMENT
========================================================= */

body .ongoing-improvement-page .oi-approach__closing {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    max-width: 850px;
    margin: 76px auto 0;

    text-align: center;
}

body .ongoing-improvement-page .oi-approach__star {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 23px;
    height: 23px;

    margin-bottom: 17px;
}

body .ongoing-improvement-page .oi-approach__star svg {
    display: block;
    width: 100%;
    height: 100%;

    fill: #C96743;
}

body .ongoing-improvement-page .oi-approach__closing-title {
    margin: 0;

    font-family: "Manrope", "Inter", Arial, sans-serif !important;
    font-size: clamp(22px, 2.1vw, 30px);
    font-weight: 650;
    line-height: 1.4;
    letter-spacing: -.035em;

    color: #303B32 !important;
}

body .ongoing-improvement-page .oi-approach__closing-sequence {
    margin: 16px 0 0;

    font-family: "Inter", Arial, sans-serif !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.8;

    color: #8C6F5E !important;
}

/* =========================================================
   08 — DESKTOP REFINEMENT
   1101px+
========================================================= */

@media (min-width: 1101px) {

    body .ongoing-improvement-page .oi-approach__steps {
        column-gap: 29px;
    }

    body .ongoing-improvement-page .oi-approach__step-title {
        font-size: clamp(16px, 1.3vw, 19px);
    }

    body .ongoing-improvement-page .oi-approach__description {
        font-size: 12px;
    }
}

/* =========================================================
   09 — TABLET
   600px–1100px
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .ongoing-improvement-page .oi-approach {
        padding: 87px 0 89px;
    }

    body .ongoing-improvement-page .oi-approach__inner {
        padding: 0 50px;
    }

    body .ongoing-improvement-page .oi-approach__intro {
        margin-bottom: 58px;
    }

    body .ongoing-improvement-page .oi-approach__title {
        font-size: clamp(37px, 5vw, 51px);
    }

    body .ongoing-improvement-page .oi-approach__steps {
        grid-template-columns: repeat(3, minmax(0,1fr));

        gap: 46px 30px;
    }

    body .ongoing-improvement-page .oi-approach__step {
        padding: 0 3px;
    }

    body .ongoing-improvement-page .oi-approach__icon {
        width: 70px;
        height: 70px;
        margin-bottom: 22px;
    }

    body .ongoing-improvement-page .oi-approach__step-title {
        font-size: 18px;
    }

    body .ongoing-improvement-page .oi-approach__description {
        font-size: 13px;
    }

    body .ongoing-improvement-page .oi-approach__closing {
        margin-top: 66px;
    }
}

/* =========================================================
   10 — SMALL TABLET
   600px–749px
========================================================= */

@media (min-width: 600px) and (max-width: 749px) {

    body .ongoing-improvement-page .oi-approach__inner {
        padding: 0 40px;
    }

    body .ongoing-improvement-page .oi-approach__steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 42px 30px;
    }

    body .ongoing-improvement-page .oi-approach__step-title {
        font-size: 18px;
    }
}

/* =========================================================
   11 — MOBILE
   599px AND BELOW
========================================================= */

@media (max-width: 599px) {

    body .ongoing-improvement-page .oi-approach {
        padding: 77px 0 82px;
    }

    body .ongoing-improvement-page .oi-approach__inner {
        padding: 0 28px 0 34px;
    }

    body .ongoing-improvement-page .oi-approach__intro {
        margin-bottom: 44px;
    }

    body .ongoing-improvement-page .oi-approach__eyebrow {
        margin-bottom: 18px;
        font-size: 11px;
    }

    body .ongoing-improvement-page .oi-approach__title {
        font-size: clamp(32px, 8vw, 43px);
        line-height: 1.16;
    }

    body .ongoing-improvement-page .oi-approach__body {
        margin-top: 22px;
        font-size: 14px;
    }

    /* Vertical editorial timeline */

    body .ongoing-improvement-page .oi-approach__steps {
        display: grid;
        grid-template-columns: minmax(0,1fr);

        gap: 34px;
    }

    body .ongoing-improvement-page .oi-approach__step {
        display: grid;
        grid-template-columns: 65px minmax(0,1fr);
        column-gap: 19px;

        align-items: start;

        min-width: 0;
        padding: 0 0 28px;
    }

    body .ongoing-improvement-page
    .oi-approach__step:not(:last-child)::before {
        content: "";

        position: absolute;
        z-index: 0;

        top: 74px;
        bottom: -35px;
        left: 32px;

        width: 1px;

        background: rgba(190,114,82,.28);
    }

    body .ongoing-improvement-page .oi-approach__icon {
        width: 65px;
        height: 65px;

        margin: 0;
    }

    body .ongoing-improvement-page .oi-approach__icon svg {
        width: 29px;
        height: 29px;
    }

    body .ongoing-improvement-page .oi-approach__step-content {
        padding-top: 3px;
    }

    body .ongoing-improvement-page .oi-approach__number {
        margin-bottom: 5px;
        font-size: 12px;
    }

    body .ongoing-improvement-page .oi-approach__label {
        margin-bottom: 9px;
        font-size: 10px;
    }

    body .ongoing-improvement-page .oi-approach__step-title {
        margin-bottom: 11px;
        font-size: 19px;
    }

    body .ongoing-improvement-page .oi-approach__description {
        font-size: 13px;
        line-height: 1.75;
    }

    body .ongoing-improvement-page .oi-approach__closing {
        margin-top: 46px;
    }

    body .ongoing-improvement-page .oi-approach__closing-title {
        font-size: 23px;
    }

    body .ongoing-improvement-page .oi-approach__closing-sequence {
        font-size: 13px;
        line-height: 1.85;
    }
}

/* =========================================================
   12 — SMALL MOBILE
   374px AND BELOW
========================================================= */

@media (max-width: 374px) {

    body .ongoing-improvement-page .oi-approach__inner {
        padding: 0 23px 0 29px;
    }

    body .ongoing-improvement-page .oi-approach__title {
        font-size: 30px;
    }

    body .ongoing-improvement-page .oi-approach__step {
        grid-template-columns: 58px minmax(0,1fr);
        column-gap: 15px;
    }

    body .ongoing-improvement-page .oi-approach__icon {
        width: 58px;
        height: 58px;
    }

    body .ongoing-improvement-page
    .oi-approach__step:not(:last-child)::before {
        left: 29px;
    }

    body .ongoing-improvement-page .oi-approach__step-title {
        font-size: 17px;
    }

    body .ongoing-improvement-page .oi-approach__description {
        font-size: 12px;
    }
}

/* =========================================================
   13 — HOVER INTERACTIONS
========================================================= */

@media (hover: hover) and (pointer: fine) {

    body .ongoing-improvement-page
    .oi-approach__step:hover .oi-approach__icon {
        transform: translateY(-4px);

        box-shadow:
            0 13px 25px rgba(68,51,38,.095),
            0 25px 41px rgba(68,51,38,.065),
            inset 0 2px 1px rgba(255,255,255,.88);
    }
}

/* =========================================================
   14 — SCROLL REVEALS
========================================================= */

@keyframes oiApproachReveal {
    from {
        opacity: 0;
        translate: 0 20px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

@media (prefers-reduced-motion: no-preference) {

    @supports (animation-timeline: view()) {

        body .ongoing-improvement-page .oi-approach__intro,
        body .ongoing-improvement-page .oi-approach__step,
        body .ongoing-improvement-page .oi-approach__closing {
            animation: oiApproachReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 55%;
        }
    }
}

/* =========================================================
   15 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body .ongoing-improvement-page .oi-approach__intro,
    body .ongoing-improvement-page .oi-approach__step,
    body .ongoing-improvement-page .oi-approach__closing {
        animation: none !important;
        opacity: 1 !important;
        translate: none !important;
        transform: none !important;
    }

    body .ongoing-improvement-page .oi-approach__icon {
        transition: none !important;
    }
}



/* =========================================================
   FRAYORA — ONGOING IMPROVEMENT
   SECTION 06 — TABLET HORIZONTAL SCROLL

   Tablet only: 600px–1100px
   Five-step horizontal process
   Narrow editorial columns
   Swipe and scroll-snap enabled
   Existing PHP unchanged
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    /* INTRODUCTION */

    body .ongoing-improvement-page
    .oi-approach__intro {
        margin-bottom: 48px;
    }

    /* HORIZONTAL SCROLL CONTAINER */

    body .ongoing-improvement-page
    .oi-approach__steps {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        align-items: stretch;
        justify-content: flex-start;

        grid-template-columns: none !important;

        gap: 24px !important;

        width: 100%;
        min-width: 0;

        margin: 0 !important;
        padding: 12px 4px 28px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        scroll-snap-type: x mandatory;
        scroll-padding-inline: 4px;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;

        scrollbar-width: thin;
        scrollbar-color:
            #BC9680 rgba(201,103,67,0.12);
    }

    /* INDIVIDUAL TIMELINE STEPS */

    body .ongoing-improvement-page
    .oi-approach__step {
        position: relative;

        display: flex !important;
        flex-direction: column !important;

        flex: 0 0 255px !important;

        width: 255px !important;
        min-width: 255px !important;
        max-width: 255px !important;

        height: auto;

        margin: 0 !important;
        padding: 10px 7px 24px !important;

        align-self: stretch;

        scroll-snap-align: start;
    }

    /* ICONS */

    body .ongoing-improvement-page
    .oi-approach__icon {
        width: 72px !important;
        height: 72px !important;

        min-width: 72px;

        margin: 0 0 22px !important;
    }

    body .ongoing-improvement-page
    .oi-approach__icon svg {
        width: 33px;
        height: 33px;
    }

    /* CONNECTING LINES BETWEEN ICONS */

    body .ongoing-improvement-page
    .oi-approach__step:not(:last-child)::before {
        content: "";

        position: absolute;

        top: 46px;
        left: 91px;
        right: -31px;

        width: auto;
        height: 1px;

        background: rgba(193,111,77,0.32);

        z-index: 0;
        pointer-events: none;
    }

    /* REMOVE ANY OLD GRID/TIMELINE ARROWS */

    body .ongoing-improvement-page
    .oi-approach__step::after {
        content: none !important;
    }

    /* TEXT CONTENT */

    body .ongoing-improvement-page
    .oi-approach__step-content {
        width: 100%;
        min-width: 0;

        padding: 0 !important;
        text-align: left;
    }

    body .ongoing-improvement-page
    .oi-approach__number {
        margin-bottom: 7px;
        font-size: 12px;
    }

    body .ongoing-improvement-page
    .oi-approach__label {
        margin-bottom: 11px;
        font-size: 10px;
    }

    body .ongoing-improvement-page
    .oi-approach__step-title {
        margin-bottom: 13px;

        font-size: 19px;
        line-height: 1.35;
    }

    body .ongoing-improvement-page
    .oi-approach__description {
        font-size: 13px;
        line-height: 1.75;
    }

    /* SCROLLBAR */

    body .ongoing-improvement-page
    .oi-approach__steps::-webkit-scrollbar {
        height: 5px;
    }

    body .ongoing-improvement-page
    .oi-approach__steps::-webkit-scrollbar-track {
        background: rgba(201,103,67,0.10);
        border-radius: 999px;
    }

    body .ongoing-improvement-page
    .oi-approach__steps::-webkit-scrollbar-thumb {
        background: #BC9680;
        border-radius: 999px;
    }

    /* KEEP CLOSING STATEMENT BELOW SCROLL AREA */

    body .ongoing-improvement-page
    .oi-approach__closing {
        margin-top: 55px;
    }
}

/* SMALLER TABLETS */

@media (min-width: 600px) and (max-width: 749px) {

    body .ongoing-improvement-page
    .oi-approach__steps {
        gap: 20px !important;
    }

    body .ongoing-improvement-page
    .oi-approach__step {
        flex-basis: 230px !important;

        width: 230px !important;
        min-width: 230px !important;
        max-width: 230px !important;
    }
}

/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {

    body .ongoing-improvement-page
    .oi-approach__steps {
        scroll-behavior: auto !important;
    }
}


/* =========================================================
   FRAYORA — ONGOING IMPROVEMENT
   SECTION 07 — BUILT FOR REAL BUSINESS

   Bond-inspired editorial composition
   Solid ivory section surface
   Three subtly staggered feature panels
   Gentle architectural ellipse detailing
   Dimensional olive / terracotta medallions
   Desktop / Tablet / Mobile
   Reduced-motion safe
========================================================= */

/* =========================================================
   01 — SECTION FOUNDATION
========================================================= */

body .ongoing-improvement-page .oi-real {
    position: relative;
    isolation: isolate;

    width: 100%;
    margin: 0;
    padding: 112px 0 96px;

    overflow: hidden;

    background: #F8F3EB !important;
    background-image: none !important;

    color: #22251F;
    font-family: "Inter", Arial, sans-serif;
}

body .ongoing-improvement-page .oi-real,
body .ongoing-improvement-page .oi-real *,
body .ongoing-improvement-page .oi-real *::before,
body .ongoing-improvement-page .oi-real *::after {
    box-sizing: border-box;
}

body .ongoing-improvement-page .oi-real__inner {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    column-gap: 85px;
    align-items: center;

    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 80px;
}

/* =========================================================
   02 — ARCHITECTURAL LINE DETAILS
   Fine elliptical outlines, not gradient patches
========================================================= */

body .ongoing-improvement-page .oi-real::before,
body .ongoing-improvement-page .oi-real::after {
    content: "";
    position: absolute;
    z-index: 0;

    border: 1px solid rgba(194,113,79,.16);
    border-radius: 50%;

    pointer-events: none;
}

body .ongoing-improvement-page .oi-real::before {
    width: 710px;
    height: 500px;

    right: -420px;
    top: -320px;

    transform: rotate(-21deg);
}

body .ongoing-improvement-page .oi-real::after {
    width: 820px;
    height: 500px;

    left: -470px;
    bottom: -340px;

    transform: rotate(13deg);
}

/* =========================================================
   03 — INTRODUCTION
========================================================= */

body .ongoing-improvement-page .oi-real__intro {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 580px;
    min-width: 0;
}

body .ongoing-improvement-page .oi-real__eyebrow {
    margin: 0 0 21px;

    font-family: "Inter", Arial, sans-serif !important;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .13em;

    color: #B86448 !important;
}

body .ongoing-improvement-page .oi-real__title {
    max-width: 580px;
    margin: 0;

    font-family: "Manrope", "Inter", Arial, sans-serif !important;
    font-size: clamp(41px, 3.4vw, 55px);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -.052em;

    color: #22251F !important;
    text-wrap: balance;
}

body .ongoing-improvement-page .oi-real__body {
    max-width: 540px;
    margin: 24px 0 0;

    font-family: "Inter", Arial, sans-serif !important;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.8;

    color: #686760 !important;
}

/* =========================================================
   04 — FEATURE PANEL ARRANGEMENT
========================================================= */

body .ongoing-improvement-page .oi-real__features {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;

    gap: 18px;

    width: 100%;
    max-width: 610px;
    min-width: 0;

    margin: 0 auto;
}

/* =========================================================
   05 — FEATURE PANEL BASE
========================================================= */

body .ongoing-improvement-page .oi-real__feature {
    position: relative;
    isolation: isolate;

    display: grid;
    grid-template-columns: 74px minmax(0,1fr);
    align-items: start;

    gap: 21px;

    width: 100%;
    min-width: 0;

    padding: 24px 27px;

    border: 1px solid rgba(199,171,150,.25);
    border-radius: 22px;

    background: #FFFCF8;

    box-shadow:
        0 9px 22px rgba(73,50,35,.045),
        0 20px 39px rgba(73,50,35,.06),
        0 36px 61px rgba(73,50,35,.035),
        inset 0 1px 0 rgba(255,255,255,.96);

    transition:
        transform .4s cubic-bezier(.22,1,.36,1),
        box-shadow .4s ease;
}

/* Very soft top-edge light reflection */

body .ongoing-improvement-page .oi-real__feature::before {
    content: "";

    position: absolute;
    z-index: 0;

    inset: 1px;

    border-radius: 20px;

    border: 1px solid rgba(255,255,255,.7);

    pointer-events: none;
}

body .ongoing-improvement-page .oi-real__feature > * {
    position: relative;
    z-index: 1;
}

/* =========================================================
   06 — STAGGERED DESKTOP POSITIONING
========================================================= */

@media (min-width: 1101px) {

    body .ongoing-improvement-page .oi-real__feature--one {
        width: 92%;
        align-self: flex-start;
    }

    body .ongoing-improvement-page .oi-real__feature--two {
        width: 92%;
        align-self: flex-end;
    }

    body .ongoing-improvement-page .oi-real__feature--three {
        width: 92%;
        align-self: flex-start;
        margin-left: 15px;
    }
}

/* =========================================================
   07 — DIMENSIONAL ICONS
========================================================= */

body .ongoing-improvement-page .oi-real__icon {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 68px;
    height: 68px;
    flex: 0 0 auto;

    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.83);

    box-shadow:
        0 9px 20px rgba(69,46,33,.075),
        0 18px 31px rgba(69,46,33,.045),
        inset 0 2px 1px rgba(255,255,255,.83);
}

body .ongoing-improvement-page .oi-real__icon::after {
    content: "";
    position: absolute;
    inset: 5px;

    border: 1px solid rgba(255,255,255,.83);
    border-radius: 50%;

    pointer-events: none;
}

body .ongoing-improvement-page .oi-real__icon svg {
    display: block;

    width: 33px;
    height: 33px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Terracotta — 01 and 03 */

body .ongoing-improvement-page .oi-real__icon--terracotta {
    background: linear-gradient(
        145deg,
        #FFF2E9 0%,
        #F4DDCE 52%,
        #ECD0BE 100%
    );

    color: #BA613E;
    border-color: rgba(199,112,78,.20);
}

/* Olive — 02 */

body .ongoing-improvement-page .oi-real__icon--olive {
    background: linear-gradient(
        145deg,
        #F5F7F0 0%,
        #E6EBDD 52%,
        #D8E1D0 100%
    );

    color: #4B6446;
    border-color: rgba(115,138,106,.23);
}

/* =========================================================
   08 — FEATURE TEXT
========================================================= */

body .ongoing-improvement-page .oi-real__feature-content {
    min-width: 0;
}

body .ongoing-improvement-page .oi-real__number {
    display: block;
    margin: 0 0 5px;

    font-family: "Inter", Arial, sans-serif !important;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;

    color: #C96743 !important;
}

body .ongoing-improvement-page .oi-real__label {
    margin: 0 0 10px;

    font-family: "Inter", Arial, sans-serif !important;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .1em;

    color: #64715E !important;
}

body .ongoing-improvement-page .oi-real__feature-title {
    margin: 0 0 9px;

    font-family: "Manrope", "Inter", Arial, sans-serif !important;
    font-size: 17px;
    font-weight: 650;
    line-height: 1.35;
    letter-spacing: -.025em;

    color: #242620 !important;
}

body .ongoing-improvement-page .oi-real__description {
    margin: 0;

    font-family: "Inter", Arial, sans-serif !important;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.75;

    color: #6A6963 !important;
}

/* =========================================================
   09 — CLOSING STATEMENT
========================================================= */

body .ongoing-improvement-page .oi-real__closing {
    grid-column: 1 / -1;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 17px;

    width: 100%;
    max-width: 1100px;

    margin: 70px auto 0;

    text-align: center;
}

body .ongoing-improvement-page .oi-real__closing-star {
    flex: 0 0 auto;

    font-family: "Inter", Arial, sans-serif !important;
    font-size: 22px;
    line-height: 1;

    color: #C96743;
}

body .ongoing-improvement-page .oi-real__closing-text {
    margin: 0;

    font-family: "Manrope", "Inter", Arial, sans-serif !important;
    font-size: clamp(17px, 1.5vw, 21px);
    font-weight: 600;
    line-height: 1.55;
    letter-spacing: -.025em;

    color: #354333 !important;
    text-wrap: balance;
}

/* =========================================================
   10 — TABLET
   600px–1100px
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .ongoing-improvement-page .oi-real {
        padding: 92px 0 88px;
    }

    body .ongoing-improvement-page .oi-real__inner {
        grid-template-columns: minmax(0,1fr);
        gap: 0;

        padding: 0 50px;
    }

    body .ongoing-improvement-page .oi-real__intro {
        max-width: 760px;
        margin-bottom: 47px;
    }

    body .ongoing-improvement-page .oi-real__title {
        max-width: 760px;
        font-size: clamp(38px, 5vw, 51px);
    }

    body .ongoing-improvement-page .oi-real__body {
        max-width: 740px;
    }

    body .ongoing-improvement-page .oi-real__features {
        display: grid;
        grid-template-columns: repeat(2, minmax(0,1fr));

        max-width: 100%;
        gap: 20px;
    }

    body .ongoing-improvement-page .oi-real__feature {
        grid-template-columns: minmax(0,1fr);
        gap: 17px;

        padding: 26px 23px;
    }

    body .ongoing-improvement-page .oi-real__feature--three {
        grid-column: 1 / -1;
        max-width: 530px;
        justify-self: center;
    }

    body .ongoing-improvement-page .oi-real__closing {
        margin-top: 55px;
    }
}

/* =========================================================
   11 — SMALL TABLET
   600px–749px
========================================================= */

@media (min-width: 600px) and (max-width: 749px) {

    body .ongoing-improvement-page .oi-real__inner {
        padding: 0 40px;
    }

    body .ongoing-improvement-page .oi-real__features {
        grid-template-columns: minmax(0,1fr);
        max-width: 540px;
    }

    body .ongoing-improvement-page .oi-real__feature,
    body .ongoing-improvement-page .oi-real__feature--three {
        grid-column: auto;
        max-width: none;
        width: 100%;
    }

    body .ongoing-improvement-page .oi-real__feature {
        grid-template-columns: 72px minmax(0,1fr);
        gap: 20px;
    }

    body .ongoing-improvement-page .oi-real__closing {
        gap: 13px;
    }
}

/* =========================================================
   12 — MOBILE
   599px AND BELOW
========================================================= */

@media (max-width: 599px) {

    body .ongoing-improvement-page .oi-real {
        padding: 78px 0 80px;
    }

    body .ongoing-improvement-page .oi-real__inner {
        display: block;
        padding: 0 28px 0 34px;
    }

    body .ongoing-improvement-page .oi-real__intro {
        margin-bottom: 36px;
    }

    body .ongoing-improvement-page .oi-real__eyebrow {
        margin-bottom: 18px;
        font-size: 11px;
    }

    body .ongoing-improvement-page .oi-real__title {
        font-size: clamp(32px, 8vw, 43px);
        line-height: 1.15;
    }

    body .ongoing-improvement-page .oi-real__body {
        margin-top: 21px;
        font-size: 14px;
        line-height: 1.8;
    }

    body .ongoing-improvement-page .oi-real__features {
        display: flex;
        flex-direction: column;

        width: 100%;
        gap: 19px;
    }

    body .ongoing-improvement-page .oi-real__feature {
        grid-template-columns: minmax(0,1fr);
        gap: 18px;

        width: 100%;
        max-width: none;

        padding: 27px 24px 29px;

        border-radius: 20px;
    }

    body .ongoing-improvement-page .oi-real__icon {
        width: 68px;
        height: 68px;
    }

    body .ongoing-improvement-page .oi-real__feature-title {
        font-size: 18px;
        line-height: 1.4;
    }

    body .ongoing-improvement-page .oi-real__description {
        font-size: 13px;
        line-height: 1.75;
    }

    body .ongoing-improvement-page .oi-real__closing {
        flex-wrap: wrap;
        gap: 11px;

        margin-top: 48px;

        text-align: center;
    }

    body .ongoing-improvement-page .oi-real__closing-text {
        font-size: 17px;
        line-height: 1.65;
    }

    body .ongoing-improvement-page .oi-real__closing-star {
        font-size: 19px;
    }
}

/* =========================================================
   13 — SMALL MOBILE
========================================================= */

@media (max-width: 374px) {

    body .ongoing-improvement-page .oi-real__inner {
        padding: 0 23px 0 29px;
    }

    body .ongoing-improvement-page .oi-real__title {
        font-size: 30px;
    }

    body .ongoing-improvement-page .oi-real__feature {
        padding: 24px 20px 26px;
    }

    body .ongoing-improvement-page .oi-real__feature-title {
        font-size: 17px;
    }

    body .ongoing-improvement-page .oi-real__description {
        font-size: 12px;
    }
}

/* =========================================================
   14 — HOVER EFFECTS
========================================================= */

@media (hover: hover) and (pointer: fine) {

    body .ongoing-improvement-page .oi-real__feature:hover {
        transform: translateY(-4px);

        box-shadow:
            0 13px 27px rgba(73,50,35,.06),
            0 26px 48px rgba(73,50,35,.09),
            0 43px 69px rgba(73,50,35,.045),
            inset 0 1px 0 rgba(255,255,255,.97);
    }
}

/* =========================================================
   15 — SCROLL ENTRANCE ANIMATIONS
========================================================= */

@keyframes oiRealReveal {
    from {
        opacity: 0;
        translate: 0 22px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

@media (prefers-reduced-motion: no-preference) {

    @supports (animation-timeline: view()) {

        body .ongoing-improvement-page .oi-real__intro,
        body .ongoing-improvement-page .oi-real__feature,
        body .ongoing-improvement-page .oi-real__closing {
            animation: oiRealReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 55%;
        }
    }
}

/* =========================================================
   16 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body .ongoing-improvement-page .oi-real__intro,
    body .ongoing-improvement-page .oi-real__feature,
    body .ongoing-improvement-page .oi-real__closing {
        animation: none !important;
        opacity: 1 !important;
        translate: none !important;
        transform: none !important;
    }

    body .ongoing-improvement-page .oi-real__feature {
        transition: none !important;
    }
}



/* =========================================================
   FRAYORA — ONGOING IMPROVEMENT
   SECTION 08 — FINAL LUMINOUS CTA

   Centered editorial composition
   Ivory and soft champagne luminosity
   Architectural elliptical arcs
   Floating terracotta button
   Responsive desktop / tablet / mobile
   Reduced-motion safe
========================================================= */

/* =========================================================
   01 — SECTION FOUNDATION
========================================================= */

body .ongoing-improvement-page .oi-final {
    position: relative;
    isolation: isolate;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 490px;
    margin: 0;
    padding: 112px 0 105px;

    overflow: hidden;

    background: #F8F3EB !important;
    color: #242720;

    font-family: "Inter", Arial, sans-serif;
}

body .ongoing-improvement-page .oi-final,
body .ongoing-improvement-page .oi-final *,
body .ongoing-improvement-page .oi-final *::before,
body .ongoing-improvement-page .oi-final *::after {
    box-sizing: border-box;
}

/* =========================================================
   02 — SOFT CHAMPAGNE LUMINOSITY
   Restrained, diffuse, never a solid yellow patch
========================================================= */

body .ongoing-improvement-page .oi-final::before {
    content: "";

    position: absolute;
    z-index: 0;

    left: 50%;
    bottom: -305px;

    width: min(1250px, 115vw);
    height: 690px;

    transform: translateX(-50%);

    border-radius: 50%;

    background: radial-gradient(
        ellipse at center,
        rgba(241,205,156,0.20) 0%,
        rgba(244,218,181,0.13) 30%,
        rgba(247,229,202,0.06) 57%,
        rgba(248,243,235,0) 76%
    );

    filter: blur(35px);
    pointer-events: none;
}

body .ongoing-improvement-page .oi-final::after {
    content: "";

    position: absolute;
    z-index: 0;

    inset: 0;

    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.24) 0%,
        rgba(255,255,255,0.04) 32%,
        rgba(244,226,201,0.07) 100%
    );

    pointer-events: none;
}

/* =========================================================
   03 — DECORATIVE ARCHITECTURAL ARCS
========================================================= */

body .ongoing-improvement-page .oi-final__art {
    position: absolute;
    z-index: 1;
    inset: 0;

    overflow: hidden;
    pointer-events: none;
}

body .ongoing-improvement-page .oi-final__arc {
    position: absolute;

    left: 50%;
    bottom: -505px;

    transform: translateX(-50%);

    border-radius: 50%;
    pointer-events: none;
}

body .ongoing-improvement-page .oi-final__arc--outer {
    width: 1580px;
    height: 800px;

    border: 1px solid rgba(207,157,98,0.38);

    box-shadow:
        0 -1px 8px rgba(239,191,127,0.11),
        inset 0 1px 7px rgba(241,200,149,0.06);
}

body .ongoing-improvement-page .oi-final__arc--inner {
    width: 1240px;
    height: 665px;

    bottom: -430px;

    border: 1px solid rgba(207,157,98,0.18);
}

/* Tiny points of light where the arc meets the sides */

body .ongoing-improvement-page .oi-final__light {
    position: absolute;
    bottom: 94px;

    width: 5px;
    height: 5px;

    border-radius: 50%;
    background: #E9BF86;

    box-shadow:
        0 0 8px 3px rgba(239,190,125,0.35),
        0 0 21px 8px rgba(239,190,125,0.11);
}

body .ongoing-improvement-page .oi-final__light--left {
    left: 7%;
}

body .ongoing-improvement-page .oi-final__light--right {
    right: 7%;
}

/* =========================================================
   04 — CONTENT CONTAINER
========================================================= */

body .ongoing-improvement-page .oi-final__inner {
    position: relative;
    z-index: 3;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 1120px;

    margin: 0 auto;
    padding: 0 65px;

    text-align: center;
}

/* =========================================================
   05 — HEADING
========================================================= */

body .ongoing-improvement-page .oi-final__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 19px;

    max-width: 960px;
    margin: 0;

    font-family: "Manrope", "Inter", Arial, sans-serif !important;
    font-size: clamp(43px, 4.1vw, 64px);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.055em;

    color: #22251F !important;

    text-align: center;
    text-wrap: balance;
}

/* Frayora star */

body .ongoing-improvement-page .oi-final__star {
    display: inline-block;

    font-family: "Inter", Arial, sans-serif !important;
    font-size: 30px;
    font-weight: 400;
    line-height: 1;

    color: #C96743;

    text-shadow:
        0 0 12px rgba(201,103,67,0.12),
        0 0 26px rgba(237,185,122,0.12);
}

/* =========================================================
   06 — BODY COPY
========================================================= */

body .ongoing-improvement-page .oi-final__body {
    max-width: 730px;
    margin: 26px auto 0;

    font-family: "Inter", Arial, sans-serif !important;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;

    color: #686760 !important;

    text-align: center;
    text-wrap: pretty;
}

/* =========================================================
   07 — TERRACOTTA CTA BUTTON
========================================================= */

body .ongoing-improvement-page .oi-final__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 20px;

    width: auto;
    max-width: 100%;
    min-height: 58px;

    margin: 33px auto 0;
    padding: 16px 34px;

    border: 1px solid rgba(255,255,255,0.28);
    border-radius: 999px;

    background: #C96743 !important;
    color: #FFFFFF !important;

    font-family: "Inter", Arial, sans-serif !important;
    font-size: 15px;
    font-weight: 650;
    line-height: 1.4;
    text-decoration: none !important;
    text-align: center;

    box-shadow:
        0 10px 22px rgba(179,92,57,0.17),
        0 22px 39px rgba(179,92,57,0.13),
        0 0 29px rgba(232,173,124,0.09),
        inset 0 1px 0 rgba(255,255,255,0.22);

    transition:
        transform 350ms cubic-bezier(.22,1,.36,1),
        box-shadow 350ms ease,
        background-color 350ms ease;
}

body .ongoing-improvement-page .oi-final__button-arrow {
    display: inline-block;

    font-size: 22px;
    font-weight: 400;
    line-height: 1;

    transition: transform 350ms ease;
}

/* =========================================================
   08 — SUPPORTING COPY
========================================================= */

body .ongoing-improvement-page .oi-final__supporting {
    max-width: 600px;
    margin: 24px auto 0;

    font-family: "Inter", Arial, sans-serif !important;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.7;

    color: #837468 !important;

    text-align: center;
}

/* =========================================================
   09 — DESKTOP
========================================================= */

@media (min-width: 1101px) {

    body .ongoing-improvement-page .oi-final {
        min-height: 510px;
    }
}

/* =========================================================
   10 — TABLET
   600px–1100px
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .ongoing-improvement-page .oi-final {
        min-height: 480px;
        padding: 92px 0 94px;
    }

    body .ongoing-improvement-page .oi-final__inner {
        max-width: 850px;
        padding: 0 50px;
    }

    body .ongoing-improvement-page .oi-final__title {
        max-width: 780px;
        font-size: clamp(38px, 5.4vw, 54px);
    }

    body .ongoing-improvement-page .oi-final__body {
        max-width: 690px;
        font-size: 15px;
    }

    body .ongoing-improvement-page .oi-final__arc--outer {
        width: 1150px;
        height: 650px;
        bottom: -410px;
    }

    body .ongoing-improvement-page .oi-final__arc--inner {
        width: 930px;
        height: 530px;
        bottom: -350px;
    }

    body .ongoing-improvement-page .oi-final__light {
        bottom: 80px;
    }
}

/* =========================================================
   11 — MOBILE
   599px AND BELOW
========================================================= */

@media (max-width: 599px) {

    body .ongoing-improvement-page .oi-final {
        min-height: 0;
        padding: 84px 0 86px;
    }

    body .ongoing-improvement-page .oi-final__inner {
        width: 100%;
        max-width: 550px;
        padding: 0 28px 0 34px;
    }

    body .ongoing-improvement-page .oi-final__title {
        gap: 18px;
        max-width: 100%;

        font-size: clamp(32px, 8.4vw, 43px);
        line-height: 1.16;
    }

    body .ongoing-improvement-page .oi-final__star {
        font-size: 25px;
    }

    body .ongoing-improvement-page .oi-final__body {
        margin-top: 22px;

        font-size: 14px;
        line-height: 1.8;
    }

    body .ongoing-improvement-page .oi-final__button {
        gap: 13px;

        min-height: 54px;
        margin-top: 29px;

        padding: 14px 23px;

        font-size: 13px;
    }

    body .ongoing-improvement-page .oi-final__button-arrow {
        font-size: 20px;
    }

    body .ongoing-improvement-page .oi-final__supporting {
        margin-top: 23px;
        font-size: 12px;
        line-height: 1.7;
    }

    /* Smaller architectural arcs */

    body .ongoing-improvement-page .oi-final__arc--outer {
        width: 730px;
        height: 450px;
        bottom: -315px;
        border-color: rgba(207,157,98,0.28);
    }

    body .ongoing-improvement-page .oi-final__arc--inner {
        width: 560px;
        height: 340px;
        bottom: -245px;
    }

    body .ongoing-improvement-page .oi-final__light {
        bottom: 53px;
        width: 4px;
        height: 4px;
    }

    body .ongoing-improvement-page .oi-final::before {
        width: 780px;
        height: 480px;
        bottom: -290px;

        background: radial-gradient(
            ellipse at center,
            rgba(241,205,156,0.16) 0%,
            rgba(244,218,181,0.08) 43%,
            transparent 75%
        );
    }
}

/* =========================================================
   12 — SMALL MOBILE
   374px AND BELOW
========================================================= */

@media (max-width: 374px) {

    body .ongoing-improvement-page .oi-final__inner {
        padding: 0 23px 0 29px;
    }

    body .ongoing-improvement-page .oi-final__title {
        font-size: 30px;
    }

    body .ongoing-improvement-page .oi-final__button {
        padding: 13px 18px;
        font-size: 12px;
    }

    body .ongoing-improvement-page .oi-final__supporting {
        font-size: 11.5px;
    }
}

/* =========================================================
   13 — HOVER EFFECTS
========================================================= */

@media (hover: hover) and (pointer: fine) {

    body .ongoing-improvement-page .oi-final__button:hover {
        transform: translateY(-3px);

        background: #BB5E3D !important;

        box-shadow:
            0 14px 28px rgba(179,92,57,0.21),
            0 27px 46px rgba(179,92,57,0.16),
            0 0 33px rgba(232,173,124,0.12),
            inset 0 1px 0 rgba(255,255,255,0.24);
    }

    body .ongoing-improvement-page
    .oi-final__button:hover .oi-final__button-arrow {
        transform: translateX(4px);
    }
}

/* =========================================================
   14 — SCROLL ENTRANCE ANIMATIONS
========================================================= */

@keyframes oiFinalReveal {
    from {
        opacity: 0;
        translate: 0 22px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

@media (prefers-reduced-motion: no-preference) {

    @supports (animation-timeline: view()) {

        body .ongoing-improvement-page .oi-final__inner {
            animation: oiFinalReveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 55%;
        }
    }
}

/* =========================================================
   15 — ACCESSIBILITY
========================================================= */

body .ongoing-improvement-page .oi-final__button:focus-visible {
    outline: 2px solid #C96743;
    outline-offset: 5px;
}

/* =========================================================
   16 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body .ongoing-improvement-page .oi-final__inner {
        animation: none !important;
        opacity: 1 !important;
        translate: none !important;
        transform: none !important;
    }

    body .ongoing-improvement-page .oi-final__button,
    body .ongoing-improvement-page .oi-final__button-arrow {
        transition: none !important;
    }
}



/* =========================================================
   FRAYORA — ONGOING IMPROVEMENT
   REMOVE DECORATIVE STARS
   SECTIONS 04, 06 & 08
========================================================= */

/* SECTION 04 — Pricing closing statement */
body .ongoing-improvement-page
.oi-pricing__closing-star {
    display: none !important;
}

/* SECTION 06 — Our Approach closing statement */
body .ongoing-improvement-page
.oi-approach__star {
    display: none !important;
}

/* SECTION 08 — Final CTA heading */
body .ongoing-improvement-page
.oi-final__star {
    display: none !important;
}

/* Refine spacing after removing stars */

body .ongoing-improvement-page
.oi-pricing__closing,

body .ongoing-improvement-page
.oi-approach__closing,

body .ongoing-improvement-page
.oi-final__title {
    row-gap: 0 !important;
}


/* =========================================================
   FRAYORA — UNIVERSAL SERVICE HERO CTA
   Approved Ongoing Improvement Button Style

   Applies to ALL 7 service-page hero buttons
   Does NOT affect header, dropdown or section CTAs

   Dark olive / champagne-gold border
   Subtle glass highlight
   Refined dimensional shadow
   Responsive desktop / tablet / mobile
========================================================= */

/* =========================================================
   01 — ALL SERVICE HERO BUTTONS
========================================================= */

body :is(
    .biab-hero__button,
    .digital-hero__button,
    .bk-hero__button,
    .sops-hero__button,
    .eks-hero__button,
    .wf-hero__button,
    .oi-hero__button
) {
    position: relative;
    isolation: isolate;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex-wrap: nowrap;
    gap: 17px !important;

    width: fit-content !important;
    max-width: 100% !important;
    min-width: 0;

    min-height: 55px !important;

    padding: 15px 30px !important;

    border: 1px solid rgba(230,210,147,0.78) !important;
    border-radius: 999px !important;

    background: #34402D !important;
    background-image: none !important;

    color: #FFFFFF !important;

    font-family: "Inter", sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;

    text-align: center !important;
    text-decoration: none !important;
    white-space: normal;

    box-shadow:
        0 8px 19px rgba(0,0,0,0.18),
        0 20px 38px rgba(0,0,0,0.18),
        0 0 19px rgba(223,198,127,0.08),
        inset 0 1px 0 rgba(255,255,255,0.13) !important;

    transition:
        translate 320ms cubic-bezier(.22,1,.36,1),
        background-color 320ms ease,
        border-color 320ms ease,
        box-shadow 320ms ease !important;
}

/* =========================================================
   02 — INNER GLASS HIGHLIGHT
========================================================= */

body :is(
    .biab-hero__button,
    .digital-hero__button,
    .bk-hero__button,
    .sops-hero__button,
    .eks-hero__button,
    .wf-hero__button,
    .oi-hero__button
)::before {
    content: "" !important;

    position: absolute;
    inset: 2px;

    width: auto;
    height: auto;

    border: 0;
    border-radius: inherit;

    background: transparent !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.09);

    opacity: 1;

    transform: none;
    animation: none !important;

    pointer-events: none;
}

/* Prevent unrelated decorative overlays */

body :is(
    .biab-hero__button,
    .digital-hero__button,
    .bk-hero__button,
    .sops-hero__button,
    .eks-hero__button,
    .wf-hero__button,
    .oi-hero__button
)::after {
    content: none !important;
}

/* =========================================================
   03 — TEXT AND ARROW
========================================================= */

body :is(
    .biab-hero__button,
    .digital-hero__button,
    .bk-hero__button,
    .sops-hero__button,
    .eks-hero__button,
    .wf-hero__button,
    .oi-hero__button
) > span {
    position: relative;
    z-index: 1;

    color: #FFFFFF !important;
    text-decoration: none !important;
}

/* Existing hero arrow classes */

body :is(
    .biab-hero__arrow,
    .digital-hero__arrow,
    .bk-hero__button-arrow,
    .sops-hero__arrow,
    .eks-hero__arrow,
    .wf-hero__arrow,
    .oi-hero__arrow
) {
    display: inline-block;

    flex-shrink: 0;

    font-size: 21px !important;
    font-weight: 400;
    line-height: 1;

    color: #FFFFFF !important;

    transition:
        transform 320ms cubic-bezier(.22,1,.36,1);
}

/* =========================================================
   04 — HOVER EFFECT
========================================================= */

@media (hover: hover) and (pointer: fine) {

    body :is(
        .biab-hero__button,
        .digital-hero__button,
        .bk-hero__button,
        .sops-hero__button,
        .eks-hero__button,
        .wf-hero__button,
        .oi-hero__button
    ):hover {
        background: #435239 !important;

        border-color: rgba(243,220,165,0.95) !important;

        color: #FFFFFF !important;

        translate: 0 -3px;

        box-shadow:
            0 12px 25px rgba(0,0,0,0.22),
            0 26px 48px rgba(0,0,0,0.19),
            0 0 24px rgba(230,209,142,0.12),
            inset 0 1px 0 rgba(255,255,255,0.16) !important;
    }

    /* Gently move the arrow */

    body :is(
        .biab-hero__button,
        .digital-hero__button,
        .bk-hero__button,
        .sops-hero__button,
        .eks-hero__button,
        .wf-hero__button,
        .oi-hero__button
    ):hover > span:last-child {
        transform: translateX(5px);
    }
}

/* =========================================================
   05 — KEYBOARD ACCESSIBILITY
========================================================= */

body :is(
    .biab-hero__button,
    .digital-hero__button,
    .bk-hero__button,
    .sops-hero__button,
    .eks-hero__button,
    .wf-hero__button,
    .oi-hero__button
):focus-visible {
    outline: 2px solid #F8F3EB !important;
    outline-offset: 5px;
}

/* =========================================================
   06 — TABLET
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body :is(
        .biab-hero__button,
        .digital-hero__button,
        .bk-hero__button,
        .sops-hero__button,
        .eks-hero__button,
        .wf-hero__button,
        .oi-hero__button
    ) {
        min-height: 54px !important;
        gap: 15px !important;

        padding: 14px 27px !important;

        font-size: 13px !important;
    }
}

/* =========================================================
   07 — MOBILE
========================================================= */

@media (max-width: 599px) {

    body :is(
        .biab-hero__button,
        .digital-hero__button,
        .bk-hero__button,
        .sops-hero__button,
        .eks-hero__button,
        .wf-hero__button,
        .oi-hero__button
    ) {
        min-height: 51px !important;

        gap: 12px !important;
        padding: 13px 20px !important;

        font-size: 12px !important;
        line-height: 1.4 !important;
    }

    body :is(
        .biab-hero__arrow,
        .digital-hero__arrow,
        .bk-hero__button-arrow,
        .sops-hero__arrow,
        .eks-hero__arrow,
        .wf-hero__arrow,
        .oi-hero__arrow
    ) {
        font-size: 19px !important;
    }
}

/* =========================================================
   08 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body :is(
        .biab-hero__button,
        .digital-hero__button,
        .bk-hero__button,
        .sops-hero__button,
        .eks-hero__button,
        .wf-hero__button,
        .oi-hero__button
    ) {
        transition: none !important;
        translate: none !important;
    }

    body :is(
        .biab-hero__arrow,
        .digital-hero__arrow,
        .bk-hero__button-arrow,
        .sops-hero__arrow,
        .eks-hero__arrow,
        .wf-hero__arrow,
        .oi-hero__arrow
    ) {
        transition: none !important;
    }
}



/* =========================================================
   FRAYORA — HERO CTA COLOR CORRECTION
   OPERATIONS & SOPS
   EMPLOYEE & KNOWLEDGE SYSTEMS

   Match approved Ongoing Improvement hero CTA
   Desktop / Tablet / Mobile
========================================================= */

/* BASE BUTTON */

body .operations-sops-page .sops-hero
.sops-hero__button,

body .employee-knowledge-page .eks-hero
.eks-hero__button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: fit-content !important;
    max-width: 100% !important;
    min-height: 55px !important;

    gap: 17px !important;
    padding: 15px 30px !important;

    background: #34402D !important;
    background-color: #34402D !important;
    background-image: none !important;

    border: 1px solid rgba(230,210,147,0.78) !important;
    border-radius: 999px !important;

    color: #FFFFFF !important;

    font-family: "Inter", sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;

    box-shadow:
        0 8px 19px rgba(0,0,0,0.18),
        0 20px 38px rgba(0,0,0,0.18),
        0 0 19px rgba(223,198,127,0.08),
        inset 0 1px 0 rgba(255,255,255,0.13) !important;

    transition:
        translate 320ms ease,
        background-color 320ms ease,
        box-shadow 320ms ease !important;
}

/* WHITE TEXT AND ARROW */

body .operations-sops-page .sops-hero
.sops-hero__button > span,

body .employee-knowledge-page .eks-hero
.eks-hero__button > span {
    color: #FFFFFF !important;
}

body .operations-sops-page .sops-hero
.sops-hero__arrow,

body .employee-knowledge-page .eks-hero
.eks-hero__arrow {
    color: #FFFFFF !important;
    font-size: 21px !important;
}

/* HOVER */

@media (hover: hover) and (pointer: fine) {

    body .operations-sops-page .sops-hero
    .sops-hero__button:hover,

    body .employee-knowledge-page .eks-hero
    .eks-hero__button:hover {
        background: #435239 !important;
        background-color: #435239 !important;

        border-color: rgba(243,220,165,0.95) !important;

        color: #FFFFFF !important;

        translate: 0 -3px;

        box-shadow:
            0 12px 25px rgba(0,0,0,0.22),
            0 26px 48px rgba(0,0,0,0.19),
            0 0 24px rgba(230,209,142,0.12),
            inset 0 1px 0 rgba(255,255,255,0.16) !important;
    }
}

/* TABLET */

@media (min-width: 600px) and (max-width: 1100px) {

    body .operations-sops-page .sops-hero
    .sops-hero__button,

    body .employee-knowledge-page .eks-hero
    .eks-hero__button {
        min-height: 54px !important;
        padding: 14px 27px !important;
        font-size: 13px !important;
    }
}

/* MOBILE */

@media (max-width: 599px) {

    body .operations-sops-page .sops-hero
    .sops-hero__button,

    body .employee-knowledge-page .eks-hero
    .eks-hero__button {
        min-height: 51px !important;
        padding: 13px 20px !important;
        gap: 12px !important;
        font-size: 12px !important;
    }
}

/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {

    body .operations-sops-page .sops-hero
    .sops-hero__button,

    body .employee-knowledge-page .eks-hero
    .eks-hero__button {
        transition: none !important;
        translate: none !important;
    }
}





/* =========================================================
   FRAYORA — CONTACT US
   SECTION 01 — PHOTOGRAPHIC HERO

   EXACT ABOUT FRAYORA DESIGN SYSTEM

   Inherits the original About Frayora CSS:
   - Luminous olive photographic overlay
   - Centered editorial typography
   - Soft curved bottom edge
   - Original shadows and depth
   - Refined entrance animations
   - Responsive hero proportions

   Only differences:
   - Contact Us photographs
   - Shorter, centered mobile composition

   DESKTOP: 1101px+
   TABLET:  600px–1100px
   MOBILE:  0px–599px
========================================================= */


/* =========================================================
   01 — DESKTOP
   1101px AND ABOVE
========================================================= */

@media screen and (min-width: 1101px) {

    body .frayora-contact-page
    .about-us-page .about-hero__media {

        background-image:
            url("../images/Contact Us/hero2.png");

    }

}


/* =========================================================
   02 — TABLET
   600px–1100px
========================================================= */

@media screen and (min-width: 600px)
and (max-width: 1100px) {

    body .frayora-contact-page
    .about-us-page .about-hero__media {

        background-image:
            url("../images/Contact Us/herotablet.png");

    }

}


/* =========================================================
   03 — MOBILE
   0px–599px
========================================================= */

@media screen and (max-width: 599px) {

    /* APPROVED SHORTER MOBILE HEIGHT */

    body .frayora-contact-page
    .about-us-page .about-hero {

        height: 390px;
        min-height: 390px;

    }


    /* CONTACT US MOBILE PHOTOGRAPH */

    body .frayora-contact-page
    .about-us-page .about-hero__media {

        background-image:
            url("../images/Contact Us/heromobile.png");

    }


    /* VERTICALLY CENTERED HEADING */

    body .frayora-contact-page
    .about-us-page .about-hero__inner {

        display: flex;
        align-items: center;
        justify-content: center;

        height: 100%;

        padding: 24px;

        text-align: center;

    }


    /* REMOVE INHERITED 65px DOWNWARD OFFSET */

    body .frayora-contact-page
    .about-us-page .about-hero__title {

        animation:
            fcContactCenteredTitleIn 1.05s
            cubic-bezier(.22, 1, .36, 1)
            0.25s both;

    }

}


/* =========================================================
   04 — SMALL MOBILE
   390px AND BELOW
========================================================= */

@media screen and (max-width: 390px) {

    body .frayora-contact-page
    .about-us-page .about-hero {

        height: 380px;
        min-height: 380px;

    }

}


/* =========================================================
   05 — MOBILE TITLE ENTRANCE
========================================================= */

@keyframes fcContactCenteredTitleIn {

    from {
        opacity: 0;
        transform: translateY(20px);
        filter: blur(3px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }

}


/* =========================================================
   06 — REDUCED MOTION ACCESSIBILITY
========================================================= */

@media screen and (max-width: 599px)
and (prefers-reduced-motion: reduce) {

    body .frayora-contact-page
    .about-us-page .about-hero__title {

        animation: none !important;
        transition: none !important;

        transform: none !important;
        filter: none !important;
        opacity: 1 !important;

    }

}


/* =========================================================
   FRAYORA — CONTACT US
   SECTION 02 — CONTACT OPTIONS

   Bond-inspired Modern SaaS Design
   Warm editorial ivory background
   Elevated soft-glass cards
   Olive icon medallions
   Matching terracotta CTA system
   Desktop / Tablet / Mobile

   Scoped to Contact Us only
========================================================= */


/* =========================================================
   01 — SECTION FOUNDATION
========================================================= */

body .frayora-contact-page .fc-options,
body .frayora-contact-page .fc-options *,
body .frayora-contact-page .fc-options *::before,
body .frayora-contact-page .fc-options *::after {
    box-sizing: border-box;
}

body .frayora-contact-page .fc-options {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    width: 100%;
    padding: 100px 0 110px;

    background: #F8F3EB;
    color: #22251F;
}

/* Delicate visual separation from the hero */

body .frayora-contact-page .fc-options::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;

    background: rgba(255,255,255,0.85);
    pointer-events: none;
}


/* =========================================================
   02 — INNER CONTAINER
========================================================= */

body .frayora-contact-page .fc-options__inner {
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: 1600px;

    margin: 0 auto;
    padding: 0 80px;
}


/* =========================================================
   03 — THREE-COLUMN CARD GRID
========================================================= */

body .frayora-contact-page .fc-options__grid {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;

    align-items: stretch;
}


/* =========================================================
   04 — CARD SURFACE

   Premium dimensional depth.
   Solid ivory surface with restrained highlights.
========================================================= */

body .frayora-contact-page .fc-options__card {
    position: relative;
    isolation: isolate;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    min-width: 0;
    min-height: 350px;

    padding: 33px 30px 30px;

    overflow: hidden;

    border: 1px solid rgba(224,211,196,0.72);
    border-radius: 24px;

    background: #FFFCF8;

    box-shadow:
        0 10px 25px rgba(77,60,45,0.045),
        0 25px 50px rgba(77,60,45,0.065),
        inset 0 1px 0 rgba(255,255,255,0.90);

    transition:
        transform 350ms cubic-bezier(.22,1,.36,1),
        border-color 350ms ease,
        box-shadow 350ms ease;
}

/* Very subtle top-edge glass reflection */

body .frayora-contact-page .fc-options__card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;

    height: 1px;
    background: rgba(255,255,255,0.9);
    pointer-events: none;
}

/* Card hover elevation */

@media (hover: hover) and (pointer: fine) {

    body .frayora-contact-page .fc-options__card:hover {
        transform: translateY(-6px);

        border-color: rgba(198,168,142,0.65);

        box-shadow:
            0 14px 32px rgba(77,60,45,0.075),
            0 32px 62px rgba(77,60,45,0.09),
            inset 0 1px 0 rgba(255,255,255,0.95);
    }
}


/* =========================================================
   05 — ICON  ROW
========================================================= */

body .frayora-contact-page .fc-options__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 18px;

    margin-bottom: 30px;
}




/* =========================================================
   06 — OLIVE CIRCULAR ICON MEDALLION
========================================================= */

body .frayora-contact-page .fc-options__icon {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 72px;

    width: 72px;
    height: 72px;

    border: 1px solid rgba(116,138,100,0.20);
    border-radius: 50%;

    background: #E6EBDD;

    color: #50644C;

    box-shadow:
        0 9px 18px rgba(56,76,50,0.08),
        0 17px 29px rgba(56,76,50,0.045),
        inset 0 2px 3px rgba(255,255,255,0.95),
        inset 0 -3px 7px rgba(71,95,62,0.055);

    transition:
        transform 350ms cubic-bezier(.22,1,.36,1),
        box-shadow 350ms ease;
}

/* Fine concentric highlight */

body .frayora-contact-page .fc-options__icon::after {
    content: "";

    position: absolute;
    inset: 6px;

    border: 1px solid rgba(255,255,255,0.86);
    border-radius: 50%;

    pointer-events: none;
}

body .frayora-contact-page .fc-options__icon svg {
    position: relative;
    z-index: 1;

    display: block;

    width: 33px;
    height: 33px;

    flex-shrink: 0;
}

@media (hover: hover) and (pointer: fine) {

    body .frayora-contact-page
    .fc-options__card:hover .fc-options__icon {

        transform: translateY(-3px);

        box-shadow:
            0 13px 25px rgba(56,76,50,0.12),
            inset 0 2px 3px rgba(255,255,255,0.95);
    }
}


/* =========================================================
   07 — COPY AND TYPOGRAPHY
========================================================= */

body .frayora-contact-page .fc-options__content {
    width: 100%;
    margin: 0 0 30px;
}

body .frayora-contact-page .fc-options__title {
    margin: 0 0 14px;

    font-family: "Manrope", sans-serif !important;

    font-size: clamp(20px, 1.65vw, 25px);
    font-weight: 650;

    line-height: 1.3;
    letter-spacing: -0.04em;

    text-align: left;
    color: #22251F;
}

body .frayora-contact-page .fc-options__description {
    max-width: 380px;

    margin: 0;

    font-family: "Inter", sans-serif !important;
    font-size: 14px;
    font-weight: 400;

    line-height: 1.75;
    letter-spacing: 0;

    text-align: left;
    color: #62655E;
}

/* Email contact line */

body .frayora-contact-page .fc-options__email {
    display: inline-block;

    margin: 0 0 13px;

    font-family: "Inter", sans-serif !important;

    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;

    color: #C96743 !important;

    text-decoration: none;
    overflow-wrap: anywhere;

    transition: color 250ms ease;
}

body .frayora-contact-page .fc-options__email:hover {
    color: #A94D30 !important;
    text-decoration: underline;
    text-underline-offset: 4px;
}


/* =========================================================
   08 — TERRACOTTA CTA

   Same approved construction as Frayora olive CTA:
   - Solid brand color
   - Champagne border
   - Controlled dimensional shadows
   - No oversized orange glow
========================================================= */

body .frayora-contact-page .fc-options__button {
    position: relative;
    isolation: isolate;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    align-self: flex-start;

    width: fit-content;
    max-width: 100%;
    min-height: 49px;

    gap: 13px;
    margin-top: auto;

    padding: 12px 21px;

    border: 1px solid rgba(230,210,147,0.78);
    border-radius: 999px;

    background: #C96743;

    color: #FFFFFF !important;

    font-family: "Inter", sans-serif !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;

    text-decoration: none !important;
    text-align: center;

    box-shadow:
        0 8px 19px rgba(0,0,0,0.13),
        0 20px 38px rgba(0,0,0,0.10),
        0 0 19px rgba(223,198,127,0.06),
        inset 0 1px 0 rgba(255,255,255,0.13);

    transition:
        transform 320ms cubic-bezier(.22,1,.36,1),
        background-color 320ms ease,
        border-color 320ms ease,
        box-shadow 320ms ease;
}

/* Inner highlight */

body .frayora-contact-page .fc-options__button::before {
    content: "";

    position: absolute;
    inset: 2px;

    border-radius: inherit;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.09);

    pointer-events: none;
}

body .frayora-contact-page .fc-options__button span {
    position: relative;
    z-index: 1;

    color: #FFFFFF !important;
}

body .frayora-contact-page .fc-options__button svg {
    position: relative;
    z-index: 1;

    flex-shrink: 0;

    width: 19px;
    height: 19px;

    color: #FFFFFF;

    transition: transform 320ms cubic-bezier(.22,1,.36,1);
}

@media (hover: hover) and (pointer: fine) {

    body .frayora-contact-page .fc-options__button:hover {
        background: #D3734E;

        border-color: rgba(243,220,165,0.95);

        transform: translateY(-3px);

        box-shadow:
            0 12px 25px rgba(0,0,0,0.18),
            0 26px 48px rgba(0,0,0,0.14),
            0 0 24px rgba(230,209,142,0.09),
            inset 0 1px 0 rgba(255,255,255,0.16);
    }

    body .frayora-contact-page
    .fc-options__button:hover svg {

        transform: translateX(4px);
    }
}


/* =========================================================
   09 — ENTRANCE ANIMATIONS

   Staggered gentle reveal on page entry.
   Cards remain visible if animation is unavailable.
========================================================= */

@keyframes fcOptionsCardReveal {
    from {
        opacity: 0;
        transform: translateY(22px);
        filter: blur(3px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

body .frayora-contact-page .fc-options__card {
    animation:
        fcOptionsCardReveal 800ms
        cubic-bezier(.22,1,.36,1) both;
}

body .frayora-contact-page
.fc-options__card:nth-child(1) {
    animation-delay: 100ms;
}

body .frayora-contact-page
.fc-options__card:nth-child(2) {
    animation-delay: 200ms;
}

body .frayora-contact-page
.fc-options__card:nth-child(3) {
    animation-delay: 300ms;
}

/* Scroll-driven entrances where supported */

@supports (animation-timeline: view()) {

    body .frayora-contact-page .fc-options__card {
        animation-name: fcOptionsCardReveal;
        animation-duration: 1ms;
        animation-delay: 0ms;
        animation-fill-mode: both;

        animation-timeline: view();
        animation-range: entry 0% cover 20%;
    }
}


/* =========================================================
   10 — SMALLER DESKTOP
   1101px–1350px
========================================================= */

@media (min-width: 1101px) and (max-width: 1350px) {

    body .frayora-contact-page .fc-options__inner {
        padding-left: 60px;
        padding-right: 60px;
    }

    body .frayora-contact-page .fc-options__grid {
        gap: 18px;
    }

    body .frayora-contact-page .fc-options__card {
        min-height: 350px;
        padding: 28px 24px;
    }

    body .frayora-contact-page .fc-options__title {
        font-size: 21px;
    }

    body .frayora-contact-page .fc-options__description {
        font-size: 13px;
    }
}


/* =========================================================
   11 — TABLET
   600px–1100px

   Comfortable sideways card navigation.
   Card widths are intentionally controlled.
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .frayora-contact-page .fc-options {
        padding: 80px 0 90px;
    }

    body .frayora-contact-page .fc-options__inner {
        padding: 0 44px;
    }

    body .frayora-contact-page .fc-options__grid {
        display: flex;
        align-items: stretch;

        gap: 20px;

        overflow-x: auto;
        overflow-y: hidden;

        padding: 10px 4px 28px;

        scroll-snap-type: x mandatory;
        scroll-padding-inline: 4px;
        overscroll-behavior-inline: contain;

        -webkit-overflow-scrolling: touch;
    }

    body .frayora-contact-page .fc-options__card {
        flex: 0 0 325px;

        width: 325px;
        min-height: 360px;

        padding: 30px 26px;

        scroll-snap-align: start;
    }

    body .frayora-contact-page .fc-options__title {
        font-size: 22px;
    }

    body .frayora-contact-page .fc-options__description {
        font-size: 14px;
    }

    body .frayora-contact-page .fc-options__grid::-webkit-scrollbar {
        height: 5px;
    }

    body .frayora-contact-page
    .fc-options__grid::-webkit-scrollbar-track {
        background: #E9DFD3;
        border-radius: 999px;
    }

    body .frayora-contact-page
    .fc-options__grid::-webkit-scrollbar-thumb {
        background: #B69C86;
        border-radius: 999px;
    }
}


/* =========================================================
   12 — MOBILE
   599px and below

   Stack all three cards vertically.
   No clipped content or horizontal overflow.
========================================================= */

@media (max-width: 599px) {

    body .frayora-contact-page .fc-options {
        padding: 65px 0 75px;
    }

    body .frayora-contact-page .fc-options__inner {
        padding: 0 23px;
    }

    body .frayora-contact-page .fc-options__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    body .frayora-contact-page .fc-options__card {
        min-height: 0;
        padding: 27px 24px 26px;
        border-radius: 22px;
    }

    body .frayora-contact-page .fc-options__top {
        margin-bottom: 22px;
    }

    body .frayora-contact-page .fc-options__icon {
        flex-basis: 62px;

        width: 62px;
        height: 62px;
    }

    body .frayora-contact-page .fc-options__icon svg {
        width: 29px;
        height: 29px;
    }


    body .frayora-contact-page .fc-options__title {
        font-size: 21px;
        line-height: 1.35;
    }

    body .frayora-contact-page .fc-options__description {
        font-size: 13px;
        line-height: 1.75;
    }

    body .frayora-contact-page .fc-options__content {
        margin-bottom: 25px;
    }

    body .frayora-contact-page .fc-options__button {
        min-height: 47px;
        padding: 12px 19px;

        font-size: 12px;
        gap: 10px;
    }

    body .frayora-contact-page .fc-options__email {
        font-size: 13px;
    }
}


/* =========================================================
   13 — ACCESSIBILITY
========================================================= */

body .frayora-contact-page .fc-options a:focus-visible {
    outline: 2px solid #C96743;
    outline-offset: 4px;
}

body .frayora-contact-page .fc-options {
    scroll-margin-top: 90px;
}

@media (prefers-reduced-motion: reduce) {

    body .frayora-contact-page .fc-options__card {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }

    body .frayora-contact-page .fc-options__icon,
    body .frayora-contact-page .fc-options__button,
    body .frayora-contact-page .fc-options__button svg {
        transition: none !important;
    }

    body .frayora-contact-page .fc-options__grid {
        scroll-behavior: auto;
    }
}


/* =========================================================
   FRAYORA — CONTACT US
   SECTION 02 — MOBILE BLUR ANIMATION FIX

   Fix stuck blurry cards on mobile Safari
   Preserve clean Frayora design and shadows
   Desktop and tablet remain unchanged
========================================================= */

@media screen and (max-width: 599px) {

    /* Disable problematic scroll-driven animation */

    body .frayora-contact-page .fc-options__card {
        animation: none !important;
        animation-timeline: auto !important;

        opacity: 1 !important;
        filter: none !important;
        transform: none !important;

        visibility: visible !important;
    }

    /* Keep cards crisp while scrolling */

    body .frayora-contact-page .fc-options__card,
    body .frayora-contact-page .fc-options__card * {
        filter: none !important;
    }

}


/* =========================================================
   FRAYORA — CONTACT US
   SECTION 02 — EDITORIAL INTRODUCTION

   Bond-inspired typography
   Ivory editorial background
   Terracotta eyebrow
   Left-aligned to contact cards

   Desktop / Tablet / Mobile
========================================================= */


/* =========================================================
   01 — SHARED INTRODUCTION
========================================================= */

body .frayora-contact-page .fc-options__intro {
    width: 100%;
    max-width: 100%;

    margin: 0 0 46px;
    padding: 0;

    text-align: left;
}


/* EYEBROW */

body .frayora-contact-page .fc-options__eyebrow {
    display: block;

    margin: 0 0 18px;
    padding: 0;

    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;

    letter-spacing: 0.14em;
    text-transform: uppercase;

    color: #C86745;
}


/* HEADING */

body .frayora-contact-page .fc-options__heading {
    max-width: 960px;

    margin: 0;
    padding: 0;

    font-family: "Manrope", sans-serif;
    font-size: clamp(32px, 3.3vw, 50px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.045em;

    color: #252B25;
    text-wrap: balance;
}


/* DESCRIPTION */

body .frayora-contact-page .fc-options__intro-description {
    max-width: 740px;

    margin: 20px 0 0;
    padding: 0;

    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: 0;

    color: #626960;
}


/* =========================================================
   02 — TABLET
   600px–1100px
========================================================= */

@media screen and (min-width: 600px)
and (max-width: 1100px) {

    body .frayora-contact-page .fc-options__intro {
        margin-bottom: 38px;
    }

    body .frayora-contact-page .fc-options__eyebrow {
        font-size: 11px;
        margin-bottom: 15px;
    }

    body .frayora-contact-page .fc-options__heading {
        font-size: clamp(31px, 4.2vw, 44px);
    }

    body .frayora-contact-page .fc-options__intro-description {
        max-width: 690px;
        margin-top: 18px;

        font-size: 15px;
        line-height: 1.7;
    }

}


/* =========================================================
   03 — MOBILE
   599px AND BELOW
========================================================= */

@media screen and (max-width: 599px) {

    body .frayora-contact-page .fc-options__intro {
        margin-bottom: 30px;
    }

    body .frayora-contact-page .fc-options__eyebrow {
        font-size: 11px;
        margin-bottom: 13px;

        letter-spacing: 0.12em;
    }

    body .frayora-contact-page .fc-options__heading {
        max-width: 100%;

        font-size: clamp(29px, 7vw, 36px);
        line-height: 1.16;
    }

    body .frayora-contact-page .fc-options__intro-description {
        max-width: 100%;

        margin-top: 16px;

        font-size: 14px;
        line-height: 1.75;
    }

}


/* =========================================================
   04 — REFINED ENTRANCE ANIMATION

   No blur to avoid previous mobile rendering issues.
========================================================= */

@media (prefers-reduced-motion: no-preference) {

    body .frayora-contact-page .fc-options__intro {
        animation:
            fcOptionsIntroIn 0.8s
            cubic-bezier(.22, 1, .36, 1) both;
    }

}

@keyframes fcOptionsIntroIn {

    from {
        opacity: 0;
        transform: translateY(15px);
    }

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

}

@media (prefers-reduced-motion: reduce) {

    body .frayora-contact-page .fc-options__intro {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

}


/* =========================================================
   FRAYORA — CONTACT US
   SECTION 03 — PROJECT INQUIRY

   Modern SaaS / Bond-inspired editorial design
   Warm ivory section
   Elevated form surface
   Manrope + Inter
   Terracotta CTA
   Responsive desktop / tablet / mobile
========================================================= */

/* FOUNDATION */

body .frayora-contact-page .fc-inquiry,
body .frayora-contact-page .fc-inquiry *,
body .frayora-contact-page .fc-inquiry *::before,
body .frayora-contact-page .fc-inquiry *::after {
    box-sizing: border-box;
}

body .frayora-contact-page .fc-inquiry {
    position: relative;
    isolation: isolate;

    width: 100%;
    padding: 110px 0 120px;

    background: #F5EDE4;
    color: #232620;

    scroll-margin-top: 90px;
}

/* INNER LAYOUT */

body .frayora-contact-page .fc-inquiry__inner {
    display: grid;

    grid-template-columns:
        minmax(0, 0.85fr)
        minmax(0, 1.35fr);

    align-items: center;
    gap: clamp(50px, 6vw, 105px);

    width: 100%;
    max-width: 1600px;

    margin: 0 auto;
    padding: 0 80px;
}

/* LEFT INTRO */

body .frayora-contact-page .fc-inquiry__intro {
    width: 100%;
    max-width: 430px;
    min-width: 0;

    margin: 0;
    padding: 0;
}

body .frayora-contact-page .fc-inquiry__eyebrow {
    margin: 0 0 25px;

    font-family: "Inter", sans-serif !important;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.5;

    letter-spacing: 0.13em;
    text-transform: uppercase;

    color: #E99572;
}

body .frayora-contact-page .fc-inquiry__title {
    max-width: 430px;

    margin: 0 0 30px;
    padding: 0;

    font-family: "Manrope", sans-serif !important;
    font-size: clamp(39px, 3.55vw, 57px);
    font-weight: 600;

    line-height: 1.13;
    letter-spacing: -0.055em;

    color: #22251F;

    text-wrap: balance;
}

/* DESCRIPTION — NO DECORATIVE LINE */

body .frayora-contact-page .fc-inquiry__copy {
    max-width: 390px;
    margin: 0;
    padding: 0;
    border: none;
}

body .frayora-contact-page .fc-inquiry__copy p {
    margin: 0 0 13px;

    font-family: "Inter", sans-serif !important;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;

    color: #5D625B;
}

body .frayora-contact-page .fc-inquiry__copy p:last-child {
    margin-bottom: 0;
}

/* REMOVE ACCIDENTAL THEME DECORATIONS */

body .frayora-contact-page .fc-inquiry__intro::before,
body .frayora-contact-page .fc-inquiry__intro::after,
body .frayora-contact-page .fc-inquiry__copy::before,
body .frayora-contact-page .fc-inquiry__copy::after {
    content: none !important;
    display: none !important;
}

/* FORM SHELL */

body .frayora-contact-page .fc-inquiry__form-shell {
    position: relative;
    isolation: isolate;

    width: 100%;
    min-width: 0;

    padding: clamp(27px, 3vw, 44px);

    border-radius: 24px;
    border: 1px solid rgba(232, 219, 204, 0.86);

    background: #FFFCF8;

    box-shadow:
        0 12px 30px rgba(69, 54, 40, 0.045),
        0 30px 75px rgba(69, 54, 40, 0.075),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

body .frayora-contact-page .fc-inquiry__form-shell::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;

    background: rgba(255,255,255,0.96);
    pointer-events: none;
}

/* FORM GRID */

body .frayora-contact-page .fc-inquiry__form {
    margin: 0;
}

body .frayora-contact-page .fc-inquiry__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 23px 20px;
}

body .frayora-contact-page .fc-inquiry__field {
    display: flex;
    flex-direction: column;

    min-width: 0;
    gap: 9px;
}

body .frayora-contact-page .fc-inquiry__field--full {
    grid-column: 1 / -1;
}

/* LABELS */

body .frayora-contact-page .fc-inquiry__field label {
    display: block;

    margin: 0;

    font-family: "Inter", sans-serif !important;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.5;

    color: #303831;
}

body .frayora-contact-page .fc-inquiry__required {
    color: #C96743;
}

/* INPUTS, TEXTAREAS, SELECTS */

body .frayora-contact-page .fc-inquiry__field input,
body .frayora-contact-page .fc-inquiry__field select,
body .frayora-contact-page .fc-inquiry__field textarea {
    display: block;

    width: 100%;
    min-width: 0;

    margin: 0;

    padding: 14px 16px;

    border: 1px solid #DFDCD6;
    border-radius: 9px;

    background: #FFFEFC;

    color: #273128;

    font-family: "Inter", sans-serif !important;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.55;

    box-shadow:
        inset 0 1px 2px rgba(49, 40, 30, 0.025);

    transition:
        border-color 250ms ease,
        background-color 250ms ease,
        box-shadow 250ms ease;
}

body .frayora-contact-page .fc-inquiry__field input,
body .frayora-contact-page .fc-inquiry__field select {
    min-height: 49px;
}

body .frayora-contact-page .fc-inquiry__field textarea {
    min-height: 105px;
    resize: vertical;
}

body .frayora-contact-page .fc-inquiry__field input::placeholder,
body .frayora-contact-page .fc-inquiry__field textarea::placeholder {
    color: #979994;
    opacity: 1;
}

body .frayora-contact-page .fc-inquiry__field select {
    cursor: pointer;
    padding-right: 35px;
}

body .frayora-contact-page .fc-inquiry__field input:hover,
body .frayora-contact-page .fc-inquiry__field select:hover,
body .frayora-contact-page .fc-inquiry__field textarea:hover {
    border-color: #C1C8B9;
}

body .frayora-contact-page .fc-inquiry__field input:focus,
body .frayora-contact-page .fc-inquiry__field select:focus,
body .frayora-contact-page .fc-inquiry__field textarea:focus {
    outline: none;

    border-color: #72856C;

    background: #FFFFFF;

    box-shadow:
        0 0 0 3px rgba(110, 133, 98, 0.12),
        0 5px 16px rgba(62, 78, 57, 0.045);
}

/* TERRACOTTA SUBMIT CTA */

body .frayora-contact-page .fc-inquiry__submit {
    position: relative;
    isolation: isolate;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 55px;

    margin: 27px 0 0;
    padding: 15px 25px;

    gap: 14px;

    border: 1px solid rgba(230, 210, 147, 0.78);
    border-radius: 999px;

    background: #C96743;
    color: #FFFFFF;

    font-family: "Inter", sans-serif !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;

    cursor: pointer;

    box-shadow:
        0 8px 19px rgba(0,0,0,0.13),
        0 20px 38px rgba(0,0,0,0.10),
        0 0 19px rgba(223,198,127,0.06),
        inset 0 1px 0 rgba(255,255,255,0.13);

    transition:
        transform 320ms cubic-bezier(.22,1,.36,1),
        background-color 320ms ease,
        border-color 320ms ease,
        box-shadow 320ms ease;
}

body .frayora-contact-page .fc-inquiry__submit::before {
    content: "";

    position: absolute;
    inset: 2px;

    border-radius: inherit;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.09);

    pointer-events: none;
}

body .frayora-contact-page .fc-inquiry__submit svg {
    width: 19px;
    height: 19px;
    flex-shrink: 0;

    transition: transform 300ms ease;
}

@media (hover: hover) and (pointer: fine) {

    body .frayora-contact-page .fc-inquiry__submit:hover {
        transform: translateY(-3px);

        background: #D3734E;

        border-color: rgba(243,220,165,0.95);

        box-shadow:
            0 12px 25px rgba(0,0,0,0.17),
            0 26px 48px rgba(0,0,0,0.13),
            0 0 24px rgba(230,209,142,0.09),
            inset 0 1px 0 rgba(255,255,255,0.16);
    }

    body .frayora-contact-page .fc-inquiry__submit:hover svg {
        transform: translateX(5px);
    }
}

body .frayora-contact-page .fc-inquiry__submit:focus-visible {
    outline: 3px solid #536A50;
    outline-offset: 4px;
}

/* PRIVACY NOTICE */

body .frayora-contact-page .fc-inquiry__privacy {
    display: flex;
    align-items: center;
    justify-content: space-between;

    flex-wrap: wrap;

    gap: 10px 18px;

    margin-top: 20px;
}

body .frayora-contact-page .fc-inquiry__privacy p {
    flex: 1 1 250px;

    margin: 0;

    font-family: "Inter", sans-serif !important;
    font-size: 11px;
    line-height: 1.7;

    color: #6D7069;
}

body .frayora-contact-page .fc-inquiry__privacy a {
    font-family: "Inter", sans-serif !important;
    font-size: 11px;
    font-weight: 600;

    color: #B65D40;

    text-decoration: underline;
    text-underline-offset: 3px;
}

body .frayora-contact-page .fc-inquiry__privacy a:hover {
    color: #823E2A;
}

/* FORM STATUS MESSAGES */

body .frayora-contact-page .fc-inquiry__notice {
    margin-bottom: 24px;
    padding: 15px 18px;

    border-radius: 10px;

    font-family: "Inter", sans-serif;
    font-size: 13px;
    line-height: 1.6;
}

body .frayora-contact-page .fc-inquiry__notice--success {
    border: 1px solid #B6C9AF;
    background: #EFF5EC;
    color: #364D33;
}

body .frayora-contact-page .fc-inquiry__notice--error {
    border: 1px solid #E0B2A1;
    background: #FCF1EB;
    color: #8C402B;
}

/* HONEYPOT — HIDDEN FROM HUMAN VISITORS */

body .frayora-contact-page .fc-inquiry__honeypot {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;

    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

/* SOFT ENTRANCE ANIMATIONS */

@keyframes fcInquiryReveal {
    from {
        opacity: 0;
        transform: translateY(22px);
        filter: blur(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@supports (animation-timeline: view()) {

    body .frayora-contact-page .fc-inquiry__intro,
    body .frayora-contact-page .fc-inquiry__form-shell {
        animation: fcInquiryReveal 1ms both;
        animation-timeline: view();
        animation-range: entry 0% cover 20%;
    }

    body .frayora-contact-page .fc-inquiry__form-shell {
        animation-range: entry 0% cover 24%;
    }
}

/* SMALLER DESKTOP */

@media (min-width: 1101px) and (max-width: 1350px) {

    body .frayora-contact-page .fc-inquiry__inner {
        padding: 0 60px;
        gap: 52px;

        grid-template-columns:
            minmax(0, 0.8fr)
            minmax(0, 1.4fr);
    }

    body .frayora-contact-page .fc-inquiry__title {
        font-size: clamp(38px, 3.6vw, 49px);
    }

    body .frayora-contact-page .fc-inquiry__form-shell {
        padding: 29px;
    }
}

/* TABLET */

@media (min-width: 600px) and (max-width: 1100px) {

    body .frayora-contact-page .fc-inquiry {
        padding: 85px 0 95px;
    }

    body .frayora-contact-page .fc-inquiry__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;

        max-width: 800px;
        padding: 0 44px;
    }

    body .frayora-contact-page .fc-inquiry__intro {
        max-width: 650px;
    }

    body .frayora-contact-page .fc-inquiry__title {
        max-width: 600px;

        margin-bottom: 21px;

        font-size: clamp(39px, 5.4vw, 55px);
    }

    body .frayora-contact-page .fc-inquiry__copy {
        max-width: 600px;
    }

    body .frayora-contact-page .fc-inquiry__form-shell {
        padding: 36px;
    }
}

/* MOBILE */

@media (max-width: 599px) {

    body .frayora-contact-page .fc-inquiry {
        padding: 68px 0 78px;
    }

    body .frayora-contact-page .fc-inquiry__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 31px;

        padding: 0 20px;
    }

    body .frayora-contact-page .fc-inquiry__intro {
        max-width: 100%;
    }

    body .frayora-contact-page .fc-inquiry__eyebrow {
        margin-bottom: 16px;
        font-size: 11px;
    }

    body .frayora-contact-page .fc-inquiry__title {
        margin-bottom: 22px;

        font-size: clamp(34px, 8.6vw, 45px);
        line-height: 1.14;
    }

    body .frayora-contact-page .fc-inquiry__copy p {
        margin-bottom: 10px;

        font-size: 14px;
        line-height: 1.75;
    }

    body .frayora-contact-page .fc-inquiry__form-shell {
        padding: 25px 19px;

        border-radius: 20px;
    }

    body .frayora-contact-page .fc-inquiry__fields {
        grid-template-columns: minmax(0, 1fr);
        gap: 19px;
    }

    body .frayora-contact-page .fc-inquiry__field--full {
        grid-column: auto;
    }

    body .frayora-contact-page .fc-inquiry__field label {
        font-size: 12px;
    }

    body .frayora-contact-page .fc-inquiry__field input,
    body .frayora-contact-page .fc-inquiry__field select,
    body .frayora-contact-page .fc-inquiry__field textarea {
        font-size: 13px;
        padding: 13px 14px;
    }

    body .frayora-contact-page .fc-inquiry__field input,
    body .frayora-contact-page .fc-inquiry__field select {
        min-height: 48px;
    }

    body .frayora-contact-page .fc-inquiry__submit {
        min-height: 51px;

        margin-top: 24px;

        font-size: 13px;
    }

    body .frayora-contact-page .fc-inquiry__privacy {
        justify-content: center;
        text-align: center;
    }

    body .frayora-contact-page .fc-inquiry__privacy p {
        flex: 1 1 100%;
        text-align: center;
    }
}

/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {

    body .frayora-contact-page .fc-inquiry__intro,
    body .frayora-contact-page .fc-inquiry__form-shell {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
        filter: none !important;
    }

    body .frayora-contact-page .fc-inquiry__submit,
    body .frayora-contact-page .fc-inquiry__submit svg,
    body .frayora-contact-page .fc-inquiry__field input,
    body .frayora-contact-page .fc-inquiry__field select,
    body .frayora-contact-page .fc-inquiry__field textarea {
        transition: none !important;
    }
}


/* =========================================================
   FRAYORA — CONTACT US
   SECTION 03 — DESKTOP LAYOUT OVERRIDE

   Move intro closer to form
   Align intro nearer the top of the form
   Reduce form width
   Add fine-line circular decor at bottom left
========================================================= */

@media (min-width: 1101px) {

    body .frayora-contact-page .fc-inquiry {
        position: relative;
        overflow: hidden;
    }

    /* More balanced, narrower desktop layout */

    body .frayora-contact-page .fc-inquiry__inner {
        grid-template-columns:
            minmax(0, 390px)
            minmax(0, 750px) !important;

        justify-content: center !important;
        align-items: start !important;

        gap: clamp(35px, 4vw, 65px) !important;

        max-width: 1350px !important;
        padding: 0 55px !important;
    }

    /* Move introduction higher */

    body .frayora-contact-page .fc-inquiry__intro {
        position: relative;
        z-index: 2;

        align-self: start !important;
        justify-self: end !important;

        max-width: 390px !important;

        padding-top: 45px !important;
        margin: 0 !important;
    }

    /* Slightly refined heading width */

    body .frayora-contact-page .fc-inquiry__title {
        max-width: 390px !important;
    }

    /* Limit form width */

    body .frayora-contact-page .fc-inquiry__form-shell {
        width: 100% !important;
        max-width: 750px !important;

        justify-self: start !important;
    }

    /* Delicate editorial circular decoration */

    body .frayora-contact-page .fc-inquiry::before,
    body .frayora-contact-page .fc-inquiry::after {
        content: "";
        position: absolute;

        display: block;

        border-radius: 50%;
        pointer-events: none;

        z-index: 0;
    }

    body .frayora-contact-page .fc-inquiry::before {
        width: 540px;
        height: 540px;

        left: -275px;
        bottom: -325px;

        border: 1px solid rgba(196, 113, 77, 0.24);
    }

    body .frayora-contact-page .fc-inquiry::after {
        width: 390px;
        height: 390px;

        left: -200px;
        bottom: -250px;

        border: 1px solid rgba(196, 113, 77, 0.13);
    }
}



/* =========================================================
   FRAYORA — CONTACT US
   SECTION 03 — DESKTOP ALIGNMENT CORRECTION

   Match header / previous section alignment
   Keep form approximately in its current position
   Preserve vertical alignment and decorations
========================================================= */

@media screen and (min-width: 1101px) {

    body .frayora-contact-page .fc-inquiry__inner {
        width: 100% !important;
        max-width: 1600px !important;

        margin: 0 auto !important;
        padding-left: 65px !important;
        padding-right: 65px !important;

        display: grid !important;
        grid-template-columns:
            minmax(0, 0.7fr)
            minmax(0, 1fr) !important;

        column-gap: clamp(40px, 4vw, 65px) !important;

        justify-content: start !important;
        align-items: start !important;
    }

    body .frayora-contact-page .fc-inquiry__intro {
        position: relative !important;

        left: auto !important;
        right: auto !important;
        transform: none !important;

        justify-self: start !important;
        align-self: start !important;

        width: 100% !important;
        max-width: 430px !important;

        margin: 0 !important;
        padding: 45px 0 0 !important;
    }

    body .frayora-contact-page .fc-inquiry__form-shell {
        width: 100% !important;
        max-width: 750px !important;

        justify-self: start !important;
    }
}




/* =========================================================
   FRAYORA — CONTACT US
   SECTION 04 — BOOK AN INTRO CALL

   Modern SaaS / Bond-inspired editorial design
   Official Calendly embed integration
   Warm ivory and olive palette
   Restrained shadows and soft luminosity
   Terracotta CTA
   Responsive desktop / tablet / mobile
========================================================= */


/* =========================================================
   01 — FOUNDATION
========================================================= */

body .frayora-contact-page .fc-booking,
body .frayora-contact-page .fc-booking *,
body .frayora-contact-page .fc-booking *::before,
body .frayora-contact-page .fc-booking *::after {
    box-sizing: border-box;
}

body .frayora-contact-page .fc-booking {
    position: relative;
    isolation: isolate;

    width: 100%;

    padding: 110px 0 120px;

    overflow: hidden;

    background: #F8F3EB;

    color: #22251F;

    scroll-margin-top: 90px;
}


/* =========================================================
   02 — CONTAINER
========================================================= */

body .frayora-contact-page .fc-booking__inner {
    display: grid;

    grid-template-columns:
        minmax(0, 0.86fr)
        minmax(0, 1.14fr);

    align-items: center;

    gap: clamp(50px, 6vw, 110px);

    width: 100%;
    max-width: 1600px;

    margin: 0 auto;
    padding: 0 80px;
}


/* =========================================================
   03 — LEFT INTRODUCTION
========================================================= */

body .frayora-contact-page .fc-booking__intro {
    width: 100%;
    max-width: 510px;
    min-width: 0;

    margin: 0;
    padding: 0;

    text-align: left;
}


/* EYEBROW */

body .frayora-contact-page .fc-booking__eyebrow {
    margin: 0 0 22px;

    font-family: "Inter", sans-serif !important;

    font-size: 12px;
    font-weight: 650;
    line-height: 1.5;

    letter-spacing: 0.13em;
    text-transform: uppercase;

    color: #E99572;
}


/* HEADING */

body .frayora-contact-page .fc-booking__title {
    max-width: 510px;

    margin: 0;
    padding: 0;

    font-family: "Manrope", sans-serif !important;

    font-size: clamp(40px, 3.7vw, 58px);
    font-weight: 600;

    line-height: 1.12;
    letter-spacing: -0.055em;

    color: #22251F;

    text-align: left;
    text-wrap: balance;
}


/* DESCRIPTION */

body .frayora-contact-page .fc-booking__description {
    width: 100%;
    max-width: 440px;

    margin: 24px 0 0;

    font-family: "Inter", sans-serif !important;

    font-size: 15px;
    font-weight: 400;

    line-height: 1.8;

    color: #62655E;

    text-align: left;
}


/* =========================================================
   04 — TERRACOTTA CTA
========================================================= */

body .frayora-contact-page .fc-booking__button {
    position: relative;
    isolation: isolate;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: fit-content;
    max-width: 100%;
    min-height: 52px;

    gap: 15px;

    margin: 30px 0 0;
    padding: 13px 25px;

    border: 1px solid rgba(230,210,147,0.78);
    border-radius: 999px;

    background: #C96743;

    color: #FFFFFF !important;

    font-family: "Inter", sans-serif !important;
    font-size: 14px;
    font-weight: 600;

    line-height: 1.4;

    text-decoration: none !important;

    box-shadow:
        0 8px 19px rgba(0,0,0,0.13),
        0 20px 38px rgba(0,0,0,0.10),
        0 0 19px rgba(223,198,127,0.06),
        inset 0 1px 0 rgba(255,255,255,0.13);

    transition:
        transform 320ms cubic-bezier(.22,1,.36,1),
        background-color 320ms ease,
        border-color 320ms ease,
        box-shadow 320ms ease;
}


/* Delicate inner reflection */

body .frayora-contact-page .fc-booking__button::before {
    content: "";

    position: absolute;
    inset: 2px;

    border-radius: inherit;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.1);

    pointer-events: none;
}

body .frayora-contact-page .fc-booking__button span,
body .frayora-contact-page .fc-booking__button svg {
    position: relative;
    z-index: 1;
}

body .frayora-contact-page .fc-booking__button svg {
    width: 20px;
    height: 20px;

    flex-shrink: 0;

    transition:
        transform 320ms cubic-bezier(.22,1,.36,1);
}

@media (hover: hover) and (pointer: fine) {

    body .frayora-contact-page .fc-booking__button:hover {
        transform: translateY(-3px);

        background: #D3734E;

        border-color: rgba(243,220,165,0.95);

        box-shadow:
            0 12px 25px rgba(0,0,0,0.18),
            0 26px 48px rgba(0,0,0,0.14),
            0 0 24px rgba(230,209,142,0.09),
            inset 0 1px 0 rgba(255,255,255,0.16);
    }

    body .frayora-contact-page
    .fc-booking__button:hover svg {
        transform: translateX(5px);
    }
}

body .frayora-contact-page .fc-booking__button:focus-visible {
    outline: 3px solid #536A50;
    outline-offset: 4px;
}


/* =========================================================
   05 — ELEVATED CALENDLY PANEL
========================================================= */

body .frayora-contact-page .fc-booking__panel {
    position: relative;
    isolation: isolate;

    width: 100%;
    min-width: 0;

    overflow: hidden;

    border: 1px solid rgba(224,211,197,0.74);
    border-radius: 25px;

    background: #FFFCF8;

    box-shadow:
        0 12px 30px rgba(69,54,40,0.045),
        0 28px 65px rgba(69,54,40,0.075),
        0 50px 90px rgba(69,54,40,0.045),
        inset 0 1px 0 rgba(255,255,255,0.96);

    transition:
        transform 350ms cubic-bezier(.22,1,.36,1),
        box-shadow 350ms ease;
}


/* A fine reflective top edge */

body .frayora-contact-page .fc-booking__panel::before {
    content: "";

    position: absolute;
    inset: 0 0 auto;

    height: 1px;

    z-index: 1;

    background: rgba(255,255,255,0.94);
    pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {

    body .frayora-contact-page .fc-booking__panel:hover {
        transform: translateY(-4px);

        box-shadow:
            0 15px 35px rgba(69,54,40,0.055),
            0 35px 78px rgba(69,54,40,0.09),
            0 55px 100px rgba(69,54,40,0.05);
    }
}


/* =========================================================
   06 — CALENDLY WIDGET

   Calendly owns the contents inside its iframe.
   Our CSS styles only the outside container.
========================================================= */

body .frayora-contact-page .fc-booking__calendar {
    width: 100%;
    min-width: 0;

    padding: 12px;

    background: #FFFCF8;
}

body .frayora-contact-page .fc-booking__widget {
    width: 100%;
    min-width: 320px;

    height: 650px;

    overflow: hidden;
    border: 0;
}


/* =========================================================
   07 — SETUP PLACEHOLDER
========================================================= */

body .frayora-contact-page .fc-booking__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 450px;

    padding: 55px 40px;

    gap: 24px;

    text-align: center;
}

body .frayora-contact-page .fc-booking__placeholder-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 82px;
    height: 82px;

    border: 1px solid rgba(99,124,90,0.2);
    border-radius: 50%;

    background: #E5EBDD;

    color: #52634C;

    box-shadow:
        0 9px 20px rgba(62,78,57,0.07),
        inset 0 2px 3px rgba(255,255,255,0.95);
}

body .frayora-contact-page .fc-booking__placeholder-icon svg {
    width: 37px;
    height: 37px;
}

body .frayora-contact-page .fc-booking__placeholder p {
    max-width: 310px;

    margin: 0;

    font-family: "Inter", sans-serif !important;
    font-size: 14px;
    line-height: 1.75;

    color: #697168;
}


/* =========================================================
   08 — ENTRANCE ANIMATIONS
========================================================= */

@keyframes fcBookingReveal {
    from {
        opacity: 0;
        transform: translateY(22px);
        filter: blur(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@supports (animation-timeline: view()) {

    body .frayora-contact-page .fc-booking__intro,
    body .frayora-contact-page .fc-booking__panel {
        animation: fcBookingReveal 1ms both;

        animation-timeline: view();
        animation-range: entry 0% cover 20%;
    }

    body .frayora-contact-page .fc-booking__panel {
        animation-range: entry 0% cover 16%;
    }
}


/* =========================================================
   09 — SMALL DESKTOP
========================================================= */

@media (min-width: 1101px) and (max-width: 1350px) {

    body .frayora-contact-page .fc-booking__inner {
        gap: 50px;

        padding-left: 60px;
        padding-right: 60px;
    }

    body .frayora-contact-page .fc-booking__title {
        font-size: clamp(39px,3.8vw,51px);
    }

    body .frayora-contact-page .fc-booking__description {
        font-size: 14px;
    }
}


/* =========================================================
   10 — TABLET
   600px–1100px
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .frayora-contact-page .fc-booking {
        padding: 85px 0 95px;
    }

    body .frayora-contact-page .fc-booking__inner {
        grid-template-columns: minmax(0,1fr);

        max-width: 800px;

        gap: 40px;
        padding: 0 44px;
    }

    body .frayora-contact-page .fc-booking__intro {
        max-width: 660px;
    }

    body .frayora-contact-page .fc-booking__title {
        max-width: 650px;

        font-size: clamp(38px,5vw,54px);
    }

    body .frayora-contact-page .fc-booking__description {
        max-width: 570px;
    }

    body .frayora-contact-page .fc-booking__panel {
        border-radius: 22px;
    }

    body .frayora-contact-page .fc-booking__widget {
        height: 680px;
    }
}


/* =========================================================
   11 — MOBILE
   599px AND BELOW
========================================================= */

@media (max-width: 599px) {

    body .frayora-contact-page .fc-booking {
        padding: 70px 0 80px;
    }

    body .frayora-contact-page .fc-booking__inner {
        grid-template-columns: minmax(0,1fr);

        gap: 32px;

        padding: 0 20px;
    }

    body .frayora-contact-page .fc-booking__intro {
        max-width: 100%;
    }

    body .frayora-contact-page .fc-booking__eyebrow {
        margin-bottom: 17px;

        font-size: 11px;
    }

    body .frayora-contact-page .fc-booking__title {
        font-size: clamp(34px,8.6vw,45px);

        line-height: 1.14;
    }

    body .frayora-contact-page .fc-booking__description {
        margin-top: 20px;

        font-size: 14px;
        line-height: 1.75;
    }

    body .frayora-contact-page .fc-booking__button {
        min-height: 49px;

        margin-top: 25px;
        padding: 12px 21px;

        font-size: 13px;
    }

    body .frayora-contact-page .fc-booking__panel {
        border-radius: 19px;
    }

    body .frayora-contact-page .fc-booking__calendar {
        padding: 0;
    }

    body .frayora-contact-page .fc-booking__widget {
        min-width: 320px;

        width: 100%;
        height: 720px;
    }

    body .frayora-contact-page .fc-booking__placeholder {
        min-height: 320px;
        padding: 40px 22px;
    }
}


/* =========================================================
   12 — EXTRA SMALL MOBILE
========================================================= */

@media (max-width: 359px) {

    body .frayora-contact-page .fc-booking__inner {
        padding: 0 12px;
    }

    body .frayora-contact-page .fc-booking__panel {
        border-radius: 15px;
    }

    body .frayora-contact-page .fc-booking__widget {
        min-width: 320px;
    }
}


/* =========================================================
   13 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body .frayora-contact-page .fc-booking__intro,
    body .frayora-contact-page .fc-booking__panel {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
        filter: none !important;
    }

    body .frayora-contact-page .fc-booking__button,
    body .frayora-contact-page .fc-booking__button svg,
    body .frayora-contact-page .fc-booking__panel {
        transition: none !important;
    }
}


/* =========================================================
   FRAYORA — CONTACT US
   SECTION 04 — CALENDLY VISIBILITY FIX

   Prevent collapsed scheduling widget
   Preserve elevated Frayora panel styling
========================================================= */

/* Desktop */

body .frayora-contact-page .fc-booking__panel {
    display: block !important;

    height: auto !important;
    min-height: 700px !important;

    overflow: hidden !important;
}

body .frayora-contact-page .fc-booking__calendar {
    display: block !important;

    width: 100% !important;
    min-height: 700px !important;

    padding: 10px !important;
}

body .frayora-contact-page .fc-booking__widget {
    display: block !important;

    width: 100% !important;
    height: 700px !important;
    min-height: 700px !important;

    opacity: 1 !important;
    visibility: visible !important;
}

body .frayora-contact-page .fc-booking__widget iframe {
    display: block !important;

    width: 100% !important;
    height: 700px !important;
    min-height: 700px !important;

    border: none !important;
}

/* Tablet */

@media (min-width: 600px) and (max-width: 1100px) {

    body .frayora-contact-page .fc-booking__panel,
    body .frayora-contact-page .fc-booking__calendar,
    body .frayora-contact-page .fc-booking__widget,
    body .frayora-contact-page .fc-booking__widget iframe {
        min-height: 720px !important;
    }

    body .frayora-contact-page .fc-booking__widget,
    body .frayora-contact-page .fc-booking__widget iframe {
        height: 720px !important;
    }
}

/* Mobile */

@media (max-width: 599px) {

    body .frayora-contact-page .fc-booking__panel,
    body .frayora-contact-page .fc-booking__calendar,
    body .frayora-contact-page .fc-booking__widget,
    body .frayora-contact-page .fc-booking__widget iframe {
        min-height: 760px !important;
    }

    body .frayora-contact-page .fc-booking__widget,
    body .frayora-contact-page .fc-booking__widget iframe {
        height: 760px !important;
    }

    body .frayora-contact-page .fc-booking__calendar {
        padding: 0 !important;
    }
}



/* =========================================================
   FRAYORA — OUR WORK
   SECTION 01 — ABOUT FRAYORA HERO DESIGN

   Reuses the existing About Frayora styles.

   EXACT SAME:
   - Hero proportions
   - Overlay and luminosity
   - Typography and alignment
   - Bottom curvature
   - Shadows
   - Entrance animations
   - Responsive styling

   ONLY DIFFERENCE:
   - Background images
========================================================= */


/* =========================================================
   DESKTOP — 1101px AND ABOVE
========================================================= */

@media screen and (min-width: 1101px) {

    body .frayora-work-page
    .about-us-page .about-hero__media {

        background-image:
            url("../images/Our Work/hero.png");

    }

}


/* =========================================================
   TABLET — 600px TO 1100px
========================================================= */

@media screen and (min-width: 600px)
and (max-width: 1100px) {

    body .frayora-work-page
    .about-us-page .about-hero__media {

        background-image:
            url("../images/Our Work/herotablet.png");

    }

}


/* =========================================================
   MOBILE — 599px AND BELOW
========================================================= */

@media screen and (max-width: 599px) {

    body .frayora-work-page
    .about-us-page .about-hero__media {

        background-image:
            url("../images/Our Work/heromobile.png");

    }

}


/* =========================================================
   FRAYORA — OUR WORK
   SECTION 01 — IMAGE POSITION + MOBILE TITLE FIX

   Desktop:
   - Lower background image to reveal mugs
   - Preserve existing hero dimensions

   Mobile:
   - Center heading vertically
   - Remove extra downward title offset

   All other About Frayora styling remains unchanged.
========================================================= */


/* =========================================================
   01 — DESKTOP PHOTO POSITION
   1101px AND ABOVE
========================================================= */

@media screen and (min-width: 1101px) {

    body .frayora-work-page
    .about-us-page .about-hero__media {

        background-position: center top !important;

    }

}


/* =========================================================
   02 — MOBILE TITLE POSITION
   599px AND BELOW
========================================================= */

@media screen and (max-width: 599px) {

    /* Center content within the existing hero */

    body .frayora-work-page
    .about-us-page .about-hero__inner {

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        padding: 24px !important;

    }

    /* Remove About Us mobile 65px downward offset */

    body .frayora-work-page
    .about-us-page .about-hero__title {

        animation:
            fwWorkMobileCenteredTitle 1.05s
            cubic-bezier(.22, 1, .36, 1)
            0.25s both !important;

    }

    @keyframes fwWorkMobileCenteredTitle {

        from {
            opacity: 0;
            transform: translateY(20px);
            filter: blur(3px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
            filter: blur(0);
        }

    }

}


/* =========================================================
   03 — REDUCED MOTION
========================================================= */

@media screen and (max-width: 599px)
and (prefers-reduced-motion: reduce) {

    body .frayora-work-page
    .about-us-page .about-hero__title {

        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
        filter: none !important;

    }

}


/* =====================================================
   FRAYORA — OUR WORK
   MOBILE HERO SPACING REFINEMENT
===================================================== */

@media screen and (max-width: 599px) {

    body .frayora-work-page
    .about-us-page .about-hero {
        height: 390px;
        min-height: 390px;
    }

    body .frayora-work-page
    .about-us-page .about-hero__inner {
        padding: 24px;
        align-items: center;
        justify-content: center;
    }

    body .frayora-work-page
    .about-us-page .about-hero__title {
        animation: fwWorkMobileCenteredTitle 1.05s
            cubic-bezier(.22, 1, .36, 1)
            0.25s both;
    }

}

@media screen and (max-width: 390px) {

    body .frayora-work-page
    .about-us-page .about-hero {
        height: 380px;
        min-height: 380px;
    }

}

@media (prefers-reduced-motion: reduce) {

    body .frayora-work-page
    .about-us-page .about-hero__title {
        transform: none !important;
    }

}



/* =====================================================
   FRAYORA — OUR WORK HERO
   LAST-LINE WORD SPACING

   Creates clearer spacing between
   "work" and "better" without affecting
   the About Frayora hero.
===================================================== */

body .frayora-work-page .fw-hero__last-line {
    word-spacing: 0.14em;
}


/* =========================================================
   FRAYORA — OUR WORK
   SECTION 02 — PORTFOLIO EXPLORER

   Bond-inspired editorial portfolio

   Desktop: 4 columns
   Tablet:  2 columns
   Mobile:  1 column

   Ivory editorial background
   Deep olive selected filters
   Terracotta hover accents
   Dimensional media shadows
   Subtle entrance animations
   Reduced-motion safe
========================================================= */


/* =========================================================
   01 — SECTION FOUNDATION
========================================================= */

body .frayora-work-page .fw-portfolio,
body .frayora-work-page .fw-portfolio *,
body .frayora-work-page .fw-portfolio *::before,
body .frayora-work-page .fw-portfolio *::after {
    box-sizing: border-box;
}

body .frayora-work-page .fw-portfolio {
    position: relative;
    isolation: isolate;

    width: 100%;
    margin: 0;
    padding: 105px 0 120px;

    overflow: hidden;

    background: #F8F3EB;
    color: #252923;
}

body .frayora-work-page .fw-portfolio__inner {
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: 1600px;

    margin: 0 auto;
    padding: 0 80px;
}


/* =========================================================
   02 — SECTION INTRO
========================================================= */

body .frayora-work-page .fw-portfolio__intro {
    max-width: 1100px;
    margin: 0 0 32px;
}

body .frayora-work-page .fw-portfolio__eyebrow {
    display: block;

    margin: 0 0 17px;

    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.12em;

    text-transform: uppercase;
    color: #B95E3D;
}

body .frayora-work-page .fw-portfolio__title {
    max-width: 1050px;
    margin: 0;

    font-family: "Manrope", sans-serif;
    font-size: clamp(36px, 3.4vw, 54px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.05em;

    color: #252923;
    text-wrap: balance;
}


/* =========================================================
   03 — FILTER BUTTONS

   Soft ivory inactive filters
   Deep olive active filter
   Refined interaction depth
========================================================= */

body .frayora-work-page .fw-portfolio__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 10px;

    margin: 0 0 42px;
    padding: 0;
}

body .frayora-work-page .fw-portfolio__filter {
    appearance: none;
    -webkit-appearance: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;
    margin: 0;
    padding: 10px 20px;

    border: 1px solid rgba(48, 59, 50, 0.17);
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.48);
    color: #414840;

    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    white-space: nowrap;

    cursor: pointer;

    box-shadow:
        0 2px 5px rgba(42, 39, 30, 0.025),
        inset 0 1px 0 rgba(255, 255, 255, 0.75);

    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

@media (hover: hover) {

    body .frayora-work-page .fw-portfolio__filter:hover {
        transform: translateY(-2px);

        border-color: rgba(48, 59, 50, 0.32);

        box-shadow:
            0 7px 17px rgba(42, 39, 30, 0.07);
    }

}

body .frayora-work-page .fw-portfolio__filter.is-active {
    background: #303B32;
    border-color: rgba(225, 209, 167, 0.4);
    color: #F8F3EB;

    box-shadow:
        0 9px 21px rgba(35, 47, 38, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.11);
}

body .frayora-work-page .fw-portfolio__filter:focus-visible,
body .frayora-work-page .fw-project__link:focus-visible {
    outline: 2px solid #C86745;
    outline-offset: 4px;
}


/* =========================================================
   04 — PORTFOLIO GRID
========================================================= */

body .frayora-work-page .fw-portfolio__grid {
    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    column-gap: 23px;
    row-gap: 52px;

    align-items: stretch;
}

body .frayora-work-page .fw-project {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;
    margin: 0;

    border: 0;
    background: transparent;

    animation:
        fwPortfolioEnter 0.65s
        cubic-bezier(.22, 1, .36, 1) both;
}

/* Hidden projects must not occupy grid space */

body .frayora-work-page .fw-project[hidden] {
    display: none !important;
}


/* =========================================================
   05 — PROJECT IMAGES

   Soft photographic depth
   Refined border and gentle lift on hover
========================================================= */

body .frayora-work-page .fw-project__media {
    position: relative;
    isolation: isolate;

    width: 100%;
    aspect-ratio: 1.55 / 1;

    overflow: hidden;

    border-radius: 10px;
    border: 1px solid rgba(62, 63, 49, 0.11);

    background: #E8E3D9;

    box-shadow:
        0 3px 7px rgba(40, 40, 33, 0.035),
        0 14px 32px rgba(40, 40, 33, 0.08),
        0 28px 55px rgba(40, 40, 33, 0.025);

    transition:
        transform 0.5s cubic-bezier(.22, 1, .36, 1),
        box-shadow 0.5s ease,
        border-color 0.5s ease;
}

body .frayora-work-page .fw-project__media::after {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 1;

    border-radius: inherit;

    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.06) 0%,
        transparent 50%,
        rgba(36, 43, 34, 0.04) 100%
    );

    pointer-events: none;
}

body .frayora-work-page .fw-project__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition:
        transform 0.65s cubic-bezier(.22, 1, .36, 1);
}

@media (hover: hover) {

    body .frayora-work-page .fw-project:hover .fw-project__media {
        transform: translateY(-5px);

        border-color: rgba(48, 59, 50, 0.2);

        box-shadow:
            0 8px 18px rgba(40, 40, 33, 0.065),
            0 23px 46px rgba(40, 40, 33, 0.10);
    }

    body .frayora-work-page .fw-project:hover .fw-project__image {
        transform: scale(1.035);
    }

}


/* =========================================================
   06 — IMAGE PLACEHOLDER

   Displays only when an image is not yet uploaded.
   Clean abstract editorial treatment.
========================================================= */

body .frayora-work-page .fw-project__media--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    background: #DDDCCF;
}

body .frayora-work-page .fw-project:nth-child(4n + 2)
.fw-project__media--placeholder {
    background: #D9DFD2;
}

body .frayora-work-page .fw-project:nth-child(4n + 3)
.fw-project__media--placeholder {
    background: #E5D4C7;
}

body .frayora-work-page .fw-project:nth-child(4n + 4)
.fw-project__media--placeholder {
    background: #D4D8CD;
}

body .frayora-work-page .fw-project__placeholder-art {
    position: relative;

    display: block;

    width: 58%;
    height: 66%;

    border: 1px solid rgba(48, 59, 50, 0.2);
    border-radius: 7px;

    background: rgba(255, 255, 255, 0.37);

    box-shadow:
        12px 12px 0 rgba(48, 59, 50, 0.055),
        0 12px 30px rgba(48, 59, 50, 0.07);
}

body .frayora-work-page .fw-project__placeholder-art::before {
    content: "";

    position: absolute;

    left: 12%;
    top: 17%;

    width: 50%;
    height: 7%;

    background: rgba(48, 59, 50, 0.22);
    border-radius: 20px;
}

body .frayora-work-page .fw-project__placeholder-art::after {
    content: "";

    position: absolute;

    left: 12%;
    top: 36%;

    width: 76%;
    height: 36%;

    border: 1px solid rgba(48, 59, 50, 0.14);
    border-radius: 4px;

    background: rgba(248, 243, 235, 0.52);
}


/* =========================================================
   07 — PROJECT CONTENT
========================================================= */

body .frayora-work-page .fw-project__content {
    display: flex;
    flex-direction: column;
    flex: 1;

    min-width: 0;
    padding: 18px 6px 0 2px;
}

body .frayora-work-page .fw-project__number {
    display: block;

    margin: 0 0 7px;

    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.06em;

    color: #9B644F;
}

body .frayora-work-page .fw-project__title {
    margin: 0 0 9px;

    font-family: "Manrope", sans-serif;
    font-size: clamp(17px, 1.45vw, 21px);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.04em;

    color: #252923;
}

body .frayora-work-page .fw-project__description {
    max-width: 370px;

    margin: 0 0 20px;

    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.7;

    color: #666B65;
}


/* =========================================================
   08 — PROJECT LINKS

   Elegant text links, not large CTA buttons
========================================================= */

body .frayora-work-page .fw-project__links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px 17px;

    margin-top: auto;
}

body .frayora-work-page .fw-project__link {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;

    color: #394439;

    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;

    transition:
        color 0.25s ease,
        text-decoration-color 0.25s ease;
}

body .frayora-work-page a.fw-project__link:hover {
    color: #B95E3D;
}

body .frayora-work-page .fw-project__link span {
    display: inline-block;

    text-decoration: none;

    transition: transform 0.25s ease;
}

@media (hover: hover) {

    body .frayora-work-page a.fw-project__link:hover span {
        transform: translate(3px, -1px);
    }

}

body .frayora-work-page .fw-project__link--pending {
    opacity: 0.58;
    cursor: default;
}


/* =========================================================
   09 — ENTRANCE ANIMATION

   No blur effects.
   No persistent hidden states.
========================================================= */

@keyframes fwPortfolioEnter {

    from {
        opacity: 0;
        transform: translateY(12px);
    }

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

}


/* =========================================================
   10 — MEDIUM DESKTOP
   1101px–1450px
========================================================= */

@media screen and (min-width: 1101px)
and (max-width: 1450px) {

    body .frayora-work-page .fw-portfolio__inner {
        padding-left: 60px;
        padding-right: 60px;
    }

    body .frayora-work-page .fw-portfolio__grid {
        column-gap: 19px;
        row-gap: 45px;
    }

    body .frayora-work-page .fw-project__description {
        font-size: 12px;
    }

}


/* =========================================================
   11 — TABLET
   600px–1100px
========================================================= */

@media screen and (min-width: 600px)
and (max-width: 1100px) {

    body .frayora-work-page .fw-portfolio {
        padding: 85px 0 95px;
    }

    body .frayora-work-page .fw-portfolio__inner {
        padding: 0 48px;
    }

    body .frayora-work-page .fw-portfolio__intro {
        margin-bottom: 29px;
    }

    body .frayora-work-page .fw-portfolio__title {
        font-size: clamp(34px, 4.4vw, 47px);
    }

    body .frayora-work-page .fw-portfolio__filters {
        margin-bottom: 36px;
        gap: 9px;
    }

    body .frayora-work-page .fw-portfolio__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        column-gap: 24px;
        row-gap: 45px;
    }

    body .frayora-work-page .fw-project__title {
        font-size: clamp(18px, 2vw, 21px);
    }

    body .frayora-work-page .fw-project__description {
        font-size: 13px;
    }

}


/* =========================================================
   12 — NARROW TABLET
========================================================= */

@media screen and (min-width: 600px)
and (max-width: 750px) {

    body .frayora-work-page .fw-portfolio__inner {
        padding: 0 34px;
    }

    body .frayora-work-page .fw-portfolio__grid {
        column-gap: 18px;
    }

    body .frayora-work-page .fw-portfolio__filter {
        font-size: 11px;
        padding: 9px 16px;
    }

}


/* =========================================================
   13 — MOBILE
   599px AND BELOW
========================================================= */

@media screen and (max-width: 599px) {

    body .frayora-work-page .fw-portfolio {
        padding: 65px 0 75px;
    }

    body .frayora-work-page .fw-portfolio__inner {
        padding: 0 24px;
    }

    body .frayora-work-page .fw-portfolio__intro {
        margin-bottom: 26px;
    }

    body .frayora-work-page .fw-portfolio__eyebrow {
        margin-bottom: 13px;
        font-size: 11px;
    }

    body .frayora-work-page .fw-portfolio__title {
        font-size: clamp(30px, 8vw, 40px);
        line-height: 1.16;
        letter-spacing: -0.05em;
    }

    /* Horizontal filter scrolling */

    body .frayora-work-page .fw-portfolio__filters {
        flex-wrap: nowrap;

        width: 100%;
        gap: 9px;

        margin-bottom: 33px;
        padding: 3px 2px 12px;

        overflow-x: auto;
        overflow-y: hidden;

        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    body .frayora-work-page .fw-portfolio__filters::-webkit-scrollbar {
        display: none;
    }

    body .frayora-work-page .fw-portfolio__filter {
        flex: 0 0 auto;

        min-height: 40px;
        padding: 10px 16px;

        font-size: 11px;
    }

    /* Single-column project grid */

    body .frayora-work-page .fw-portfolio__grid {
        grid-template-columns: minmax(0, 1fr);

        gap: 42px;
    }

    body .frayora-work-page .fw-project__media {
        aspect-ratio: 1.55 / 1;
        border-radius: 10px;
    }

    body .frayora-work-page .fw-project__content {
        padding: 17px 2px 0;
    }

    body .frayora-work-page .fw-project__number {
        margin-bottom: 6px;
    }

    body .frayora-work-page .fw-project__title {
        font-size: 20px;
        margin-bottom: 8px;
    }

    body .frayora-work-page .fw-project__description {
        max-width: 100%;

        font-size: 13px;
        line-height: 1.75;

        margin-bottom: 17px;
    }

    body .frayora-work-page .fw-project__link {
        font-size: 12px;
    }

}


/* =========================================================
   14 — SMALL MOBILE
========================================================= */

@media screen and (max-width: 380px) {

    body .frayora-work-page .fw-portfolio__inner {
        padding: 0 20px;
    }

    body .frayora-work-page .fw-portfolio__title {
        font-size: clamp(28px, 8vw, 34px);
    }

    body .frayora-work-page .fw-project__title {
        font-size: 19px;
    }

}


/* =========================================================
   15 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body .frayora-work-page .fw-project {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    body .frayora-work-page .fw-project__media,
    body .frayora-work-page .fw-project__image,
    body .frayora-work-page .fw-portfolio__filter,
    body .frayora-work-page .fw-project__link,
    body .frayora-work-page .fw-project__link span {
        transition: none !important;
        transform: none !important;
    }

}


/* =====================================================
   FRAYORA — OUR WORK
   SECTION 02 — INTRO DESCRIPTION

   Matches Frayora editorial typography
   Desktop / Tablet / Mobile
===================================================== */

body .frayora-work-page .fw-portfolio__description {
    max-width: 760px;

    margin: 20px 0 0;

    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;

    letter-spacing: 0;
    color: #626960;
}

/* TABLET */

@media (min-width: 600px) and (max-width: 1100px) {

    body .frayora-work-page .fw-portfolio__description {
        max-width: 700px;
        margin-top: 18px;

        font-size: 15px;
        line-height: 1.7;
    }

}

/* MOBILE */

@media (max-width: 599px) {

    body .frayora-work-page .fw-portfolio__description {
        max-width: 100%;
        margin-top: 16px;

        font-size: 14px;
        line-height: 1.7;
    }

}



/* =========================================================
   FRAYORA — OUR WORK
   SECTION 03 — EDITORIAL PRINCIPLES

   Bond-inspired minimalist feature strip

   Desktop: 5 columns
   Tablet:  3 + 2 columns
   Mobile:  1 column

   Warm ivory surface
   Circular sage/stone icons
   Delicate separators
   Refined layered shadows
   Manrope / Inter typography
   Subtle motion, no blur
========================================================= */


/* =========================================================
   01 — SECTION FOUNDATION
========================================================= */

body .frayora-work-page .fw-principles,
body .frayora-work-page .fw-principles *,
body .frayora-work-page .fw-principles *::before,
body .frayora-work-page .fw-principles *::after {
    box-sizing: border-box;
}

body .frayora-work-page .fw-principles {
    position: relative;
    isolation: isolate;

    width: 100%;
    margin: 0;
    padding: 85px 0 95px;

    background: #F5EDE4;
    color: #252923;

    overflow: hidden;
}

/* Subtle editorial section boundaries */

body .frayora-work-page .fw-principles::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    height: 1px;

    background: rgba(48, 59, 50, 0.08);

    pointer-events: none;
}

body .frayora-work-page .fw-principles__inner {
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: 1600px;

    margin: 0 auto;
    padding: 0 80px;
}


/* =========================================================
   02 — FIVE-COLUMN GRID
========================================================= */

body .frayora-work-page .fw-principles__grid {
    display: grid;

    grid-template-columns: repeat(5, minmax(0, 1fr));

    align-items: stretch;
    width: 100%;
}


/* =========================================================
   03 — INDIVIDUAL PRINCIPLE
========================================================= */

body .frayora-work-page .fw-principles__item {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    min-width: 0;
    margin: 0;

    padding: 0 28px 0 30px;

    background: transparent;

    animation: fwPrinciplesReveal 0.7s
        cubic-bezier(.22, 1, .36, 1) both;
}

/* First item aligns with container */

body .frayora-work-page .fw-principles__item:first-child {
    padding-left: 0;
}

/* Last item */

body .frayora-work-page .fw-principles__item:last-child {
    padding-right: 0;
}

/* Fine vertical separator */

body .frayora-work-page .fw-principles__item:not(:first-child)::before {
    content: "";

    position: absolute;

    top: 5px;
    bottom: 4px;
    left: 0;

    width: 1px;

    background: rgba(48, 59, 50, 0.15);

    pointer-events: none;
}


/* =========================================================
   04 — CIRCULAR ICON TREATMENT

   Bond-inspired subtle dimensional circles
========================================================= */

body .frayora-work-page .fw-principles__icon {
    position: relative;
    isolation: isolate;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 76px;
    height: 76px;

    flex: 0 0 76px;

    margin: 0 0 23px;

    border-radius: 50%;

    color: #39473B;

    background: #E7E4DA;

    border: 1px solid rgba(48, 59, 50, 0.08);

    box-shadow:
        0 3px 9px rgba(41, 45, 36, 0.045),
        0 12px 27px rgba(41, 45, 36, 0.065),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);

    transition:
        transform 0.45s cubic-bezier(.22, 1, .36, 1),
        background-color 0.35s ease,
        box-shadow 0.45s ease;
}

/* Delicate inner ring */

body .frayora-work-page .fw-principles__icon::before {
    content: "";

    position: absolute;
    inset: 6px;

    border-radius: 50%;

    border: 1px solid rgba(255, 255, 255, 0.58);

    pointer-events: none;
}

/* Icon SVG */

body .frayora-work-page .fw-principles__icon svg {
    position: relative;
    z-index: 1;

    display: block;

    width: 34px;
    height: 34px;

    overflow: visible;
}


/* =========================================================
   05 — HEADING
========================================================= */

body .frayora-work-page .fw-principles__title {
    margin: 0 0 12px;
    padding: 0;

    font-family: "Manrope", sans-serif;
    font-size: clamp(15px, 1.17vw, 19px);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.035em;

    color: #252923;

    text-align: left;
}


/* =========================================================
   06 — DESCRIPTION
========================================================= */

body .frayora-work-page .fw-principles__description {
    width: 100%;
    max-width: 245px;

    margin: 0;
    padding: 0;

    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0;

    color: #686C65;

    text-align: left;
}


/* =========================================================
   07 — HOVER INTERACTIONS

   Restrained, editorial
========================================================= */

@media (hover: hover) {

    body .frayora-work-page .fw-principles__item:hover
    .fw-principles__icon {
        transform: translateY(-5px);

        background: #DFE6D8;

        box-shadow:
            0 6px 12px rgba(41, 45, 36, 0.055),
            0 18px 32px rgba(41, 45, 36, 0.09),
            inset 0 1px 0 rgba(255, 255, 255, 0.90);
    }

}


/* =========================================================
   08 — STAGGERED ENTRANCE

   Gentle opacity + vertical movement
   No filter blur or scroll-timeline dependency
========================================================= */

@keyframes fwPrinciplesReveal {

    from {
        opacity: 0;
        transform: translateY(13px);
    }

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

}

body .frayora-work-page .fw-principles__item:nth-child(1) {
    animation-delay: 0.06s;
}

body .frayora-work-page .fw-principles__item:nth-child(2) {
    animation-delay: 0.12s;
}

body .frayora-work-page .fw-principles__item:nth-child(3) {
    animation-delay: 0.18s;
}

body .frayora-work-page .fw-principles__item:nth-child(4) {
    animation-delay: 0.24s;
}

body .frayora-work-page .fw-principles__item:nth-child(5) {
    animation-delay: 0.30s;
}


/* =========================================================
   09 — MEDIUM DESKTOP
   1101px–1450px
========================================================= */

@media screen and (min-width: 1101px)
and (max-width: 1450px) {

    body .frayora-work-page .fw-principles__inner {
        padding-left: 60px;
        padding-right: 60px;
    }

    body .frayora-work-page .fw-principles__item {
        padding-left: 22px;
        padding-right: 20px;
    }

    body .frayora-work-page .fw-principles__item:first-child {
        padding-left: 0;
    }

    body .frayora-work-page .fw-principles__item:last-child {
        padding-right: 0;
    }

    body .frayora-work-page .fw-principles__title {
        font-size: 15px;
    }

    body .frayora-work-page .fw-principles__description {
        font-size: 13px;
    }

}


/* =========================================================
   10 — TABLET
   600px–1100px

   3 columns first row, 2 columns second row
========================================================= */

@media screen and (min-width: 600px)
and (max-width: 1100px) {

    body .frayora-work-page .fw-principles {
        padding: 75px 0 80px;
    }

    body .frayora-work-page .fw-principles__inner {
        padding: 0 48px;
    }

    body .frayora-work-page .fw-principles__grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        column-gap: 0;
        row-gap: 40px;
    }

    body .frayora-work-page .fw-principles__item {
        grid-column: span 2;

        padding: 0 25px;
    }

    body .frayora-work-page .fw-principles__item:nth-child(1),
    body .frayora-work-page .fw-principles__item:nth-child(4) {
        padding-left: 0;
    }

    body .frayora-work-page .fw-principles__item:nth-child(3),
    body .frayora-work-page .fw-principles__item:nth-child(5) {
        padding-right: 0;
    }

    /* Two items across the second row */

    body .frayora-work-page .fw-principles__item:nth-child(4),
    body .frayora-work-page .fw-principles__item:nth-child(5) {
        grid-column: span 3;

        padding-top: 28px;

        border-top: 1px solid rgba(48, 59, 50, 0.12);
    }

    /* First column in each row has no vertical separator */

    body .frayora-work-page .fw-principles__item:nth-child(4)::before {
        display: none;
    }

    body .frayora-work-page .fw-principles__item:nth-child(5)::before {
        top: 32px;
    }

    body .frayora-work-page .fw-principles__icon {
        width: 72px;
        height: 72px;

        flex-basis: 72px;

        margin-bottom: 20px;
    }

    body .frayora-work-page .fw-principles__title {
        font-size: clamp(17px, 2vw, 19px);
    }

    body .frayora-work-page .fw-principles__description {
        font-size: 14px;
    }

}


/* =========================================================
   11 — NARROW TABLET
========================================================= */

@media screen and (min-width: 600px)
and (max-width: 750px) {

    body .frayora-work-page .fw-principles__inner {
        padding-left: 34px;
        padding-right: 34px;
    }

    body .frayora-work-page .fw-principles__item {
        padding-left: 16px;
        padding-right: 16px;
    }

    body .frayora-work-page .fw-principles__title {
        font-size: 16px;
    }

    body .frayora-work-page .fw-principles__description {
        font-size: 13px;
    }

}


/* =========================================================
   12 — MOBILE
   599px AND BELOW

   Single editorial column
   Horizontal dividers
   Compact icon / copy composition
========================================================= */

@media screen and (max-width: 599px) {

    body .frayora-work-page .fw-principles {
        padding: 53px 0 58px;
    }

    body .frayora-work-page .fw-principles__inner {
        padding: 0 25px;
    }

    body .frayora-work-page .fw-principles__grid {
        display: grid;

        grid-template-columns: minmax(0, 1fr);

        gap: 0;
    }

    body .frayora-work-page .fw-principles__item,
    body .frayora-work-page .fw-principles__item:nth-child(4),
    body .frayora-work-page .fw-principles__item:nth-child(5) {
        grid-column: auto;

        width: 100%;

        padding: 27px 0 29px;

        border-top: 0;
    }

    body .frayora-work-page .fw-principles__item:first-child {
        padding-top: 0;
    }

    body .frayora-work-page .fw-principles__item:last-child {
        padding-bottom: 0;
    }

    /* Replace vertical rules with horizontal dividers */

    body .frayora-work-page .fw-principles__item:not(:first-child)::before,
    body .frayora-work-page .fw-principles__item:nth-child(5)::before {
        display: block;

        top: 0;
        left: 0;
        right: 0;
        bottom: auto;

        width: 100%;
        height: 1px;

        background: rgba(48, 59, 50, 0.13);
    }

    body .frayora-work-page .fw-principles__icon {
        width: 67px;
        height: 67px;

        flex-basis: 67px;

        margin-bottom: 17px;
    }

    body .frayora-work-page .fw-principles__icon svg {
        width: 31px;
        height: 31px;
    }

    body .frayora-work-page .fw-principles__title {
        margin-bottom: 8px;

        font-size: 19px;
        line-height: 1.35;
    }

    body .frayora-work-page .fw-principles__description {
        max-width: 390px;

        font-size: 14px;
        line-height: 1.7;
    }

}


/* =========================================================
   13 — SMALL MOBILE
========================================================= */

@media screen and (max-width: 380px) {

    body .frayora-work-page .fw-principles__inner {
        padding: 0 21px;
    }

    body .frayora-work-page .fw-principles__title {
        font-size: 18px;
    }

    body .frayora-work-page .fw-principles__description {
        font-size: 13px;
    }

}


/* =========================================================
   14 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body .frayora-work-page .fw-principles__item {
        animation: none !important;

        opacity: 1 !important;
        transform: none !important;
    }

    body .frayora-work-page .fw-principles__icon {
        transition: none !important;
    }

}


/* =========================================================
   FRAYORA — OUR WORK
   SECTION 02 — VIEW ALL PROJECTS

   Responsive project display
   Editorial outlined button
   Soft layered shadows
   Refined hover interactions
========================================================= */


/* =========================================================
   01 — BUTTON CONTAINER
========================================================= */

body .frayora-work-page .fw-portfolio__more {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;

    margin: 58px 0 0;
    padding: 0;
}

body .frayora-work-page .fw-portfolio__more[hidden] {
    display: none !important;
}


/* =========================================================
   02 — VIEW ALL BUTTON
========================================================= */

body .frayora-work-page .fw-portfolio__more-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 15px;

    min-height: 51px;
    padding: 13px 26px;

    border-radius: 999px;

    border: 1px solid rgba(48, 59, 50, 0.36);

    background: rgba(255, 255, 255, 0.45);

    color: #303B32;

    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;

    cursor: pointer;

    box-shadow:
        0 5px 13px rgba(48, 59, 50, 0.035),
        0 12px 25px rgba(48, 59, 50, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);

    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

body .frayora-work-page
.fw-portfolio__more-button[hidden] {
    display: none !important;
}


/* =========================================================
   03 — BUTTON ARROW
========================================================= */

body .frayora-work-page .fw-portfolio__more-arrow {
    display: inline-block;

    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;

    transition: transform 0.3s ease;
}

body .frayora-work-page
.fw-portfolio__more-button.is-expanded
.fw-portfolio__more-arrow {
    transform: rotate(-90deg);
}


/* =========================================================
   04 — HOVER STATES
========================================================= */

@media (hover: hover) {

    body .frayora-work-page
    .fw-portfolio__more-button:hover {

        transform: translateY(-2px);

        background: #303B32;
        color: #F8F3EB;

        border-color: #303B32;

        box-shadow:
            0 9px 20px rgba(48, 59, 50, 0.10),
            0 16px 32px rgba(48, 59, 50, 0.08);
    }

    body .frayora-work-page
    .fw-portfolio__more-button:not(.is-expanded):hover
    .fw-portfolio__more-arrow {
        transform: translateX(4px);
    }

}


/* =========================================================
   05 — ACCESSIBILITY
========================================================= */

body .frayora-work-page
.fw-portfolio__more-button:focus-visible {
    outline: 2px solid #C86745;
    outline-offset: 4px;
}


/* =========================================================
   06 — TABLET
========================================================= */

@media screen and (min-width: 600px)
and (max-width: 1100px) {

    body .frayora-work-page .fw-portfolio__more {
        margin-top: 45px;
    }

    body .frayora-work-page
    .fw-portfolio__more-button {
        min-height: 50px;
        font-size: 13px;
    }

}


/* =========================================================
   07 — MOBILE
========================================================= */

@media screen and (max-width: 599px) {

    body .frayora-work-page .fw-portfolio__more {
        margin-top: 37px;
    }

    body .frayora-work-page
    .fw-portfolio__more-button {
        min-height: 48px;

        padding: 12px 23px;

        font-size: 12px;
        gap: 12px;
    }

    body .frayora-work-page
    .fw-portfolio__more-arrow {
        font-size: 16px;
    }

}


/* =========================================================
   08 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body .frayora-work-page
    .fw-portfolio__more-button,
    body .frayora-work-page
    .fw-portfolio__more-arrow {
        transition: none !important;
        transform: none !important;
    }

}


/* =========================================================
   FRAYORA — OUR WORK
   SECTION 03 — CORRECTED COLORS + HORIZONTAL SCROLL

   Desktop:
   Original five-column editorial layout

   Tablet and Mobile:
   Horizontal scrolling editorial strip
   No individual cards
   Thin vertical separators
   Visible scrollbar for scroll discovery

   Icon colors:
   01 — Olive
   02 — Terracotta
   03 — Olive
   04 — Terracotta
   05 — Olive
========================================================= */


/* =========================================================
   01 — OLIVE ICONS
   Items 01, 03 and 05
========================================================= */

body .frayora-work-page .fw-principles__item:nth-child(odd)
.fw-principles__icon {
    color: #334F38;
    background: #DCE6D5;

    border-color: rgba(64, 91, 65, 0.24);

    box-shadow:
        0 5px 12px rgba(47, 67, 48, 0.09),
        0 15px 30px rgba(47, 67, 48, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.88);
}


/* =========================================================
   02 — TERRACOTTA ICONS
   Items 02 and 04
========================================================= */

body .frayora-work-page .fw-principles__item:nth-child(even)
.fw-principles__icon {
    color: #BC603F;
    background: #F3D9C9;

    border-color: rgba(194, 104, 68, 0.25);

    box-shadow:
        0 5px 12px rgba(163, 86, 56, 0.075),
        0 15px 30px rgba(163, 86, 56, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.90);
}


/* =========================================================
   03 — PRESERVE COLORS ON HOVER
========================================================= */

@media (hover: hover) {

    body .frayora-work-page
    .fw-principles__item:nth-child(odd):hover
    .fw-principles__icon {
        color: #294830;
        background: #D1E0CA;
    }

    body .frayora-work-page
    .fw-principles__item:nth-child(even):hover
    .fw-principles__icon {
        color: #A94F30;
        background: #F0CCB7;
    }

}


/* =========================================================
   04 — TABLET AND MOBILE
   1100px AND BELOW

   One uninterrupted horizontal strip.
   No boxes or card styling.
========================================================= */

@media screen and (max-width: 1100px) {

    body .frayora-work-page .fw-principles {
        overflow: hidden;
    }

    body .frayora-work-page .fw-principles__grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: stretch;

        width: 100%;
        gap: 0 !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;

        /* Visible and usable scrollbar */
        scrollbar-width: thin;
        scrollbar-color:
            #A0AD9B rgba(48, 59, 50, 0.09);

        padding: 8px 0 26px !important;
    }

    body .frayora-work-page
    .fw-principles__grid::-webkit-scrollbar {
        height: 5px;
    }

    body .frayora-work-page
    .fw-principles__grid::-webkit-scrollbar-track {
        background: rgba(48, 59, 50, 0.09);
        border-radius: 999px;
    }

    body .frayora-work-page
    .fw-principles__grid::-webkit-scrollbar-thumb {
        background: #A0AD9B;
        border-radius: 999px;
    }

    /* Restore original editorial item appearance */

    body .frayora-work-page .fw-principles__item,
    body .frayora-work-page .fw-principles__item:nth-child(4),
    body .frayora-work-page .fw-principles__item:nth-child(5) {
        display: flex !important;
        flex-direction: column;

        grid-column: auto !important;

        min-width: 0;
        margin: 0 !important;
        padding: 0 26px !important;

        border: 0 !important;
        border-radius: 0 !important;

        background: transparent !important;
        box-shadow: none !important;

        scroll-snap-align: start;
    }

    body .frayora-work-page
    .fw-principles__item:first-child {
        padding-left: 0 !important;
    }

    /* Fine vertical separators */

    body .frayora-work-page
    .fw-principles__item:not(:first-child)::before {
        content: "";

        display: block !important;
        position: absolute;

        top: 5px;
        bottom: 5px;
        left: 0;
        right: auto;

        width: 1px;
        height: auto;

        background: rgba(48, 59, 50, 0.17);
    }

    body .frayora-work-page
    .fw-principles__item:nth-child(4)::before,
    body .frayora-work-page
    .fw-principles__item:nth-child(5)::before {
        display: block !important;
    }

}


/* =========================================================
   05 — TABLET
   600px TO 1100px

   Approximately 2.3 items visible.
========================================================= */

@media screen and (min-width: 600px)
and (max-width: 1100px) {

    body .frayora-work-page .fw-principles {
        padding: 65px 0 70px;
    }

    body .frayora-work-page .fw-principles__inner {
        padding: 0 48px;
    }

    body .frayora-work-page .fw-principles__item,
    body .frayora-work-page .fw-principles__item:nth-child(4),
    body .frayora-work-page .fw-principles__item:nth-child(5) {
        flex: 0 0 43% !important;
        width: 43% !important;
    }

    body .frayora-work-page .fw-principles__title {
        font-size: 18px;
    }

    body .frayora-work-page .fw-principles__description {
        font-size: 14px;
    }

}


/* =========================================================
   06 — MOBILE
   599px AND BELOW

   Approximately 1.25 items visible.
   Partial next item indicates horizontal scrolling.
========================================================= */

@media screen and (max-width: 599px) {

    body .frayora-work-page .fw-principles {
        padding: 48px 0 53px;
    }

    body .frayora-work-page .fw-principles__inner {
        padding: 0 24px;
    }

    body .frayora-work-page .fw-principles__grid {
        gap: 0 !important;
    }

    body .frayora-work-page .fw-principles__item,
    body .frayora-work-page .fw-principles__item:nth-child(4),
    body .frayora-work-page .fw-principles__item:nth-child(5) {
        flex: 0 0 78% !important;
        width: 78% !important;

        padding: 0 22px !important;
    }

    body .frayora-work-page
    .fw-principles__item:first-child {
        padding-left: 0 !important;
    }

    body .frayora-work-page .fw-principles__icon {
        width: 69px;
        height: 69px;
        flex-basis: 69px;

        margin-bottom: 20px;
    }

    body .frayora-work-page .fw-principles__title {
        font-size: 18px;
        margin-bottom: 9px;
    }

    body .frayora-work-page .fw-principles__description {
        max-width: 290px;
        font-size: 14px;
        line-height: 1.7;
    }

}


/* =========================================================
   07 — SMALL MOBILE
========================================================= */

@media screen and (max-width: 380px) {

    body .frayora-work-page .fw-principles__inner {
        padding: 0 20px;
    }

    body .frayora-work-page .fw-principles__item,
    body .frayora-work-page .fw-principles__item:nth-child(4),
    body .frayora-work-page .fw-principles__item:nth-child(5) {
        flex-basis: 84% !important;
        width: 84% !important;

        padding-right: 18px !important;
        padding-left: 18px !important;
    }

}


/* =========================================================
   08 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body .frayora-work-page .fw-principles__grid {
        scroll-behavior: auto !important;
    }

    body .frayora-work-page .fw-principles__item {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

}


/* =========================================================
   FRAYORA — OUR WORK
   SECTION 04 — FINAL CTA
   LUMINOUS IVORY / TERRACOTTA / OLIVE
========================================================= */

body .frayora-work-page .fw-final-cta {
    position: relative;
    padding: 48px 0 120px;
    background: #F8F3EB;
    overflow: hidden;
}

body .frayora-work-page .fw-final-cta__inner {
    position: relative;
    overflow: hidden;

    display: grid;
    grid-template-columns: minmax(0, 1.15fr) auto;
    align-items: center;
    gap: 48px 72px;

    max-width: 1600px;
    margin: 0 auto;
    padding: 68px 92px 72px;

    border: 0;
    border-radius: 36px;

    background:
        linear-gradient(
            110deg,
            rgba(249, 244, 236, 0.98) 0%,
            rgba(247, 241, 233, 0.98) 36%,
            rgba(244, 235, 224, 0.96) 68%,
            rgba(246, 240, 232, 0.98) 100%
        );

    box-shadow:
        0 20px 50px rgba(48, 59, 50, 0.05),
        0 40px 90px rgba(48, 59, 50, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

/* luminous glow layers */
body .frayora-work-page .fw-final-cta__inner::before,
body .frayora-work-page .fw-final-cta__inner::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: 999px;
}

/* warm terracotta bloom */
body .frayora-work-page .fw-final-cta__inner::before {
    width: 620px;
    height: 620px;
    left: -130px;
    top: -160px;

    background:
        radial-gradient(
            circle,
            rgba(205, 111, 71, 0.23) 0%,
            rgba(205, 111, 71, 0.13) 22%,
            rgba(233, 183, 156, 0.09) 40%,
            rgba(248, 243, 235, 0) 72%
        );

    filter: blur(10px);
    opacity: 0.95;
}

/* soft olive + ivory lift */
body .frayora-work-page .fw-final-cta__inner::after {
    width: 760px;
    height: 760px;
    right: -180px;
    top: -240px;

    background:
        radial-gradient(
            circle,
            rgba(48, 59, 50, 0.12) 0%,
            rgba(48, 59, 50, 0.07) 12%,
            rgba(167, 180, 159, 0.12) 26%,
            rgba(244, 235, 224, 0.15) 42%,
            rgba(248, 243, 235, 0) 72%
        );

    filter: blur(18px);
    opacity: 0.88;
}

body .frayora-work-page .fw-final-cta__content,
body .frayora-work-page .fw-final-cta__actions {
    position: relative;
    z-index: 2;
}

body .frayora-work-page .fw-final-cta__heading {
    margin: 0 0 20px;
    max-width: 760px;

    color: #1F2520;
    font-family: "Manrope", sans-serif;
    font-size: clamp(42px, 4vw, 68px);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -0.045em;
    text-wrap: balance;
}

body .frayora-work-page .fw-final-cta__text {
    max-width: 650px;
    margin: 0;

    color: rgba(31, 37, 32, 0.68);
    font-family: "Inter", sans-serif;
    font-size: 20px;
    line-height: 1.75;
    letter-spacing: -0.015em;
}

body .frayora-work-page .fw-final-cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
}

body .frayora-work-page .fw-final-cta__button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    min-height: 64px;
    padding: 0 30px;

    border-radius: 999px;

    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;

    transition:
        transform 260ms ease,
        box-shadow 260ms ease,
        background-color 260ms ease,
        border-color 260ms ease,
        color 260ms ease;
}

body .frayora-work-page .fw-final-cta__button::after {
    content: "→";
    font-size: 22px;
    line-height: 1;
    transform: translateY(-1px);
}

body .frayora-work-page .fw-final-cta__button--primary {
    color: #FFFFFF;
    background: #D27148;
    border: 1px solid transparent;

    box-shadow:
        0 10px 24px rgba(190, 99, 61, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

body .frayora-work-page .fw-final-cta__button--secondary {
    color: #344137;
    background: rgba(250, 247, 241, 0.68);
    border: 1px solid rgba(52, 65, 55, 0.22);

    box-shadow:
        0 10px 24px rgba(48, 59, 50, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

@media (hover: hover) {

    body .frayora-work-page .fw-final-cta__button--primary:hover {
        transform: translateY(-2px);
        background: #C7653D;
        box-shadow:
            0 14px 30px rgba(190, 99, 61, 0.24),
            inset 0 1px 0 rgba(255, 255, 255, 0.20);
    }

    body .frayora-work-page .fw-final-cta__button--secondary:hover {
        transform: translateY(-2px);
        color: #243127;
        border-color: rgba(52, 65, 55, 0.30);
        background: rgba(250, 247, 241, 0.88);
        box-shadow:
            0 14px 30px rgba(48, 59, 50, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.78);
    }
}

/* =========================================================
   TABLET
========================================================= */

@media screen and (max-width: 1100px) {

    body .frayora-work-page .fw-final-cta {
        padding: 42px 0 96px;
    }

    body .frayora-work-page .fw-final-cta__inner {
        grid-template-columns: 1fr;
        gap: 34px;

        padding: 58px 54px 60px;
        border-radius: 30px;
    }

    body .frayora-work-page .fw-final-cta__heading {
        max-width: 680px;
        margin-bottom: 16px;
    }

    body .frayora-work-page .fw-final-cta__text {
        max-width: 620px;
        font-size: 18px;
        line-height: 1.7;
    }

    body .frayora-work-page .fw-final-cta__actions {
        justify-content: flex-start;
    }

    body .frayora-work-page .fw-final-cta__inner::before {
        width: 520px;
        height: 520px;
        left: -120px;
        top: -110px;
    }

    body .frayora-work-page .fw-final-cta__inner::after {
        width: 620px;
        height: 620px;
        right: -180px;
        top: -210px;
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media screen and (max-width: 700px) {

    body .frayora-work-page .fw-final-cta {
        padding: 34px 0 74px;
    }

    body .frayora-work-page .fw-final-cta__inner {
        gap: 28px;
        padding: 42px 28px 44px;
        border-radius: 24px;
    }

    body .frayora-work-page .fw-final-cta__heading {
        margin-bottom: 14px;
        font-size: clamp(34px, 10vw, 48px);
        line-height: 1.04;
        letter-spacing: -0.045em;
    }

    body .frayora-work-page .fw-final-cta__text {
        font-size: 16px;
        line-height: 1.75;
    }

    body .frayora-work-page .fw-final-cta__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    body .frayora-work-page .fw-final-cta__button {
        width: 100%;
        min-height: 58px;
        padding: 0 24px;
        font-size: 16px;
    }

    body .frayora-work-page .fw-final-cta__inner::before {
        width: 360px;
        height: 360px;
        left: -120px;
        top: -75px;
        opacity: 0.92;
    }

    body .frayora-work-page .fw-final-cta__inner::after {
        width: 420px;
        height: 420px;
        right: -160px;
        top: -150px;
        opacity: 0.72;
    }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body .frayora-work-page .fw-final-cta__button {
        transition: none !important;
    }

    body .frayora-work-page .fw-final-cta__button:hover {
        transform: none !important;
    }
}



/* =========================================================
   FRAYORA — OUR WORK
   SECTION 04 — FULL-WIDTH LUMINOUS CTA

   No floating card
   No rounded container
   No border
   No exterior card shadow

   Warm ivory + terracotta + subtle sage olive
   Full-bleed Bond-inspired editorial section
========================================================= */


/* =========================================================
   01 — FULL-WIDTH SECTION BACKGROUND
========================================================= */

body .frayora-work-page .fw-final-cta {
    position: relative;
    isolation: isolate;

    width: 100%;
    margin: 0 !important;
    padding: 110px 0 !important;

    overflow: hidden;

    border: 0 !important;
    border-radius: 0 !important;

    background:
        radial-gradient(
            ellipse 48% 105% at 20% 42%,
            rgba(216, 141, 105, 0.17) 0%,
            transparent 78%
        ),
        radial-gradient(
            ellipse 47% 115% at 79% 40%,
            rgba(133, 155, 122, 0.13) 0%,
            transparent 80%
        ),
        linear-gradient(
            115deg,
            #F8F3EB 0%,
            #FBF7F2 49%,
            #F8F3EB 100%
        ) !important;

    box-shadow: none !important;
}


/* =========================================================
   02 — REMOVE FLOATING CONTAINER

   Supports both previous PHP structures.
========================================================= */

body .frayora-work-page .fw-final-cta__container {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1600px;

    margin: 0 auto;
    padding: 0 80px !important;

    background: transparent !important;
    box-shadow: none !important;

    border: 0 !important;
    border-radius: 0 !important;
}

body .frayora-work-page .fw-final-cta__surface,
body .frayora-work-page .fw-final-cta__inner {
    position: relative;
    z-index: 2;

    display: grid !important;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(0, 1fr) !important;

    align-items: center !important;
    gap: 60px !important;

    width: 100%;
    max-width: 1600px;

    margin: 0 auto !important;
    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;
    outline: none !important;
}


/* Remove previous container glow and border layers */

body .frayora-work-page .fw-final-cta__surface::before,
body .frayora-work-page .fw-final-cta__surface::after,
body .frayora-work-page .fw-final-cta__inner::before,
body .frayora-work-page .fw-final-cta__inner::after {
    content: none !important;
    display: none !important;
}


/* =========================================================
   03 — TYPOGRAPHY
========================================================= */

body .frayora-work-page .fw-final-cta__content {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 710px;

    margin: 0;
    padding: 0;

    text-align: left;
}

body .frayora-work-page .fw-final-cta__title,
body .frayora-work-page .fw-final-cta__heading {
    max-width: 710px;

    margin: 0 0 22px;

    font-family: "Manrope", sans-serif;
    font-size: clamp(42px, 3.7vw, 64px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.055em;

    color: #252923;

    text-align: left;
    text-wrap: balance;
}

body .frayora-work-page .fw-final-cta__description,
body .frayora-work-page .fw-final-cta__text {
    max-width: 610px;

    margin: 0;

    font-family: "Inter", sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.75;

    color: #626960;

    text-align: left;
}


/* =========================================================
   04 — CTA BUTTON POSITIONING

   Retains existing button styling.
========================================================= */

body .frayora-work-page .fw-final-cta__actions {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    flex-wrap: wrap;

    gap: 16px;
    width: 100%;
}


/* =========================================================
   05 — TABLET
========================================================= */

@media screen and (min-width: 600px)
and (max-width: 1100px) {

    body .frayora-work-page .fw-final-cta {
        padding: 85px 0 !important;
    }

    body .frayora-work-page .fw-final-cta__container {
        padding: 0 48px !important;
    }

    body .frayora-work-page .fw-final-cta__surface,
    body .frayora-work-page .fw-final-cta__inner {
        grid-template-columns: 1fr !important;

        gap: 32px !important;
    }

    body .frayora-work-page .fw-final-cta__content {
        max-width: 700px;
        margin: 0 auto;
        text-align: center;
    }

    body .frayora-work-page .fw-final-cta__title,
    body .frayora-work-page .fw-final-cta__heading {
        margin: 0 auto 20px;
        font-size: clamp(38px, 5vw, 52px);
        text-align: center;
    }

    body .frayora-work-page .fw-final-cta__description,
    body .frayora-work-page .fw-final-cta__text {
        margin: 0 auto;
        text-align: center;
    }

    body .frayora-work-page .fw-final-cta__actions {
        justify-content: center;
    }

}


/* =========================================================
   06 — MOBILE
========================================================= */

@media screen and (max-width: 599px) {

    body .frayora-work-page .fw-final-cta {
        padding: 70px 0 75px !important;
    }

    body .frayora-work-page .fw-final-cta__container {
        padding: 0 25px !important;
    }

    body .frayora-work-page .fw-final-cta__inner {
        padding: 0 25px !important;
    }

    body .frayora-work-page .fw-final-cta__surface,
    body .frayora-work-page .fw-final-cta__inner {
        display: flex !important;
        flex-direction: column !important;

        gap: 28px !important;
    }

    body .frayora-work-page .fw-final-cta__content {
        max-width: 100%;
        text-align: center;
    }

    body .frayora-work-page .fw-final-cta__title,
    body .frayora-work-page .fw-final-cta__heading {
        max-width: 100%;

        margin: 0 0 17px;

        font-size: clamp(32px, 8vw, 43px);
        line-height: 1.14;

        text-align: center;
    }

    body .frayora-work-page .fw-final-cta__description,
    body .frayora-work-page .fw-final-cta__text {
        font-size: 14px;
        line-height: 1.75;

        text-align: center;
    }

    body .frayora-work-page .fw-final-cta__actions {
        flex-direction: column;
        align-items: stretch;

        gap: 13px;
    }

    body .frayora-work-page .fw-final-cta__button {
        width: 100%;
        min-height: 54px;

        justify-content: center;
    }

}


/* =========================================================
   07 — SMALL MOBILE
========================================================= */

@media screen and (max-width: 380px) {

    body .frayora-work-page .fw-final-cta {
        padding: 60px 0 65px !important;
    }

    body .frayora-work-page .fw-final-cta__container {
        padding: 0 20px !important;
    }

    body .frayora-work-page .fw-final-cta__inner {
        padding: 0 20px !important;
    }

    body .frayora-work-page .fw-final-cta__title,
    body .frayora-work-page .fw-final-cta__heading {
        font-size: 30px;
    }

}



/* =========================================================
   FRAYORA — OUR WORK
   SECTION 04 — MATCH SECTION 03 ALIGNMENT

   Exact same content container as Section 03.
   Preserves full-width luminous background.
========================================================= */

/* Reset the outer wrappers */

body .frayora-work-page .fw-final-cta__container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* SECTION 04 — Same alignment system as Section 03 */

body .frayora-work-page .fw-final-cta__inner,
body .frayora-work-page .fw-final-cta__surface {

    width: 100% !important;
    max-width: 1600px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding: 0 80px !important;

    box-sizing: border-box !important;
}

/* SMALLER DESKTOP — copy Section 03 */

@media screen and (min-width: 1101px)
and (max-width: 1450px) {

    body .frayora-work-page .fw-final-cta__inner,
    body .frayora-work-page .fw-final-cta__surface {
        padding-left: 60px !important;
        padding-right: 60px !important;
    }

}

/* TABLET */

@media screen and (min-width: 600px)
and (max-width: 1100px) {

    body .frayora-work-page .fw-final-cta__inner,
    body .frayora-work-page .fw-final-cta__surface {
        padding-left: 48px !important;
        padding-right: 48px !important;
    }

}

/* MOBILE */

@media screen and (max-width: 599px) {

    body .frayora-work-page .fw-final-cta__inner,
    body .frayora-work-page .fw-final-cta__surface {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

}

/* SMALL MOBILE */

@media screen and (max-width: 380px) {

    body .frayora-work-page .fw-final-cta__inner,
    body .frayora-work-page .fw-final-cta__surface {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

}


/* =========================================================
   FRAYORA — OUR WORK
   SECTION 04 — CONSISTENT CTA BUTTON SIZING

   Desktop: Identical button dimensions
   Tablet:  Identical button dimensions
   Mobile:  Compact, equal-width buttons

   Keeps existing colors, luminosity, and alignment.
========================================================= */


/* =========================================================
   01 — SHARED BUTTON DIMENSIONS
========================================================= */

body .frayora-work-page .fw-final-cta__actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;

    gap: 14px !important;
}

body .frayora-work-page .fw-final-cta__button {
    box-sizing: border-box !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 235px !important;

    width: 235px !important;
    min-width: 0 !important;
    max-width: 235px !important;

    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;

    margin: 0 !important;
    padding: 0 16px !important;

    gap: 10px !important;

    border-radius: 999px !important;

    font-family: "Inter", sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;

    white-space: nowrap !important;
    text-align: center !important;
    text-decoration: none !important;
}

/* Keep arrows correctly proportioned */

body .frayora-work-page .fw-final-cta__button::after {
    font-size: 17px !important;
    line-height: 1 !important;
}

body .frayora-work-page .fw-final-cta__button svg {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px !important;
}


/* =========================================================
   02 — DESKTOP
   1101px+
========================================================= */

@media screen and (min-width: 1101px) {

    body .frayora-work-page .fw-final-cta__actions {
        justify-content: flex-end !important;
        flex-direction: row !important;
    }

}


/* =========================================================
   03 — TABLET
   600px–1100px
========================================================= */

@media screen and (min-width: 600px)
and (max-width: 1100px) {

    body .frayora-work-page .fw-final-cta__actions {
        justify-content: center !important;
        flex-direction: row !important;
    }

    body .frayora-work-page .fw-final-cta__button {
        flex-basis: 220px !important;

        width: 220px !important;
        max-width: 220px !important;

        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;

        padding: 0 14px !important;
        font-size: 12px !important;
    }

}


/* =========================================================
   04 — MOBILE
   599px AND BELOW

   Compact buttons — no full-width stretching.
========================================================= */

@media screen and (max-width: 599px) {

    body .frayora-work-page .fw-final-cta__actions {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        gap: 12px !important;
    }

    body .frayora-work-page .fw-final-cta__button {
        flex: 0 0 auto !important;

        width: min(100%, 265px) !important;
        min-width: 0 !important;
        max-width: 265px !important;

        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;

        margin: 0 auto !important;
        padding: 0 14px !important;

        gap: 9px !important;

        font-size: 12px !important;
    }

}


/* =========================================================
   05 — SMALL MOBILE
   380px AND BELOW
========================================================= */

@media screen and (max-width: 380px) {

    body .frayora-work-page .fw-final-cta__button {
        width: min(100%, 245px) !important;
        max-width: 245px !important;
    }

}


/* =====================================================
   FRAYORA — OUR WORK
   SECTION 04 — CENTERED DESKTOP CTA

   Heading
   Description
   Two buttons side by side

   Keeps existing colors, luminous background,
   typography, sizing and hover effects.
===================================================== */

@media screen and (min-width: 1101px) {

    body .frayora-work-page .fw-final__inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        text-align: center;
    }

    body .frayora-work-page .fw-final__content {
        display: flex;
        flex-direction: column;
        align-items: center;

        width: 100%;
        max-width: 900px;

        margin: 0 auto;
        text-align: center;
    }

    body .frayora-work-page .fw-final__title {
        margin-left: auto;
        margin-right: auto;

        text-align: center;
        text-wrap: balance;
    }

    body .frayora-work-page .fw-final__description {
        margin-left: auto;
        margin-right: auto;

        max-width: 720px;
        text-align: center;
    }

    body .frayora-work-page .fw-final__actions {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;

        width: 100%;
        max-width: none;

        margin: 32px auto 0;
        gap: 14px;
    }

}



/* =========================================================
   FRAYORA — RESOURCES
   SECTION 01 — PHOTOGRAPHIC HERO

   EXACT ABOUT FRAYORA HERO DESIGN

   Inherits original About Frayora CSS:
   - Luminous olive overlay
   - Editorial typography
   - Centered heading
   - Hero proportions
   - Curved bottom edge
   - Shadows
   - Entrance animations

   Resources-specific:
   - Background photographs
   - Approved centered mobile refinement

   DESKTOP: 1101px+
   TABLET:  600px–1100px
   MOBILE:  0px–599px
========================================================= */


/* =========================================================
   01 — DESKTOP
   1101px AND ABOVE
========================================================= */

@media screen and (min-width: 1101px) {

    body .frayora-resources-page
    .about-us-page .about-hero__media {

        background-image:
            url("../images/Resources/workspacecoffee.png");

    }

}


/* =========================================================
   02 — TABLET
   600px–1100px
========================================================= */

@media screen and (min-width: 600px)
and (max-width: 1100px) {

    body .frayora-resources-page
    .about-us-page .about-hero__media {

        background-image:
            url("../images/Resources/workspacecoffee.png");

    }

}


/* =========================================================
   03 — MOBILE
   0px–599px
========================================================= */

@media screen and (max-width: 599px) {

    /* APPROVED SHORTER MOBILE HEIGHT */

    body .frayora-resources-page
    .about-us-page .about-hero {

        height: 390px;
        min-height: 390px;

    }


    /* MOBILE PHOTOGRAPH */

    body .frayora-resources-page
    .about-us-page .about-hero__media {

        background-image:
            url("../images/Resources/workspacecoffee.png");

    }


    /* VERTICALLY CENTERED CONTENT */

    body .frayora-resources-page
    .about-us-page .about-hero__inner {

        display: flex;
        align-items: center;
        justify-content: center;

        height: 100%;

        padding: 24px;

        text-align: center;

    }


    /* APPROVED CENTERED TITLE ENTRANCE */

    body .frayora-resources-page
    .about-us-page .about-hero__title {

        animation:
            frResourcesCenteredTitleIn 1.05s
            cubic-bezier(.22, 1, .36, 1)
            0.25s both;

    }

}


/* =========================================================
   04 — SMALL MOBILE
   390px AND BELOW
========================================================= */

@media screen and (max-width: 390px) {

    body .frayora-resources-page
    .about-us-page .about-hero {

        height: 380px;
        min-height: 380px;

    }

}


/* =========================================================
   05 — MOBILE HEADING ENTRANCE
========================================================= */

@keyframes frResourcesCenteredTitleIn {

    from {
        opacity: 0;
        transform: translateY(20px);
        filter: blur(3px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }

}


/* =========================================================
   06 — REDUCED MOTION
========================================================= */

@media screen and (max-width: 599px)
and (prefers-reduced-motion: reduce) {

    body .frayora-resources-page
    .about-us-page .about-hero__title {

        animation: none !important;
        transition: none !important;

        opacity: 1 !important;
        transform: none !important;
        filter: none !important;

    }

}



/* =========================================================
   FRAYORA — RESOURCES
   SECTION 02 — BROWSE BY TOPIC

   COMPLETE CSS REPLACEMENT

   BOND-INSPIRED EDITORIAL DESIGN

   Desktop:
   - Three-column, two-row grid
   - Compact cards with minimal empty space

   Tablet:
   - Two-column, three-row grid
   - Balanced card proportions

   Mobile:
   - Horizontal swipe-through
   - Next card partially visible
   - Visible scroll indicator

   All devices:
   - Ivory background
   - Refined card shadows
   - Olive icons
   - Terracotta links
   - Subtle interactions
   - Reduced-motion accessibility
========================================================= */


/* =========================================================
   01 — SECTION FOUNDATION
========================================================= */

body .frayora-resources-page .fr-resources-topics {
    position: relative;
    isolation: isolate;

    width: 100%;
    margin: 0;

    padding: 90px 0 100px;

    background: #F8F3EB;
}


/* =========================================================
   02 — CONTENT CONTAINER
========================================================= */

body .frayora-resources-page .fr-resources-topics__inner {
    width: 100%;
    max-width: 1600px;

    margin: 0 auto;
    padding: 0 80px;

    box-sizing: border-box;
}


/* =========================================================
   03 — SECTION INTRODUCTION
========================================================= */

body .frayora-resources-page .fr-resources-topics__header {
    max-width: 900px;

    margin: 0 0 36px;
    padding: 0;

    text-align: left;
}


/* EYEBROW */

body .frayora-resources-page .fr-resources-topics__eyebrow {
    margin: 0 0 14px;
    padding: 0;

    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 700;

    line-height: 1.4;
    letter-spacing: 0.15em;

    text-transform: uppercase;
    color: #B95F40;
}


/* HEADING */

body .frayora-resources-page .fr-resources-topics__heading {
    margin: 0;
    padding: 0;

    font-family: "Manrope", sans-serif;
    font-size: clamp(36px, 3.2vw, 52px);
    font-weight: 600;

    line-height: 1.13;
    letter-spacing: -0.052em;

    color: #242B25;
    text-wrap: balance;
}


/* INTRO DESCRIPTION */

body .frayora-resources-page
.fr-resources-topics__intro-description {
    max-width: 760px;

    margin: 20px 0 0;
    padding: 0;

    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 400;

    line-height: 1.75;
    letter-spacing: 0;

    color: #626960;
}


/* =========================================================
   04 — DESKTOP CARD GRID
========================================================= */

body .frayora-resources-page .fr-resources-topics__grid {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 20px;

    width: 100%;
    min-width: 0;
}


/* =========================================================
   05 — COMPACT EDITORIAL CARDS
========================================================= */

body .frayora-resources-page .fr-resources-topics__card {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    min-width: 0;
    min-height: 0;

    margin: 0;
    padding: 24px 26px 23px;

    background: #FFFCF8;

    border: 1px solid rgba(66, 73, 58, 0.085);
    border-radius: 17px;

    box-shadow:
        0 3px 10px rgba(49, 57, 45, 0.025),
        0 12px 28px rgba(49, 57, 45, 0.045),
        0 24px 48px rgba(49, 57, 45, 0.025),
        inset 0 1px 0 rgba(255, 255, 255, 0.88);

    transition:
        transform 0.4s cubic-bezier(.22, 1, .36, 1),
        box-shadow 0.4s ease,
        border-color 0.3s ease;
}


/* =========================================================
   06 — ICON CONTAINERS
========================================================= */

body .frayora-resources-page .fr-resources-topics__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    flex: 0 0 52px;

    margin: 0 0 18px;

    border-radius: 50%;

    background: #DCE6D5;
color: #334F38;

    border: 1px solid rgba(66, 73, 58, 0.085);

    box-shadow:
        0 4px 10px rgba(45, 52, 39, 0.035),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);

    transition:
        background 0.4s ease,
        color 0.4s ease,
        transform 0.4s cubic-bezier(.22, 1, .36, 1);
}

body .frayora-resources-page .fr-resources-topics__icon svg {
    display: block;

    width: 24px;
    height: 24px;

    flex-shrink: 0;
}


/* =========================================================
   07 — CARD TYPOGRAPHY
========================================================= */

body .frayora-resources-page .fr-resources-topics__card-title {
    margin: 0 0 9px;
    padding: 0;

    font-family: "Manrope", sans-serif;
    font-size: 20px;
    font-weight: 600;

    line-height: 1.35;
    letter-spacing: -0.035em;

    color: #252B25;
}


body .frayora-resources-page
.fr-resources-topics__card-description {
    margin: 0 0 18px;
    padding: 0;

    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 400;

    line-height: 1.7;
    letter-spacing: 0;

    color: #626960;
}


/* =========================================================
   08 — EXPLORE LINKS
========================================================= */

body .frayora-resources-page .fr-resources-topics__link {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;

    gap: 9px;

    align-self: flex-start;

    margin: auto 0 0;
    padding: 4px 0;

    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 600;

    line-height: 1.5;

    color: #B75C3D;
    text-decoration: none;

    transition: color 0.3s ease;
}

body .frayora-resources-page .fr-resources-topics__link svg {
    width: 17px;
    height: 17px;

    transition:
        transform 0.35s cubic-bezier(.22, 1, .36, 1);
}


/* =========================================================
   09 — HOVER & FOCUS
========================================================= */

@media (hover: hover) {

    body .frayora-resources-page
    .fr-resources-topics__card:hover {
        transform: translateY(-5px);

        border-color: rgba(99, 106, 84, 0.15);

        box-shadow:
            0 8px 18px rgba(49, 57, 45, 0.04),
            0 19px 40px rgba(49, 57, 45, 0.075),
            0 30px 60px rgba(49, 57, 45, 0.04);
    }

    body .frayora-resources-page
    .fr-resources-topics__card:hover
    .fr-resources-topics__icon {
        transform: translateY(-2px);

        background: #E6EBDC;
        color: #303F33;
    }

    body .frayora-resources-page
    .fr-resources-topics__link:hover {
        color: #923D27;
    }

    body .frayora-resources-page
    .fr-resources-topics__link:hover svg {
        transform: translateX(4px);
    }

}

body .frayora-resources-page
.fr-resources-topics__link:focus-visible {
    outline: 2px solid #B75C3D;
    outline-offset: 5px;

    border-radius: 3px;
}


/* =========================================================
   10 — TABLET
   600px–1100px
========================================================= */

@media screen and (min-width: 600px)
and (max-width: 1100px) {

    body .frayora-resources-page .fr-resources-topics {
        padding: 75px 0 85px;
    }

    body .frayora-resources-page .fr-resources-topics__inner {
        max-width: 1100px;
        padding: 0 48px;
    }

    body .frayora-resources-page .fr-resources-topics__header {
        margin-bottom: 32px;
    }

    body .frayora-resources-page .fr-resources-topics__heading {
        font-size: clamp(34px, 4.5vw, 46px);
    }

    body .frayora-resources-page
    .fr-resources-topics__intro-description {
        max-width: 690px;

        margin-top: 18px;

        font-size: 15px;
        line-height: 1.7;
    }

    body .frayora-resources-page .fr-resources-topics__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 18px;
    }

    body .frayora-resources-page .fr-resources-topics__card {
        padding: 23px 23px 21px;
    }

    body .frayora-resources-page .fr-resources-topics__icon {
        width: 49px;
        height: 49px;
        flex-basis: 49px;

        margin-bottom: 17px;
    }

    body .frayora-resources-page
    .fr-resources-topics__card-title {
        font-size: 19px;
    }

}


/* =========================================================
   11 — NARROW TABLET
   600px–767px
========================================================= */

@media screen and (min-width: 600px)
and (max-width: 767px) {

    body .frayora-resources-page .fr-resources-topics__inner {
        padding: 0 30px;
    }

    body .frayora-resources-page .fr-resources-topics__grid {
        gap: 16px;
    }

    body .frayora-resources-page .fr-resources-topics__card {
        padding: 22px 20px;
    }

    body .frayora-resources-page
    .fr-resources-topics__card-title {
        font-size: 18px;
    }

}


/* =========================================================
   12 — MOBILE
   599px AND BELOW

   HORIZONTAL SWIPE-THROUGH CAROUSEL
========================================================= */

@media screen and (max-width: 599px) {

    body .frayora-resources-page .fr-resources-topics {
        padding: 58px 0 65px;

        overflow: hidden;
    }

    body .frayora-resources-page .fr-resources-topics__inner {
        max-width: 100%;
        min-width: 0;

        padding: 0 24px;
    }

    body .frayora-resources-page .fr-resources-topics__header {
        margin-bottom: 27px;
    }

    body .frayora-resources-page .fr-resources-topics__eyebrow {
        font-size: 11px;
        margin-bottom: 12px;
    }

    body .frayora-resources-page .fr-resources-topics__heading {
        font-size: clamp(29px, 7.5vw, 36px);
        line-height: 1.16;
    }

    body .frayora-resources-page
    .fr-resources-topics__intro-description {
        max-width: 100%;

        margin-top: 16px;

        font-size: 14px;
        line-height: 1.7;
    }


    /* SCROLLABLE CARD TRACK */

    body .frayora-resources-page .fr-resources-topics__grid {
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;

        grid-template-columns: none;

        gap: 14px;

        width: 100%;
        min-width: 0;

        overflow-x: auto;
        overflow-y: hidden;

        scroll-snap-type: x mandatory;
        scroll-padding-inline: 0;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;

        padding: 8px 0 22px;

        scrollbar-width: thin;
        scrollbar-color: #A8B09F rgba(48, 59, 50, 0.09);
    }


    /* VISIBLE SCROLLBAR */

    body .frayora-resources-page
    .fr-resources-topics__grid::-webkit-scrollbar {
        height: 5px;
    }

    body .frayora-resources-page
    .fr-resources-topics__grid::-webkit-scrollbar-track {
        background: rgba(48, 59, 50, 0.09);
        border-radius: 20px;
    }

    body .frayora-resources-page
    .fr-resources-topics__grid::-webkit-scrollbar-thumb {
        background: #A8B09F;

        border-radius: 20px;
        border: 1px solid #F8F3EB;
    }


    /* INDIVIDUAL SWIPEABLE CARD */

    body .frayora-resources-page .fr-resources-topics__card {
        flex: 0 0 85%;

        width: 85%;
        min-width: 0;
        min-height: 0;

        padding: 22px 21px 21px;

        border-radius: 16px;

        scroll-snap-align: start;
    }

    body .frayora-resources-page .fr-resources-topics__icon {
        width: 48px;
        height: 48px;
        flex-basis: 48px;

        margin-bottom: 16px;
    }

    body .frayora-resources-page
    .fr-resources-topics__card-title {
        font-size: 18px;
        margin-bottom: 9px;
    }

    body .frayora-resources-page
    .fr-resources-topics__card-description {
        font-size: 13px;
        line-height: 1.65;

        margin-bottom: 16px;
    }

    body .frayora-resources-page .fr-resources-topics__link {
        font-size: 13px;
    }

}


/* =========================================================
   13 — SMALL MOBILE
   380px AND BELOW
========================================================= */

@media screen and (max-width: 380px) {

    body .frayora-resources-page .fr-resources-topics__inner {
        padding: 0 20px;
    }

    body .frayora-resources-page .fr-resources-topics__card {
        flex-basis: 88%;
        width: 88%;

        padding: 21px 19px 20px;
    }

}


/* =========================================================
   14 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body .frayora-resources-page .fr-resources-topics__card,
    body .frayora-resources-page .fr-resources-topics__icon,
    body .frayora-resources-page .fr-resources-topics__link,
    body .frayora-resources-page .fr-resources-topics__link svg {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }

    body .frayora-resources-page .fr-resources-topics__grid {
        scroll-behavior: auto;
    }

}



/* =========================================================
   FRAYORA — RESOURCES
   SECTION 04 — FEATURED RESOURCES

   BOND-INSPIRED EDITORIAL DESIGN

   - Warm ivory surface
   - Four editorial resource cards
   - Refined image presentation
   - Subtle dimensional shadows
   - Manrope headings / Inter body
   - Terracotta accents
   - Compact content proportions
   - Accessible reduced-motion behavior

   Desktop: Four-column grid
   Tablet: Two-column grid
   Mobile: Horizontal swipe-through
========================================================= */


/* =========================================================
   01 — SECTION FOUNDATION
========================================================= */

body .frayora-resources-page .fr-featured {
    position: relative;
    isolation: isolate;

    width: 100%;
    margin: 0;
    padding: 100px 0 115px;

    background: #F5EDE4;
}


/* =========================================================
   02 — CONTENT CONTAINER
========================================================= */

body .frayora-resources-page .fr-featured__inner {
    width: 100%;
    max-width: 1600px;

    margin: 0 auto;
    padding: 0 80px;

    box-sizing: border-box;
}


/* =========================================================
   03 — SECTION HEADER
========================================================= */

body .frayora-resources-page .fr-featured__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 32px;

    margin: 0 0 42px;
}

body .frayora-resources-page .fr-featured__intro {
    flex: 1;
    min-width: 0;
    max-width: 780px;
}


/* EYEBROW */

body .frayora-resources-page .fr-featured__eyebrow {
    margin: 0 0 14px;

    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 700;

    line-height: 1.4;
    letter-spacing: 0.15em;

    text-transform: uppercase;
    color: #B95F40;
}


/* HEADING */

body .frayora-resources-page .fr-featured__heading {
    margin: 0;

    font-family: "Manrope", sans-serif;
    font-size: clamp(36px, 3.2vw, 52px);
    font-weight: 600;

    line-height: 1.13;
    letter-spacing: -0.052em;

    color: #242B25;
    text-wrap: balance;
}


/* DESCRIPTION */

body .frayora-resources-page .fr-featured__description {
    max-width: 690px;

    margin: 18px 0 0;

    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 400;

    line-height: 1.75;
    color: #626960;
}


/* =========================================================
   04 — VIEW ALL RESOURCES BUTTON
========================================================= */

body .frayora-resources-page .fr-featured__all {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 13px;

    flex-shrink: 0;

    min-height: 50px;
    padding: 0 23px;

    border: 1px solid rgba(184, 96, 64, 0.7);
    border-radius: 999px;

    background: transparent;

    color: #A75135;

    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 600;

    line-height: 1.4;
    text-decoration: none;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

body .frayora-resources-page .fr-featured__all svg {
    display: block;
    flex-shrink: 0;

    transition: transform 0.3s ease;
}


/* =========================================================
   05 — RESOURCE GRID
========================================================= */

body .frayora-resources-page .fr-featured__grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 20px;

    width: 100%;
    min-width: 0;
}


/* =========================================================
   06 — EDITORIAL RESOURCE CARDS
========================================================= */

body .frayora-resources-page .fr-featured__card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;
    margin: 0;

    overflow: hidden;

    background: #FFFCF8;

    border: 1px solid rgba(66, 73, 58, 0.08);
    border-radius: 15px;

    box-shadow:
        0 4px 12px rgba(48, 59, 50, 0.025),
        0 14px 30px rgba(48, 59, 50, 0.055),
        0 28px 54px rgba(48, 59, 50, 0.025);

    transition:
        transform 0.45s cubic-bezier(.22,1,.36,1),
        box-shadow 0.45s ease,
        border-color 0.35s ease;
}


/* =========================================================
   07 — CARD PHOTOGRAPH
========================================================= */

body .frayora-resources-page .fr-featured__media {
    position: relative;

    width: 100%;
    aspect-ratio: 3 / 2;

    overflow: hidden;

    background: #E8E2D9;
}

body .frayora-resources-page .fr-featured__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition:
        transform 0.8s cubic-bezier(.22,1,.36,1);
}


/* =========================================================
   08 — CARD CONTENT
========================================================= */

body .frayora-resources-page .fr-featured__content {
    display: flex;
    flex-direction: column;

    flex: 1;
    min-width: 0;

    padding: 24px 23px 25px;
}


/* CATEGORY LABEL */

body .frayora-resources-page .fr-featured__category {
    margin: 0 0 13px;

    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 700;

    line-height: 1.5;
    letter-spacing: 0.15em;

    text-transform: uppercase;
    color: #687863;
}


/* CARD HEADING */

body .frayora-resources-page .fr-featured__card-title {
    margin: 0 0 13px;

    font-family: "Manrope", sans-serif;
    font-size: 19px;
    font-weight: 600;

    line-height: 1.3;
    letter-spacing: -0.035em;

    color: #252B25;
}


/* CARD DESCRIPTION */

body .frayora-resources-page
.fr-featured__card-description {
    margin: 0 0 24px;

    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 400;

    line-height: 1.75;
    color: #626960;
}


/* =========================================================
   09 — VIEW RESOURCE LINK
========================================================= */

body .frayora-resources-page .fr-featured__link {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;

    gap: 10px;

    margin-top: auto;
    padding: 3px 0;

    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 600;

    line-height: 1.5;

    color: #B75C3D;
    text-decoration: none;

    transition: color 0.3s ease;
}

body .frayora-resources-page .fr-featured__link svg {
    display: block;
    flex-shrink: 0;

    transition: transform 0.3s ease;
}


/* =========================================================
   10 — HOVER EFFECTS
========================================================= */

@media (hover: hover) {

    body .frayora-resources-page
    .fr-featured__card:hover {
        transform: translateY(-5px);

        border-color: rgba(66, 73, 58, 0.14);

        box-shadow:
            0 8px 20px rgba(48, 59, 50, 0.045),
            0 22px 46px rgba(48, 59, 50, 0.09);
    }

    body .frayora-resources-page
    .fr-featured__card:hover
    .fr-featured__image {
        transform: scale(1.035);
    }

    body .frayora-resources-page
    .fr-featured__link:hover,
    body .frayora-resources-page
    .fr-featured__all:hover {
        color: #923D27;
    }

    body .frayora-resources-page
    .fr-featured__all:hover {
        background: #F5E4D8;
        transform: translateY(-2px);
    }

    body .frayora-resources-page
    .fr-featured__link:hover svg,
    body .frayora-resources-page
    .fr-featured__all:hover svg {
        transform: translateX(4px);
    }
}


/* KEYBOARD ACCESSIBILITY */

body .frayora-resources-page
.fr-featured a:focus-visible {
    outline: 2px solid #B75C3D;
    outline-offset: 4px;
}


/* =========================================================
   11 — TABLET
   600px–1100px
========================================================= */

@media screen and (min-width: 600px)
and (max-width: 1100px) {

    body .frayora-resources-page .fr-featured {
        padding: 80px 0 90px;
    }

    body .frayora-resources-page .fr-featured__inner {
        padding: 0 48px;
    }

    body .frayora-resources-page .fr-featured__header {
        gap: 24px;
        margin-bottom: 34px;
    }

    body .frayora-resources-page .fr-featured__heading {
        font-size: clamp(34px, 4.5vw, 46px);
    }

    body .frayora-resources-page .fr-featured__description {
        font-size: 15px;
        line-height: 1.7;
    }

    body .frayora-resources-page .fr-featured__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 20px;
    }

    body .frayora-resources-page .fr-featured__content {
        padding: 23px 24px 25px;
    }

    body .frayora-resources-page .fr-featured__card-title {
        font-size: 20px;
    }

    body .frayora-resources-page
    .fr-featured__card-description {
        font-size: 14px;
    }
}


/* =========================================================
   12 — NARROW TABLET
   600px–767px
========================================================= */

@media screen and (min-width: 600px)
and (max-width: 767px) {

    body .frayora-resources-page .fr-featured__inner {
        padding: 0 30px;
    }

    body .frayora-resources-page .fr-featured__header {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px;
    }

    body .frayora-resources-page .fr-featured__grid {
        gap: 16px;
    }

    body .frayora-resources-page .fr-featured__content {
        padding: 21px 20px 23px;
    }

    body .frayora-resources-page .fr-featured__card-title {
        font-size: 18px;
    }

    body .frayora-resources-page
    .fr-featured__card-description {
        font-size: 13px;
    }
}


/* =========================================================
   13 — MOBILE
   599px AND BELOW
========================================================= */

@media screen and (max-width: 599px) {

    body .frayora-resources-page .fr-featured {
        padding: 60px 0 70px;
        overflow: hidden;
    }

    body .frayora-resources-page .fr-featured__inner {
        padding: 0 24px;
    }

    body .frayora-resources-page .fr-featured__header {
        flex-direction: column;
        align-items: flex-start;

        gap: 22px;
        margin-bottom: 27px;
    }

    body .frayora-resources-page .fr-featured__eyebrow {
        font-size: 11px;
        margin-bottom: 12px;
    }

    body .frayora-resources-page .fr-featured__heading {
        font-size: clamp(29px, 7.5vw, 36px);
        line-height: 1.16;
    }

    body .frayora-resources-page .fr-featured__description {
        margin-top: 16px;
        font-size: 14px;
        line-height: 1.7;
    }

    body .frayora-resources-page .fr-featured__all {
        min-height: 44px;

        padding: 0 18px;

        font-size: 13px;
    }


    /* HORIZONTAL SWIPE-THROUGH */

    body .frayora-resources-page .fr-featured__grid {
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;

        grid-template-columns: none;

        gap: 14px;

        width: 100%;
        min-width: 0;

        overflow-x: auto;
        overflow-y: hidden;

        scroll-snap-type: x mandatory;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;

        padding: 7px 0 23px;

        scrollbar-width: thin;
        scrollbar-color:
            #A8B09F rgba(48,59,50,0.09);
    }


    /* VISIBLE SCROLLBAR */

    body .frayora-resources-page
    .fr-featured__grid::-webkit-scrollbar {
        height: 5px;
    }

    body .frayora-resources-page
    .fr-featured__grid::-webkit-scrollbar-track {
        background: rgba(48,59,50,0.09);
        border-radius: 20px;
    }

    body .frayora-resources-page
    .fr-featured__grid::-webkit-scrollbar-thumb {
        background: #A8B09F;
        border-radius: 20px;
    }


    /* MOBILE CARDS */

    body .frayora-resources-page .fr-featured__card {
        flex: 0 0 86%;
        width: 86%;
        min-width: 0;

        scroll-snap-align: start;

        border-radius: 14px;
    }

    body .frayora-resources-page .fr-featured__media {
        aspect-ratio: 3 / 2;
    }

    body .frayora-resources-page .fr-featured__content {
        padding: 22px 21px 23px;
    }

    body .frayora-resources-page .fr-featured__category {
        font-size: 10px;
        margin-bottom: 11px;
    }

    body .frayora-resources-page .fr-featured__card-title {
        font-size: 19px;
        margin-bottom: 11px;
    }

    body .frayora-resources-page
    .fr-featured__card-description {
        font-size: 13px;
        line-height: 1.7;
        margin-bottom: 20px;
    }
}


/* =========================================================
   14 — SMALL MOBILE
   380px AND BELOW
========================================================= */

@media screen and (max-width: 380px) {

    body .frayora-resources-page .fr-featured__inner {
        padding: 0 20px;
    }

    body .frayora-resources-page .fr-featured__card {
        flex-basis: 89%;
        width: 89%;
    }
}


/* =========================================================
   15 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body .frayora-resources-page .fr-featured__card,
    body .frayora-resources-page .fr-featured__image,
    body .frayora-resources-page .fr-featured__link,
    body .frayora-resources-page .fr-featured__all,
    body .frayora-resources-page .fr-featured svg {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }

    body .frayora-resources-page .fr-featured__grid {
        scroll-behavior: auto;
    }
}


/* =====================================================
   FRAYORA — RESOURCES
   VIEW ALL RESOURCES BUTTON — HOVER OVERRIDE
===================================================== */

@media (hover: hover) {

    body .frayora-resources-page
    .fr-featured__all:hover {

        background: #C96946 !important;
        border-color: #C96946 !important;
        color: #FFFFFF !important;
        box-shadow: none !important;
    }

    body .frayora-resources-page
    .fr-featured__all:hover svg {

        color: #FFFFFF !important;
        stroke: #FFFFFF !important;
    }

}


/* =========================================================
   FRAYORA — RESOURCES
   SECTION 04 — LUMINOUS FINAL CTA

   BOND-INSPIRED EDITORIAL DESIGN

   - Full-width warm ivory surface
   - Diffused terracotta and sage luminosity
   - No outer card, border or container shadow
   - Centered editorial typography
   - Compact, consistent buttons
   - NO glowing button effects
   - Reduced-motion accessible

   Desktop: 1101px+
   Tablet: 600px–1100px
   Mobile: 0px–599px
========================================================= */


/* =========================================================
   01 — FULL-WIDTH SECTION
========================================================= */

body .frayora-resources-page .fr-resources-cta {
    position: relative;
    isolation: isolate;

    width: 100%;
    margin: 0;
    padding: 110px 0 120px;

    overflow: hidden;
    box-sizing: border-box;

    background-color: #F8F3EB;

    background-image:
        radial-gradient(
            ellipse 75% 110% at 15% 55%,
            rgba(211, 123, 88, 0.24) 0%,
            rgba(211, 123, 88, 0.12) 42%,
            rgba(211, 123, 88, 0.035) 70%,
            transparent 100%
        ),

        radial-gradient(
            ellipse 70% 110% at 88% 38%,
            rgba(111, 133, 105, 0.19) 0%,
            rgba(111, 133, 105, 0.085) 45%,
            rgba(111, 133, 105, 0.025) 72%,
            transparent 100%
        );

    background-repeat: no-repeat;

    border: 0;
    border-radius: 0;
    box-shadow: none;
}


/* =========================================================
   02 — EDITORIAL CONTENT CONTAINER
========================================================= */

body .frayora-resources-page .fr-resources-cta__inner {
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: 1600px;

    margin: 0 auto;
    padding: 0 80px;

    box-sizing: border-box;
}

body .frayora-resources-page .fr-resources-cta__content {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
    max-width: 980px;

    margin: 0 auto;

    text-align: center;
}


/* =========================================================
   03 — MAIN HEADING
========================================================= */

body .frayora-resources-page .fr-resources-cta__title {
    max-width: 900px;

    margin: 0;
    padding: 0;

    font-family: "Manrope", sans-serif;
    font-size: clamp(36px, 3.4vw, 52px);
    font-weight: 600;

    line-height: 1.18;
    letter-spacing: -0.05em;

    color: #252B25;

    text-align: center;
    text-wrap: balance;
}


/* =========================================================
   04 — BODY COPY
========================================================= */

body .frayora-resources-page .fr-resources-cta__description {
    max-width: 745px;

    margin: 22px 0 0;
    padding: 0;

    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 400;

    line-height: 1.8;
    letter-spacing: 0;

    color: #626960;

    text-align: center;
}


/* =========================================================
   05 — BUTTON LAYOUT
========================================================= */

body .frayora-resources-page .fr-resources-cta__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;

    gap: 14px;

    width: 100%;
    margin-top: 34px;
}


/* =========================================================
   06 — SHARED BUTTON DESIGN
========================================================= */

body .frayora-resources-page .fr-resources-cta__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 13px;

    width: auto;
    min-width: 216px;
    min-height: 52px;

    padding: 0 24px;

    box-sizing: border-box;

    border: 1px solid transparent;
    border-radius: 999px;

    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 600;

    line-height: 1.4;
    letter-spacing: 0;

    text-decoration: none;
    white-space: nowrap;

    box-shadow: none;

    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease,
        transform 0.3s cubic-bezier(.22,1,.36,1);
}

body .frayora-resources-page .fr-resources-cta__button svg {
    display: block;

    width: 18px;
    height: 18px;

    flex-shrink: 0;

    transition: transform 0.3s ease;
}


/* =========================================================
   07 — PRIMARY BUTTON
   SOLID TERRACOTTA, NO GLOW
========================================================= */

body .frayora-resources-page
.fr-resources-cta__button--primary {
    background: #C96946;
    color: #FFFFFF;

    border-color: #C96946;

    box-shadow: none;
}


/* =========================================================
   08 — SECONDARY BUTTON
   IVORY WITH OLIVE OUTLINE
========================================================= */

body .frayora-resources-page
.fr-resources-cta__button--secondary {
    background: rgba(255, 252, 248, 0.60);

    color: #303B32;

    border-color: rgba(48, 59, 50, 0.35);

    box-shadow: none;
}


/* =========================================================
   09 — HOVER INTERACTIONS
   NO GLOW / NO SHADOW
========================================================= */

@media (hover: hover) {

    body .frayora-resources-page
    .fr-resources-cta__button--primary:hover {
        background: #B85C3C;
        border-color: #B85C3C;

        transform: translateY(-2px);

        box-shadow: none;
    }

    body .frayora-resources-page
    .fr-resources-cta__button--secondary:hover {
        background: #E9EDE4;

        color: #303B32;
        border-color: #556653;

        transform: translateY(-2px);

        box-shadow: none;
    }

    body .frayora-resources-page
    .fr-resources-cta__button:hover svg {
        transform: translateX(3px);
    }
}


/* =========================================================
   10 — KEYBOARD ACCESSIBILITY
========================================================= */

body .frayora-resources-page
.fr-resources-cta__button:focus-visible {
    outline: 2px solid #303B32;
    outline-offset: 4px;
}


/* =========================================================
   11 — SUBTLE SECTION ENTRANCE
   NO BLUR OR HIDDEN CONTENT
========================================================= */

@media (prefers-reduced-motion: no-preference) {

    body .frayora-resources-page
    .fr-resources-cta__content {
        animation:
            frResourcesCtaIn 0.85s
            cubic-bezier(.22, 1, .36, 1)
            both;
    }
}

@keyframes frResourcesCtaIn {

    from {
        opacity: 0.65;
        transform: translateY(12px);
    }

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


/* =========================================================
   12 — TABLET
   600px–1100px
========================================================= */

@media screen and (min-width: 600px)
and (max-width: 1100px) {

    body .frayora-resources-page .fr-resources-cta {
        padding: 85px 0 95px;
    }

    body .frayora-resources-page
    .fr-resources-cta__inner {
        padding: 0 48px;
    }

    body .frayora-resources-page
    .fr-resources-cta__content {
        max-width: 790px;
    }

    body .frayora-resources-page
    .fr-resources-cta__title {
        max-width: 750px;

        font-size: clamp(34px, 4.3vw, 45px);
        line-height: 1.18;
    }

    body .frayora-resources-page
    .fr-resources-cta__description {
        max-width: 670px;

        margin-top: 20px;

        font-size: 15px;
        line-height: 1.75;
    }

    body .frayora-resources-page
    .fr-resources-cta__actions {
        margin-top: 30px;
        gap: 13px;
    }

    body .frayora-resources-page
    .fr-resources-cta__button {
        min-width: 205px;
        min-height: 50px;

        padding: 0 22px;
        font-size: 14px;
    }
}


/* =========================================================
   13 — MOBILE
   0px–599px
========================================================= */

@media screen and (max-width: 599px) {

    body .frayora-resources-page .fr-resources-cta {
        padding: 70px 0 76px;
    }

    body .frayora-resources-page
    .fr-resources-cta__inner {
        padding: 0 24px;
    }

    body .frayora-resources-page
    .fr-resources-cta__content {
        max-width: 100%;
    }

    body .frayora-resources-page
    .fr-resources-cta__title {
        max-width: 100%;

        font-size: clamp(29px, 7.4vw, 36px);
        line-height: 1.2;

        letter-spacing: -0.045em;
    }

    body .frayora-resources-page
    .fr-resources-cta__description {
        max-width: 100%;

        margin-top: 18px;

        font-size: 14px;
        line-height: 1.75;
    }

    body .frayora-resources-page
    .fr-resources-cta__actions {
        flex-direction: column;
        align-items: center;

        gap: 12px;

        margin-top: 28px;
    }

    body .frayora-resources-page
    .fr-resources-cta__button {
        width: auto;
        min-width: 0;
        min-height: 48px;

        padding: 0 21px;

        font-size: 13px;

        box-shadow: none;
    }

    body .frayora-resources-page
    .fr-resources-cta__button svg {
        width: 17px;
        height: 17px;
    }
}


/* =========================================================
   14 — SMALL MOBILE
   380px AND BELOW
========================================================= */

@media screen and (max-width: 380px) {

    body .frayora-resources-page
    .fr-resources-cta__inner {
        padding: 0 20px;
    }

    body .frayora-resources-page
    .fr-resources-cta__title {
        font-size: 28px;
    }

    body .frayora-resources-page
    .fr-resources-cta__button {
        font-size: 12px;
        padding: 0 18px;
    }
}


/* =========================================================
   15 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body .frayora-resources-page
    .fr-resources-cta__content,

    body .frayora-resources-page
    .fr-resources-cta__button,

    body .frayora-resources-page
    .fr-resources-cta__button svg {
        animation: none !important;
        transition: none !important;

        transform: none !important;
        opacity: 1 !important;
    }
}


/* =====================================================
   FRAYORA — RESOURCES
   FINAL CTA — DARK OLIVE HOVER OVERRIDE
===================================================== */

@media (hover: hover) {

    body .frayora-resources-page
    .fr-resources-cta__button--secondary:hover {

        background: #303B32 !important;
        border-color: #303B32 !important;
        color: #FFFFFF !important;

        box-shadow: none !important;
    }

    body .frayora-resources-page
    .fr-resources-cta__button--secondary:hover svg {

        color: #FFFFFF !important;
        stroke: #FFFFFF !important;
    }

}


/* =====================================================
   FRAYORA — ABOUT US
   FINAL CTA — PILL-SHAPED BUTTON FIX

   Desktop, Tablet and Mobile
   Preserves existing colors, sizes and hover effects
===================================================== */

body .about-us-page .about-final-cta
.about-final-cta__button,
body .about-us-page .about-final-cta
.about-final-cta__button--primary,
body .about-us-page .about-final-cta
.about-final-cta__button--secondary {

    border-radius: 999px !important;

}



/* =====================================================
   ABOUT US — FINAL CTA
   LIGHT + LUMINOUS BACKGROUND
   Replace your current about-final-cta styles with this
===================================================== */

body .about-us-page .about-final-cta {
    position: relative;
    overflow: hidden;
    background: #f4eee7 !important;
}

/* luminous background layers */
body .about-us-page .about-final-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(circle at 18% 52%,
            rgba(217, 143, 114, 0.20) 0%,
            rgba(217, 143, 114, 0.12) 18%,
            rgba(217, 143, 114, 0.00) 42%),

        radial-gradient(circle at 82% 45%,
            rgba(174, 186, 164, 0.16) 0%,
            rgba(174, 186, 164, 0.08) 20%,
            rgba(174, 186, 164, 0.00) 46%),

        radial-gradient(circle at 50% 50%,
            rgba(255, 255, 255, 0.28) 0%,
            rgba(255, 255, 255, 0.14) 16%,
            rgba(255, 255, 255, 0.00) 38%),

        linear-gradient(90deg,
            rgba(244, 238, 231, 0.98) 0%,
            rgba(245, 239, 233, 0.94) 50%,
            rgba(241, 237, 229, 0.98) 100%);
}

/* very soft vertical luminous veil */
body .about-us-page .about-final-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        linear-gradient(90deg,
            rgba(255,255,255,0.00) 0%,
            rgba(255,255,255,0.06) 20%,
            rgba(255,255,255,0.10) 50%,
            rgba(255,255,255,0.06) 80%,
            rgba(255,255,255,0.00) 100%);
    mix-blend-mode: screen;
}

/* keep content above glow */
body .about-us-page .about-final-cta > * {
    position: relative;
    z-index: 1;
}

/* text should be dark on this lighter background */
body .about-us-page .about-final-cta h2,
body .about-us-page .about-final-cta .section-heading,
body .about-us-page .about-final-cta .about-final-cta__heading {
    color: #243128 !important;
}

body .about-us-page .about-final-cta p,
body .about-us-page .about-final-cta .section-copy,
body .about-us-page .about-final-cta .about-final-cta__text {
    color: #5f6b62 !important;
}



/* =====================================================
   FRAYORA — ABOUT US
   FINAL CTA — BUTTON DESIGN CORRECTION

   Desktop, Tablet and Mobile
   Clean pill-shaped buttons
   No glowing effects
===================================================== */

/* SHARED BUTTON STYLING */

body .about-us-page .about-final-cta
.about-final-cta__button {
    border-radius: 999px !important;

    box-shadow:
        0 5px 14px rgba(35, 43, 36, 0.08) !important;

    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

/* PRIMARY — SOLID TERRACOTTA */

body .about-us-page .about-final-cta
.about-final-cta__button--primary {
    background: #C96B46 !important;
    border: 1px solid #C96B46 !important;
    color: #FFFFFF !important;
}

/* PRIMARY HOVER */

body .about-us-page .about-final-cta
.about-final-cta__button--primary:hover {
    background: #B85C39 !important;
    border-color: #B85C39 !important;
    color: #FFFFFF !important;

    box-shadow:
        0 8px 18px rgba(35, 43, 36, 0.10) !important;
}

/* SECONDARY — IVORY */

body .about-us-page .about-final-cta
.about-final-cta__button--secondary {
    background: #F8F3EB !important;
    border: 1px solid rgba(48, 59, 50, 0.24) !important;
    color: #303B32 !important;
}

/* SECONDARY HOVER — DARK OLIVE */

body .about-us-page .about-final-cta
.about-final-cta__button--secondary:hover {
    background: #303B32 !important;
    border-color: #303B32 !important;
    color: #F8F3EB !important;

    box-shadow:
        0 8px 18px rgba(35, 43, 36, 0.10) !important;
}

/* ENSURE ICONS MATCH THE BUTTON TEXT */

body .about-us-page .about-final-cta
.about-final-cta__button svg {
    color: inherit !important;
    stroke: currentColor !important;
}

/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
    body .about-us-page .about-final-cta
    .about-final-cta__button {
        transition: none !important;
    }
}



/* =====================================================
   FRAYORA — OUR WORK
   SECTION 04 — FINAL CTA COMPACT LAYOUT

   Desktop / Tablet / Mobile
   - Removes excessive spacing
   - Compact equal-sized buttons
   - Centered content
   - Preserves luminous background and colors
===================================================== */

/* MAIN CONTENT LAYOUT */

body .frayora-work-page .fw-final-cta__inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 0 !important;
    row-gap: 0 !important;

    width: 100%;
    max-width: 1600px;
    margin-inline: auto !important;

    text-align: center !important;
    box-sizing: border-box;
}

/* TEXT CONTAINER */

body .frayora-work-page .fw-final-cta__content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    gap: 0 !important;

    width: 100%;
    max-width: 1000px;

    margin: 0 auto !important;
    padding: 0 !important;

    text-align: center !important;
}

/* HEADING */

body .frayora-work-page .fw-final-cta__heading {
    width: 100%;
    max-width: 1000px;

    margin: 0 auto 18px !important;
    text-align: center !important;
}

/* DESCRIPTION */

body .frayora-work-page .fw-final-cta__text {
    width: 100%;
    max-width: 760px;

    margin: 0 auto !important;
    padding: 0 !important;

    text-align: center !important;
}

/* BUTTON CONTAINER */

body .frayora-work-page .fw-final-cta__actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;

    gap: 12px !important;

    width: 100%;
    max-width: none;

    margin: 20px auto 0 !important;
    padding: 0 !important;
}

/* BOTH BUTTONS — DESKTOP */

body .frayora-work-page .fw-final-cta__button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 210px !important;

    width: 210px !important;
    max-width: 210px !important;
    min-width: 0 !important;

    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;

    margin: 0 !important;
    padding: 10px 16px !important;

    box-sizing: border-box;
    border-radius: 999px !important;

    white-space: nowrap;
    text-align: center !important;
}

/* TABLET */

@media (min-width: 600px) and (max-width: 1100px) {

    body .frayora-work-page .fw-final-cta__actions {
        margin-top: 18px !important;
    }

    body .frayora-work-page .fw-final-cta__button {
        flex-basis: 205px !important;

        width: 205px !important;
        max-width: 205px !important;

        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
    }
}

/* MOBILE */

@media (max-width: 599px) {

    body .frayora-work-page .fw-final-cta__inner {
        padding-inline: 24px;
    }

    body .frayora-work-page .fw-final-cta__heading {
        margin-bottom: 16px !important;
    }

    body .frayora-work-page .fw-final-cta__actions {
        flex-direction: column !important;
        flex-wrap: nowrap !important;

        gap: 12px !important;

        margin-top: 20px !important;
    }

    body .frayora-work-page .fw-final-cta__button {
        flex: 0 0 50px !important;

        width: min(235px, 100%) !important;
        max-width: 235px !important;

        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;
    }
}

/* SMALL MOBILE */

@media (max-width: 390px) {

    body .frayora-work-page .fw-final-cta__inner {
        padding-inline: 20px;
    }

    body .frayora-work-page .fw-final-cta__button {
        width: min(225px, 100%) !important;
        max-width: 225px !important;
    }
}



/* =========================================================
   FRAYORA — HOMEPAGE SECTION 06
   A CLEARER WAY FORWARD

   FIXED:
   - Correct image: glasspic.png
   - Transparent visual background
   - Stronger realistic glass shadows
   - Responsive desktop/tablet/mobile
   - Solid ivory section
   - Manrope + Inter
========================================================= */


/* =========================================
   01 — SECTION FOUNDATION
========================================= */

body .frayora-why-v3 {
    position: relative;
    isolation: isolate;

    display: block;
    width: 100%;
    height: auto;
    min-height: 0;

    margin: 0;
    padding: 0;
    overflow: hidden;

    background-color: #F8F3EB !important;
    background-image: none !important;

    color: #1F211D;
}

body .frayora-why-v3 *,
body .frayora-why-v3 *::before,
body .frayora-why-v3 *::after {
    box-sizing: border-box;
}


/* =========================================
   02 — MAIN LAYOUT
========================================= */

body .frayora-why-v3__inner {
    position: relative;

    display: grid;
    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(0, .8fr);

    align-items: center;
    column-gap: clamp(40px, 5vw, 85px);

    width: 100%;
    max-width: 1600px;

    height: auto;
    min-height: 0;

    margin: 0 auto;
    padding: 95px 80px 100px;
}


/* =========================================
   03 — LEFT CONTENT
========================================= */

body .frayora-why-v3__content {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    width: 100%;
    max-width: 800px;
    min-width: 0;

    margin: 0;
    padding: 0;

    text-align: left;
}


/* EYEBROW */

body .frayora-why-v3__eyebrow {
    display: block;

    margin: 0 0 25px;
    padding: 0;

    font-family: "Inter", sans-serif !important;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .11em;
    text-transform: uppercase;

    color: #C96743;
    text-align: left;
}


/* HEADING */

body .frayora-why-v3__title {
    width: 100%;
    max-width: 800px;

    margin: 0;
    padding: 0;

    font-family: "Manrope", sans-serif !important;
    font-size: clamp(39px, 3.5vw, 57px);
    font-weight: 600;
    font-style: normal;
    line-height: 1.15;
    letter-spacing: -.055em;

    color: #1F211D;
    text-align: left;
    text-wrap: balance;
}

body .frayora-why-v3__title span {
    display: block;

    font: inherit;
    color: #566449;
}


/* EDITORIAL DIVIDER */

body .frayora-why-v3__rule {
    display: block;

    width: 130px;
    height: 2px;

    margin: 30px 0 31px;
    padding: 0;

    border: none;
    background: #D8CABA;
}


/* =========================================
   04 — BODY COPY
========================================= */

body .frayora-why-v3__copy {
    display: flex;
    flex-direction: column;

    gap: 21px;

    width: 100%;
    max-width: 690px;

    margin: 0;
    padding: 0;
}

body .frayora-why-v3__copy p {
    margin: 0;
    padding: 0;

    font-family: "Inter", sans-serif !important;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.8;

    color: rgba(31,33,29,.76);
    text-align: left;
}

body .frayora-why-v3__lead,
body .frayora-why-v3__lead strong {
    font-family: "Inter", sans-serif !important;
    font-weight: 600 !important;
    color: #1F211D !important;
}


/* =========================================
   05 — GLASS SCULPTURE
   IMAGE LOADED ENTIRELY THROUGH CSS
========================================= */

body .frayora-why-v3__visual {
    position: relative;
    isolation: isolate;

    display: block !important;

    width: 100%;
    max-width: 550px;
    min-width: 0;

    height: auto;
    min-height: 0;
    aspect-ratio: 3 / 2;

    justify-self: center;
    align-self: center;

    margin: 0;
    padding: 0;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    box-shadow: none !important;

    overflow: visible !important;
    opacity: 1;
    visibility: visible;
}


/* THE ACTUAL IMAGE */

body .frayora-why-v3__visual::before {
    content: "" !important;

    position: absolute;
    z-index: 1;
    inset: 0;

    display: block !important;

    width: 100%;
    height: 100%;

    background-color: transparent;

    background-image:
        url("../images/Homepage/glasspic.png") !important;

    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important;

    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: none;

    /* Premium dimensional shadows */

    filter:
        drop-shadow(
            0 8px 8px rgba(38,42,34,.14)
        )
        drop-shadow(
            0 20px 20px rgba(38,42,34,.15)
        )
        drop-shadow(
            0 36px 36px rgba(38,42,34,.09)
        );

    transition:
        transform .5s cubic-bezier(.22,1,.36,1),
        filter .5s ease;
}


/* REMOVE OLD DECORATIVE LAYERS */

body .frayora-why-v3__visual::after {
    content: none !important;
    display: none !important;
}


/* =========================================
   06 — SOFT HOVER DEPTH
========================================= */

@media (hover: hover) {

    body .frayora-why-v3__visual:hover::before {
        transform: translateY(-5px);

        filter:
            drop-shadow(
                0 12px 12px rgba(38,42,34,.16)
            )
            drop-shadow(
                0 26px 26px rgba(38,42,34,.17)
            )
            drop-shadow(
                0 42px 44px rgba(38,42,34,.10)
            );
    }
}


/* =========================================
   07 — SMALLER DESKTOP
========================================= */

@media screen and (min-width: 1101px)
and (max-width: 1350px) {

    body .frayora-why-v3__inner {
        grid-template-columns:
            minmax(0, 1.15fr)
            minmax(0, .85fr);

        column-gap: 40px;
        padding: 85px 55px 90px;
    }

    body .frayora-why-v3__title {
        font-size: clamp(37px, 3.5vw, 49px);
    }

    body .frayora-why-v3__visual {
        max-width: 455px;
    }
}


/* =========================================
   08 — LANDSCAPE TABLET
   900px–1100px
========================================= */

@media screen and (min-width: 900px)
and (max-width: 1100px) {

    body .frayora-why-v3__inner {
        display: grid;
        grid-template-columns:
            minmax(0, 1.12fr)
            minmax(0, .88fr);

        align-items: center;
        column-gap: 30px;

        padding: 75px 44px 80px;
    }

    body .frayora-why-v3__eyebrow {
        font-size: 11px;
        margin-bottom: 20px;
    }

    body .frayora-why-v3__title {
        font-size: clamp(32px, 3.65vw, 41px);
    }

    body .frayora-why-v3__copy {
        gap: 16px;
    }

    body .frayora-why-v3__copy p {
        font-size: 13px;
        line-height: 1.75;
    }

    body .frayora-why-v3__visual {
        max-width: 380px;
    }
}


/* =========================================
   09 — PORTRAIT TABLET
   600px–899px
========================================= */

@media screen and (min-width: 600px)
and (max-width: 899px) {

    body .frayora-why-v3__inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr);

        align-items: start;
        gap: 30px;

        max-width: 760px;

        padding: 75px 48px 65px;
    }

    body .frayora-why-v3__content {
        max-width: 100%;
    }

    body .frayora-why-v3__title {
        max-width: 690px;

        font-size: clamp(38px, 5vw, 48px);
    }

    body .frayora-why-v3__copy {
        max-width: 650px;
    }

    body .frayora-why-v3__copy p {
        font-size: 14px;
        line-height: 1.8;
    }

    body .frayora-why-v3__visual {
        width: 100%;
        max-width: 430px;

        justify-self: center;
        margin: 0 auto;
    }
}


/* =========================================
   10 — MOBILE
   UP TO 599px
========================================= */

@media screen and (max-width: 599px) {

    body .frayora-why-v3__inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 28px;

        width: 100%;
        max-width: none;

        padding: 68px 24px 60px;
    }

    body .frayora-why-v3__content {
        width: 100%;
        max-width: none;
    }

    body .frayora-why-v3__eyebrow {
        font-size: 11px;
        margin-bottom: 20px;
    }

    body .frayora-why-v3__title {
        font-size: clamp(31px, 8vw, 42px);
        line-height: 1.18;
        letter-spacing: -.05em;
    }

    body .frayora-why-v3__rule {
        width: 88px;
        margin: 26px 0 25px;
    }

    body .frayora-why-v3__copy {
        gap: 18px;
    }

    body .frayora-why-v3__copy p {
        font-size: 14px;
        line-height: 1.8;
    }

    body .frayora-why-v3__visual {
        display: block !important;

        width: 100%;
        max-width: 370px;

        align-self: center;
        margin: 0 auto;
    }

    body .frayora-why-v3__visual::before {
        filter:
            drop-shadow(
                0 7px 9px rgba(38,42,34,.12)
            )
            drop-shadow(
                0 18px 20px rgba(38,42,34,.12)
            );
    }
}


/* =========================================
   11 — SMALL MOBILE
========================================= */

@media screen and (max-width: 374px) {

    body .frayora-why-v3__inner {
        padding: 62px 20px 54px;
        gap: 24px;
    }

    body .frayora-why-v3__title {
        font-size: 30px;
    }

    body .frayora-why-v3__visual {
        max-width: 315px;
    }
}


/* =========================================
   12 — ACCESSIBILITY
========================================= */

@media (prefers-reduced-motion: reduce) {

    body .frayora-why-v3__visual::before {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }

}



/* SECTION 06 — REMOVE LINE UNDER HEADING */

body .frayora-why-v3__rule {
    display: none !important;
}

/* Adjust spacing after removing the line */

body .frayora-why-v3__copy {
    margin-top: 30px;
}

@media (max-width: 599px) {
    body .frayora-why-v3__copy {
        margin-top: 25px;
    }
}



/* =========================================================
   FRAYORA — HOMEPAGE SECTION 07
   FINAL CTA — LUMINOUS SAAS DESIGN

   Soft champagne-gold / muted sage illumination
   Solid ivory foundation
   Manrope + Inter
   Bond-inspired editorial typography
   Desktop / Tablet / Mobile
========================================================= */


/* 01 — SECTION BACKGROUND */

body .home-cta {
    position: relative;
    isolation: isolate;

    display: block;
    width: 100%;
    min-height: 0;
    height: auto;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background-color: #F8F3EB !important;

    background-image:
        radial-gradient(
            ellipse 72% 110% at 9% 42%,
            rgba(226, 175, 143, .20) 0%,
            rgba(226, 175, 143, .08) 48%,
            transparent 100%
        ),
        radial-gradient(
            ellipse 72% 110% at 91% 43%,
            rgba(157, 171, 139, .18) 0%,
            rgba(157, 171, 139, .07) 48%,
            transparent 100%
        ),
        linear-gradient(
            180deg,
            #F8F3EB 0%,
            #F8F3EB 12%,
            #F9F5EF 58%,
            #F8F3EB 100%
        ) !important;

    background-repeat: no-repeat;
    color: #1F211D;
}

body .home-cta,
body .home-cta *,
body .home-cta *::before,
body .home-cta *::after {
    box-sizing: border-box;
}


/* 02 — SOFT LUMINOUS WASH */

body .home-cta::before {
    content: "";

    position: absolute;
    z-index: 0;
    inset: 0;

    background:
        radial-gradient(
            ellipse 65% 85% at 50% 40%,
            rgba(255,255,255,.55) 0%,
            rgba(255,255,255,.23) 52%,
            transparent 100%
        );

    pointer-events: none;
}

body .home-cta::after {
    content: none !important;
    display: none !important;
}


/* 03 — SECTION CONTAINER */

body .home-cta__inner {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 1500px;
    min-height: 0;
    height: auto;

    margin: 0 auto;
    padding: 110px 80px 115px;

    text-align: center;
}




/* 05 — MAIN HEADING */

body .home-cta__title {
    width: 100%;
    max-width: 1000px;

    margin: 0;
    padding: 0;

    font-family: "Manrope", sans-serif !important;
    font-size: clamp(43px, 4.4vw, 68px);
    font-weight: 600;
    font-style: normal;
    line-height: 1.12;
    letter-spacing: -.055em;

    color: #1F211D;
    text-align: center;
    text-wrap: balance;
}


/* 06 — SUPPORTING TEXT */

body .home-cta__text {
    width: 100%;
    max-width: 680px;

    margin: 27px auto 0;
    padding: 0;

    font-family: "Inter", sans-serif !important;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.9;

    color: rgba(31,33,29,.73);
    text-align: center;
}

body .home-cta__text strong {
    font-weight: 600;
    color: #1F211D;
}


/* 07 — CTA BUTTON */

body .home-cta__button-wrap {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    margin: 34px auto 0;
    padding: 0;
}

body .home-cta__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 22px;

    min-width: 265px;
    min-height: 56px;

    margin: 0;
    padding: 0 32px;

    background: #C96743;
    color: #FFFFFF;

    border: 1px solid transparent;
    border-radius: 999px;

    font-family: "Manrope", sans-serif !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.015em;
    text-decoration: none;

    box-shadow:
        0 9px 18px rgba(134,75,50,.10),
        0 19px 34px rgba(134,75,50,.07),
        inset 0 1px 0 rgba(255,255,255,.17);

    transition:
        background-color .35s ease,
        transform .35s ease,
        box-shadow .35s ease;
}

body .home-cta__button-arrow {
    display: inline-block;

    font-size: 21px;
    font-weight: 400;
    line-height: 1;

    transition: transform .3s ease;
}

@media (hover: hover) {
    body .home-cta__button:hover {
        background: #B95B39;
        color: #FFFFFF;

        transform: translateY(-3px);

        box-shadow:
            0 14px 26px rgba(134,75,50,.16),
            0 24px 44px rgba(134,75,50,.09);
    }

    body .home-cta__button:hover
    .home-cta__button-arrow {
        transform: translateX(4px);
    }
}

body .home-cta__button:focus-visible {
    outline: 2px solid #566449;
    outline-offset: 5px;
}


/* 08 — TABLET */

@media (min-width: 600px) and (max-width: 1100px) {

    body .home-cta__inner {
        padding: 95px 48px 100px;
    }

    body .home-cta__title {
        max-width: 850px;
        font-size: clamp(40px, 5vw, 56px);
    }

    body .home-cta__text {
        font-size: 15px;
    }

    body .home-cta {
        background-image:
            radial-gradient(
                ellipse 75% 95% at 0% 45%,
                rgba(226,175,143,.17),
                transparent 100%
            ),
            radial-gradient(
                ellipse 75% 95% at 100% 45%,
                rgba(157,171,139,.15),
                transparent 100%
            ) !important;
    }
}


/* 09 — MOBILE */

@media (max-width: 599px) {

    body .home-cta__inner {
        padding: 82px 24px 90px;
    }


    body .home-cta__title {
        max-width: 440px;
        font-size: clamp(34px, 8.5vw, 44px);
        line-height: 1.16;
    }

    body .home-cta__text {
        max-width: 420px;
        margin-top: 23px;

        font-size: 14px;
        line-height: 1.85;
    }

    body .home-cta__button-wrap {
        margin-top: 29px;
    }

    body .home-cta__button {
        min-width: 0;
        min-height: 54px;

        padding: 0 30px;
        font-size: 13px;
    }

    body .home-cta {
        background-image:
            radial-gradient(
                ellipse 95% 78% at 0% 30%,
                rgba(226,175,143,.14),
                transparent 100%
            ),
            radial-gradient(
                ellipse 95% 78% at 100% 78%,
                rgba(157,171,139,.13),
                transparent 100%
            ) !important;
    }
}


/* 10 — REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {

    body .home-cta__button,
    body .home-cta__button-arrow {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}


/* ==========================================================
   FRAYORA — HOMEPAGE SECTION 02 / CONNECTED INFRASTRUCTURE
   Approved six-in-one-row, borderless connector mockup
   Fonts: Manrope 600 headings | Inter 400–600 copy
   Colors: Ivory #F8F3EB | Olive #566449 | Rust #C96743
   Desktop 6 columns | Tablet 3x2 | Mobile connected vertical
   All selectors isolated from the OLD infrastructure-section
========================================================== */

body .frayora-connected-v3 {
  --fc-ivory: #F8F3EB;
  --fc-ink: #1F211D;
  --fc-olive: #566449;
  --fc-rust: #C96743;
  --fc-copy: #696A63;
  --fc-line: rgba(97,118,81,.40);
  position: relative;
  isolation: isolate;
  width: 100%;
  margin: 0;
  overflow: clip;
  color: var(--fc-ink);
  background: var(--fc-ivory) !important;
  background-image: none !important;
}
body .frayora-connected-v3 *,
body .frayora-connected-v3 *::before,
body .frayora-connected-v3 *::after { box-sizing: border-box; }

body .frayora-connected-v3__inner {
  position: relative;
  max-width: 1660px;
  margin: 0 auto;
  padding: clamp(76px, 7vw, 122px) clamp(38px, 5.4vw, 90px) clamp(88px, 7vw, 126px);
}
/* Light acts on the section, not as a decorative image or card. */
body .frayora-connected-v3__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 57% 50% at 52% 58%,rgba(255,255,255,.44),transparent 78%);
}
body .frayora-connected-v3__intro { max-width: 1000px; }
body .frayora-connected-v3__eyebrow {
  margin: 0 0 22px;
  color: var(--fc-rust) !important;
  font: 600 12px/1.45 "Inter",sans-serif !important;
  letter-spacing: .135em;
  text-transform: uppercase;
}
body .frayora-connected-v3__title {
  max-width: 1040px;
  margin: 0;
  color: var(--fc-ink) !important;
  font: 600 clamp(41px,4.2vw,69px)/1.12 "Manrope",sans-serif !important;
  letter-spacing: -.055em;
  text-wrap: balance;
}
body .frayora-connected-v3__title span { display: block; font: inherit; color: var(--fc-olive) !important; }
body .frayora-connected-v3__body {
  max-width: 870px;
  margin: 23px 0 0;
  color: var(--fc-copy) !important;
  font: 400 clamp(15px,1.1vw,17px)/1.75 "Inter",sans-serif !important;
}

/* SIX SERVICES — desktop, evenly spaced, no individual cards */
body .frayora-connected-v3__network { position: relative; margin-top: clamp(42px,4vw,68px); }
body .frayora-connected-v3__services {
  display: grid;
  grid-template-columns: repeat(6,minmax(0,1fr));
  gap: clamp(17px,2.25vw,38px);
  position: relative;
  z-index: 2;
}
body .frayora-connected-v3__wave {
  position: absolute;
  z-index: 0;
  inset: 0 0 auto;
  width: 100%;
  height: 116px;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(68,88,57,.10));
}
body .frayora-connected-v3__wave path {
  stroke: var(--fc-line);
  stroke-width: 1.55;
  fill: none;
  vector-effect: non-scaling-stroke;
}
body .frayora-connected-v3__wave circle { fill: #788D54; stroke: var(--fc-ivory); stroke-width: 1.5; }
body .frayora-connected-v3__service {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body .frayora-connected-v3__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(73px,6.35vw,98px);
  height: clamp(73px,6.35vw,98px);
  margin: 0 auto 22px;
  border: 1px solid rgba(72,84,58,.10);
  border-radius: 50%;
  color: #536742;
  background: radial-gradient(circle at 30% 20%,#FFFFFF 0%,#F0F1E6 58%,#E0E4D2 100%);
  box-shadow: 0 12px 24px rgba(57,51,39,.10),0 3px 6px rgba(57,51,39,.045),inset 0 2px 3px rgba(255,255,255,.96);
  transition: transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s ease;
}
body .frayora-connected-v3__service:nth-child(even) .frayora-connected-v3__icon {
  color: #B45A38;
  border-color: rgba(177,99,66,.12);
  background: radial-gradient(circle at 30% 20%,#FFFFFF 0%,#F9EBE3 55%,#F0D9CA 100%);
}
body .frayora-connected-v3__icon svg { display:block; width: 40%; height:40%; }
body .frayora-connected-v3__number {
  margin: 0 0 11px;
  color: var(--fc-rust) !important;
  font: 600 14px/1.3 "Inter",sans-serif !important;
}
body .frayora-connected-v3__service-title {
  width:100%;
  min-height: 2.75em;
  margin: 0 0 11px;
  color: var(--fc-ink) !important;
  font: 600 clamp(15px,1.05vw,18px)/1.35 "Manrope",sans-serif !important;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}
body .frayora-connected-v3__service-copy {
  flex: 1;
  margin: 0 0 19px;
  color: var(--fc-copy) !important;
  font: 400 clamp(12.5px,.86vw,14px)/1.65 "Inter",sans-serif !important;
}
body .frayora-connected-v3__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  min-height: 30px;
  margin: auto 0 0;
  padding: 0 0 4px;
  border-bottom: 1px solid var(--fc-rust);
  color: #AD5033 !important;
  font: 500 clamp(12px,.9vw,14px)/1.4 "Inter",sans-serif !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: color .25s ease,border-color .25s ease;
}
body .frayora-connected-v3__link span {
  display: inline-block;
  font-size: 17px;
  line-height: 1;
  transition: transform .25s ease;
}
body .frayora-connected-v3__link:focus-visible { outline: 2px solid var(--fc-olive); outline-offset: 5px; }
@media (hover:hover) {
  body .frayora-connected-v3__service:hover .frayora-connected-v3__icon {
    transform: translateY(-6px);
    box-shadow: 0 19px 30px rgba(57,51,39,.14),0 5px 10px rgba(57,51,39,.06),inset 0 2px 3px rgba(255,255,255,.96);
  }
  body .frayora-connected-v3__link:hover { color: #913C28 !important; border-color: #913C28; }
  body .frayora-connected-v3__link:hover span { transform: translateX(4px); }
}

/* Medium desktop: keep six across but use a little less padding. */
@media (min-width:1281px) and (max-width:1500px) {
  body .frayora-connected-v3__inner { padding-inline: 50px; }
  body .frayora-connected-v3__services { gap: 21px; }
}

/* Tablet: each row becomes its own three-part connected sequence.
   More readable than squeezing six across a 900px viewport. */
@media (min-width:700px) and (max-width:1280px) {
  body .frayora-connected-v3__inner { padding: 80px clamp(32px,5vw,64px) 95px; }
  body .frayora-connected-v3__title { font-size:clamp(38px,5vw,56px); }
  body .frayora-connected-v3__body { max-width: 800px; font-size:15px; }
  body .frayora-connected-v3__network { margin-top: 54px; }
  body .frayora-connected-v3__services { grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:32px; row-gap:55px; }
  body .frayora-connected-v3__wave { display:none; }
  body .frayora-connected-v3__service { position:relative; }
  body .frayora-connected-v3__service:not(:nth-child(3n))::before {
    content:"";
    position:absolute;
    z-index:0;
    top:43px;
    left:calc(50% + 43px);
    width:calc(100% + 32px - 86px);
    border-top:1.5px solid var(--fc-line);
  }
  body .frayora-connected-v3__icon { z-index:1; width:86px; height:86px; }
  body .frayora-connected-v3__service-title { min-height:0; font-size:17px !important; }
  body .frayora-connected-v3__service-copy { font-size:14px !important; }
  body .frayora-connected-v3__link { font-size:13px !important; }
}

/* Mobile: same six services in a clear connected vertical journey. */
@media (max-width:699px) {
  body .frayora-connected-v3__inner { padding: 69px 24px 72px; }
  body .frayora-connected-v3__eyebrow { font-size:11px !important; margin-bottom:19px; }
  body .frayora-connected-v3__title { font-size:clamp(32px,8.4vw,44px) !important; line-height:1.16; }
  body .frayora-connected-v3__body { max-width:550px; margin-top:20px; font-size:14px !important; line-height:1.78; }
  body .frayora-connected-v3__network { margin-top:38px; }
  body .frayora-connected-v3__wave { display:none; }
  body .frayora-connected-v3__services { display:flex; flex-direction:column; gap:0; }
  body .frayora-connected-v3__service {
    position:relative;
    display:grid;
    grid-template-columns:75px minmax(0,1fr);
    grid-template-areas:"icon number" "icon heading" "icon text" "icon link";
    column-gap:19px;
    padding:0 0 37px;
  }
  body .frayora-connected-v3__service:not(:last-child)::after {
    content:"";
    position:absolute;
    z-index:0;
    top:77px;
    bottom:4px;
    left:37px;
    border-left:1.5px solid var(--fc-line);
  }
  body .frayora-connected-v3__icon { grid-area:icon; z-index:1; margin:0; width:74px; height:74px; }
  body .frayora-connected-v3__number { grid-area:number; margin:3px 0 7px; }
  body .frayora-connected-v3__service-title { grid-area:heading; min-height:0; margin-bottom:10px; font-size:18px !important; }
  body .frayora-connected-v3__service-copy { grid-area:text; margin-bottom:11px; font-size:13.5px !important; line-height:1.7; }
  body .frayora-connected-v3__link { grid-area:link; font-size:13px !important; margin:0; }
  body .frayora-connected-v3__service:last-child { padding-bottom:0; }
}
@media (max-width:380px) {
  body .frayora-connected-v3__inner { padding-inline:19px; }
  body .frayora-connected-v3__service { grid-template-columns:64px minmax(0,1fr);column-gap:15px; }
  body .frayora-connected-v3__icon { width:62px;height:62px; }
  body .frayora-connected-v3__service:not(:last-child)::after { top:65px;left:30px; }
}
/* Gentle reveal, explicitly disabled for reduced-motion users. */
@keyframes fcV3Enter { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:no-preference) {
  @supports (animation-timeline:view()) {
    body .frayora-connected-v3__intro { animation:fcV3Enter both linear;animation-timeline:view();animation-range:entry 0% entry 65%; }
  }
}
@media (prefers-reduced-motion:reduce) {
  body .frayora-connected-v3__icon,
  body .frayora-connected-v3__link,
  body .frayora-connected-v3__link span { transition:none !important; }
}



/* =========================================================
   FRAYORA — HOMEPAGE SECTION 02
   RESPONSIVE REFINEMENTS

   01 — Reduce desktop heading size
   02 — Curved olive connectors on tablet
   03 — Preserve current service design
========================================================= */


/* =========================================
   01 — DESKTOP HEADING
   1281px AND ABOVE
========================================= */

@media screen and (min-width: 1281px) {

    body .frayora-connected-v3__title {
        font-family: "Manrope", sans-serif !important;

        font-size: clamp(39px, 3.25vw, 51px) !important;
        font-weight: 600 !important;

        line-height: 1.15 !important;
        letter-spacing: -0.055em !important;

        max-width: 900px;
    }

    body .frayora-connected-v3__title span {
        font: inherit;
        color: #566449 !important;
    }

}


/* =========================================
   02 — TABLET WAVE CONNECTORS
   700px–1280px
========================================= */

@media screen and (min-width: 700px)
and (max-width: 1280px) {

    /* Hide previous straight connector lines */

    body .frayora-connected-v3__service::before {
        content: none !important;
        display: none !important;
    }

    /* Individual services */

    body .frayora-connected-v3__service {
        position: relative;
        isolation: isolate;
    }

    /* Keep icons above connector */

    body .frayora-connected-v3__icon {
        position: relative;
        z-index: 2;
    }

    /* Allow the desktop wave SVG to display
       as two shorter waves on tablet */

    body .frayora-connected-v3__wave {
        display: none !important;
    }

    /* Curved connectors between icons */

    body .frayora-connected-v3__service:nth-child(3n + 1)::after,
    body .frayora-connected-v3__service:nth-child(3n + 2)::after {
        content: "";

        position: absolute;
        z-index: 0;

        width: calc(100% + 32px - 86px);
        height: 43px;

        top: 43px;
        left: calc(50% + 43px);

        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 43' preserveAspectRatio='none'%3E%3Cpath d='M0 0 C45 0 45 36 100 36 S155 0 200 0' fill='none' stroke='%239BAA88' stroke-width='1.5'/%3E%3Ccircle cx='100' cy='36' r='4' fill='%23788D54'/%3E%3C/svg%3E");

        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;

        pointer-events: none;
    }

    /* Last item in each row has no outgoing line */

    body .frayora-connected-v3__service:nth-child(3n)::after {
        content: none !important;
        display: none !important;
    }

}


/* =========================================
   03 — KEEP OTHER SCREEN SIZES UNCHANGED
========================================= */

/* Desktop keeps the original six-icon wave.
   Mobile keeps the vertical connection.
   No changes are required for these layouts. */



/* =========================================
   FRAYORA — SECTION 02
   MOBILE WAVE CONNECTOR FIX
   OVERRIDE ONLY
========================================= */

@media screen and (max-width: 699px) {

    /* Remove old connector styles */
    body .frayora-connected-v3
    .frayora-connected-v3__service::before {
        content: none !important;
        display: none !important;
    }

    /* New flowing connector */
    body .frayora-connected-v3
    .frayora-connected-v3__service:not(:last-child)::after {
        content: "" !important;

        position: absolute !important;
        z-index: 0 !important;

        top: 74px !important;
        bottom: -1px !important;
        left: 19px !important;

        width: 36px !important;
        height: auto !important;

        border: 0 !important;

        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 100' preserveAspectRatio='none'%3E%3Cpath d='M18 0 C18 22 28 22 28 45 S8 75 8 100' fill='none' stroke='%239BAA88' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") !important;

        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 100% 100% !important;

        pointer-events: none !important;
    }

    /* Keep icons above the wave */
    body .frayora-connected-v3
    .frayora-connected-v3__icon {
        position: relative;
        z-index: 2 !important;
    }

    /* No connector after final service */
    body .frayora-connected-v3
    .frayora-connected-v3__service:last-child::after {
        content: none !important;
        display: none !important;
    }
}

/* SMALL MOBILE */

@media screen and (max-width: 380px) {

    body .frayora-connected-v3
    .frayora-connected-v3__service:not(:last-child)::after {
        top: 62px !important;
        left: 13px !important;
    }
}



/* =========================================================
   FRAYORA — HOMEPAGE SECTION 04
   BUSINESS IN A BOX™ — V4

   Editorial SaaS / Bond-inspired design

   TYPOGRAPHY
   Manrope 600 — headings and buttons
   Inter 400–600 — supporting text

   PACKAGE COLORS
   Foundation: #F7F0E6
   Growth:     #87947B
   Enterprise: #D66A43

   Desktop / Tablet / Mobile
========================================================= */


/* =========================================
   01 — SECTION FOUNDATION
========================================= */

body .frayora-biab-v4 {
    --biab-ink: #1F211D;
    --biab-ivory: #F8F3EB;
    --biab-cream: #F7F0E6;
    --biab-sage: #87947B;
    --biab-terracotta: #D66A43;
    --biab-olive: #566449;

    position: relative;
    isolation: isolate;

    display: block;

    width: 100%;
    max-width: none;
    min-height: 0;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background-color: #F8F3EB !important;

    background-image:
        radial-gradient(
            ellipse 85% 68% at 50% 0%,
            rgba(255,255,255,.54),
            transparent 85%
        ) !important;

    color: var(--biab-ink);
}

body .frayora-biab-v4,
body .frayora-biab-v4 *,
body .frayora-biab-v4 *::before,
body .frayora-biab-v4 *::after {
    box-sizing: border-box;
}


/* =========================================
   02 — INNER CONTAINER
========================================= */

body .frayora-biab-v4__inner {
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: 1600px;

    margin: 0 auto;
    padding: 94px 80px 105px;
}


/* =========================================
   03 — SECTION HEADER
========================================= */

body .frayora-biab-v4__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 48px;
    margin: 0 0 45px;
}

body .frayora-biab-v4__heading-group {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 1000px;
}


/* =========================================
   04 — EYEBROW
========================================= */

body .frayora-biab-v4__eyebrow {
    display: block;

    margin: 0 0 20px;
    padding: 0;

    font-family: "Inter", sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.4;

    letter-spacing: .12em;
    text-transform: uppercase;

    color: #C96743 !important;
}


/* =========================================
   05 — HEADING
========================================= */

body .frayora-biab-v4__title {
    width: 100%;
    max-width: 1050px;

    margin: 0;
    padding: 0;

    font-family: "Manrope", sans-serif !important;
    font-size: clamp(39px, 3.35vw, 54px) !important;
    font-weight: 600 !important;
    font-style: normal !important;

    line-height: 1.14 !important;
    letter-spacing: -.055em !important;

    color: #1F211D !important;

    text-align: left;
    text-wrap: balance;
}

body .frayora-biab-v4__title span {
    display: block;

    font-family: "Manrope", sans-serif !important;
    font-size: inherit !important;
    font-weight: 600 !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;

    color: #566449 !important;
}


/* =========================================
   06 — COMPARE PACKAGES BUTTON
========================================= */

body .frayora-biab-v4__compare {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;
    gap: 19px;

    min-height: 56px;

    padding: 0 29px;
    margin: 0 0 5px;

    border: 1px solid #C96743;
    border-radius: 999px;

    background: #C96743;
    color: #FFFFFF !important;

    font-family: "Manrope", sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.3;
    letter-spacing: -.015em;

    text-decoration: none !important;
    white-space: nowrap;

    box-shadow:
        0 10px 22px rgba(132,73,48,.14),
        0 22px 42px rgba(132,73,48,.08),
        inset 0 1px 0 rgba(255,255,255,.20);

    transition:
        transform .35s cubic-bezier(.22,1,.36,1),
        background-color .35s ease,
        box-shadow .35s ease;
}

body .frayora-biab-v4__compare span {
    display: inline-block;
    font-size: 21px;
    font-weight: 400;
    line-height: 1;

    transition: transform .3s ease;
}


/* =========================================
   07 — PACKAGE GRID
========================================= */

body .frayora-biab-v4__packages {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    align-items: stretch;
    gap: 24px;

    width: 100%;
}


/* =========================================
   08 — CARD BASE
========================================= */

body .frayora-biab-v4__card {
    position: relative;
    isolation: isolate;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    min-width: 0;
    min-height: 430px;

    margin: 0;
    padding: 44px 42px 38px;

    overflow: hidden;

    border: 1px solid rgba(255,255,255,.25);
    border-radius: 20px;

    box-shadow:
        0 4px 12px rgba(35,36,29,.035),
        0 18px 35px rgba(35,36,29,.085),
        0 32px 58px rgba(35,36,29,.055);

    transform: translateZ(0);

    transition:
        transform .45s cubic-bezier(.22,1,.36,1),
        box-shadow .45s ease;
}


/* Soft architectural lighting */

body .frayora-biab-v4__card::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 0;

    border-radius: inherit;

    background:
        radial-gradient(
            ellipse 90% 55% at 20% 0%,
            rgba(255,255,255,.19),
            transparent 82%
        );

    pointer-events: none;
}


/* Decorative architectural arc */

body .frayora-biab-v4__card::after {
    content: "";

    position: absolute;

    right: -125px;
    bottom: -155px;

    width: 310px;
    height: 310px;

    border: 1px solid currentColor;
    border-radius: 50%;

    color: rgba(255,255,255,.19);

    box-shadow:
        inset 0 0 0 29px rgba(255,255,255,.055),
        inset 0 0 0 65px rgba(255,255,255,.035);

    pointer-events: none;
}

body .frayora-biab-v4__card > * {
    position: relative;
    z-index: 1;
}


/* =========================================
   09 — FOUNDATION
========================================= */

body .frayora-biab-v4__card--foundation {
    background: #F7F0E6 !important;
    color: #1F211D;

    border-color: rgba(134,111,88,.12);
}

body .frayora-biab-v4__card--foundation::before {
    background:
        radial-gradient(
            ellipse 95% 70% at 15% 0%,
            rgba(255,255,255,.72),
            transparent 85%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,.15),
            transparent 70%
        );
}

body .frayora-biab-v4__card--foundation::after {
    color: rgba(166,126,93,.16);

    box-shadow:
        inset 0 0 0 30px rgba(166,126,93,.045),
        inset 0 0 0 70px rgba(166,126,93,.025);
}


/* =========================================
   10 — GROWTH
========================================= */

body .frayora-biab-v4__card--growth {
    background: #87947B !important;
    color: #FFFFFF;

    border-color: rgba(65,79,57,.15);
}


/* =========================================
   11 — ENTERPRISE
========================================= */

body .frayora-biab-v4__card--enterprise {
    background: #4F5B49  !important;
    color: #FFFFFF;

    border-color: rgba(151,64,35,.14);
}


/* =========================================
   12 — PACKAGE ICONS
========================================= */

body .frayora-biab-v4__icon {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    width: 100%;
    height: 52px;

    margin: 0 0 24px;

    color: currentColor;
}

body .frayora-biab-v4__icon svg {
    display: block;

    width: 45px;
    height: 45px;

    transition:
        transform .4s cubic-bezier(.22,1,.36,1);
}

body .frayora-biab-v4__card--foundation
.frayora-biab-v4__icon {
    color: #C96743;
}


/* =========================================
   13 — PACKAGE NUMBERS
========================================= */

body .frayora-biab-v4__number {
    display: block;

    margin: 0 0 10px;

    font-family: "Inter", sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.3;

    letter-spacing: -.015em;
    color: currentColor;
}

body .frayora-biab-v4__card--foundation
.frayora-biab-v4__number {
    color: #C96743;
}


/* =========================================
   14 — PACKAGE HEADINGS
========================================= */

body .frayora-biab-v4__card-title {
    display: block;

    width: 100%;

    margin: 0 0 9px;
    padding: 0;

    font-family: "Manrope", sans-serif !important;
    font-size: clamp(25px, 2vw, 35px) !important;
    font-weight: 600 !important;
    font-style: normal !important;

    line-height: 1.2 !important;
    letter-spacing: -.045em !important;

    color: inherit !important;
}


/* =========================================
   15 — AUDIENCE
========================================= */

body .frayora-biab-v4__audience {
    margin: 0 0 21px;

    font-family: "Inter", sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.5;

    color: inherit !important;
}


/* =========================================
   16 — DESCRIPTIONS
========================================= */

body .frayora-biab-v4__description {
    width: 100%;
    max-width: 390px;

    margin: 0 0 31px;

    font-family: "Inter", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.75 !important;

    color: inherit !important;
}

body .frayora-biab-v4__card--foundation
.frayora-biab-v4__description {
    color: #55534E !important;
}

body .frayora-biab-v4__card--foundation
.frayora-biab-v4__audience {
    color: #57554F !important;
}


/* =========================================
   17 — LEARN MORE BUTTONS
========================================= */

body .frayora-biab-v4__learn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 16px;

    width: fit-content;
    min-height: 46px;

    margin: auto 0 0;
    padding: 0 24px;

    border: 1px solid #E6D5C5;
    border-radius: 999px;

    background-color: #FFFCF7;

    color: #B95B39 !important;

    font-family: "Manrope", sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.3;

    text-decoration: none !important;
    white-space: nowrap;

    box-shadow:
        0 4px 10px rgba(49,43,35,.045),
        inset 0 1px 0 rgba(255,255,255,.8);

    transition:
        transform .3s ease,
        background-color .3s ease,
        box-shadow .3s ease;
}

body .frayora-biab-v4__learn span {
    display: inline-block;

    font-family: "Inter", sans-serif;
    font-size: 20px;
    line-height: 1;

    transition: transform .3s ease;
}


/* Growth button */

body .frayora-biab-v4__card--growth
.frayora-biab-v4__learn {
    color: #566449 !important;
    border-color: rgba(255,255,255,.55);
}


/* Enterprise button */

body .frayora-biab-v4__card--enterprise
.frayora-biab-v4__learn {
    color: #B65432 !important;
    border-color: rgba(255,255,255,.55);
}


/* =========================================
   18 — HOVER EFFECTS
========================================= */

@media (hover: hover) {

    body .frayora-biab-v4__card:hover {
        transform: translateY(-7px);

        box-shadow:
            0 9px 22px rgba(35,36,29,.07),
            0 26px 52px rgba(35,36,29,.13),
            0 43px 72px rgba(35,36,29,.065);
    }

    body .frayora-biab-v4__card:hover
    .frayora-biab-v4__icon svg {
        transform: translateY(-4px);
    }

    body .frayora-biab-v4__compare:hover {
        background: #B95635;

        transform: translateY(-3px);

        box-shadow:
            0 14px 28px rgba(132,73,48,.19),
            0 25px 43px rgba(132,73,48,.095);
    }

    body .frayora-biab-v4__compare:hover span,
    body .frayora-biab-v4__learn:hover span {
        transform: translateX(5px);
    }

    body .frayora-biab-v4__learn:hover {
        background: #FFFFFF;

        transform: translateY(-2px);

        box-shadow:
            0 8px 16px rgba(49,43,35,.10);
    }
}


/* =========================================
   19 — KEYBOARD ACCESSIBILITY
========================================= */

body .frayora-biab-v4__compare:focus-visible,
body .frayora-biab-v4__learn:focus-visible {
    outline: 3px solid #1F211D;
    outline-offset: 4px;
}


/* =========================================
   20 — DESKTOP REFINEMENTS
========================================= */

@media (min-width: 1101px) and (max-width: 1350px) {

    body .frayora-biab-v4__inner {
        padding: 82px 55px 94px;
    }

    body .frayora-biab-v4__header {
        gap: 28px;
    }

    body .frayora-biab-v4__title {
        font-size: clamp(38px, 3.4vw, 46px) !important;
    }

    body .frayora-biab-v4__packages {
        gap: 18px;
    }

    body .frayora-biab-v4__card {
        padding: 35px 29px 33px;
        min-height: 420px;
    }

    body .frayora-biab-v4__card-title {
        font-size: 27px !important;
    }
}


/* =========================================
   21 — TABLET
   700px TO 1100px
========================================= */

@media (min-width: 700px) and (max-width: 1100px) {

    body .frayora-biab-v4__inner {
        padding: 78px 45px 90px;
    }

    body .frayora-biab-v4__header {
        flex-direction: column;
        align-items: flex-start;

        gap: 25px;
        margin-bottom: 35px;
    }

    body .frayora-biab-v4__title {
        max-width: 850px;

        font-size: clamp(37px, 4.8vw, 49px) !important;
    }

    body .frayora-biab-v4__compare {
        min-height: 51px;
        margin: 0;
    }

    body .frayora-biab-v4__packages {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 20px;
    }

    body .frayora-biab-v4__card {
        min-height: 400px;
        padding: 34px 29px 31px;
    }

    body .frayora-biab-v4__card-title {
        font-size: 28px !important;
    }

    body .frayora-biab-v4__card--enterprise {
        grid-column: 1 / -1;
        min-height: 330px;
    }

    body .frayora-biab-v4__card--enterprise
    .frayora-biab-v4__description {
        max-width: 590px;
    }
}


/* =========================================
   22 — MOBILE
   UP TO 699px
========================================= */

@media (max-width: 699px) {

    body .frayora-biab-v4__inner {
        padding: 70px 23px 80px;
    }

    body .frayora-biab-v4__header {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        gap: 25px;

        margin-bottom: 31px;
    }

    body .frayora-biab-v4__heading-group {
        width: 100%;
    }

    body .frayora-biab-v4__eyebrow {
        margin-bottom: 16px;

        font-size: 11px !important;
    }

    body .frayora-biab-v4__title {
        max-width: 520px;

        font-size: clamp(32px, 8vw, 43px) !important;
        line-height: 1.16 !important;
    }

    body .frayora-biab-v4__compare {
        width: fit-content;
        min-height: 51px;

        padding: 0 25px;
        margin: 0;

        font-size: 13px !important;
    }

    body .frayora-biab-v4__packages {
        display: grid;

        grid-template-columns: minmax(0,1fr);
        gap: 19px;
    }

    body .frayora-biab-v4__card {
        width: 100%;
        min-height: 375px;

        padding: 31px 29px 29px;

        border-radius: 17px;
    }

    body .frayora-biab-v4__icon {
        height: 45px;
        margin-bottom: 18px;
    }

    body .frayora-biab-v4__icon svg {
        width: 39px;
        height: 39px;
    }

    body .frayora-biab-v4__number {
        margin-bottom: 10px;
        font-size: 14px !important;
    }

    body .frayora-biab-v4__card-title {
        font-size: clamp(26px, 7vw, 32px) !important;
    }

    body .frayora-biab-v4__audience {
        font-size: 15px !important;
        margin-bottom: 16px;
    }

    body .frayora-biab-v4__description {
        max-width: none;

        font-size: 14px !important;
        line-height: 1.7 !important;

        margin-bottom: 26px;
    }

    body .frayora-biab-v4__learn {
        min-height: 45px;
        padding: 0 23px;
    }

    body .frayora-biab-v4__card::after {
        right: -155px;
        bottom: -160px;
    }
}


/* =========================================
   23 — SMALL MOBILE
========================================= */

@media (max-width: 380px) {

    body .frayora-biab-v4__inner {
        padding-inline: 18px;
    }

    body .frayora-biab-v4__card {
        padding: 28px 23px 27px;
    }

    body .frayora-biab-v4__title {
        font-size: 31px !important;
    }
}


/* =========================================
   24 — SCROLL ENTRANCE
========================================= */

@keyframes frayoraBiabV4Reveal {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

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

@media (prefers-reduced-motion: no-preference) {

    @supports (animation-timeline: view()) {

        body .frayora-biab-v4__header {
            animation: frayoraBiabV4Reveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 65%;
        }

        body .frayora-biab-v4__card {
            animation: frayoraBiabV4Reveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 50%;
        }
    }
}


/* =========================================
   25 — REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    body .frayora-biab-v4__header,
    body .frayora-biab-v4__card {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    body .frayora-biab-v4__card,
    body .frayora-biab-v4__icon svg,
    body .frayora-biab-v4__compare,
    body .frayora-biab-v4__compare span,
    body .frayora-biab-v4__learn,
    body .frayora-biab-v4__learn span {
        transition: none !important;
    }
}

/* END FRAYORA HOMEPAGE SECTION 04 — V4 */



/* =========================================================
   FRAYORA — HOMEPAGE SECTION 05
   SELECTED WORK — GLASS EDITION

   Full-bleed portfolio photography
   Frosted glass content panels
   Editorial SaaS / Bond-inspired typography

   Manrope 600 — headings
   Inter 400–600 — supporting copy

   Background: #F5ECE3

   Desktop / Tablet / Mobile
========================================================= */


/* =========================================
   01 — SECTION FOUNDATION
========================================= */

body .frayora-work-v2 {
    --fw-bg: #F5ECE3;
    --fw-ink: #1F211D;
    --fw-olive: #566449;
    --fw-terracotta: #C96743;

    position: relative;
    isolation: isolate;

    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background-color: #F5ECE3 !important;

    background-image:
        radial-gradient(
            ellipse 65% 80% at 50% 0%,
            rgba(255,255,255,.52),
            transparent 90%
        ) !important;

    color: var(--fw-ink);
}

body .frayora-work-v2,
body .frayora-work-v2 *,
body .frayora-work-v2 *::before,
body .frayora-work-v2 *::after {
    box-sizing: border-box;
}


/* =========================================
   02 — SECTION CONTAINER
========================================= */

body .frayora-work-v2__inner {
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: 1650px;

    margin: 0 auto;
    padding: 94px 75px 108px;
}


/* =========================================
   03 — EDITORIAL HEADER
========================================= */

body .frayora-work-v2__header {
    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(250px, .72fr)
        auto;

    align-items: end;

    gap: 35px;

    width: 100%;

    margin: 0 0 44px;
    padding: 0;
}

body .frayora-work-v2__heading-group {
    min-width: 0;
}


/* =========================================
   04 — EYEBROW
========================================= */

body .frayora-work-v2__eyebrow {
    display: block;

    margin: 0 0 22px;
    padding: 0;

    font-family: "Inter", sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;

    line-height: 1.4;
    letter-spacing: .12em;

    text-transform: uppercase;

    color: #C96743 !important;
}


/* =========================================
   05 — MAIN HEADING
========================================= */

body .frayora-work-v2__title {
    width: 100%;

    margin: 0;
    padding: 0;

    font-family: "Manrope", sans-serif !important;
    font-size: clamp(38px, 3.3vw, 53px) !important;
    font-weight: 600 !important;
    font-style: normal !important;

    line-height: 1.13 !important;
    letter-spacing: -.055em !important;

    color: #1F211D !important;

    text-align: left;
    text-wrap: balance;
}

body .frayora-work-v2__title span {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;

    color: #566449 !important;
}


/* =========================================
   06 — INTRODUCTION DESCRIPTION
========================================= */

body .frayora-work-v2__description {
    width: 100%;
    max-width: 420px;

    margin: 0 0 5px;
    padding: 0;

    font-family: "Inter", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;

    line-height: 1.8 !important;

    color: #66655F !important;
}


/* =========================================
   07 — VIEW OUR WORK BUTTON
========================================= */

body .frayora-work-v2__portfolio {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 20px;

    width: max-content;
    min-height: 52px;

    margin: 0 0 4px;
    padding: 0 25px;

    border: 1px solid rgba(65,77,59,.50);
    border-radius: 999px;

    background: rgba(255,255,255,.23);

    color: #1F211D !important;

    font-family: "Manrope", sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;

    line-height: 1.3;
    text-decoration: none !important;
    white-space: nowrap;

    box-shadow:
        0 4px 13px rgba(40,44,34,.035),
        inset 0 1px 0 rgba(255,255,255,.65);

    transition:
        background .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}

body .frayora-work-v2__portfolio span {
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;

    transition: transform .3s ease;
}


/* =========================================
   08 — THREE-PROJECT GRID
========================================= */

body .frayora-work-v2__projects {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    align-items: stretch;
    gap: 24px;

    width: 100%;
    min-width: 0;
}


/* =========================================
   09 — FULL-PHOTO PROJECT CARDS
========================================= */

body .frayora-work-v2__card {
    position: relative;
    isolation: isolate;

    display: flex;
    align-items: stretch;

    width: 100%;
    min-width: 0;

    height: clamp(380px, 30vw, 500px);

    margin: 0;
    padding: 0;

    overflow: hidden;

    border: 1px solid rgba(255,255,255,.25);
    border-radius: 23px;

    background-color: #777D70;

    box-shadow:
        0 9px 20px rgba(43,46,38,.075),
        0 25px 48px rgba(43,46,38,.12),
        0 45px 80px rgba(43,46,38,.055);

    transform: translateZ(0);

    transition:
        transform .45s cubic-bezier(.22,1,.36,1),
        box-shadow .45s ease;
}


/* =========================================
   10 — FULL BLEED PHOTOGRAPHY
========================================= */

body .frayora-work-v2__image {
    position: absolute;
    inset: 0;
    z-index: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;
}

body .frayora-work-v2__image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    border: 0;
    border-radius: 0;

    transform: scale(1);

    transition:
        transform .9s cubic-bezier(.22,1,.36,1);
}


/* Gentle photo depth and readable lower area */

body .frayora-work-v2__image::after {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(15,22,17,.02) 0%,
            transparent 34%,
            rgba(19,25,19,.08) 60%,
            rgba(15,20,16,.48) 100%
        );

    pointer-events: none;
}


/* =========================================
   11 — NUMBER BADGES
========================================= */

body .frayora-work-v2__number {
    position: absolute;
    z-index: 4;

    top: 20px;
    left: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 62px;
    height: 62px;

    padding: 0;

    border: 1px solid rgba(255,255,255,.45);
    border-radius: 17px;

    background: rgba(255,251,245,.88);

    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);

    color: #C96743 !important;

    font-family: "Inter", sans-serif !important;
    font-size: 21px !important;
    font-weight: 500 !important;

    line-height: 1;

    box-shadow:
        0 7px 18px rgba(27,30,23,.075),
        inset 0 1px 0 rgba(255,255,255,.8);
}


/* =========================================
   12 — FROSTED GLASS TEXT OVERLAY
========================================= */

body .frayora-work-v2__glass {
    position: absolute;
    z-index: 3;

    left: 10px;
    right: 10px;
    bottom: 10px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    min-height: 148px;

    margin: 0;
    padding: 23px 22px;

    overflow: hidden;

    border: 1px solid rgba(255,255,255,.55);
    border-radius: 21px;

    background-color: rgba(35,42,34,.43);

    -webkit-backdrop-filter:
        blur(20px) saturate(125%);
    backdrop-filter:
        blur(20px) saturate(125%);

    box-shadow:
        0 8px 25px rgba(0,0,0,.13),
        inset 0 1px 0 rgba(255,255,255,.42),
        inset 0 -1px 0 rgba(255,255,255,.10);

    color: #FFFFFF;

    transition:
        background-color .35s ease,
        border-color .35s ease;
}


/* Soft illuminated glass edge */

body .frayora-work-v2__glass::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: -1;

    border-radius: inherit;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.20),
            rgba(255,255,255,.025) 55%,
            rgba(255,255,255,.065)
        );

    pointer-events: none;
}


/* =========================================
   13 — GLASS CONTENT
========================================= */

body .frayora-work-v2__copy {
    display: flex;
    flex-direction: column;

    flex: 1 1 auto;
    min-width: 0;

    margin: 0;
    padding: 0;
}


/* CATEGORY */

body .frayora-work-v2__category {
    margin: 0 0 12px;
    padding: 0;

    font-family: "Inter", sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;

    line-height: 1.35;
    letter-spacing: .095em;

    text-transform: uppercase;

    color: #F5A483 !important;
}


/* PROJECT TITLE */

body .frayora-work-v2__project-title {
    margin: 0 0 8px;
    padding: 0;

    font-family: "Manrope", sans-serif !important;
    font-size: clamp(22px, 1.85vw, 30px) !important;
    font-weight: 600 !important;
    font-style: normal !important;

    line-height: 1.2 !important;
    letter-spacing: -.045em !important;

    color: #FFFFFF !important;

    overflow-wrap: break-word;
}


/* PROJECT SUPPORTING TEXT */

body .frayora-work-v2__project-description {
    margin: 0;
    padding: 0;

    font-family: "Inter", sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;

    line-height: 1.55 !important;

    color: rgba(255,255,255,.90) !important;
}


/* =========================================
   14 — CIRCULAR PROJECT ARROWS
========================================= */

body .frayora-work-v2__arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 47px;

    width: 47px;
    height: 47px;

    margin: 0;
    padding: 0;

    border: 1px solid rgba(255,255,255,.75);
    border-radius: 50%;

    background: rgba(255,255,255,.07);

    color: #FFFFFF !important;

    text-decoration: none !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.25);

    transition:
        transform .3s ease,
        background .3s ease;
}

body .frayora-work-v2__arrow span {
    font-family: "Inter", sans-serif;
    font-size: 25px;
    font-weight: 400;
    line-height: 1;
}


/* =========================================
   15 — HOVER INTERACTIONS
========================================= */

@media (hover: hover) {

    body .frayora-work-v2__card:hover {
        transform: translateY(-7px);

        box-shadow:
            0 14px 26px rgba(43,46,38,.10),
            0 32px 59px rgba(43,46,38,.17),
            0 52px 90px rgba(43,46,38,.065);
    }

    body .frayora-work-v2__card:hover
    .frayora-work-v2__image img {
        transform: scale(1.055);
    }

    body .frayora-work-v2__card:hover
    .frayora-work-v2__glass {
        background-color: rgba(35,42,34,.52);
        border-color: rgba(255,255,255,.76);
    }

    body .frayora-work-v2__arrow:hover {
        background: rgba(255,255,255,.20);
        transform: translateX(3px);
    }

    body .frayora-work-v2__portfolio:hover {
        background: rgba(255,255,255,.68);
        transform: translateY(-3px);

        box-shadow:
            0 10px 23px rgba(40,44,34,.09);
    }

    body .frayora-work-v2__portfolio:hover span {
        transform: translateX(4px);
    }
}


/* =========================================
   16 — FOCUS ACCESSIBILITY
========================================= */

body .frayora-work-v2__portfolio:focus-visible {
    outline: 3px solid #566449;
    outline-offset: 5px;
}

body .frayora-work-v2__arrow:focus-visible {
    outline: 3px solid #FFFFFF;
    outline-offset: 4px;
}


/* =========================================
   17 — COMPACT DESKTOP
   1101px–1350px
========================================= */

@media screen and (min-width: 1101px)
and (max-width: 1350px) {

    body .frayora-work-v2__inner {
        padding: 80px 48px 93px;
    }

    body .frayora-work-v2__header {
        grid-template-columns:
            minmax(0,1.15fr)
            minmax(220px,.8fr)
            auto;

        gap: 20px;
    }

    body .frayora-work-v2__title {
        font-size: clamp(36px, 3.35vw, 45px) !important;
    }

    body .frayora-work-v2__projects {
        gap: 18px;
    }

    body .frayora-work-v2__card {
        height: 410px;
    }

    body .frayora-work-v2__glass {
        padding: 19px 17px;
        gap: 10px;
    }

    body .frayora-work-v2__project-title {
        font-size: 23px !important;
    }

    body .frayora-work-v2__arrow {
        width: 41px;
        height: 41px;
        flex-basis: 41px;
    }
}


/* =========================================
   18 — TABLET
   700px–1100px
========================================= */

@media screen and (min-width: 700px)
and (max-width: 1100px) {

    body .frayora-work-v2__inner {
        padding: 78px 44px 88px;
    }

    body .frayora-work-v2__header {
        grid-template-columns: minmax(0,1fr) auto;
        align-items: end;
        gap: 20px 30px;

        margin-bottom: 34px;
    }

    body .frayora-work-v2__heading-group {
        grid-column: 1 / -1;
    }

    body .frayora-work-v2__title {
        font-size: clamp(39px, 5vw, 49px) !important;
    }

    body .frayora-work-v2__description {
        grid-column: 1;
        max-width: 570px;
        font-size: 14px !important;
    }

    body .frayora-work-v2__portfolio {
        grid-column: 2;
        grid-row: 2;
    }

    body .frayora-work-v2__projects {
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 20px;
    }

    body .frayora-work-v2__card {
        height: 430px;
    }

    /* Third project gets a wider showcase */

    body .frayora-work-v2__card:nth-child(3) {
        grid-column: 1 / -1;
        height: 395px;
    }

    body .frayora-work-v2__card:nth-child(3)
    .frayora-work-v2__glass {
        max-width: 620px;
        right: auto;
        width: calc(100% - 20px);
    }

    body .frayora-work-v2__project-title {
        font-size: 25px !important;
    }
}


/* =========================================
   19 — MOBILE
   BELOW 700px
========================================= */

@media screen and (max-width: 699px) {

    body .frayora-work-v2__inner {
        padding: 70px 22px 78px;
    }

    body .frayora-work-v2__header {
        display: flex;
        flex-direction: column;

        align-items: flex-start;
        gap: 0;

        margin-bottom: 31px;
    }

    body .frayora-work-v2__heading-group {
        width: 100%;
    }

    body .frayora-work-v2__eyebrow {
        font-size: 11px !important;
        margin-bottom: 16px;
    }

    body .frayora-work-v2__title {
        font-size: clamp(33px, 8vw, 44px) !important;
        line-height: 1.14 !important;
    }

    body .frayora-work-v2__description {
        max-width: 490px;

        margin: 21px 0 0;

        font-size: 14px !important;
        line-height: 1.75 !important;
    }

    body .frayora-work-v2__portfolio {
        min-height: 49px;

        margin: 25px 0 0;
        padding: 0 23px;

        font-size: 13px !important;
    }

    body .frayora-work-v2__projects {
        display: grid;
        grid-template-columns: minmax(0,1fr);

        gap: 20px;
    }

    body .frayora-work-v2__card {
        height: clamp(390px, 112vw, 490px);

        border-radius: 20px;
    }

    body .frayora-work-v2__number {
        top: 15px;
        left: 15px;

        width: 53px;
        height: 53px;

        font-size: 18px !important;
        border-radius: 15px;
    }

    body .frayora-work-v2__glass {
        left: 9px;
        right: 9px;
        bottom: 9px;

        min-height: 134px;
        gap: 12px;

        padding: 18px 18px;

        border-radius: 18px;
    }

    body .frayora-work-v2__category {
        font-size: 10px !important;
        margin-bottom: 10px;
    }

    body .frayora-work-v2__project-title {
        font-size: clamp(22px, 6vw, 27px) !important;
    }

    body .frayora-work-v2__project-description {
        font-size: 12px !important;
    }

    body .frayora-work-v2__arrow {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }
}


/* =========================================
   20 — SMALL MOBILE
========================================= */

@media screen and (max-width: 380px) {

    body .frayora-work-v2__inner {
        padding-inline: 17px;
    }

    body .frayora-work-v2__title {
        font-size: 32px !important;
    }

    body .frayora-work-v2__glass {
        padding: 16px 14px;
        gap: 8px;
    }

    body .frayora-work-v2__project-title {
        font-size: 21px !important;
    }

    body .frayora-work-v2__arrow {
        width: 39px;
        height: 39px;
        flex-basis: 39px;
    }
}


/* =========================================
   21 — SCROLL REVEAL ANIMATION
========================================= */

@keyframes frayoraWorkV2Reveal {

    from {
        opacity: 0;
        transform: translateY(23px);
    }

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

@media (prefers-reduced-motion: no-preference) {

    @supports (animation-timeline: view()) {

        body .frayora-work-v2__header {
            animation: frayoraWorkV2Reveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 60%;
        }

        body .frayora-work-v2__card {
            animation: frayoraWorkV2Reveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 40%;
        }
    }
}


/* =========================================
   22 — REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    body .frayora-work-v2__header,
    body .frayora-work-v2__card {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    body .frayora-work-v2__card,
    body .frayora-work-v2__image img,
    body .frayora-work-v2__glass,
    body .frayora-work-v2__portfolio,
    body .frayora-work-v2__portfolio span,
    body .frayora-work-v2__arrow {
        transition: none !important;
    }
}

/* END FRAYORA HOMEPAGE SECTION 05 — V2 */



/* =========================================================
   FRAYORA — HOMEPAGE SECTION 05
   CSS-ONLY PROJECT PHOTOGRAPHY

   Full-bleed images
   Luminous photographic overlay
   Frosted glass panels preserved
   Desktop / Tablet / Mobile
========================================================= */


/* =========================================
   01 — PROJECT CARD FOUNDATION
========================================= */

body .frayora-work-v2__card {
    position: relative;
    isolation: isolate;

    background-color: #596557;

    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}


/* =========================================
   02 — PROJECT 01
   VEYRON INDUSTRIAL
========================================= */

body .frayora-work-v2__card:nth-child(1) {
    background-image:
        url("../images/Homepage/heropic.png");
}


/* =========================================
   03 — PROJECT 02
   COMMON GROUND
========================================= */

body .frayora-work-v2__card:nth-child(2) {
    background-image:
        url("../images/Homepage/heropic.png");
}


/* =========================================
   04 — PROJECT 03
   BUBBA TIA
========================================= */

body .frayora-work-v2__card:nth-child(3) {
    background-image:
        url("../images/Homepage/heropic.png");
}


/* =========================================
   05 — PHOTOGRAPHIC DEPTH OVERLAY
========================================= */

body .frayora-work-v2__card::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 0;

    background:
        linear-gradient(
            180deg,
            rgba(20,26,20,0.02) 0%,
            rgba(20,26,20,0.00) 35%,
            rgba(20,26,20,0.10) 60%,
            rgba(17,24,18,0.43) 100%
        );

    pointer-events: none;
}


/* =========================================
   06 — ENSURE GLASS STAYS ABOVE PHOTO
========================================= */

body .frayora-work-v2__number {
    position: absolute;
    z-index: 3;
}

body .frayora-work-v2__glass {
    position: absolute;
    z-index: 2;

    -webkit-backdrop-filter: blur(20px) saturate(125%);
    backdrop-filter: blur(20px) saturate(125%);
}


/* =========================================
   07 — RESPONSIVE IMAGE POSITION
========================================= */

/* DESKTOP */

@media (min-width: 1101px) {

    body .frayora-work-v2__card {
        background-size: cover;
        background-position: center;
    }
}


/* TABLET */

@media (min-width: 700px) and (max-width: 1100px) {

    body .frayora-work-v2__card {
        background-size: cover;
        background-position: center center;
    }
}


/* MOBILE */

@media (max-width: 699px) {

    body .frayora-work-v2__card {
        background-size: cover;
        background-position: center center;
    }
}

/* END SECTION 05 — CSS PHOTOGRAPHY */



/* =========================================================
   FRAYORA — HOMEPAGE SECTION 04
   BUSINESS IN A BOX™
   TABLET + MOBILE HORIZONTAL SCROLL

   Always-visible styled scrollbar
   Native touch swiping
   Scroll snapping
   Desktop layout preserved
========================================================= */

@media screen and (max-width: 1100px) {

    /* HORIZONTAL SCROLL CONTAINER */

    body .frayora-biab-v4__packages {
        display: flex !important;
        flex-wrap: nowrap !important;

        align-items: stretch !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 20px !important;

        margin: 0 !important;
        padding: 0 0 22px !important;

        overflow-x: scroll !important;
        overflow-y: hidden !important;

        scroll-snap-type: x mandatory;
        scroll-padding-inline: 0;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;

        scrollbar-width: auto;
        scrollbar-color: #87947B #DED6CA;
    }

    /* SCROLLBAR TRACK */

    body .frayora-biab-v4__packages::-webkit-scrollbar {
        height: 8px;
        display: block;
    }

    body .frayora-biab-v4__packages::-webkit-scrollbar-track {
        background: #DED6CA;
        border-radius: 999px;
    }

    /* SCROLLBAR THUMB */

    body .frayora-biab-v4__packages::-webkit-scrollbar-thumb {
        background: #87947B;

        border-radius: 999px;
        border: 1px solid #DED6CA;
    }

    /* PACKAGE CARD BEHAVIOR */

    body .frayora-biab-v4__card {
        flex-shrink: 0 !important;

        grid-column: auto !important;
        grid-row: auto !important;

        scroll-snap-align: start;

        height: auto !important;

        transform: none;
    }

    /* DISABLE SCROLL REVEAL TRANSFORMS ON CARDS */

    body .frayora-biab-v4__card {
        animation: none !important;
        opacity: 1 !important;
    }
}


/* =========================================
   TABLET — 700px–1100px
========================================= */

@media screen and (min-width: 700px)
and (max-width: 1100px) {

    body .frayora-biab-v4__card {
        flex: 0 0 clamp(320px, 43vw, 450px) !important;
        min-height: 420px !important;
    }
}


/* =========================================
   MOBILE — BELOW 700px
========================================= */

@media screen and (max-width: 699px) {

    body .frayora-biab-v4__packages {
        gap: 15px !important;
    }

    body .frayora-biab-v4__card {
        flex: 0 0 88% !important;
        min-height: 390px !important;
    }
}



/* =========================================================
   FRAYORA — HOMEPAGE SECTION 05
   SELECTED WORK — GLASS CAROUSEL

   TABLET + MOBILE HORIZONTAL SCROLL
   Always-visible styled scrollbar
   Full-photo cards preserved
   Native touch swiping
   Scroll snapping
========================================================= */

@media screen and (max-width: 1100px) {

    /* HORIZONTAL SCROLL CONTAINER */

    body .frayora-work-v2__projects {
        display: flex !important;
        flex-wrap: nowrap !important;

        align-items: stretch !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 20px !important;

        margin: 0 !important;
        padding: 0 0 22px !important;

        overflow-x: scroll !important;
        overflow-y: hidden !important;

        scroll-snap-type: x mandatory;
        scroll-padding-inline: 0;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;

        scrollbar-width: auto;
        scrollbar-color: #C96743 #DED6CA;
    }

    /* SCROLLBAR TRACK */

    body .frayora-work-v2__projects::-webkit-scrollbar {
        height: 8px;
        display: block;
    }

    body .frayora-work-v2__projects::-webkit-scrollbar-track {
        background: #DED6CA;
        border-radius: 999px;
    }

    /* SCROLLBAR THUMB */

    body .frayora-work-v2__projects::-webkit-scrollbar-thumb {
        background: #C96743;

        border-radius: 999px;
        border: 1px solid #DED6CA;
    }

    /* PROJECT CARD BEHAVIOR */

    body .frayora-work-v2__card {
        flex-shrink: 0 !important;

        grid-column: auto !important;
        grid-row: auto !important;

        scroll-snap-align: start;

        transform: none;
        animation: none !important;
        opacity: 1 !important;
    }
}


/* =========================================
   TABLET — 700px–1100px
========================================= */

@media screen and (min-width: 700px)
and (max-width: 1100px) {

    body .frayora-work-v2__card {
        flex: 0 0 clamp(320px, 43vw, 450px) !important;

        height: 430px !important;
    }
}


/* =========================================
   MOBILE — BELOW 700px
========================================= */

@media screen and (max-width: 699px) {

    body .frayora-work-v2__projects {
        gap: 15px !important;
    }

    body .frayora-work-v2__card {
        flex: 0 0 88% !important;

        height: clamp(390px, 112vw, 490px) !important;
    }

    body .frayora-work-v2__glass {
        max-width: none !important;
        width: auto !important;
        right: 9px !important;
    }
}



/* =========================================================
   FRAYORA — HOMEPAGE SECTIONS 04 + 05
   CARD SIZE REFINEMENTS — OVERRIDE ONLY

   SECTION 04 — BUSINESS IN A BOX
   Desktop: 380px cards

   SECTION 05 — SELECTED WORK
   Desktop: 410px cards

   Tablet + mobile horizontal scrolling preserved
   Typography, colors, glass, lighting and shadows preserved
========================================================= */


/* =========================================================
   SECTION 04 — BUSINESS IN A BOX
   DESKTOP: 1101px+
========================================================= */

@media screen and (min-width: 1101px) {

    /* Compact package cards */

    body .frayora-biab-v4__card {
        height: 380px !important;
        min-height: 380px !important;

        padding: 30px 35px 28px !important;

        border-radius: 19px !important;
    }

    /* Reduce icon spacing */

    body .frayora-biab-v4__icon {
        height: 43px !important;
        margin-bottom: 15px !important;
    }

    body .frayora-biab-v4__icon svg {
        width: 39px !important;
        height: 39px !important;
    }

    /* Tighten text spacing */

    body .frayora-biab-v4__number {
        margin-bottom: 7px !important;
    }

    body .frayora-biab-v4__card-title {
        margin-bottom: 7px !important;
    }

    body .frayora-biab-v4__audience {
        margin-bottom: 14px !important;
    }

    body .frayora-biab-v4__description {
        margin-bottom: 19px !important;
    }

    /* Keep Learn More buttons aligned */

    body .frayora-biab-v4__learn {
        margin-top: auto !important;
        min-height: 44px !important;
    }
}


/* =========================================================
   SECTION 05 — SELECTED WORK
   DESKTOP: 1101px+
========================================================= */

@media screen and (min-width: 1101px) {

    /* Reduce photographic card height */

    body .frayora-work-v2__card {
        height: 410px !important;
        min-height: 410px !important;

        border-radius: 21px !important;
    }

    /* Reduce glass panel height */

    body .frayora-work-v2__glass {
        min-height: 123px !important;

        padding: 17px 20px !important;

        border-radius: 18px !important;
    }

    /* Tighten category spacing */

    body .frayora-work-v2__category {
        margin-bottom: 8px !important;
    }

    /* Tighten heading spacing */

    body .frayora-work-v2__project-title {
        margin-bottom: 6px !important;
    }

    /* Slightly smaller arrow circle */

    body .frayora-work-v2__arrow {
        width: 43px !important;
        height: 43px !important;

        flex-basis: 43px !important;
    }

    /* Keep project numbers proportional */

    body .frayora-work-v2__number {
        width: 56px !important;
        height: 56px !important;

        font-size: 19px !important;
    }
}


/* =========================================================
   TABLET — BOTH SECTIONS
   700px–1100px

   Horizontal scrolling preserved
========================================================= */

@media screen and (min-width: 700px)
and (max-width: 1100px) {

    /* Business in a Box */

    body .frayora-biab-v4__card {
        height: 380px !important;
        min-height: 380px !important;

        padding: 30px 29px 28px !important;
    }

    body .frayora-biab-v4__card--enterprise {
        grid-column: auto !important;
    }

    /* Selected Work */

    body .frayora-work-v2__card,
    body .frayora-work-v2__card:nth-child(3) {
        height: 400px !important;
        min-height: 400px !important;

        grid-column: auto !important;
    }

    body .frayora-work-v2__glass {
        min-height: 125px !important;
        padding: 17px 17px !important;
    }
}


/* =========================================================
   MOBILE — BOTH SECTIONS
   BELOW 700px

   Swipeable cards preserved
========================================================= */

@media screen and (max-width: 699px) {

    /* Business in a Box */

    body .frayora-biab-v4__card {
        height: auto !important;
        min-height: 370px !important;

        padding: 28px 25px 27px !important;
    }

    body .frayora-biab-v4__icon {
        margin-bottom: 16px !important;
    }

    body .frayora-biab-v4__audience {
        margin-bottom: 14px !important;
    }

    /* Selected Work */

    body .frayora-work-v2__card {
        height: clamp(350px, 100vw, 430px) !important;
        min-height: 350px !important;
    }

    body .frayora-work-v2__glass {
        min-height: 120px !important;
        padding: 16px 17px !important;
    }

    body .frayora-work-v2__number {
        width: 50px !important;
        height: 50px !important;

        font-size: 18px !important;
    }

    body .frayora-work-v2__arrow {
        width: 41px !important;
        height: 41px !important;

        flex-basis: 41px !important;
    }
}


/* =========================================================
   SMALL MOBILE — BELOW 380px
========================================================= */

@media screen and (max-width: 380px) {

    body .frayora-biab-v4__card {
        min-height: 375px !important;
        padding: 26px 21px 25px !important;
    }

    body .frayora-work-v2__card {
        height: 365px !important;
        min-height: 365px !important;
    }

    body .frayora-work-v2__glass {
        padding: 15px 13px !important;
    }
}

/* END CARD SIZE REFINEMENTS */




/* =========================================================
   FRAYORA — HOMEPAGE SECTIONS 04 + 05
   TABLET + MOBILE CAROUSEL CLIPPING FIX

   Prevent cards being cut off at the top
   Remove hover lift on touch-sized layouts
   Preserve shadows, lighting and glass
   Preserve horizontal scrolling
========================================================= */

@media screen and (max-width: 1100px) {

    /* =========================================
       01 — BOTH SCROLL CONTAINERS
    ========================================= */

    body .frayora-biab-v4__packages,
    body .frayora-work-v2__projects {
        position: relative !important;

        box-sizing: border-box !important;

        /* Space for shadows above and below cards */
        padding-top: 20px !important;
        padding-bottom: 38px !important;

        overflow-x: scroll !important;
        overflow-y: hidden !important;

        scroll-snap-type: x mandatory;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    /* =========================================
       02 — BUSINESS IN A BOX CARDS
    ========================================= */

    body .frayora-biab-v4__card,
    body .frayora-biab-v4__card:hover,
    body .frayora-biab-v4__card:active {
        transform: none !important;
        translate: none !important;

        animation: none !important;
        opacity: 1 !important;

        box-shadow:
            0 6px 16px rgba(35,36,29,.045),
            0 16px 34px rgba(35,36,29,.085),
            0 26px 48px rgba(35,36,29,.045) !important;
    }

    /* =========================================
       03 — SELECTED WORK CARDS
    ========================================= */

    body .frayora-work-v2__card,
    body .frayora-work-v2__card:hover,
    body .frayora-work-v2__card:active {
        transform: none !important;
        translate: none !important;

        animation: none !important;
        opacity: 1 !important;

        box-shadow:
            0 6px 16px rgba(43,46,38,.065),
            0 18px 38px rgba(43,46,38,.11),
            0 28px 50px rgba(43,46,38,.045) !important;
    }

    /* =========================================
       04 — KEEP GLASS PANELS IN PLACE
    ========================================= */

    body .frayora-work-v2__glass,
    body .frayora-work-v2__card:hover
    .frayora-work-v2__glass {
        transform: none !important;
    }

    /* =========================================
       05 — KEEP SCROLLING FUNCTIONAL
    ========================================= */

    body .frayora-biab-v4__card,
    body .frayora-work-v2__card {
        flex-shrink: 0 !important;
        scroll-snap-align: start;
    }
}

/* END SECTION 04 + 05 CLIPPING FIX */



/* =====================================================
   FRAYORA — HOMEPAGE SECTION 02
   MOBILE GLASS SERVICE CAROUSEL
   0–699px

   Number → Icon → Heading → Body → View Service
   Glass depth / lighting / permanent progress indicator
===================================================== */

@media screen and (max-width: 699px) {

    /* 01 — REMOVE ALL OLD CONNECTORS */

    body .frayora-connected-v3__wave,
    body .frayora-connected-v3__service::before,
    body .frayora-connected-v3__service::after {
        display: none !important;
        content: none !important;
        background-image: none !important;
        border: 0 !important;
    }

    /* 02 — HORIZONTAL SCROLL CONTAINER */

    body .frayora-connected-v3__network {
        position: relative !important;
        width: 100% !important;
        margin-top: 40px !important;
        overflow: visible !important;
    }

    body .frayora-connected-v3__services {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;

        gap: 15px !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 20px 3px 31px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        scroll-snap-type: x mandatory;
        scroll-padding-inline: 3px;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;

        scrollbar-width: none;
    }

    body .frayora-connected-v3__services::-webkit-scrollbar {
        display: none;
    }

    /* 03 — FROSTED GLASS SERVICE CARDS */

    body .frayora-connected-v3__service {
        position: relative !important;
        isolation: isolate;

        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;

        flex: 0 0 86% !important;

        width: 86% !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 390px !important;
        height: auto !important;

        margin: 0 !important;
        padding: 29px 26px 27px !important;

        scroll-snap-align: start;
        scroll-snap-stop: normal;

        text-align: left !important;

        border: 1px solid
            rgba(255,255,255,.78) !important;

        border-radius: 20px !important;

        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.83) 0%,
                rgba(255,253,249,.65) 58%,
                rgba(236,231,221,.58) 100%
            ) !important;

        -webkit-backdrop-filter:
            blur(18px) saturate(125%);
        backdrop-filter:
            blur(18px) saturate(125%);

        box-shadow:
            0 5px 13px rgba(49,47,38,.045),
            0 15px 29px rgba(49,47,38,.085),
            inset 0 1px 0 rgba(255,255,255,.95) !important;

        transform: none !important;
        translate: none !important;
        animation: none !important;
        opacity: 1 !important;

        transition: box-shadow .3s ease !important;
    }

    /* 04 — NUMBER FIRST */

    body .frayora-connected-v3__number {
        display: block !important;

        order: 1;
        grid-area: auto !important;

        width: 100%;
        margin: 0 0 19px !important;

        font-family: "Inter", sans-serif !important;
        font-size: 15px !important;
        font-weight: 600 !important;

        color: #C96743 !important;
        text-align: left !important;
    }

    /* 05 — ICON SECOND */

    body .frayora-connected-v3__icon {
        order: 2;
        grid-area: auto !important;

        display: grid !important;
        place-items: center !important;

        width: 80px !important;
        height: 80px !important;

        margin: 0 0 24px !important;

        flex-shrink: 0;

        border-radius: 50%;
        border: 1px solid rgba(86,100,73,.15);

        transform: none !important;
    }

    body .frayora-connected-v3__icon svg {
        width: 37% !important;
        height: 37% !important;
    }

    /* 06 — HEADING THIRD */

    body .frayora-connected-v3__service-title {
        order: 3;
        grid-area: auto !important;

        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;

        margin: 0 0 14px !important;

        font-family: "Manrope", sans-serif !important;
        font-size: clamp(19px, 5.2vw, 23px) !important;
        font-weight: 600 !important;
        line-height: 1.32 !important;

        letter-spacing: -.035em !important;

        color: #1F211D !important;
        text-align: left !important;

        overflow-wrap: normal;
    }

    /* 07 — DESCRIPTION FOURTH */

    body .frayora-connected-v3__service-copy {
        order: 4;
        grid-area: auto !important;

        flex: 0 0 auto !important;

        width: 100% !important;
        max-width: none !important;

        margin: 0 0 24px !important;

        font-family: "Inter", sans-serif !important;
        font-size: 13.5px !important;
        font-weight: 400 !important;
        line-height: 1.75 !important;

        color: #64665E !important;
        text-align: left !important;
    }

    /* 08 — VIEW SERVICE LAST */

    body .frayora-connected-v3__link {
        order: 5;
        grid-area: auto !important;

        align-self: flex-start !important;

        margin: auto 0 0 !important;

        font-family: "Inter", sans-serif !important;
        font-size: 13px !important;
        font-weight: 500 !important;

        color: #B55738 !important;
    }

    /* 09 — PERMANENT SCROLL TRACK */

    body .frayora-connected-v3__progress {
        position: relative;

        display: block;

        width: 100%;
        height: 5px;

        margin: 2px 0 0;

        border-radius: 999px;

        background: #DDD6C9;

        overflow: hidden;
    }

    body .frayora-connected-v3__progress-thumb {
        position: absolute;

        top: 0;
        left: 0;

        width: 16.67%;
        height: 100%;

        border-radius: inherit;

        background: #87947B;

        transform: translateX(0);

        transition: none;
    }

    /* 10 — HOVER WITHOUT CARD CLIPPING */

    body .frayora-connected-v3__service:hover {
        transform: none !important;
        translate: none !important;

        box-shadow:
            0 6px 17px rgba(49,47,38,.065),
            0 19px 32px rgba(49,47,38,.11),
            inset 0 1px 0 rgba(255,255,255,.95) !important;
    }

    body .frayora-connected-v3__service:hover
    .frayora-connected-v3__icon {
        transform: none !important;
    }
}


/* =========================================
   SMALL MOBILE REFINEMENTS
========================================= */

@media screen and (max-width: 380px) {

    body .frayora-connected-v3__service {
        flex-basis: 88% !important;
        width: 88% !important;
        min-height: 400px !important;

        padding: 25px 21px 25px !important;
    }

    body .frayora-connected-v3__service-title {
        font-size: 19px !important;
    }

    body .frayora-connected-v3__service-copy {
        font-size: 13px !important;
    }
}

/* END SECTION 02 — MOBILE GLASS CAROUSEL */



/* =========================================================
   FRAYORA — HOMEPAGE SECTION 02
   MOBILE CAROUSEL — CSS ONLY

   Matches Sections 04 and 05 scrolling
   Native horizontal scrollbar
   No JavaScript required
   0–699px
========================================================= */

@media screen and (max-width: 699px) {

    /* 01 — HORIZONTAL SCROLL CONTAINER */

    body .frayora-connected-v3__services {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;

        gap: 16px !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        /* Extra space for shadows and scrollbar */
        padding: 20px 3px 30px !important;

        overflow-x: scroll !important;
        overflow-y: hidden !important;

        scroll-snap-type: x mandatory;
        scroll-padding-inline: 3px;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;

        /* Firefox */
        scrollbar-width: auto !important;
        scrollbar-color: #87947B #DED6CA !important;
    }

    /* 02 — CHROME / EDGE / SAFARI SCROLLBAR */

    body .frayora-connected-v3__services::-webkit-scrollbar {
        display: block !important;
        height: 8px !important;
    }

    body .frayora-connected-v3__services::-webkit-scrollbar-track {
        background: #DED6CA !important;
        border-radius: 999px;
    }

    body .frayora-connected-v3__services::-webkit-scrollbar-thumb {
        background: #87947B !important;
        border: 1px solid #DED6CA;
        border-radius: 999px;
    }

    /* 03 — GLASS CARDS */

    body .frayora-connected-v3__service {
        position: relative !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;

        flex: 0 0 86% !important;

        width: 86% !important;
        max-width: none !important;
        min-width: 0 !important;

        min-height: 390px !important;
        height: auto !important;

        margin: 0 !important;
        padding: 28px 26px 27px !important;

        scroll-snap-align: start;

        text-align: left !important;

        transform: none !important;
        translate: none !important;
        animation: none !important;

        opacity: 1 !important;
    }

    /* 04 — REMOVE OLD WAVE LINES */

    body .frayora-connected-v3__wave,
    body .frayora-connected-v3__service::before,
    body .frayora-connected-v3__service::after {
        content: none !important;
        display: none !important;
    }

    /* 05 — NUMBER ABOVE ICON */

    body .frayora-connected-v3__number {
        order: -1 !important;

        display: block !important;

        width: 100% !important;
        margin: 0 0 18px !important;

        color: #C96743 !important;

        font-family: "Inter", sans-serif !important;
        font-size: 15px !important;
        font-weight: 600 !important;

        text-align: left !important;
    }

    /* 06 — ICON BELOW NUMBER */

    body .frayora-connected-v3__icon {
        order: 0 !important;

        width: 80px !important;
        height: 80px !important;

        margin: 0 0 24px !important;
    }

    /* 07 — HEADING */

    body .frayora-connected-v3__service-title {
        order: 1 !important;

        min-height: 0 !important;
        margin: 0 0 14px !important;

        text-align: left !important;
    }

    /* 08 — BODY */

    body .frayora-connected-v3__service-copy {
        order: 2 !important;

        margin: 0 0 24px !important;
        text-align: left !important;
    }

    /* 09 — VIEW SERVICE BUTTON */

    body .frayora-connected-v3__link {
        order: 3 !important;

        align-self: flex-start !important;
        margin: auto 0 0 !important;
    }

    /* 10 — HIDE UNUSED JAVASCRIPT TRACK */

    body .frayora-connected-v3__progress {
        display: none !important;
    }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media screen and (max-width: 380px) {

    body .frayora-connected-v3__service {
        flex-basis: 88% !important;
        width: 88% !important;
    }
}

/* END SECTION 02 MOBILE SCROLL OVERRIDE */



/* =========================================================
   FRAYORA — HOMEPAGE SECTION 07
   FINAL CTA — MOBILE LEFT ALIGNMENT

   Preserve luminous background
   Preserve Manrope + Inter typography
   Preserve button shadows
   Mobile only: 0–699px
========================================================= */

@media screen and (max-width: 699px) {

    /* 01 — MAIN CONTAINER */

    body .home-cta__inner {
        display: flex !important;
        flex-direction: column !important;

        align-items: flex-start !important;
        justify-content: center !important;

        width: 100% !important;

        padding: 78px 26px 85px !important;

        text-align: left !important;
    }

    /* 02 — HEADING */

    body .home-cta__title {
        width: 100% !important;
        max-width: 460px !important;

        margin: 0 !important;

        font-family: "Manrope", sans-serif !important;
        font-size: clamp(34px, 8.5vw, 44px) !important;
        font-weight: 600 !important;

        line-height: 1.15 !important;
        letter-spacing: -.055em !important;

        text-align: left !important;
        text-wrap: balance;
    }

    /* 03 — SUPPORTING COPY */

    body .home-cta__text {
        width: 100% !important;
        max-width: 440px !important;

        margin: 26px 0 0 !important;

        font-family: "Inter", sans-serif !important;
        font-size: 14px !important;
        line-height: 1.85 !important;

        text-align: left !important;
    }

    body .home-cta__text strong {
        font-weight: 600 !important;
    }

    /* 04 — CTA BUTTON POSITION */

    body .home-cta__button-wrap {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        width: 100% !important;

        margin: 31px 0 0 !important;
        padding: 0 !important;
    }

    /* 05 — CTA BUTTON */

    body .home-cta__button {
        width: auto !important;
        min-width: 0 !important;
        min-height: 54px !important;

        margin: 0 !important;
        padding: 0 28px !important;

        font-family: "Manrope", sans-serif !important;
        font-size: 13px !important;

        /* Keep existing button colour and shadows */
    }

}

/* END SECTION 07 — MOBILE LEFT ALIGNMENT */





/* =========================================================
   FRAYORA — HOMEPAGE SECTION 05
   VIEW ALL PROJECTS — TERRACOTTA BUTTON

   Background: #D66A43
   White typography + arrow
   Soft dimensional shadows
   Desktop / Tablet / Mobile
========================================================= */

/* DEFAULT BUTTON */

body .frayora-work-v2__portfolio {
    background: #D66A43 !important;
    border: 1px solid #D66A43 !important;
    color: #FFFFFF !important;

    box-shadow:
        0 8px 18px rgba(166, 77, 44, 0.13),
        0 18px 35px rgba(166, 77, 44, 0.08),
        inset 0 1px 0 rgba(255,255,255,0.20) !important;

    transition:
        background-color 0.35s ease,
        border-color 0.35s ease,
        transform 0.35s ease,
        box-shadow 0.35s ease !important;
}

/* WHITE ARROW */

body .frayora-work-v2__portfolio span {
    color: #FFFFFF !important;
}

/* HOVER — DEEPER TERRACOTTA */

@media (hover: hover) {

    body .frayora-work-v2__portfolio:hover {
        background: #BC5837 !important;
        border-color: #BC5837 !important;
        color: #FFFFFF !important;

        transform: translateY(-3px);

        box-shadow:
            0 12px 25px rgba(166, 77, 44, 0.18),
            0 24px 42px rgba(166, 77, 44, 0.12) !important;
    }

    body .frayora-work-v2__portfolio:hover span {
        color: #FFFFFF !important;
        transform: translateX(4px);
    }
}

/* KEYBOARD FOCUS */

body .frayora-work-v2__portfolio:focus-visible {
    outline: 2px solid #4F5B49;
    outline-offset: 4px;
}

/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
    body .frayora-work-v2__portfolio,
    body .frayora-work-v2__portfolio span {
        transition: none !important;
        transform: none !important;
    }
}

/* END SECTION 05 BUTTON OVERRIDE */






/* =========================================================
   FRAYORA — GLOBAL SERVICE PAGE HERO DEPTH

   Subtle architectural shadow
   Clean hero-to-section transition
   Desktop / Tablet / Mobile

   No ivory fade
   No change to hero photographs
   No change to typography or layout
========================================================= */

/* ALL SERVICE PAGE HEROES */

body .biab-hero,
body .digital-hero,
body .bk-hero,
body .operations-sops-page .sops-hero,
body .employee-knowledge-page .eks-hero,
body .workflows-page .wf-hero,
body .ongoing-improvement-page .oi-hero {
    position: relative;

    box-shadow:
        0 8px 18px rgba(28, 39, 29, 0.055),
        0 18px 35px rgba(28, 39, 29, 0.075) !important;
}

/* TABLET */

@media (min-width: 600px) and (max-width: 1100px) {

    body .biab-hero,
    body .digital-hero,
    body .bk-hero,
    body .operations-sops-page .sops-hero,
    body .employee-knowledge-page .eks-hero,
    body .workflows-page .wf-hero,
    body .ongoing-improvement-page .oi-hero {
        box-shadow:
            0 7px 16px rgba(28, 39, 29, 0.055),
            0 14px 27px rgba(28, 39, 29, 0.065) !important;
    }
}

/* MOBILE */

@media (max-width: 599px) {

    body .biab-hero,
    body .digital-hero,
    body .bk-hero,
    body .operations-sops-page .sops-hero,
    body .employee-knowledge-page .eks-hero,
    body .workflows-page .wf-hero,
    body .ongoing-improvement-page .oi-hero {
        box-shadow:
            0 6px 13px rgba(28, 39, 29, 0.045),
            0 12px 24px rgba(28, 39, 29, 0.06) !important;
    }
}

/* END GLOBAL SERVICE HERO DEPTH */



/* =========================================================
   FRAYORA — OUR APPROACH
   SECTION 02 — THE FRAYORA APPROACH

   COMPLETE RESPONSIVE CSS

   DESIGN SYSTEM
   ---------------------------------------------
   Bond-inspired editorial SaaS styling
   Manrope + Inter typography
   Solid warm-ivory background
   Frosted ivory card surfaces
   Soft dimensional shadows
   Terracotta icon accents
   Muted olive heading emphasis
   Gentle hover and entrance animations

   BREAKPOINTS
   ---------------------------------------------
   Desktop: 1101px+
   Tablet: 600px–1100px
   Mobile: 0px–599px
========================================================= */


/* =========================================================
   01 — SECTION FOUNDATION
========================================================= */

body .our-approach-page .oa-approach-cards {
    position: relative;
    isolation: isolate;

    display: block;

    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;

    margin: 0;
    padding: 0;

    overflow: clip;

    background-color: #F8F3EB !important;
    background-image: none !important;

    color: #1F211D;
}

body .our-approach-page .oa-approach-cards,
body .our-approach-page .oa-approach-cards *,
body .our-approach-page .oa-approach-cards *::before,
body .our-approach-page .oa-approach-cards *::after {
    box-sizing: border-box;
}


/* =========================================================
   02 — CONTENT CONTAINER
========================================================= */

body .our-approach-page .oa-approach-cards__inner {
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: 1600px;

    margin: 0 auto;
    padding: 98px 80px 100px;
}


/* =========================================================
   03 — CENTERED EDITORIAL INTRODUCTION
========================================================= */

body .our-approach-page .oa-approach-cards__intro {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
    max-width: 1100px;

    margin: 0 auto;
    padding: 0;

    text-align: center;
}


/* EYEBROW */

body .our-approach-page .oa-approach-cards__eyebrow {
    display: block;

    margin: 0 0 22px;
    padding: 0;

    font-family: "Inter", sans-serif !important;
    font-size: 12px;
    font-weight: 600;

    line-height: 1.4;
    letter-spacing: 0.13em;
    text-transform: uppercase;

    color: #C96743 !important;
    text-align: center;
}


/* =========================================================
   04 — TWO-TONE MAIN HEADING
========================================================= */

body .our-approach-page .oa-approach-cards__title {
    width: 100%;
    max-width: 1080px;

    margin: 0;
    padding: 0;

    font-family: "Manrope", sans-serif !important;

    font-size: clamp(37px, 3.15vw, 52px);
    font-weight: 600;
    font-style: normal;

    line-height: 1.15;
    letter-spacing: -0.055em;

    text-align: center;
    text-wrap: balance;

    color: #1F211D !important;
}

body .our-approach-page
.oa-approach-cards__title-dark {
    display: block;

    margin: 0;

    font: inherit;
    color: #1F211D !important;
}

body .our-approach-page
.oa-approach-cards__title-olive {
    display: block;

    margin: 0;

    font: inherit;
    color: #566449 !important;
}


/* =========================================================
   05 — SMALL EDITORIAL DIVIDER
========================================================= */

body .our-approach-page .oa-approach-cards__rule {
    display: block;

    width: 48px;
    height: 1px;

    margin: 25px auto 0;

    background: rgba(86,100,73,.27);
}


/* =========================================================
   06 — INTRODUCTORY BODY COPY
========================================================= */

body .our-approach-page
.oa-approach-cards__description {
    width: 100%;
    max-width: 850px;

    margin: 25px auto 0;
    padding: 0;

    font-family: "Inter", sans-serif !important;
    font-size: 15px;
    font-weight: 400;

    line-height: 1.8;
    letter-spacing: 0;

    color: #676962 !important;
    text-align: center;
}


/* =========================================================
   07 — FOUR-CARD GRID
========================================================= */

body .our-approach-page .oa-approach-cards__grid {
    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 20px;

    width: 100%;

    margin: 45px auto 0;
    padding: 8px 0 20px;

    align-items: stretch;
}


/* =========================================================
   08 — GLASS SERVICE CARDS
========================================================= */

body .our-approach-page .oa-approach-cards__card {
    position: relative;
    isolation: isolate;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 315px;

    margin: 0;
    padding: 28px 25px 32px;

    border: 1px solid rgba(217,207,193,.64);
    border-radius: 18px;

    background-color: rgba(255,253,249,.83);

    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);

    box-shadow:
        0 5px 12px rgba(48,43,36,.025),
        0 14px 28px rgba(48,43,36,.045),
        0 25px 45px rgba(48,43,36,.035),
        inset 0 1px 0 rgba(255,255,255,.95);

    transition:
        transform .4s cubic-bezier(.22,1,.36,1),
        border-color .35s ease,
        background-color .35s ease,
        box-shadow .4s ease;
}


/* TOP GLASS HIGHLIGHT */

body .our-approach-page
.oa-approach-cards__card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 18px;
    right: 18px;

    height: 1px;

    background: rgba(255,255,255,.95);

    pointer-events: none;
}


/* =========================================================
   09 — TERRACOTTA ICON CONTAINER
========================================================= */

body .our-approach-page .oa-approach-cards__icon {
    display: grid;
    place-items: center;

    flex-shrink: 0;

    width: 55px;
    height: 55px;

    margin: 0 0 20px;

    border-radius: 13px;

    background-color: #D66A43;

    color: #FFFFFF;

    box-shadow:
        0 6px 14px rgba(166,77,44,.13),
        inset 0 1px 0 rgba(255,255,255,.25);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

body .our-approach-page .oa-approach-cards__icon svg {
    display: block;

    width: 27px;
    height: 27px;

    color: inherit;

    overflow: visible;
}


/* =========================================================
   10 — CARD NUMBER
========================================================= */

body .our-approach-page .oa-approach-cards__number {
    display: block;

    margin: 0 0 10px;

    font-family: "Inter", sans-serif !important;
    font-size: 15px;
    font-weight: 600;

    line-height: 1.3;
    letter-spacing: .04em;

    color: #C96743 !important;
}


/* =========================================================
   11 — CARD HEADINGS
========================================================= */

body .our-approach-page
.oa-approach-cards__card-title {
    width: 100%;

    margin: 0 0 15px;
    padding: 0;

    font-family: "Manrope", sans-serif !important;
    font-size: clamp(18px, 1.35vw, 21px);
    font-weight: 600;
    font-style: normal;

    line-height: 1.35;
    letter-spacing: -0.04em;

    color: #1F211D !important;
    text-align: left;
    text-wrap: pretty;
}


/* =========================================================
   12 — CARD BODY COPY
========================================================= */

body .our-approach-page
.oa-approach-cards__card-copy {
    width: 100%;

    margin: 0;
    padding: 0;

    font-family: "Inter", sans-serif !important;
    font-size: 13px;
    font-weight: 400;

    line-height: 1.75;
    letter-spacing: 0;

    color: #676962 !important;
    text-align: left;
}


/* =========================================================
   13 — CLOSING EDITORIAL STATEMENT
========================================================= */

body .our-approach-page
.oa-approach-cards__closing {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
    max-width: 1000px;

    margin: 31px auto 0;
    padding: 34px 0 0;

    border-top: 1px solid rgba(86,100,73,.15);

    text-align: center;
}


/* MAIN CLOSING STATEMENT */

body .our-approach-page
.oa-approach-cards__statement {
    width: 100%;

    margin: 0;
    padding: 0;

    font-family: "Manrope", sans-serif !important;
    font-size: clamp(22px, 2vw, 29px);
    font-weight: 600;
    font-style: normal;

    line-height: 1.45;
    letter-spacing: -0.045em;

    color: #1F211D !important;
    text-align: center;
}


/* OLIVE ITALIC EMPHASIS */

body .our-approach-page
.oa-approach-cards__statement em {
    display: block;

    font-family: "Manrope", sans-serif !important;
    font-weight: 500;
    font-style: italic;

    color: #566449 !important;
}


/* FINAL SUPPORTING SENTENCE */

body .our-approach-page
.oa-approach-cards__closing-note {
    width: 100%;
    max-width: 790px;

    margin: 14px auto 0;
    padding: 0;

    font-family: "Inter", sans-serif !important;
    font-size: 14px;
    font-weight: 400;

    line-height: 1.75;

    color: #676962 !important;
    text-align: center;
}


/* =========================================================
   14 — DESKTOP HOVER EFFECTS
========================================================= */

@media (hover: hover) and (pointer: fine) {

    body .our-approach-page
    .oa-approach-cards__card:hover {
        transform: translateY(-5px);

        border-color: rgba(169,158,139,.65);

        background-color: rgba(255,254,251,.96);

        box-shadow:
            0 8px 20px rgba(48,43,36,.04),
            0 23px 42px rgba(48,43,36,.08),
            0 34px 55px rgba(48,43,36,.045),
            inset 0 1px 0 rgba(255,255,255,1);
    }

    body .our-approach-page
    .oa-approach-cards__card:hover
    .oa-approach-cards__icon {
        transform: translateY(-2px);

        box-shadow:
            0 9px 19px rgba(166,77,44,.19),
            inset 0 1px 0 rgba(255,255,255,.28);
    }
}


/* =========================================================
   15 — ENTRANCE ANIMATIONS

   Content remains visible by default.
   Supports browsers without scroll timelines.
========================================================= */

@keyframes oaCardsReveal {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

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

@supports (animation-timeline: view()) {

    body .our-approach-page
    .oa-approach-cards__card {
        animation: oaCardsReveal linear both;

        animation-timeline: view();
        animation-range: entry 0% entry 40%;
    }
}


/* =========================================================
   16 — TABLET: 600px–1100px
========================================================= */

@media screen and (min-width: 600px)
and (max-width: 1100px) {

    /* SECTION CONTAINER */

    body .our-approach-page
    .oa-approach-cards__inner {
        max-width: 100%;
        padding: 85px 48px 90px;
    }

    /* INTRO */

    body .our-approach-page
    .oa-approach-cards__intro {
        max-width: 850px;
    }

    /* HEADING */

    body .our-approach-page
    .oa-approach-cards__title {
        max-width: 850px;

        font-size: clamp(34px, 4.4vw, 46px);
        line-height: 1.16;
    }

    /* DESCRIPTION */

    body .our-approach-page
    .oa-approach-cards__description {
        max-width: 730px;

        font-size: 14px;
        line-height: 1.8;
    }

    /* GRID — 2 x 2 */

    body .our-approach-page
    .oa-approach-cards__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 20px;
        margin-top: 43px;
    }

    /* CARDS */

    body .our-approach-page
    .oa-approach-cards__card {
        min-height: 290px;
        padding: 29px 27px 32px;
    }

    /* CARD TYPOGRAPHY */

    body .our-approach-page
    .oa-approach-cards__card-title {
        font-size: 20px;
    }

    body .our-approach-page
    .oa-approach-cards__card-copy {
        font-size: 13.5px;
    }

    /* CLOSING */

    body .our-approach-page
    .oa-approach-cards__closing {
        margin-top: 25px;
    }

    body .our-approach-page
    .oa-approach-cards__statement {
        font-size: clamp(22px, 2.7vw, 28px);
    }
}


/* =========================================================
   17 — SMALL TABLET: 600px–749px
========================================================= */

@media screen and (min-width: 600px)
and (max-width: 749px) {

    body .our-approach-page
    .oa-approach-cards__inner {
        padding: 72px 35px 80px;
    }

    body .our-approach-page
    .oa-approach-cards__title {
        font-size: clamp(31px, 4.8vw, 36px);
    }

    body .our-approach-page
    .oa-approach-cards__grid {
        gap: 15px;
    }

    body .our-approach-page
    .oa-approach-cards__card {
        min-height: 315px;
        padding: 25px 21px 28px;
    }

    body .our-approach-page
    .oa-approach-cards__card-title {
        font-size: 19px;
    }

    body .our-approach-page
    .oa-approach-cards__card-copy {
        font-size: 13px;
    }
}


/* =========================================================
   18 — MOBILE: 0px–599px
========================================================= */

@media screen and (max-width: 599px) {

    /* SECTION FOUNDATION */

    body .our-approach-page
    .oa-approach-cards {
        overflow: clip;
    }

    /* INNER CONTAINER */

    body .our-approach-page
    .oa-approach-cards__inner {
        width: 100%;
        max-width: none;

        padding: 72px 24px 78px;
    }

    /* EYEBROW */

    body .our-approach-page
    .oa-approach-cards__eyebrow {
        margin-bottom: 19px;

        font-size: 11px;
        letter-spacing: .11em;
    }

    /* MAIN HEADING */

    body .our-approach-page
    .oa-approach-cards__title {
        max-width: 500px;

        font-size: clamp(29px, 7.8vw, 39px);
        line-height: 1.18;
        letter-spacing: -.052em;

        text-wrap: pretty;
    }

    /* DIVIDER */

    body .our-approach-page
    .oa-approach-cards__rule {
        width: 40px;
        margin-top: 23px;
    }

    /* DESCRIPTION */

    body .our-approach-page
    .oa-approach-cards__description {
        max-width: 500px;

        margin-top: 23px;

        font-size: 14px;
        line-height: 1.8;
    }

    /* SINGLE-COLUMN GRID */

    body .our-approach-page
    .oa-approach-cards__grid {
        display: grid;

        grid-template-columns: minmax(0, 1fr);

        gap: 17px;

        margin-top: 37px;
        padding: 4px 0 14px;
    }

    /* GLASS CARDS */

    body .our-approach-page
    .oa-approach-cards__card {
        width: 100%;
        min-height: 0;
        height: auto;

        padding: 26px 25px 29px;

        border-radius: 17px;

        transform: none !important;
    }

    /* ICON */

    body .our-approach-page
    .oa-approach-cards__icon {
        width: 53px;
        height: 53px;

        margin-bottom: 18px;
    }

    /* NUMBER */

    body .our-approach-page
    .oa-approach-cards__number {
        font-size: 14px;
        margin-bottom: 10px;
    }

    /* HEADING */

    body .our-approach-page
    .oa-approach-cards__card-title {
        font-size: 20px;
        line-height: 1.35;

        margin-bottom: 12px;
    }

    /* COPY */

    body .our-approach-page
    .oa-approach-cards__card-copy {
        font-size: 13.5px;
        line-height: 1.8;
    }

    /* CLOSING SECTION */

    body .our-approach-page
    .oa-approach-cards__closing {
        max-width: 100%;

        margin-top: 20px;
        padding-top: 30px;
    }

    body .our-approach-page
    .oa-approach-cards__statement {
        font-size: clamp(21px, 5.2vw, 25px);

        line-height: 1.45;
        letter-spacing: -.04em;
    }

    body .our-approach-page
    .oa-approach-cards__closing-note {
        margin-top: 19px;

        font-size: 13.5px;
        line-height: 1.8;
    }

    /* REMOVE UPWARD MOVEMENT ON TOUCH */

    body .our-approach-page
    .oa-approach-cards__card:hover,
    body .our-approach-page
    .oa-approach-cards__icon:hover {
        transform: none !important;
    }
}


/* =========================================================
   19 — SMALL MOBILE: 380px AND BELOW
========================================================= */

@media screen and (max-width: 380px) {

    body .our-approach-page
    .oa-approach-cards__inner {
        padding: 65px 20px 72px;
    }

    body .our-approach-page
    .oa-approach-cards__title {
        font-size: clamp(27px, 7.6vw, 30px);
    }

    body .our-approach-page
    .oa-approach-cards__card {
        padding: 24px 22px 27px;
    }

    body .our-approach-page
    .oa-approach-cards__card-title {
        font-size: 19px;
    }

    body .our-approach-page
    .oa-approach-cards__card-copy {
        font-size: 13px;
    }

    body .our-approach-page
    .oa-approach-cards__statement {
        font-size: 20px;
    }
}


/* =========================================================
   20 — REDUCED MOTION ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body .our-approach-page
    .oa-approach-cards__card,
    body .our-approach-page
    .oa-approach-cards__icon {
        animation: none !important;
        transition: none !important;

        opacity: 1 !important;
        transform: none !important;
    }
}

/* END OUR APPROACH SECTION 02 */



/* =========================================================
   FRAYORA — OUR APPROACH SECTION 02
   HEADING + RESPONSIVE CARD CAROUSEL

   Desktop:
   - Smaller Bond-inspired section heading
   - Existing four-card grid unchanged

   Tablet:
   - Horizontal scrolling cards
   - Approximately two cards visible

   Mobile:
   - Horizontal scrolling cards
   - One card + next-card preview

   All versions:
   - Remove decorative line beneath heading
   - Preserve existing copy and typography
   - Solid warm ivory background
========================================================= */


/* =========================================================
   01 — SECTION HEADING SIZE
   ALL DEVICES
========================================================= */

body .our-approach-page
.oa-approach-cards__title {
    font-family: "Manrope", sans-serif !important;

    font-size: clamp(34px, 2.8vw, 44px) !important;
    font-weight: 600 !important;

    line-height: 1.16 !important;
    letter-spacing: -0.055em !important;

    max-width: 1060px;

    text-align: center !important;
}


/* =========================================================
   02 — REMOVE LINE BENEATH HEADING
========================================================= */

body .our-approach-page
.oa-approach-cards__rule {
    display: none !important;
}

/* Maintain balanced heading-to-description spacing */

body .our-approach-page
.oa-approach-cards__description {
    margin-top: 26px !important;
}


/* =========================================================
   03 — TABLET CAROUSEL
   600px–1100px
========================================================= */

@media screen and (min-width: 600px)
and (max-width: 1100px) {

    /* HEADING */

    body .our-approach-page
    .oa-approach-cards__title {
        font-size: clamp(32px, 4.2vw, 42px) !important;
        max-width: 800px;
    }

    /* SCROLLING CARDS */

    body .our-approach-page
    .oa-approach-cards__grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;

        gap: 18px !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 42px 0 0 !important;

        padding: 12px 3px 28px !important;

        overflow-x: scroll !important;
        overflow-y: hidden !important;

        scroll-snap-type: x mandatory;
        scroll-padding-inline: 3px;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;

        scrollbar-width: auto !important;
        scrollbar-color: #87947B #DDD6C9 !important;
    }

    /* ALWAYS VISIBLE SCROLLBAR — CHROME/EDGE */

    body .our-approach-page
    .oa-approach-cards__grid::-webkit-scrollbar {
        display: block !important;
        height: 9px !important;
    }

    body .our-approach-page
    .oa-approach-cards__grid::-webkit-scrollbar-track {
        background: #DDD6C9 !important;
        border-radius: 999px;
    }

    body .our-approach-page
    .oa-approach-cards__grid::-webkit-scrollbar-thumb {
        background: #87947B !important;
        border: 1px solid #DDD6C9;
        border-radius: 999px;
    }

    /* APPROXIMATELY TWO CARDS VISIBLE */

    body .our-approach-page
    .oa-approach-cards__card {
        flex: 0 0 calc(50% - 9px) !important;

        width: calc(50% - 9px) !important;
        min-width: 0 !important;
        max-width: none !important;

        height: auto !important;
        min-height: 340px !important;

        margin: 0 !important;

        scroll-snap-align: start;

        transform: none !important;
        animation: none !important;
        opacity: 1 !important;
    }

    /* PREVENT HOVER CLIPPING */

    body .our-approach-page
    .oa-approach-cards__card:hover {
        transform: none !important;
    }
}


/* =========================================================
   04 — MOBILE CAROUSEL
   0px–599px
========================================================= */

@media screen and (max-width: 599px) {

    /* SECTION HEADING */

    body .our-approach-page
    .oa-approach-cards__title {
        font-size: clamp(29px, 7.4vw, 36px) !important;

        line-height: 1.18 !important;
        letter-spacing: -0.052em !important;

        max-width: 480px;
    }

    /* BODY DESCRIPTION */

    body .our-approach-page
    .oa-approach-cards__description {
        margin-top: 23px !important;
    }

    /* MOBILE SCROLL CONTAINER */

    body .our-approach-page
    .oa-approach-cards__grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;

        gap: 15px !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 35px 0 0 !important;

        padding: 12px 3px 28px !important;

        overflow-x: scroll !important;
        overflow-y: hidden !important;

        scroll-snap-type: x mandatory;
        scroll-padding-inline: 3px;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;

        scrollbar-width: auto !important;
        scrollbar-color: #87947B #DDD6C9 !important;
    }

    /* SCROLLBAR */

    body .our-approach-page
    .oa-approach-cards__grid::-webkit-scrollbar {
        display: block !important;
        height: 8px !important;
    }

    body .our-approach-page
    .oa-approach-cards__grid::-webkit-scrollbar-track {
        background: #DDD6C9 !important;
        border-radius: 999px;
    }

    body .our-approach-page
    .oa-approach-cards__grid::-webkit-scrollbar-thumb {
        background: #87947B !important;
        border: 1px solid #DDD6C9;
        border-radius: 999px;
    }

    /* CARDS — ONE + NEXT CARD PREVIEW */

    body .our-approach-page
    .oa-approach-cards__card {
        flex: 0 0 86% !important;

        width: 86% !important;
        min-width: 0 !important;
        max-width: none !important;

        min-height: 370px !important;
        height: auto !important;

        margin: 0 !important;

        padding: 27px 25px 30px !important;

        scroll-snap-align: start;

        transform: none !important;
        animation: none !important;
        opacity: 1 !important;
    }

    /* PREVENT CARDS FROM LIFTING AND CLIPPING */

    body .our-approach-page
    .oa-approach-cards__card:hover {
        transform: none !important;
    }

    /* PRESERVE CARD HEADING HIERARCHY */

    body .our-approach-page
    .oa-approach-cards__card-title {
        font-size: 20px !important;
    }

    /* PRESERVE BODY READABILITY */

    body .our-approach-page
    .oa-approach-cards__card-copy {
        font-size: 13.5px !important;
        line-height: 1.8 !important;
    }
}


/* =========================================================
   05 — SMALL MOBILE
   BELOW 380px
========================================================= */

@media screen and (max-width: 380px) {

    body .our-approach-page
    .oa-approach-cards__title {
        font-size: 29px !important;
    }

    body .our-approach-page
    .oa-approach-cards__card {
        flex-basis: 88% !important;
        width: 88% !important;

        min-height: 390px !important;
        padding: 25px 22px 28px !important;
    }
}


/* =========================================================
   06 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body .our-approach-page
    .oa-approach-cards__card {
        animation: none !important;
        transition: none !important;
    }
}

/* END OUR APPROACH SECTION 02 OVERRIDE */




/* =========================================================
   FRAYORA — OUR APPROACH
   SECTION 03 — THE FRAYORA METHOD

   REFINED CONNECTED JOURNEY
   DESKTOP / TABLET / MOBILE

   Bond-inspired editorial design
   Manrope + Inter typography
   Warm stone #F5EDE4
   Terracotta connected path
   Ivory dimensional markers
   Soft illumination and depth
   Accessible motion
========================================================= */


/* =========================================
   01 — SECTION FOUNDATION
========================================= */

body .our-approach-page .oa-journey {
    position: relative;
    isolation: isolate;

    display: block;

    width: 100%;
    min-width: 0;
    height: auto;

    margin: 0;
    padding: 0;

    overflow: clip;

    background-color: #F5EDE4 !important;

    background-image:
        radial-gradient(
            ellipse 100% 90% at 15% 20%,
            rgba(255,255,255,.35),
            transparent 80%
        ),
        radial-gradient(
            ellipse 95% 90% at 90% 65%,
            rgba(255,255,255,.27),
            transparent 80%
        );

    color: #1F211D;
}

body .our-approach-page .oa-journey,
body .our-approach-page .oa-journey *,
body .our-approach-page .oa-journey *::before,
body .our-approach-page .oa-journey *::after {
    box-sizing: border-box;
}


/* =========================================
   02 — MAIN CONTAINER
========================================= */

body .our-approach-page .oa-journey__inner {
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: 1500px;

    margin: 0 auto;
    padding: 100px 80px 105px;
}


/* =========================================
   03 — CENTERED INTRODUCTION
========================================= */

body .our-approach-page .oa-journey__intro {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
    max-width: 950px;

    margin: 0 auto;

    text-align: center;
}


/* EYEBROW */

body .our-approach-page .oa-journey__eyebrow {
    margin: 0 0 18px;

    font-family: "Inter", sans-serif !important;
    font-size: 12px;
    font-weight: 600;

    line-height: 1.4;
    letter-spacing: .11em;
    text-transform: uppercase;

    color: #C96743 !important;
    text-align: center;
}


/* MAIN SECTION HEADING */

body .our-approach-page .oa-journey__heading {
    width: 100%;

    margin: 0;
    padding: 0;

    font-family: "Manrope", sans-serif !important;
    font-size: clamp(36px, 3vw, 46px);
    font-weight: 600;
    font-style: normal;

    line-height: 1.14;
    letter-spacing: -.055em;

    color: #1F211D !important;
    text-align: center;
    text-wrap: balance;
}


/* INTRODUCTORY COPY */

body .our-approach-page .oa-journey__description {
    width: 100%;
    max-width: 790px;

    margin: 24px auto 0;
    padding: 0;

    font-family: "Inter", sans-serif !important;
    font-size: 15px;
    font-weight: 400;

    line-height: 1.8;
    letter-spacing: 0;

    color: #66675F !important;
    text-align: center;
}


/* =========================================
   04 — FIVE-STEP JOURNEY
========================================= */

body .our-approach-page .oa-journey__steps {
    position: relative;
    isolation: isolate;

    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));

    gap: 25px;

    width: 100%;

    margin: 75px auto 0;
    padding: 0;

    align-items: start;
}


/* =========================================
   05 — CONNECTED WAVY LINE
========================================= */

body .our-approach-page .oa-journey__wave {
    position: absolute;
    z-index: 0;

    display: block;

    left: 0;
    top: 0;

    width: 100%;
    height: 80px;

    overflow: visible;
    pointer-events: none;
}

body .our-approach-page .oa-journey__wave-line {
    fill: none;

    stroke: #C96743;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;

    opacity: .82;

    vector-effect: non-scaling-stroke;

    stroke-dasharray: 1300;
    stroke-dashoffset: 1300;

    animation: oaJourneyDraw 2.2s
        cubic-bezier(.22,1,.36,1)
        forwards;
}

body .our-approach-page .oa-journey__wave-shadow {
    fill: none;

    stroke: rgba(201,103,67,.16);
    stroke-width: 5;
    stroke-linecap: round;

    filter: blur(3px);

    vector-effect: non-scaling-stroke;
}


/* PATH DRAW ANIMATION */

@keyframes oaJourneyDraw {
    from {
        stroke-dashoffset: 1300;
    }

    to {
        stroke-dashoffset: 0;
    }
}


/* =========================================
   06 — INDIVIDUAL JOURNEY STEPS
========================================= */

body .our-approach-page .oa-journey__step {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    text-align: center;
}


/* =========================================
   07 — DIMENSIONAL NUMBERED MARKERS
========================================= */

body .our-approach-page .oa-journey__marker {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 72px;
    height: 72px;

    margin: 4px auto 23px;

    border: 1px solid rgba(216,200,183,.8);
    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.96),
            rgba(249,243,234,.94)
        );

    box-shadow:
        0 4px 12px rgba(50,44,36,.035),
        0 12px 23px rgba(50,44,36,.075),
        inset 0 2px 2px rgba(255,255,255,.95),
        inset 0 -2px 5px rgba(214,198,177,.17);

    transition:
        transform .4s cubic-bezier(.22,1,.36,1),
        box-shadow .4s ease,
        border-color .4s ease;
}


/* NUMBER */

body .our-approach-page .oa-journey__number {
    display: block;

    margin: 0;

    font-family: "Inter", sans-serif !important;
    font-size: 17px;
    font-weight: 600;

    line-height: 1;

    letter-spacing: -.025em;

    color: #C96743 !important;
}


/* =========================================
   08 — STEP CONTENT
========================================= */

body .our-approach-page .oa-journey__step-content {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
    min-width: 0;

    padding: 0 4px;
}


/* STEP HEADINGS */

body .our-approach-page .oa-journey__step-title {
    width: 100%;

    margin: 0 0 16px;
    padding: 0;

    font-family: "Manrope", sans-serif !important;
    font-size: clamp(18px, 1.45vw, 22px);
    font-weight: 600;
    font-style: normal;

    line-height: 1.3;
    letter-spacing: -.04em;

    color: #1F211D !important;
    text-align: center;
    text-wrap: balance;
}


/* STEP BODY */

body .our-approach-page .oa-journey__step-text {
    width: 100%;

    margin: 0;
    padding: 0;

    font-family: "Inter", sans-serif !important;
    font-size: 13px;
    font-weight: 400;

    line-height: 1.75;
    letter-spacing: 0;

    color: #696962 !important;
    text-align: center;
}


/* =========================================
   09 — MARKER HOVER DEPTH
========================================= */

@media (hover: hover) and (pointer: fine) {

    body .our-approach-page
    .oa-journey__step:hover
    .oa-journey__marker {
        transform: translateY(-5px);

        border-color: rgba(201,103,67,.38);

        box-shadow:
            0 7px 17px rgba(50,44,36,.065),
            0 20px 35px rgba(50,44,36,.11),
            inset 0 2px 2px rgba(255,255,255,1);
    }

    body .our-approach-page
    .oa-journey__step:hover
    .oa-journey__number {
        color: #B85837 !important;
    }
}


/* =========================================
   10 — CLOSING EDITORIAL MOMENT
========================================= */

body .our-approach-page .oa-journey__closing {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
    max-width: 900px;

    margin: 82px auto 0;
    padding: 0;

    text-align: center;
}


/* CLOSING HEADING */

body .our-approach-page .oa-journey__statement {
    width: 100%;

    margin: 0;
    padding: 0;

    font-family: "Manrope", sans-serif !important;
    font-size: clamp(24px, 2.15vw, 32px);
    font-weight: 600;

    line-height: 1.42;
    letter-spacing: -.045em;

    color: #1F211D !important;
    text-align: center;
}


/* SECOND LINE — ITALIC OLIVE */

body .our-approach-page .oa-journey__statement em {
    display: block;

    font-family: "Manrope", sans-serif !important;
    font-size: inherit;
    font-weight: 500;
    font-style: italic;

    color: #566449 !important;
}


/* TERRACOTTA STAR */

body .our-approach-page .oa-journey__star {
    display: block;

    margin: 25px 0 20px;

    font-family: "Inter", sans-serif;
    font-size: 21px;
    font-weight: 400;

    line-height: 1;

    color: #C96743 !important;

    text-shadow:
        0 4px 12px rgba(201,103,67,.13);
}


/* FINAL SUPPORTING COPY */

body .our-approach-page .oa-journey__fineprint {
    width: 100%;
    max-width: 760px;

    margin: 0;
    padding: 0;

    font-family: "Inter", sans-serif !important;
    font-size: 14px;
    font-weight: 400;

    line-height: 1.8;

    color: #696962 !important;
    text-align: center;
}


/* =========================================
   11 — ENTRANCE ANIMATIONS
========================================= */

@keyframes oaJourneyReveal {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

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

@supports (animation-timeline: view()) {

    body .our-approach-page .oa-journey__intro,
    body .our-approach-page .oa-journey__closing {
        animation: oaJourneyReveal linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 45%;
    }
}


/* =========================================
   12 — TABLET
   600px–1100px

   Staggered vertical journey
========================================= */

@media screen and (min-width: 600px)
and (max-width: 1100px) {

    body .our-approach-page .oa-journey__inner {
        padding: 85px 48px 92px;
    }

    body .our-approach-page .oa-journey__heading {
        font-size: clamp(34px, 4.3vw, 42px);
    }

    body .our-approach-page .oa-journey__description {
        max-width: 730px;
        font-size: 14px;
    }

    /* CENTRAL VERTICAL TIMELINE */

    body .our-approach-page .oa-journey__steps {
        display: flex;
        flex-direction: column;

        gap: 0;

        width: 100%;
        max-width: 800px;

        margin: 55px auto 0;
        padding: 0;

        align-items: stretch;
    }

    /* HIDE DESKTOP HORIZONTAL WAVE */

    body .our-approach-page .oa-journey__wave {
        display: none !important;
    }

    /* EACH STEP */

    body .our-approach-page .oa-journey__step {
        display: grid;

        grid-template-columns:
            minmax(0, 1fr) 82px minmax(0, 1fr);

        align-items: start;

        min-height: 185px;
        padding: 0 0 26px;

        text-align: left;
    }

    /* CENTRED CONNECTING LINE */

    body .our-approach-page
    .oa-journey__step:not(:last-child)::after {
        content: "";

        position: absolute;
        z-index: 0;

        left: 50%;
        top: 76px;
        bottom: 0;

        width: 2px;

        transform: translateX(-50%);

        background: linear-gradient(
            180deg,
            rgba(201,103,67,.56),
            rgba(201,103,67,.24),
            rgba(201,103,67,.56)
        );

        border-radius: 20px;

        pointer-events: none;
    }

    /* NUMBERED CIRCLE */

    body .our-approach-page .oa-journey__marker {
        grid-column: 2;
        grid-row: 1;

        width: 70px;
        height: 70px;

        margin: 0 auto;
    }

    /* ALTERNATING STEP COPY */

    body .our-approach-page
    .oa-journey__step:nth-child(even)
    .oa-journey__step-content {
        grid-column: 3;
        grid-row: 1;

        align-items: flex-start;
        text-align: left;

        padding: 5px 0 0 16px;
    }

    body .our-approach-page
    .oa-journey__step:nth-child(odd)
    .oa-journey__step-content {
        grid-column: 1;
        grid-row: 1;

        align-items: flex-end;
        text-align: right;

        padding: 5px 16px 0 0;
    }

    body .our-approach-page
    .oa-journey__step:nth-child(odd)
    .oa-journey__step-title,
    body .our-approach-page
    .oa-journey__step:nth-child(odd)
    .oa-journey__step-text {
        text-align: right;
    }

    body .our-approach-page
    .oa-journey__step:nth-child(even)
    .oa-journey__step-title,
    body .our-approach-page
    .oa-journey__step:nth-child(even)
    .oa-journey__step-text {
        text-align: left;
    }

    body .our-approach-page .oa-journey__step-title {
        font-size: 20px;
        margin-bottom: 12px;
    }

    body .our-approach-page .oa-journey__step-text {
        font-size: 13px;
    }

    body .our-approach-page .oa-journey__closing {
        margin-top: 53px;
    }
}


/* =========================================
   13 — SMALL TABLET
   600px–749px
========================================= */

@media screen and (min-width: 600px)
and (max-width: 749px) {

    body .our-approach-page .oa-journey__inner {
        padding: 74px 34px 82px;
    }

    body .our-approach-page .oa-journey__heading {
        font-size: 34px;
    }

    body .our-approach-page .oa-journey__step {
        grid-template-columns:
            minmax(0, 1fr) 74px minmax(0, 1fr);

        min-height: 205px;
    }

    body .our-approach-page .oa-journey__marker {
        width: 62px;
        height: 62px;
    }

    body .our-approach-page
    .oa-journey__step:not(:last-child)::after {
        top: 68px;
    }

    body .our-approach-page .oa-journey__step-title {
        font-size: 18px;
    }

    body .our-approach-page .oa-journey__step-text {
        font-size: 12.5px;
        line-height: 1.7;
    }
}


/* =========================================
   14 — MOBILE
   0px–599px

   Clean vertical connected timeline
========================================= */

@media screen and (max-width: 599px) {

    body .our-approach-page .oa-journey__inner {
        width: 100%;
        padding: 75px 24px 83px;
    }

    /* INTRO */

    body .our-approach-page .oa-journey__eyebrow {
        font-size: 11px;
        margin-bottom: 18px;
    }

    body .our-approach-page .oa-journey__heading {
        font-size: clamp(30px, 7.7vw, 38px);
        line-height: 1.16;
    }

    body .our-approach-page .oa-journey__description {
        margin-top: 22px;

        font-size: 14px;
        line-height: 1.8;
    }

    /* VERTICAL PROCESS */

    body .our-approach-page .oa-journey__steps {
        display: flex;
        flex-direction: column;

        gap: 0;

        width: 100%;
        max-width: 480px;

        margin: 47px auto 0;
        padding: 0;
    }

    /* REMOVE DESKTOP SVG */

    body .our-approach-page .oa-journey__wave {
        display: none !important;
    }

    /* MOBILE STEP */

    body .our-approach-page .oa-journey__step {
        position: relative;

        display: grid;

        grid-template-columns: 62px minmax(0, 1fr);
        column-gap: 19px;

        align-items: start;

        width: 100%;
        min-height: 0;

        padding: 0 0 42px;

        text-align: left;
    }

    body .our-approach-page
    .oa-journey__step:last-child {
        padding-bottom: 0;
    }

    /* SUBTLE CURVED CONNECTING LINE */

    body .our-approach-page
    .oa-journey__step:not(:last-child)::after {
        content: "";

        position: absolute;
        z-index: 0;

        left: 30px;
        top: 61px;
        bottom: -1px;

        width: 12px;

        border-left: 1.6px solid rgba(201,103,67,.6);

        border-radius: 55% 0 0 45%;

        pointer-events: none;
    }

    body .our-approach-page
    .oa-journey__step:nth-child(even)::after {
        border-radius: 0 55% 45% 0;

        border-left: 0;
        border-right: 1.6px solid rgba(201,103,67,.6);

        left: 19px;
    }

    /* SMALLER NUMBERED MARKERS */

    body .our-approach-page .oa-journey__marker {
        grid-column: 1;
        grid-row: 1;

        width: 60px;
        height: 60px;

        margin: 0;

        border-radius: 50%;
    }

    body .our-approach-page .oa-journey__number {
        font-size: 15px;
    }

    /* CONTENT RIGHT OF MARKER */

    body .our-approach-page .oa-journey__step-content {
        grid-column: 2;
        grid-row: 1;

        display: flex;
        flex-direction: column;
        align-items: flex-start;

        width: 100%;

        padding: 4px 0 0;

        text-align: left;
    }

    body .our-approach-page .oa-journey__step-title {
        margin: 0 0 11px;

        font-size: 20px;
        line-height: 1.3;

        text-align: left;
    }

    body .our-approach-page .oa-journey__step-text {
        font-size: 13.5px;
        line-height: 1.8;

        text-align: left;
    }

    /* CLOSING */

    body .our-approach-page .oa-journey__closing {
        max-width: 480px;

        margin: 65px auto 0;
    }

    body .our-approach-page .oa-journey__statement {
        font-size: clamp(23px, 5.7vw, 28px);
        line-height: 1.45;
    }

    body .our-approach-page .oa-journey__star {
        margin: 22px 0 17px;
    }

    body .our-approach-page .oa-journey__fineprint {
        font-size: 13.5px;
        line-height: 1.8;
    }
}


/* =========================================
   15 — SMALL MOBILE
   BELOW 380px
========================================= */

@media screen and (max-width: 380px) {

    body .our-approach-page .oa-journey__inner {
        padding: 68px 20px 75px;
    }

    body .our-approach-page .oa-journey__heading {
        font-size: 29px;
    }

    body .our-approach-page .oa-journey__step {
        grid-template-columns: 56px minmax(0, 1fr);
        column-gap: 14px;
    }

    body .our-approach-page .oa-journey__marker {
        width: 54px;
        height: 54px;
    }

    body .our-approach-page
    .oa-journey__step:not(:last-child)::after {
        top: 55px;
        left: 27px;
    }

    body .our-approach-page
    .oa-journey__step:nth-child(even)::after {
        left: 17px;
    }

    body .our-approach-page .oa-journey__step-title {
        font-size: 19px;
    }

    body .our-approach-page .oa-journey__step-text {
        font-size: 13px;
    }
}


/* =========================================
   16 — REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    body .our-approach-page .oa-journey__wave-line {
        animation: none !important;
        stroke-dasharray: none !important;
        stroke-dashoffset: 0 !important;
    }

    body .our-approach-page .oa-journey__intro,
    body .our-approach-page .oa-journey__closing {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    body .our-approach-page .oa-journey__marker {
        transition: none !important;
        transform: none !important;
    }
}

/* END FRAYORA OUR APPROACH SECTION 03 */



/* =========================================================
   FRAYORA — OUR APPROACH
   SECTION 03 — RESPONSIVE REFINEMENTS

   MOBILE:
   Left-align introduction and closing text

   TABLET:
   Reduce space beneath timeline

   Preserve typography, colours, shadows,
   animations and original copy.
========================================================= */


/* =========================================
   01 — MOBILE
   0px–599px
========================================= */

@media screen and (max-width: 599px) {

    /* INTRODUCTION CONTAINER */

    body .our-approach-page .oa-journey__intro {
        align-items: flex-start !important;
        text-align: left !important;
    }

    /* EYEBROW */

    body .our-approach-page .oa-journey__eyebrow {
        width: 100%;
        text-align: left !important;
    }

    /* MAIN HEADING */

    body .our-approach-page .oa-journey__heading {
        width: 100%;
        text-align: left !important;
    }

    /* INTRODUCTORY BODY COPY */

    body .our-approach-page .oa-journey__description {
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;

        text-align: left !important;
    }

    /* CLOSING CONTAINER */

    body .our-approach-page .oa-journey__closing {
        align-items: flex-start !important;
        text-align: left !important;
    }

    /* CLOSING STATEMENT */

    body .our-approach-page .oa-journey__statement {
        width: 100%;
        text-align: left !important;
    }

    /* OLIVE ITALIC STATEMENT */

    body .our-approach-page .oa-journey__statement em {
        text-align: left !important;
    }

    /* DECORATIVE STAR */

    body .our-approach-page .oa-journey__star {
        align-self: flex-start;
        text-align: left !important;
    }

    /* FINAL SUPPORTING COPY */

    body .our-approach-page .oa-journey__fineprint {
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;

        text-align: left !important;
    }
}


/* =========================================
   02 — TABLET
   600px–1100px
========================================= */

@media screen and (min-width: 600px)
and (max-width: 1100px) {

    /* REDUCE SPACE AFTER FIFTH STEP */

    body .our-approach-page .oa-journey__closing {
        margin-top: 12px !important;
    }

    /* REMOVE EXCESS BOTTOM SPACE FROM FINAL STEP */

    body .our-approach-page
    .oa-journey__step:last-child {
        min-height: 0 !important;
        padding-bottom: 0 !important;
    }

    /* SLIGHTLY REDUCE SECTION BOTTOM PADDING */

    body .our-approach-page .oa-journey__inner {
        padding-bottom: 80px !important;
    }
}

/* END SECTION 03 RESPONSIVE REFINEMENTS */


/* =========================================================
   FRAYORA — OUR APPROACH
   SECTION 04 — WHY OUR APPROACH IS DIFFERENT

   MODERN EDITORIAL SAAS COMPARISON

   Design:
   - Bond-inspired Manrope + Inter typography
   - Warm ivory section foundation
   - Raised editorial comparison tabs
   - Soft champagne usual-reaction panel
   - Deep olive Frayora approach panel
   - Subtle glass, illumination and shadows
   - Restrained hover interaction
   - Responsive desktop / tablet / mobile

   New classes: oa-compare
   Existing oa-difference CSS unaffected
========================================================= */


/* =========================================
   01 — SECTION FOUNDATION
========================================= */

body .our-approach-page .oa-compare {
    --oa-cream: #F8F3EB;
    --oa-ink: #1F211D;
    --oa-olive: #566449;
    --oa-dark-olive: #4F5B49;
    --oa-terracotta: #D66A43;

    position: relative;
    isolation: isolate;

    display: block;

    width: 100%;
    max-width: none;
    min-width: 0;

    height: auto;
    min-height: 0;

    margin: 0;
    padding: 0;

    overflow: clip;

    background: #F8F3EB !important;
    background-image: none !important;

    color: var(--oa-ink);
}

body .our-approach-page .oa-compare,
body .our-approach-page .oa-compare *,
body .our-approach-page .oa-compare *::before,
body .our-approach-page .oa-compare *::after {
    box-sizing: border-box;
}


/* =========================================
   02 — CONTENT CONTAINER
========================================= */

body .our-approach-page .oa-compare__inner {
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: 1500px;

    margin: 0 auto;

    padding: 100px 80px 105px;
}


/* =========================================
   03 — SECTION INTRODUCTION
========================================= */

body .our-approach-page .oa-compare__intro {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
    max-width: 1000px;

    margin: 0 auto;
    padding: 0;

    text-align: center;
}


/* EYEBROW */

body .our-approach-page .oa-compare__eyebrow {
    width: 100%;

    margin: 0 0 20px;
    padding: 0;

    font-family: "Inter", sans-serif !important;
    font-size: 12px;
    font-weight: 600;

    line-height: 1.45;
    letter-spacing: .12em;
    text-transform: uppercase;

    color: #C96743 !important;
    text-align: center;
}


/* MAIN HEADING */

body .our-approach-page .oa-compare__heading {
    width: 100%;
    max-width: 1000px;

    margin: 0;
    padding: 0;

    font-family: "Manrope", sans-serif !important;
    font-size: clamp(36px, 3vw, 46px);
    font-weight: 600;
    font-style: normal;

    line-height: 1.16;
    letter-spacing: -.055em;

    text-align: center;
    text-wrap: balance;

    color: #1F211D !important;
}

body .our-approach-page .oa-compare__heading-dark,
body .our-approach-page .oa-compare__heading-olive {
    display: block;
    font: inherit;
}

body .our-approach-page .oa-compare__heading-dark {
    color: #1F211D !important;
}

body .our-approach-page .oa-compare__heading-olive {
    color: #566449 !important;
}


/* =========================================
   04 — INTRODUCTION BODY COPY
========================================= */

body .our-approach-page .oa-compare__description {
    width: 100%;
    max-width: 820px;

    margin: 25px auto 0;
    padding: 0;

    text-align: center;
}

body .our-approach-page .oa-compare__description p {
    margin: 0;
    padding: 0;

    font-family: "Inter", sans-serif !important;
    font-size: 15px;
    font-weight: 400;

    line-height: 1.8;
    letter-spacing: 0;

    color: #676962 !important;
    text-align: center;
}

body .our-approach-page
.oa-compare__description p + p {
    margin-top: 5px;
}


/* =========================================
   05 — TWO-PANEL COMPARISON GRID
========================================= */

body .our-approach-page .oa-compare__grid {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    align-items: stretch;
    gap: 26px;

    width: 100%;

    margin: 62px auto 0;
    padding: 8px 0 24px;
}


/* =========================================
   06 — SHAPED PANEL FOUNDATION

   Inspired by raised tab silhouette
   from the supplied reference
========================================= */

body .our-approach-page .oa-compare__panel {
    position: relative;
    isolation: isolate;

    display: flex;
    flex-direction: column;

    min-width: 0;
    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    background: transparent;

    transition:
        transform .4s cubic-bezier(.22,1,.36,1);
}


/* =========================================
   07 — RAISED TOP TABS
========================================= */

body .our-approach-page .oa-compare__tab {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    width: fit-content;
    max-width: calc(100% - 24px);
    min-height: 49px;

    margin: 0 0 -2px 0;
    padding: 0 28px;

    border-radius: 19px 19px 0 0;

    border: 1px solid transparent;
    border-bottom: 0;
}

body .our-approach-page .oa-compare__tab-label {
    font-family: "Inter", sans-serif !important;

    font-size: 11px;
    font-weight: 600;

    line-height: 1.4;
    letter-spacing: .10em;
    text-transform: uppercase;

    white-space: normal;
}


/* =========================================
   08 — MAIN PANEL BODY
========================================= */

body .our-approach-page .oa-compare__panel-body {
    position: relative;
    isolation: isolate;

    display: flex;
    flex-direction: column;

    flex: 1;

    width: 100%;
    min-height: 385px;

    margin: 0;
    padding: 40px 39px 45px;

    border: 1px solid transparent;
    border-radius: 0 24px 24px 24px;

    overflow: hidden;

    transition:
        box-shadow .4s ease,
        border-color .4s ease;
}


/* =========================================
   09 — COMPARISON A
   WARM CHAMPAGNE / IVORY
========================================= */

body .our-approach-page
.oa-compare__panel--usual
.oa-compare__tab {
    background: #EFE5DA;
    border-color: rgba(219,205,189,.78);
}

body .our-approach-page
.oa-compare__panel--usual
.oa-compare__tab-label {
    color: #BB6345 !important;
}

body .our-approach-page
.oa-compare__panel--usual
.oa-compare__panel-body {
    background:
        linear-gradient(
            145deg,
            #F4EBE1 0%,
            #F0E5D9 100%
        );

    border-color: rgba(219,205,189,.78);

    box-shadow:
        0 8px 18px rgba(65,51,39,.035),
        0 22px 40px rgba(65,51,39,.065),
        0 36px 55px rgba(65,51,39,.035),
        inset 0 1px 0 rgba(255,255,255,.60);
}


/* TRANSLUCENT DECORATIVE ARC */

body .our-approach-page
.oa-compare__panel--usual
.oa-compare__panel-body::before {
    content: "";

    position: absolute;
    z-index: -1;

    width: 270px;
    height: 270px;

    right: -130px;
    bottom: -145px;

    border: 28px solid rgba(255,255,255,.24);
    border-radius: 50%;

    pointer-events: none;
}


/* =========================================
   10 — COMPARISON B
   FRAYORA DEEP OLIVE
========================================= */

body .our-approach-page
.oa-compare__panel--frayora
.oa-compare__tab {
    background: #596653;

    border-color: rgba(79,91,73,.6);
}

body .our-approach-page
.oa-compare__panel--frayora
.oa-compare__tab-label {
    color: #F8F3EB !important;
}

body .our-approach-page
.oa-compare__panel--frayora
.oa-compare__panel-body {
    background-color: #4F5B49;

    background-image:
        radial-gradient(
            ellipse 90% 80% at 10% 0%,
            rgba(255,255,255,.10),
            transparent 75%
        ),
        linear-gradient(
            140deg,
            #53614D 0%,
            #4F5B49 55%,
            #424E3D 100%
        );

    border-color: rgba(79,91,73,.66);

    box-shadow:
        0 10px 23px rgba(32,44,30,.09),
        0 24px 46px rgba(32,44,30,.14),
        0 38px 65px rgba(32,44,30,.075),
        inset 0 1px 0 rgba(255,255,255,.10);
}


/* SUBTLE OLIVE ARC */

body .our-approach-page
.oa-compare__panel--frayora
.oa-compare__panel-body::before {
    content: "";

    position: absolute;
    z-index: -1;

    width: 285px;
    height: 285px;

    right: -135px;
    bottom: -155px;

    border: 29px solid rgba(255,255,255,.055);
    border-radius: 50%;

    pointer-events: none;
}


/* =========================================
   11 — PANEL HEADINGS
========================================= */

body .our-approach-page .oa-compare__panel-heading {
    width: 100%;

    margin: 0 0 27px;
    padding: 0;

    font-family: "Manrope", sans-serif !important;
    font-size: clamp(25px, 2vw, 31px);
    font-weight: 600;
    font-style: normal;

    line-height: 1.22;
    letter-spacing: -.05em;

    text-align: left;
    text-wrap: balance;
}

body .our-approach-page
.oa-compare__panel--usual
.oa-compare__panel-heading {
    color: #1F211D !important;
}

body .our-approach-page
.oa-compare__panel--frayora
.oa-compare__panel-heading {
    color: #FFFFFF !important;
}


/* =========================================
   12 — COMPARISON LIST
========================================= */

body .our-approach-page .oa-compare__list {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;

    gap: 0;

    width: 100%;

    margin: 0;
    padding: 0;

    list-style: none !important;
}

body .our-approach-page .oa-compare__list li {
    display: flex;
    flex-direction: row;
    align-items: flex-start;

    gap: 15px;

    width: 100%;

    margin: 0;
    padding: 15px 0;

    font-family: "Inter", sans-serif !important;
    font-size: 14px;
    font-weight: 400;

    line-height: 1.65;
    letter-spacing: 0;

    border-bottom: 1px solid transparent;

    list-style: none !important;
}

body .our-approach-page .oa-compare__list li:first-child {
    padding-top: 0;
}

body .our-approach-page .oa-compare__list li:last-child {
    padding-bottom: 0;
    border-bottom: 0 !important;
}

body .our-approach-page .oa-compare__list li::before,
body .our-approach-page .oa-compare__list li::marker {
    content: none !important;
}


/* USUAL REACTION LIST */

body .our-approach-page
.oa-compare__panel--usual
.oa-compare__list li {
    color: #555850 !important;

    border-bottom-color: rgba(91,79,65,.13);
}


/* FRAYORA APPROACH LIST */

body .our-approach-page
.oa-compare__panel--frayora
.oa-compare__list li {
    color: rgba(255,255,255,.94) !important;

    border-bottom-color: rgba(255,255,255,.16);
}


/* =========================================
   13 — CSS LIST ICONS
========================================= */

body .our-approach-page .oa-compare__list-icon {
    position: relative;

    display: block;

    flex: 0 0 23px;

    width: 23px;
    height: 23px;

    margin-top: 0;

    border-radius: 50%;
}


/* USUAL — TERRACOTTA PLUS */

body .our-approach-page
.oa-compare__panel--usual
.oa-compare__list-icon {
    background: rgba(214,106,67,.11);

    color: #C96743;
}

body .our-approach-page
.oa-compare__panel--usual
.oa-compare__list-icon::before,
body .our-approach-page
.oa-compare__panel--usual
.oa-compare__list-icon::after {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    background: currentColor;

    border-radius: 4px;

    transform: translate(-50%, -50%);
}

body .our-approach-page
.oa-compare__panel--usual
.oa-compare__list-icon::before {
    width: 9px;
    height: 1.5px;
}

body .our-approach-page
.oa-compare__panel--usual
.oa-compare__list-icon::after {
    width: 1.5px;
    height: 9px;
}


/* FRAYORA — SOFT CREAM CHECK */

body .our-approach-page
.oa-compare__panel--frayora
.oa-compare__list-icon {
    background: rgba(248,243,235,.12);

    color: #F8F3EB;
}

body .our-approach-page
.oa-compare__panel--frayora
.oa-compare__list-icon::after {
    content: "";

    position: absolute;

    width: 9px;
    height: 5px;

    top: 7px;
    left: 7px;

    border-left: 1.7px solid currentColor;
    border-bottom: 1.7px solid currentColor;

    transform: rotate(-45deg);
}


/* =========================================
   14 — HOVER DEPTH
========================================= */

@media (hover: hover) and (pointer: fine) {

    body .our-approach-page
    .oa-compare__panel:hover {
        transform: translateY(-4px);
    }

    body .our-approach-page
    .oa-compare__panel--usual:hover
    .oa-compare__panel-body {
        box-shadow:
            0 12px 25px rgba(65,51,39,.055),
            0 29px 52px rgba(65,51,39,.10),
            inset 0 1px 0 rgba(255,255,255,.7);
    }

    body .our-approach-page
    .oa-compare__panel--frayora:hover
    .oa-compare__panel-body {
        box-shadow:
            0 15px 32px rgba(32,44,30,.12),
            0 32px 58px rgba(32,44,30,.19),
            inset 0 1px 0 rgba(255,255,255,.12);
    }
}


/* =========================================
   15 — EDITORIAL CLOSING
========================================= */

body .our-approach-page .oa-compare__closing {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
    max-width: 1080px;

    margin: 55px auto 0;
    padding: 0;

    text-align: center;
}


/* CLOSING STATEMENT */

body .our-approach-page .oa-compare__statement {
    width: 100%;

    margin: 0;
    padding: 0;

    font-family: "Manrope", sans-serif !important;
    font-size: clamp(23px, 2.1vw, 31px);
    font-weight: 600;

    line-height: 1.42;
    letter-spacing: -.045em;

    color: #1F211D !important;

    text-align: center;
    text-wrap: balance;
}

body .our-approach-page .oa-compare__statement span {
    display: block;
}

body .our-approach-page
.oa-compare__statement-olive {
    color: #566449 !important;
}


/* SUPPORTING COPY */

body .our-approach-page .oa-compare__fineprint {
    width: 100%;
    max-width: 800px;

    margin: 20px auto 0;
    padding: 0;

    font-family: "Inter", sans-serif !important;
    font-size: 14px;
    font-weight: 400;

    line-height: 1.8;

    color: #676962 !important;
    text-align: center;
}


/* =========================================
   16 — OPTIONAL SCROLL REVEAL

   Gentle entrance for supported browsers
   without requiring JavaScript
========================================= */

@keyframes oaCompareReveal {
    from {
        opacity: .65;
        transform: translateY(12px);
    }

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

@supports (animation-timeline: view()) {

    body .our-approach-page .oa-compare__intro,
    body .our-approach-page .oa-compare__closing {
        animation: oaCompareReveal linear both;

        animation-timeline: view();
        animation-range: entry 0% entry 45%;
    }
}


/* =========================================
   17 — TABLET
   600px–1100px
========================================= */

@media screen and (min-width: 600px)
and (max-width: 1100px) {

    body .our-approach-page .oa-compare__inner {
        padding: 85px 48px 90px;
    }

    body .our-approach-page .oa-compare__heading {
        font-size: clamp(34px, 4.3vw, 42px);
    }

    body .our-approach-page .oa-compare__description p {
        font-size: 14px;
    }

    body .our-approach-page .oa-compare__grid {
        gap: 19px;
        margin-top: 50px;
    }

    body .our-approach-page .oa-compare__tab {
        min-height: 44px;
        padding: 0 21px;
    }

    body .our-approach-page .oa-compare__panel-body {
        min-height: 350px;

        padding: 34px 28px 37px;

        border-radius: 0 21px 21px 21px;
    }

    body .our-approach-page .oa-compare__panel-heading {
        font-size: 25px;
        margin-bottom: 23px;
    }

    body .our-approach-page .oa-compare__list li {
        gap: 12px;
        font-size: 13px;
        padding: 14px 0;
    }

    body .our-approach-page .oa-compare__closing {
        margin-top: 45px;
    }

    body .our-approach-page .oa-compare__statement {
        font-size: clamp(23px, 2.8vw, 28px);
    }
}


/* =========================================
   18 — SMALL TABLET
   600px–749px

   Stack panels for readability
========================================= */

@media screen and (min-width: 600px)
and (max-width: 749px) {

    body .our-approach-page .oa-compare__inner {
        padding: 78px 36px 83px;
    }

    body .our-approach-page .oa-compare__grid {
        grid-template-columns: minmax(0, 1fr);

        max-width: 570px;

        gap: 29px;

        margin-top: 44px;
    }

    body .our-approach-page .oa-compare__panel-body {
        min-height: 0;
        padding: 36px 35px 40px;
    }

    body .our-approach-page .oa-compare__panel-heading {
        font-size: 27px;
    }

    body .our-approach-page .oa-compare__list li {
        font-size: 14px;
    }
}


/* =========================================
   19 — MOBILE
   0px–599px
========================================= */

@media screen and (max-width: 599px) {

    /* SECTION INNER */

    body .our-approach-page .oa-compare__inner {
        padding: 75px 24px 82px;
    }

    /* INTRO — LEFT ALIGNED */

    body .our-approach-page .oa-compare__intro {
        align-items: flex-start;
        text-align: left;
    }

    body .our-approach-page .oa-compare__eyebrow {
        font-size: 11px;

        margin-bottom: 19px;

        text-align: left;
    }

    body .our-approach-page .oa-compare__heading {
        font-size: clamp(30px, 7.5vw, 38px);

        line-height: 1.18;

        text-align: left;
        text-wrap: pretty;
    }

    body .our-approach-page .oa-compare__description {
        max-width: none;

        margin: 23px 0 0;

        text-align: left;
    }

    body .our-approach-page .oa-compare__description p {
        font-size: 14px;
        line-height: 1.8;

        text-align: left;
    }

    body .our-approach-page
    .oa-compare__description p + p {
        margin-top: 8px;
    }

    /* SINGLE COLUMN COMPARISON */

    body .our-approach-page .oa-compare__grid {
        grid-template-columns: minmax(0, 1fr);

        gap: 27px;

        margin-top: 43px;
        padding: 4px 0 15px;
    }

    /* PANEL SHAPE */

    body .our-approach-page .oa-compare__tab {
        min-height: 43px;

        padding: 0 19px;

        border-radius: 16px 16px 0 0;
    }

    body .our-approach-page .oa-compare__tab-label {
        font-size: 10px;
        letter-spacing: .085em;
    }

    body .our-approach-page .oa-compare__panel-body {
        min-height: 0;

        padding: 31px 25px 35px;

        border-radius: 0 19px 19px 19px;
    }

    body .our-approach-page .oa-compare__panel-heading {
        font-size: 25px;

        margin-bottom: 25px;

        line-height: 1.25;
    }

    /* LIST ITEMS */

    body .our-approach-page .oa-compare__list li {
        gap: 12px;

        padding: 14px 0;

        font-size: 13.5px;
        line-height: 1.65;
    }

    body .our-approach-page .oa-compare__list-icon {
        flex-basis: 22px;

        width: 22px;
        height: 22px;
    }

    /* DISABLE HOVER LIFT ON TOUCH */

    body .our-approach-page .oa-compare__panel:hover {
        transform: none;
    }

    /* CLOSING — LEFT ALIGNED */

    body .our-approach-page .oa-compare__closing {
        align-items: flex-start;

        margin: 43px 0 0;

        text-align: left;
    }

    body .our-approach-page .oa-compare__statement {
        font-size: clamp(22px, 5.6vw, 27px);

        line-height: 1.45;

        text-align: left;
        text-wrap: pretty;
    }

    body .our-approach-page .oa-compare__fineprint {
        margin: 17px 0 0;

        font-size: 13.5px;
        line-height: 1.8;

        text-align: left;
    }
}


/* =========================================
   20 — SMALL MOBILE
   BELOW 380px
========================================= */

@media screen and (max-width: 380px) {

    body .our-approach-page .oa-compare__inner {
        padding: 68px 20px 75px;
    }

    body .our-approach-page .oa-compare__heading {
        font-size: 29px;
    }

    body .our-approach-page .oa-compare__panel-body {
        padding: 27px 21px 32px;
    }

    body .our-approach-page .oa-compare__panel-heading {
        font-size: 23px;
    }

    body .our-approach-page .oa-compare__list li {
        font-size: 13px;
    }

    body .our-approach-page .oa-compare__statement {
        font-size: 22px;
    }
}


/* =========================================
   21 — REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    body .our-approach-page .oa-compare__intro,
    body .our-approach-page .oa-compare__closing {
        animation: none !important;

        opacity: 1 !important;
        transform: none !important;
    }

    body .our-approach-page .oa-compare__panel,
    body .our-approach-page .oa-compare__panel-body {
        animation: none !important;
        transition: none !important;

        transform: none !important;
    }
}

/* END FRAYORA OUR APPROACH SECTION 04 */



/* =========================================================
   FRAYORA — OUR APPROACH
   SECTION 05 — FINAL CTA

   LUMINOUS CHAMPAGNE + SAGE
   Desktop / Tablet / Mobile

   Correct selector: .oa-final
========================================================= */


/* 01 — VISIBLE LUMINOUS BACKGROUND */

body .our-approach-page .oa-final {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;

    background-color: #F8F3EB !important;

    background-image:
        radial-gradient(
            ellipse 58% 105% at 8% 48%,
            rgba(221, 156, 116, 0.26) 0%,
            rgba(221, 156, 116, 0.13) 42%,
            transparent 84%
        ),
        radial-gradient(
            ellipse 62% 105% at 92% 45%,
            rgba(141, 164, 126, 0.24) 0%,
            rgba(141, 164, 126, 0.12) 42%,
            transparent 84%
        ),
        linear-gradient(
            180deg,
            #F8F3EB 0%,
            #FAF6F0 48%,
            #F8F3EB 100%
        ) !important;

    background-repeat: no-repeat !important;
}


/* 02 — SOFT CENTRAL ILLUMINATION */

body .our-approach-page .oa-final::before {
    content: "" !important;

    display: block !important;
    position: absolute !important;

    inset: 0 !important;
    z-index: 0 !important;

    background:
        radial-gradient(
            ellipse 48% 78% at 50% 42%,
            rgba(255,255,255,0.38) 0%,
            rgba(255,255,255,0.16) 50%,
            transparent 100%
        ) !important;

    pointer-events: none !important;
}


/* 03 — REMOVE OLD DECORATIVE LAYER */

body .our-approach-page .oa-final::after {
    content: none !important;
    display: none !important;
}


/* 04 — PRESERVE CONTENT ABOVE LIGHTING */

body .our-approach-page .oa-final__inner {
    position: relative !important;
    z-index: 2 !important;
}


/* =========================================================
   05 — TABLET LIGHTING
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .our-approach-page .oa-final {
        background-image:
            radial-gradient(
                ellipse 80% 100% at 0% 40%,
                rgba(221,156,116,0.21),
                transparent 85%
            ),
            radial-gradient(
                ellipse 80% 100% at 100% 60%,
                rgba(141,164,126,0.20),
                transparent 85%
            ),
            linear-gradient(
                180deg,
                #F8F3EB,
                #FAF6F0,
                #F8F3EB
            ) !important;
    }
}


/* =========================================================
   06 — MOBILE: LEFT ALIGN EVERYTHING
========================================================= */

@media (max-width: 599px) {

    /* MOBILE LIGHTING */

    body .our-approach-page .oa-final {
        background-image:
            radial-gradient(
                ellipse 100% 75% at 0% 25%,
                rgba(221,156,116,0.20),
                transparent 90%
            ),
            radial-gradient(
                ellipse 100% 75% at 100% 80%,
                rgba(141,164,126,0.18),
                transparent 90%
            ),
            linear-gradient(
                180deg,
                #F8F3EB,
                #FAF6F0,
                #F8F3EB
            ) !important;
    }

    /* SECTION CONTAINER */

    body .our-approach-page .oa-final__inner {
        display: flex !important;
        flex-direction: column !important;

        align-items: flex-start !important;
        justify-content: center !important;

        width: 100% !important;
        max-width: none !important;

        padding: 82px 24px 90px !important;

        text-align: left !important;
    }

    /* CONTENT WRAPPER */

    body .our-approach-page .oa-final__content {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;

        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        text-align: left !important;
    }

    /* MAIN HEADING */

    body .our-approach-page .oa-final__title,
    body .our-approach-page .oa-final__title em {
        text-align: left !important;
    }

    body .our-approach-page .oa-final__title {
        width: 100% !important;
        max-width: 480px !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* DESCRIPTION AND SUPPORTING COPY */

    body .our-approach-page .oa-final__description,
    body .our-approach-page .oa-final__note {
        width: 100% !important;
        max-width: 480px !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        text-align: left !important;
    }

    /* BUTTON GROUP */

    body .our-approach-page .oa-final__action {
        display: flex !important;
        flex-direction: column !important;

        align-items: flex-start !important;
        justify-content: flex-start !important;

        width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        text-align: left !important;
    }

    /* CTA BUTTON */

    body .our-approach-page .oa-final__button {
        align-self: flex-start !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* TEXT UNDER BUTTON */

    body .our-approach-page .oa-final__aside {
        width: 100% !important;
        max-width: 420px !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        text-align: left !important;
    }
}

/* END OUR APPROACH FINAL CTA */


/* =========================================================
   FRAYORA — BUSINESS IN A BOX
   SECTION 07 — FINAL CTA

   MATCH OUR APPROACH LUMINOUS BACKGROUND
   Desktop / Tablet / Mobile

   Background and lighting only.
   All typography and layouts preserved.
========================================================= */


/* =========================================
   01 — DESKTOP
   EXACT OUR APPROACH BACKGROUND
========================================= */

body .biab-final-cta {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;

    background-color: #F8F3EB !important;

    background-image:
        radial-gradient(
            ellipse 58% 105% at 8% 48%,
            rgba(221, 156, 116, 0.26) 0%,
            rgba(221, 156, 116, 0.13) 42%,
            transparent 84%
        ),
        radial-gradient(
            ellipse 62% 105% at 92% 45%,
            rgba(141, 164, 126, 0.24) 0%,
            rgba(141, 164, 126, 0.12) 42%,
            transparent 84%
        ),
        linear-gradient(
            180deg,
            #F8F3EB 0%,
            #FAF6F0 48%,
            #F8F3EB 100%
        ) !important;

    background-repeat: no-repeat !important;
}


/* =========================================
   02 — CENTRAL IVORY ILLUMINATION
========================================= */

body .biab-final-cta::before {
    content: "" !important;

    display: block !important;
    position: absolute !important;

    inset: 0 !important;
    z-index: 0 !important;

    background:
        radial-gradient(
            ellipse 48% 78% at 50% 42%,
            rgba(255,255,255,0.38) 0%,
            rgba(255,255,255,0.16) 50%,
            transparent 100%
        ) !important;

    box-shadow: none !important;
    pointer-events: none !important;
}


/* =========================================
   03 — REMOVE OLD DECORATIVE LAYER
========================================= */

body .biab-final-cta::after {
    content: none !important;
    display: none !important;
}


/* =========================================
   04 — KEEP CONTENT ABOVE THE LIGHTING
========================================= */

body .biab-final-cta__inner {
    position: relative !important;
    z-index: 2 !important;
}


/* =========================================
   05 — TABLET
   600px–1100px
   EXACT OUR APPROACH TABLET GRADIENT
========================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .biab-final-cta {
        background-image:
            radial-gradient(
                ellipse 80% 100% at 0% 40%,
                rgba(221,156,116,0.21),
                transparent 85%
            ),
            radial-gradient(
                ellipse 80% 100% at 100% 60%,
                rgba(141,164,126,0.20),
                transparent 85%
            ),
            linear-gradient(
                180deg,
                #F8F3EB,
                #FAF6F0,
                #F8F3EB
            ) !important;
    }
}


/* =========================================
   06 — MOBILE
   0px–599px
   EXACT OUR APPROACH MOBILE GRADIENT
========================================= */

@media (max-width: 599px) {

    body .biab-final-cta {
        background-image:
            radial-gradient(
                ellipse 100% 75% at 0% 25%,
                rgba(221,156,116,0.20),
                transparent 90%
            ),
            radial-gradient(
                ellipse 100% 75% at 100% 80%,
                rgba(141,164,126,0.18),
                transparent 90%
            ),
            linear-gradient(
                180deg,
                #F8F3EB,
                #FAF6F0,
                #F8F3EB
            ) !important;
    }
}

/* END BUSINESS IN A BOX FINAL CTA BACKGROUND */



/* =========================================================
   FRAYORA — WEBSITE & DIGITAL INFRASTRUCTURE
   SECTION 06 — FINAL CTA

   SAME LUMINOUS BACKGROUND AS OUR APPROACH
   Desktop / Tablet / Mobile

   Background only — original content and layout retained
========================================================= */


/* =========================================
   01 — DESKTOP BACKGROUND
========================================= */

body .digital-final-cta {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;

    background-color: #F8F3EB !important;

    background-image:
        radial-gradient(
            ellipse 58% 105% at 8% 48%,
            rgba(221, 156, 116, 0.26) 0%,
            rgba(221, 156, 116, 0.13) 42%,
            transparent 84%
        ),
        radial-gradient(
            ellipse 62% 105% at 92% 45%,
            rgba(141, 164, 126, 0.24) 0%,
            rgba(141, 164, 126, 0.12) 42%,
            transparent 84%
        ),
        linear-gradient(
            180deg,
            #F8F3EB 0%,
            #FAF6F0 48%,
            #F8F3EB 100%
        ) !important;

    background-repeat: no-repeat !important;
}


/* =========================================
   02 — CENTRAL IVORY ILLUMINATION
========================================= */

body .digital-final-cta::before {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;

    background:
        radial-gradient(
            ellipse 48% 78% at 50% 42%,
            rgba(255,255,255,0.38) 0%,
            rgba(255,255,255,0.16) 50%,
            transparent 100%
        ) !important;

    box-shadow: none !important;
    pointer-events: none !important;
}


/* =========================================
   03 — REMOVE OLD DECORATIVE OVERLAY
========================================= */

body .digital-final-cta::after {
    content: none !important;
    display: none !important;
}


/* =========================================
   04 — PRESERVE CONTENT ABOVE LIGHTING
========================================= */

body .digital-final-cta__inner {
    position: relative !important;
    z-index: 3 !important;
}


/* =========================================
   05 — TABLET
   600px–1100px
========================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .digital-final-cta {
        background-image:
            radial-gradient(
                ellipse 80% 100% at 0% 40%,
                rgba(221,156,116,0.21),
                transparent 85%
            ),
            radial-gradient(
                ellipse 80% 100% at 100% 60%,
                rgba(141,164,126,0.20),
                transparent 85%
            ),
            linear-gradient(
                180deg,
                #F8F3EB,
                #FAF6F0,
                #F8F3EB
            ) !important;
    }
}


/* =========================================
   06 — MOBILE
   0px–599px
========================================= */

@media (max-width: 599px) {

    body .digital-final-cta {
        background-image:
            radial-gradient(
                ellipse 100% 75% at 0% 25%,
                rgba(221,156,116,0.20),
                transparent 90%
            ),
            radial-gradient(
                ellipse 100% 75% at 100% 80%,
                rgba(141,164,126,0.18),
                transparent 90%
            ),
            linear-gradient(
                180deg,
                #F8F3EB,
                #FAF6F0,
                #F8F3EB
            ) !important;
    }
}

/* END WEBSITE & DIGITAL INFRASTRUCTURE CTA */



/* =========================================================
   FRAYORA — BUSINESS KNOWLEDGE & ORGANIZATION
   FINAL CTA

   MATCH OUR APPROACH LUMINOUS BACKGROUND
   Desktop / Tablet / Mobile

   Background treatment only.
   Existing layout and typography preserved.
========================================================= */


/* =========================================
   01 — DESKTOP BACKGROUND
========================================= */

body .bk-final-cta {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;

    background-color: #F8F3EB !important;

    background-image:
        radial-gradient(
            ellipse 58% 105% at 8% 48%,
            rgba(221, 156, 116, 0.26) 0%,
            rgba(221, 156, 116, 0.13) 42%,
            transparent 84%
        ),
        radial-gradient(
            ellipse 62% 105% at 92% 45%,
            rgba(141, 164, 126, 0.24) 0%,
            rgba(141, 164, 126, 0.12) 42%,
            transparent 84%
        ),
        linear-gradient(
            180deg,
            #F8F3EB 0%,
            #FAF6F0 48%,
            #F8F3EB 100%
        ) !important;

    background-repeat: no-repeat !important;
}


/* =========================================
   02 — CENTRAL IVORY ILLUMINATION
========================================= */

body .bk-final-cta::before {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;

    background:
        radial-gradient(
            ellipse 48% 78% at 50% 42%,
            rgba(255,255,255,0.38) 0%,
            rgba(255,255,255,0.16) 50%,
            transparent 100%
        ) !important;

    box-shadow: none !important;
    pointer-events: none !important;
}


/* =========================================
   03 — REMOVE OLD DECORATIVE OVERLAY
========================================= */

body .bk-final-cta::after {
    content: none !important;
    display: none !important;
}


/* =========================================
   04 — KEEP CONTENT ABOVE LIGHTING
========================================= */

body .bk-final-cta__inner {
    position: relative !important;
    z-index: 2 !important;
}


/* =========================================
   05 — TABLET
   600px–1100px
========================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .bk-final-cta {
        background-image:
            radial-gradient(
                ellipse 80% 100% at 0% 40%,
                rgba(221,156,116,0.21),
                transparent 85%
            ),
            radial-gradient(
                ellipse 80% 100% at 100% 60%,
                rgba(141,164,126,0.20),
                transparent 85%
            ),
            linear-gradient(
                180deg,
                #F8F3EB,
                #FAF6F0,
                #F8F3EB
            ) !important;
    }
}


/* =========================================
   06 — MOBILE
   0px–599px
========================================= */

@media (max-width: 599px) {

    body .bk-final-cta {
        background-image:
            radial-gradient(
                ellipse 100% 75% at 0% 25%,
                rgba(221,156,116,0.20),
                transparent 90%
            ),
            radial-gradient(
                ellipse 100% 75% at 100% 80%,
                rgba(141,164,126,0.18),
                transparent 90%
            ),
            linear-gradient(
                180deg,
                #F8F3EB,
                #FAF6F0,
                #F8F3EB
            ) !important;
    }
}

/* END BUSINESS KNOWLEDGE & ORGANIZATION CTA */



/* =========================================================
   FRAYORA — OPERATIONS & SOPS
   FINAL CTA

   MATCH OUR APPROACH LUMINOUS BACKGROUND

   Desktop: 1101px+
   Tablet: 600px–1100px
   Mobile: 0px–599px

   Preserve original copy, button,
   typography, spacing and layout.
========================================================= */


/* =========================================
   01 — SHARED LUMINOUS BACKGROUND
========================================= */

body .operations-sops-page .sops-final-cta {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;

    background-color: #F8F3EB !important;

    background-image:
        radial-gradient(
            ellipse 58% 105% at 8% 48%,
            rgba(221, 156, 116, 0.26) 0%,
            rgba(221, 156, 116, 0.13) 42%,
            transparent 84%
        ),
        radial-gradient(
            ellipse 62% 105% at 92% 45%,
            rgba(141, 164, 126, 0.24) 0%,
            rgba(141, 164, 126, 0.12) 42%,
            transparent 84%
        ),
        linear-gradient(
            180deg,
            #F8F3EB 0%,
            #FAF6F0 48%,
            #F8F3EB 100%
        ) !important;

    background-repeat: no-repeat !important;

    color: #1F211D !important;
}


/* =========================================
   02 — CENTRAL IVORY ILLUMINATION
========================================= */

body .operations-sops-page .sops-final-cta::before {
    content: "" !important;

    display: block !important;

    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;

    background:
        radial-gradient(
            ellipse 48% 78% at 50% 42%,
            rgba(255,255,255,0.38) 0%,
            rgba(255,255,255,0.16) 50%,
            transparent 100%
        ) !important;

    box-shadow: none !important;
    pointer-events: none !important;
}


/* =========================================
   03 — REMOVE OLD DARK OVERLAY
========================================= */

body .operations-sops-page .sops-final-cta::after {
    content: none !important;
    display: none !important;
}


/* =========================================
   04 — REMOVE DECORATIVE ARCH AND LINES
========================================= */

body .operations-sops-page .sops-final-cta__art,
body .operations-sops-page .sops-final-cta__arch,
body .operations-sops-page .sops-final-cta__horizon,
body .operations-sops-page .sops-final-cta__light {
    display: none !important;
}


/* =========================================
   05 — CHANGE WHITE HEADING TO DARK INK
========================================= */

body .operations-sops-page .sops-final-cta__title {
    color: #1F211D !important;

    text-shadow: none !important;
}


/* =========================================
   06 — REMOVE SMALL ORANGE DECORATIVE RULE
========================================= */

body .operations-sops-page .sops-final-cta__accent {
    display: none !important;
}


/* =========================================
   07 — KEEP CONTENT ABOVE BACKGROUND
========================================= */

body .operations-sops-page .sops-final-cta__inner {
    position: relative !important;
    z-index: 2 !important;
}


/* =========================================
   08 — TABLET
   600px–1100px
========================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .operations-sops-page .sops-final-cta {
        background-image:
            radial-gradient(
                ellipse 80% 100% at 0% 40%,
                rgba(221,156,116,0.21),
                transparent 85%
            ),
            radial-gradient(
                ellipse 80% 100% at 100% 60%,
                rgba(141,164,126,0.20),
                transparent 85%
            ),
            linear-gradient(
                180deg,
                #F8F3EB,
                #FAF6F0,
                #F8F3EB
            ) !important;
    }
}


/* =========================================
   09 — MOBILE
   0px–599px
========================================= */

@media (max-width: 599px) {

    body .operations-sops-page .sops-final-cta {
        background-image:
            radial-gradient(
                ellipse 100% 75% at 0% 25%,
                rgba(221,156,116,0.20),
                transparent 90%
            ),
            radial-gradient(
                ellipse 100% 75% at 100% 80%,
                rgba(141,164,126,0.18),
                transparent 90%
            ),
            linear-gradient(
                180deg,
                #F8F3EB,
                #FAF6F0,
                #F8F3EB
            ) !important;
    }
}

/* END OPERATIONS & SOPS FINAL CTA */



/* =========================================================
   FRAYORA — EMPLOYEE & KNOWLEDGE SYSTEMS
   FINAL CTA

   MATCH OUR APPROACH LUMINOUS BACKGROUND

   Desktop / Tablet / Mobile

   Preserve existing typography, copy,
   button, spacing and responsive layout.
========================================================= */


/* =========================================
   01 — DESKTOP
   CHAMPAGNE + SAGE BACKGROUND
========================================= */

body .employee-knowledge-page .eks-final-cta {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;

    background-color: #F8F3EB !important;

    background-image:
        radial-gradient(
            ellipse 58% 105% at 8% 48%,
            rgba(221, 156, 116, 0.26) 0%,
            rgba(221, 156, 116, 0.13) 42%,
            transparent 84%
        ),
        radial-gradient(
            ellipse 62% 105% at 92% 45%,
            rgba(141, 164, 126, 0.24) 0%,
            rgba(141, 164, 126, 0.12) 42%,
            transparent 84%
        ),
        linear-gradient(
            180deg,
            #F8F3EB 0%,
            #FAF6F0 48%,
            #F8F3EB 100%
        ) !important;

    background-repeat: no-repeat !important;
}


/* =========================================
   02 — CENTRAL IVORY ILLUMINATION
========================================= */

body .employee-knowledge-page .eks-final-cta::before {
    content: "" !important;

    display: block !important;

    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;

    background:
        radial-gradient(
            ellipse 48% 78% at 50% 42%,
            rgba(255,255,255,0.38) 0%,
            rgba(255,255,255,0.16) 50%,
            transparent 100%
        ) !important;

    box-shadow: none !important;
    pointer-events: none !important;
}


/* =========================================
   03 — REMOVE OLD DECORATIVE OVERLAY
========================================= */

body .employee-knowledge-page .eks-final-cta::after {
    content: none !important;
    display: none !important;
}


/* =========================================
   04 — REMOVE OLD DECORATIVE ART

   Removes the thin arcs, vertical
   lines and decorative points.
========================================= */

body .employee-knowledge-page .eks-final-cta__art {
    display: none !important;
}


/* =========================================
   05 — KEEP CONTENT ABOVE LIGHTING
========================================= */

body .employee-knowledge-page .eks-final-cta__inner {
    position: relative !important;
    z-index: 2 !important;
}


/* =========================================
   06 — TABLET
   600px–1100px
========================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .employee-knowledge-page .eks-final-cta {
        background-image:
            radial-gradient(
                ellipse 80% 100% at 0% 40%,
                rgba(221,156,116,0.21),
                transparent 85%
            ),
            radial-gradient(
                ellipse 80% 100% at 100% 60%,
                rgba(141,164,126,0.20),
                transparent 85%
            ),
            linear-gradient(
                180deg,
                #F8F3EB,
                #FAF6F0,
                #F8F3EB
            ) !important;
    }
}


/* =========================================
   07 — MOBILE
   0px–599px
========================================= */

@media (max-width: 599px) {

    body .employee-knowledge-page .eks-final-cta {
        background-image:
            radial-gradient(
                ellipse 100% 75% at 0% 25%,
                rgba(221,156,116,0.20),
                transparent 90%
            ),
            radial-gradient(
                ellipse 100% 75% at 100% 80%,
                rgba(141,164,126,0.18),
                transparent 90%
            ),
            linear-gradient(
                180deg,
                #F8F3EB,
                #FAF6F0,
                #F8F3EB
            ) !important;
    }
}

/* END EMPLOYEE & KNOWLEDGE SYSTEMS FINAL CTA */



/* =========================================================
   FRAYORA — WORKFLOWS & AUTOMATION
   FINAL CTA

   MATCH OUR APPROACH LUMINOUS BACKGROUND
   Desktop / Tablet / Mobile

   Background and decorative layers only.
   All original copy and layout preserved.
========================================================= */


/* =========================================
   01 — DESKTOP LUMINOUS BACKGROUND
========================================= */

body .workflows-page .wf-final-cta {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;

    background-color: #F8F3EB !important;

    background-image:
        radial-gradient(
            ellipse 58% 105% at 8% 48%,
            rgba(221, 156, 116, 0.26) 0%,
            rgba(221, 156, 116, 0.13) 42%,
            transparent 84%
        ),
        radial-gradient(
            ellipse 62% 105% at 92% 45%,
            rgba(141, 164, 126, 0.24) 0%,
            rgba(141, 164, 126, 0.12) 42%,
            transparent 84%
        ),
        linear-gradient(
            180deg,
            #F8F3EB 0%,
            #FAF6F0 48%,
            #F8F3EB 100%
        ) !important;

    background-repeat: no-repeat !important;
}


/* =========================================
   02 — CENTRAL IVORY ILLUMINATION
========================================= */

body .workflows-page .wf-final-cta::before {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;

    background:
        radial-gradient(
            ellipse 48% 78% at 50% 42%,
            rgba(255,255,255,0.38) 0%,
            rgba(255,255,255,0.16) 50%,
            transparent 100%
        ) !important;

    pointer-events: none !important;
    box-shadow: none !important;
}


/* =========================================
   03 — REMOVE OLD DECORATIVE OVERLAY
========================================= */

body .workflows-page .wf-final-cta::after {
    content: none !important;
    display: none !important;
}


/* =========================================
   04 — REMOVE LARGE CURVED ARTWORK
========================================= */

body .workflows-page .wf-final-cta__art {
    display: none !important;
}


/* =========================================
   05 — KEEP ORIGINAL CONTENT ABOVE LIGHTING
========================================= */

body .workflows-page .wf-final-cta__inner {
    position: relative !important;
    z-index: 2 !important;
}


/* =========================================
   06 — TABLET
   600px–1100px
========================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .workflows-page .wf-final-cta {
        background-image:
            radial-gradient(
                ellipse 80% 100% at 0% 40%,
                rgba(221,156,116,0.21),
                transparent 85%
            ),
            radial-gradient(
                ellipse 80% 100% at 100% 60%,
                rgba(141,164,126,0.20),
                transparent 85%
            ),
            linear-gradient(
                180deg,
                #F8F3EB,
                #FAF6F0,
                #F8F3EB
            ) !important;
    }
}


/* =========================================
   07 — MOBILE
   0px–599px
========================================= */

@media (max-width: 599px) {

    body .workflows-page .wf-final-cta {
        background-image:
            radial-gradient(
                ellipse 100% 75% at 0% 25%,
                rgba(221,156,116,0.20),
                transparent 90%
            ),
            radial-gradient(
                ellipse 100% 75% at 100% 80%,
                rgba(141,164,126,0.18),
                transparent 90%
            ),
            linear-gradient(
                180deg,
                #F8F3EB,
                #FAF6F0,
                #F8F3EB
            ) !important;
    }
}

/* END WORKFLOWS & AUTOMATION FINAL CTA */


/* =========================================================
   FRAYORA — ONGOING IMPROVEMENT
   FINAL CTA

   MATCH OUR APPROACH LUMINOUS BACKGROUND

   Desktop / Tablet / Mobile

   Background and decorative elements only.
   Preserve existing copy, typography,
   layout, buttons and animations.
========================================================= */


/* =========================================
   01 — DESKTOP BACKGROUND
   CHAMPAGNE + SAGE
========================================= */

body .ongoing-improvement-page .oi-final {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;

    background-color: #F8F3EB !important;

    background-image:
        radial-gradient(
            ellipse 58% 105% at 8% 48%,
            rgba(221, 156, 116, 0.26) 0%,
            rgba(221, 156, 116, 0.13) 42%,
            transparent 84%
        ),
        radial-gradient(
            ellipse 62% 105% at 92% 45%,
            rgba(141, 164, 126, 0.24) 0%,
            rgba(141, 164, 126, 0.12) 42%,
            transparent 84%
        ),
        linear-gradient(
            180deg,
            #F8F3EB 0%,
            #FAF6F0 48%,
            #F8F3EB 100%
        ) !important;

    background-repeat: no-repeat !important;
}


/* =========================================
   02 — CENTRAL IVORY ILLUMINATION
========================================= */

body .ongoing-improvement-page .oi-final::before {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    inset: 0 !important;

    width: auto !important;
    height: auto !important;

    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;

    z-index: 0 !important;

    transform: none !important;

    background:
        radial-gradient(
            ellipse 48% 78% at 50% 42%,
            rgba(255,255,255,0.38) 0%,
            rgba(255,255,255,0.16) 50%,
            transparent 100%
        ) !important;

    box-shadow: none !important;
    pointer-events: none !important;
}


/* =========================================
   03 — REMOVE OLD DECORATIVE OVERLAY
========================================= */

body .ongoing-improvement-page .oi-final::after {
    content: none !important;
    display: none !important;
}


/* =========================================
   04 — REMOVE LARGE CURVED ARTWORK
========================================= */

body .ongoing-improvement-page .oi-final__art {
    display: none !important;
}


/* =========================================
   05 — KEEP CONTENT ABOVE BACKGROUND
========================================= */

body .ongoing-improvement-page .oi-final__inner {
    position: relative !important;
    z-index: 2 !important;
}


/* =========================================
   06 — TABLET
   600px–1100px
========================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .ongoing-improvement-page .oi-final {
        background-image:
            radial-gradient(
                ellipse 80% 100% at 0% 40%,
                rgba(221,156,116,0.21),
                transparent 85%
            ),
            radial-gradient(
                ellipse 80% 100% at 100% 60%,
                rgba(141,164,126,0.20),
                transparent 85%
            ),
            linear-gradient(
                180deg,
                #F8F3EB,
                #FAF6F0,
                #F8F3EB
            ) !important;
    }
}


/* =========================================
   07 — MOBILE
   0px–599px
========================================= */

@media (max-width: 599px) {

    body .ongoing-improvement-page .oi-final {
        background-image:
            radial-gradient(
                ellipse 100% 75% at 0% 25%,
                rgba(221,156,116,0.20),
                transparent 90%
            ),
            radial-gradient(
                ellipse 100% 75% at 100% 80%,
                rgba(141,164,126,0.18),
                transparent 90%
            ),
            linear-gradient(
                180deg,
                #F8F3EB,
                #FAF6F0,
                #F8F3EB
            ) !important;
    }
}

/* END ONGOING IMPROVEMENT FINAL CTA */



/* =========================================================
   FRAYORA — RESOURCES
   SECTION 04 — FINAL CTA

   EXACT OUR APPROACH LUMINOUS BACKGROUND
   Desktop / Tablet / Mobile

   Background only.
   Preserve all copy, buttons and layout.
========================================================= */


/* =========================================
   01 — DESKTOP
   CHAMPAGNE + SAGE BACKGROUND
========================================= */

body .frayora-resources-page .fr-resources-cta {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;

    background-color: #F8F3EB !important;

    background-image:
        radial-gradient(
            ellipse 58% 105% at 8% 48%,
            rgba(221, 156, 116, 0.26) 0%,
            rgba(221, 156, 116, 0.13) 42%,
            transparent 84%
        ),
        radial-gradient(
            ellipse 62% 105% at 92% 45%,
            rgba(141, 164, 126, 0.24) 0%,
            rgba(141, 164, 126, 0.12) 42%,
            transparent 84%
        ),
        linear-gradient(
            180deg,
            #F8F3EB 0%,
            #FAF6F0 48%,
            #F8F3EB 100%
        ) !important;

    background-repeat: no-repeat !important;
}


/* =========================================
   02 — CENTRAL IVORY ILLUMINATION
========================================= */

body .frayora-resources-page .fr-resources-cta::before {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;

    background:
        radial-gradient(
            ellipse 48% 78% at 50% 42%,
            rgba(255,255,255,0.38) 0%,
            rgba(255,255,255,0.16) 50%,
            transparent 100%
        ) !important;

    pointer-events: none !important;
}


/* =========================================
   03 — REMOVE OLD DECORATIVE OVERLAY
========================================= */

body .frayora-resources-page .fr-resources-cta::after {
    content: none !important;
    display: none !important;
}


/* =========================================
   04 — KEEP CONTENT ABOVE LIGHTING
========================================= */

body .frayora-resources-page .fr-resources-cta__inner {
    position: relative !important;
    z-index: 2 !important;
}


/* =========================================
   05 — TABLET
   600px–1100px
========================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .frayora-resources-page .fr-resources-cta {
        background-image:
            radial-gradient(
                ellipse 80% 100% at 0% 40%,
                rgba(221,156,116,0.21),
                transparent 85%
            ),
            radial-gradient(
                ellipse 80% 100% at 100% 60%,
                rgba(141,164,126,0.20),
                transparent 85%
            ),
            linear-gradient(
                180deg,
                #F8F3EB,
                #FAF6F0,
                #F8F3EB
            ) !important;
    }
}


/* =========================================
   06 — MOBILE
   0px–599px
========================================= */

@media (max-width: 599px) {

    body .frayora-resources-page .fr-resources-cta {
        background-image:
            radial-gradient(
                ellipse 100% 75% at 0% 25%,
                rgba(221,156,116,0.20),
                transparent 90%
            ),
            radial-gradient(
                ellipse 100% 75% at 100% 80%,
                rgba(141,164,126,0.18),
                transparent 90%
            ),
            linear-gradient(
                180deg,
                #F8F3EB,
                #FAF6F0,
                #F8F3EB
            ) !important;
    }
}

/* END RESOURCES FINAL CTA */




/* =========================================================
   FRAYORA — BUSINESS IN A BOX
   SECTION 02 — INSIDE THE BOX

   DIMENSIONAL ICON SYSTEM UPGRADE
   Inspired by Workflows service page

   Desktop / Tablet / Mobile

   Icon styling only.
   No changes to copy or section layout.
========================================================= */


/* =========================================
   01 — BASE DIMENSIONAL ICON BADGES
========================================= */

body .biab-foundation .biab-foundation__icon {
    position: relative;
    isolation: isolate;

    background:
        linear-gradient(
            145deg,
            #FFF6ED 0%,
            #F3E3D5 48%,
            #EBD5C4 100%
        ) !important;

    border: 1px solid rgba(255,255,255,0.85) !important;

    border-radius: 50% !important;

    box-shadow:
        0 7px 14px rgba(77,61,49,0.06),
        0 17px 28px rgba(77,61,49,0.07),
        inset 0 2px 3px rgba(255,255,255,0.95),
        inset 0 -3px 5px rgba(150,106,77,0.08) !important;

    transition:
        transform 350ms cubic-bezier(.22,1,.36,1),
        box-shadow 350ms ease,
        background 350ms ease !important;
}


/* =========================================
   02 — DELICATE INNER CIRCULAR RING
========================================= */

body .biab-foundation .biab-foundation__icon::before {
    content: "";

    position: absolute;
    inset: 5px;
    z-index: 0;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,0.85);

    box-shadow:
        inset 0 1px 2px rgba(255,255,255,0.8),
        0 0 0 1px rgba(151,116,88,0.07);

    pointer-events: none;
}


/* =========================================
   03 — SAGE VARIANT
   Alternates selected icons
========================================= */

body .biab-foundation
.biab-foundation__item:nth-child(even)
.biab-foundation__icon {
    background:
        linear-gradient(
            145deg,
            #F4F6ED 0%,
            #E4E9DB 52%,
            #D5DDC9 100%
        ) !important;

    box-shadow:
        0 7px 14px rgba(64,79,55,0.05),
        0 17px 28px rgba(64,79,55,0.07),
        inset 0 2px 3px rgba(255,255,255,0.95),
        inset 0 -3px 5px rgba(87,104,74,0.09) !important;
}


/* =========================================
   04 — SVG ICON REFINEMENT
========================================= */

body .biab-foundation .biab-foundation__icon svg {
    position: relative;
    z-index: 1;

    width: 30px;
    height: 30px;

    fill: none;

    stroke: #80634F;
    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;

    filter:
        drop-shadow(0 1px 1px rgba(65,46,32,0.07));

    transition:
        transform 350ms ease,
        stroke 350ms ease;
}


/* SAGE SVG ICONS */

body .biab-foundation
.biab-foundation__item:nth-child(even)
.biab-foundation__icon svg {
    stroke: #566449;
}


/* =========================================
   05 — INTERACTIVE HOVER
========================================= */

@media (hover: hover) {

    body .biab-foundation
    .biab-foundation__item:hover
    .biab-foundation__icon {
        transform: translateY(-4px) scale(1.035);

        box-shadow:
            0 10px 18px rgba(77,61,49,0.07),
            0 22px 34px rgba(77,61,49,0.10),
            inset 0 2px 3px rgba(255,255,255,0.95) !important;
    }

    body .biab-foundation
    .biab-foundation__item:hover
    .biab-foundation__icon svg {
        transform: scale(1.07);
    }
}


/* =========================================
   06 — TABLET
   600px–1100px
========================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .biab-foundation .biab-foundation__icon {
        width: 74px;
        height: 74px;
        flex-basis: 74px;
    }

    body .biab-foundation .biab-foundation__icon svg {
        width: 28px;
        height: 28px;
    }
}


/* =========================================
   07 — MOBILE
   0px–599px
========================================= */

@media (max-width: 599px) {

    body .biab-foundation .biab-foundation__icon {
        width: 66px;
        height: 66px;
        flex-basis: 66px;
    }

    body .biab-foundation .biab-foundation__icon svg {
        width: 26px;
        height: 26px;
    }
}


/* =========================================
   08 — REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    body .biab-foundation .biab-foundation__icon,
    body .biab-foundation .biab-foundation__icon svg {
        transition: none !important;
    }
}

/* END BUSINESS IN A BOX ICON UPGRADE */


/* =========================================================
   FRAYORA — BUSINESS IN A BOX
   SECTION 04 — HOW IT WORKS

   DIMENSIONAL ICON SYSTEM
   Matches Inside the Box styling

   Desktop / Tablet / Mobile
   Icons only — no layout or copy changes
========================================================= */


/* =========================================
   01 — BASE DIMENSIONAL CIRCLE
========================================= */

body .biab-journey .biab-journey__icon {
    position: relative;
    isolation: isolate;

    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,0.85) !important;

    background:
        linear-gradient(
            145deg,
            #FFF6ED 0%,
            #F3E3D5 48%,
            #EBD5C4 100%
        ) !important;

    box-shadow:
        0 7px 14px rgba(77,61,49,0.06),
        0 17px 28px rgba(77,61,49,0.07),
        inset 0 2px 3px rgba(255,255,255,0.95),
        inset 0 -3px 5px rgba(150,106,77,0.08) !important;

    transition:
        transform 350ms cubic-bezier(.22,1,.36,1),
        box-shadow 350ms ease,
        background 350ms ease !important;
}


/* =========================================
   02 — INNER IVORY RING
========================================= */

body .biab-journey .biab-journey__icon::before {
    content: "";
    position: absolute;
    inset: 5px;
    z-index: 0;

    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.85);

    box-shadow:
        inset 0 1px 2px rgba(255,255,255,0.8),
        0 0 0 1px rgba(151,116,88,0.07);

    pointer-events: none;
}


/* =========================================
   03 — ALTERNATING SAGE BADGES
   Steps 02 and 04
========================================= */

body .biab-journey
.biab-journey__step:nth-child(even)
.biab-journey__icon {
    background:
        linear-gradient(
            145deg,
            #F4F6ED 0%,
            #E4E9DB 52%,
            #D5DDC9 100%
        ) !important;

    box-shadow:
        0 7px 14px rgba(64,79,55,0.05),
        0 17px 28px rgba(64,79,55,0.07),
        inset 0 2px 3px rgba(255,255,255,0.95),
        inset 0 -3px 5px rgba(87,104,74,0.09) !important;
}


/* =========================================
   04 — CONSISTENT LINE ICONS
========================================= */

body .biab-journey .biab-journey__icon svg {
    position: relative;
    z-index: 1;

    width: 29px;
    height: 29px;

    fill: none;
    stroke: #80634F;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;

    filter:
        drop-shadow(0 1px 1px rgba(65,46,32,0.07));

    transition: transform 350ms ease;
}


/* Sage icon colour */

body .biab-journey
.biab-journey__step:nth-child(even)
.biab-journey__icon svg {
    stroke: #566449;
}


/* =========================================
   05 — HOVER ELEVATION
========================================= */

@media (hover: hover) {

    body .biab-journey
    .biab-journey__step:hover
    .biab-journey__icon {
        transform: translateY(-4px) scale(1.035);

        box-shadow:
            0 10px 18px rgba(77,61,49,0.07),
            0 22px 34px rgba(77,61,49,0.10),
            inset 0 2px 3px rgba(255,255,255,0.95) !important;
    }

    body .biab-journey
    .biab-journey__step:hover
    .biab-journey__icon svg {
        transform: scale(1.07);
    }
}


/* =========================================
   06 — TABLET
========================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .biab-journey .biab-journey__icon {
        border-radius: 50% !important;
    }

    body .biab-journey .biab-journey__icon svg {
        width: 28px;
        height: 28px;
    }
}


/* =========================================
   07 — MOBILE
========================================= */

@media (max-width: 599px) {

    body .biab-journey .biab-journey__icon {
        border-radius: 50% !important;
    }

    body .biab-journey .biab-journey__icon svg {
        width: 26px;
        height: 26px;
    }
}


/* =========================================
   08 — REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    body .biab-journey .biab-journey__icon,
    body .biab-journey .biab-journey__icon svg {
        transition: none !important;
    }
}

/* END BUSINESS IN A BOX — HOW IT WORKS ICONS */




/* =========================================================
   FRAYORA — BUSINESS IN A BOX
   SECTION 06 — BUILT FOR REAL TEAMS

   WORKFLOWS-STYLE ICON SYSTEM
   Reference: Workflows transformation cards

   Desktop / Tablet / Mobile
========================================================= */


/* 01 — NUMBER AND ICON ARRANGEMENT */

body .biab-proposal .biab-proposal__card-top {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;

    gap: 24px !important;
    margin-bottom: 22px !important;
}


/* 02 — DARK OLIVE NUMBER CIRCLES */

body .biab-proposal .biab-proposal__number {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 43px !important;
    height: 43px !important;
    flex: 0 0 43px !important;

    padding: 0 !important;
    margin: 0 !important;

    border-radius: 50% !important;

    background: #3D4C30 !important;
    color: #FFFFFF !important;

    font-family: "Inter", sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    box-shadow:
        0 5px 10px rgba(38,55,32,0.15),
        inset 0 1px 0 rgba(255,255,255,0.18) !important;
}


/* 03 — EXACT WORKFLOWS-STYLE SAGE TILE */

body .biab-proposal .biab-proposal__icon {
    position: relative !important;
    isolation: isolate !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 76px !important;
    height: 76px !important;
    flex: 0 0 76px !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;
    border-radius: 14px !important;

    background: #F4F5EC !important;
    background-image: none !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.93),
        0 7px 17px rgba(54,67,43,0.055) !important;

    transform: none;

    transition:
        transform 400ms cubic-bezier(.22,1,.36,1),
        box-shadow 400ms ease !important;
}


/* 04 — REMOVE OLD CIRCULAR RINGS */

body .biab-proposal .biab-proposal__icon::before,
body .biab-proposal .biab-proposal__icon::after {
    content: none !important;
    display: none !important;
}


/* 05 — GREEN LINE ILLUSTRATIONS */

body .biab-proposal .biab-proposal__icon svg {
    position: relative !important;
    z-index: 1 !important;

    display: block !important;

    width: 49px !important;
    height: 49px !important;

    fill: none !important;
    stroke: #435638 !important;
    stroke-width: 1.65 !important;

    stroke-linecap: round !important;
    stroke-linejoin: round !important;

    filter:
        drop-shadow(
            0 2px 2px rgba(36,53,31,0.06)
        ) !important;

    transition: transform 350ms ease !important;
}


/* 06 — HOVER ANIMATION */

@media (hover: hover) {

    body .biab-proposal
    .biab-proposal__card:hover
    .biab-proposal__icon {
        transform: translateY(-4px) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.95),
            0 12px 25px rgba(54,67,43,0.10) !important;
    }

    body .biab-proposal
    .biab-proposal__card:hover
    .biab-proposal__icon svg {
        transform: scale(1.05) !important;
    }
}


/* 07 — TABLET */

@media (min-width: 600px) and (max-width: 1100px) {

    body .biab-proposal .biab-proposal__card-top {
        gap: 20px !important;
    }

    body .biab-proposal .biab-proposal__icon {
        width: 68px !important;
        height: 68px !important;
        flex-basis: 68px !important;
    }

    body .biab-proposal .biab-proposal__icon svg {
        width: 43px !important;
        height: 43px !important;
    }
}


/* 08 — MOBILE */

@media (max-width: 599px) {

    body .biab-proposal .biab-proposal__card-top {
        gap: 17px !important;
    }

    body .biab-proposal .biab-proposal__number {
        width: 38px !important;
        height: 38px !important;
        flex-basis: 38px !important;
        font-size: 12px !important;
    }

    body .biab-proposal .biab-proposal__icon {
        width: 62px !important;
        height: 62px !important;
        flex-basis: 62px !important;
        border-radius: 13px !important;
    }

    body .biab-proposal .biab-proposal__icon svg {
        width: 39px !important;
        height: 39px !important;
    }
}


/* 09 — REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {

    body .biab-proposal .biab-proposal__icon,
    body .biab-proposal .biab-proposal__icon svg {
        transition: none !important;
    }
}

/* END WORKFLOWS-STYLE PROPOSAL ICON SYSTEM */


/* =========================================================
   BUSINESS IN A BOX — BUILT FOR REAL TEAMS
   COMPACT CARD + ICON REFINEMENT
========================================================= */

/* CARD ROW */
body .biab-proposal {
    padding-bottom: 40px !important;
}

/* CARDS */
body .biab-proposal .biab-proposal__card {
    padding: 28px 34px 30px !important;
    border-radius: 24px !important;
    min-height: unset !important;
}

/* TOP AREA INSIDE CARD */
body .biab-proposal .biab-proposal__card-top {
    gap: 16px !important;
    margin-bottom: 18px !important;
}

/* NUMBER BADGE */
body .biab-proposal .biab-proposal__number {
    width: 46px !important;
    height: 46px !important;
    flex: 0 0 46px !important;
    font-size: 13px !important;
}

/* ICON TILE */
body .biab-proposal .biab-proposal__icon {
    width: 58px !important;
    height: 58px !important;
    flex: 0 0 58px !important;
    border-radius: 14px !important;
}

/* ICON SVG */
body .biab-proposal .biab-proposal__icon svg {
    width: 30px !important;
    height: 30px !important;
}

/* CARD TITLE */
body .biab-proposal .biab-proposal__card h3 {
    font-size: 20px !important;
    line-height: 1.25 !important;
    margin: 0 0 12px !important;
}

/* CARD BODY TEXT */
body .biab-proposal .biab-proposal__card p {
    font-size: 15px !important;
    line-height: 1.75 !important;
    margin: 0 !important;
}

/* ARROWS BETWEEN CARDS */
body .biab-proposal .biab-proposal__arrow {
    font-size: 42px !important;
}

/* REMOVE BOTTOM STRIP IF STILL PRESENT */
body .biab-proposal .biab-proposal__footer,
body .biab-proposal .biab-proposal__bottom,
body .biab-proposal .biab-proposal__cta-strip,
body .biab-proposal .biab-proposal__note-row {
    display: none !important;
}

/* TABLET */
@media (min-width: 600px) and (max-width: 1100px) {
    body .biab-proposal .biab-proposal__card {
        padding: 24px 26px 26px !important;
    }

    body .biab-proposal .biab-proposal__number {
        width: 42px !important;
        height: 42px !important;
        flex-basis: 42px !important;
        font-size: 12px !important;
    }

    body .biab-proposal .biab-proposal__icon {
        width: 54px !important;
        height: 54px !important;
        flex-basis: 54px !important;
    }

    body .biab-proposal .biab-proposal__icon svg {
        width: 28px !important;
        height: 28px !important;
    }

    body .biab-proposal .biab-proposal__card h3 {
        font-size: 18px !important;
    }

    body .biab-proposal .biab-proposal__card p {
        font-size: 14px !important;
        line-height: 1.7 !important;
    }

    body .biab-proposal .biab-proposal__arrow {
        font-size: 34px !important;
    }
}

/* MOBILE */
@media (max-width: 599px) {
    body .biab-proposal .biab-proposal__card {
        padding: 22px 22px 24px !important;
        border-radius: 20px !important;
    }

    body .biab-proposal .biab-proposal__card-top {
        gap: 14px !important;
        margin-bottom: 16px !important;
    }

    body .biab-proposal .biab-proposal__number {
        width: 38px !important;
        height: 38px !important;
        flex-basis: 38px !important;
        font-size: 11px !important;
    }

    body .biab-proposal .biab-proposal__icon {
        width: 50px !important;
        height: 50px !important;
        flex-basis: 50px !important;
        border-radius: 12px !important;
    }

    body .biab-proposal .biab-proposal__icon svg {
        width: 24px !important;
        height: 24px !important;
    }

    body .biab-proposal .biab-proposal__card h3 {
        font-size: 18px !important;
        line-height: 1.3 !important;
    }

    body .biab-proposal .biab-proposal__card p {
        font-size: 14px !important;
        line-height: 1.65 !important;
    }

    body .biab-proposal .biab-proposal__arrow {
        font-size: 28px !important;
    }
}


/* =========================================================
   BUSINESS IN A BOX — BUILT FOR REAL TEAMS
   TIGHTER CARD LAYOUT
========================================================= */

body .biab-proposal {
    padding-top: 40px !important;
    padding-bottom: 110px !important; /* more bottom space */
}

/* optional: give the whole card row a bit more breathing room below */
body .biab-proposal .biab-proposal__grid,
body .biab-proposal .biab-proposal__cards {
    margin-bottom: 0 !important;
}

/* desktop layout */
body .biab-proposal .biab-proposal__row,
body .biab-proposal .biab-proposal__grid,
body .biab-proposal .biab-proposal__cards {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 390px)) !important;
    justify-content: start !important;
    align-items: stretch !important;
    column-gap: 34px !important;
    row-gap: 24px !important;
}

/* arrows between cards */
body .biab-proposal .biab-proposal__arrow {
    align-self: center !important;
    font-size: 42px !important;
    margin: 0 -4px !important;
}

/* card */
body .biab-proposal .biab-proposal__card {
    width: 100% !important;
    max-width: 390px !important;
    min-height: 0 !important;
    padding: 26px 30px 28px !important;
    border-radius: 24px !important;
}

/* top area inside card */
body .biab-proposal .biab-proposal__card-top {
    gap: 14px !important;
    margin-bottom: 18px !important;
}

/* number badge */
body .biab-proposal .biab-proposal__number {
    width: 52px !important;
    height: 52px !important;
    flex: 0 0 52px !important;
    font-size: 15px !important;
}

/* icon tile */
body .biab-proposal .biab-proposal__icon {
    width: 66px !important;
    height: 66px !important;
    flex: 0 0 66px !important;
    border-radius: 16px !important;
}

body .biab-proposal .biab-proposal__icon svg {
    width: 30px !important;
    height: 30px !important;
}

/* title */
body .biab-proposal .biab-proposal__card h3 {
    font-size: 21px !important;
    line-height: 1.28 !important;
    margin: 0 0 12px !important;
}

/* body text */
body .biab-proposal .biab-proposal__card p {
    font-size: 15px !important;
    line-height: 1.7 !important;
    margin: 0 !important;
}

/* remove old footer strip if still present */
body .biab-proposal .biab-proposal__footer,
body .biab-proposal .biab-proposal__bottom,
body .biab-proposal .biab-proposal__cta-strip,
body .biab-proposal .biab-proposal__note-row {
    display: none !important;
}

/* =========================
   TABLET
========================= */
@media (min-width: 600px) and (max-width: 1100px) {
    body .biab-proposal {
        padding-bottom: 95px !important;
    }

    body .biab-proposal .biab-proposal__row,
    body .biab-proposal .biab-proposal__grid,
    body .biab-proposal .biab-proposal__cards {
        grid-template-columns: 1fr !important;
        row-gap: 20px !important;
    }

    body .biab-proposal .biab-proposal__card {
        max-width: 100% !important;
        padding: 24px 24px 26px !important;
    }

    body .biab-proposal .biab-proposal__number {
        width: 48px !important;
        height: 48px !important;
        flex-basis: 48px !important;
        font-size: 14px !important;
    }

    body .biab-proposal .biab-proposal__icon {
        width: 60px !important;
        height: 60px !important;
        flex-basis: 60px !important;
    }

    body .biab-proposal .biab-proposal__icon svg {
        width: 28px !important;
        height: 28px !important;
    }

    body .biab-proposal .biab-proposal__card h3 {
        font-size: 20px !important;
    }

    body .biab-proposal .biab-proposal__card p {
        font-size: 15px !important;
    }

    body .biab-proposal .biab-proposal__arrow {
        display: none !important;
    }
}

/* =========================
   MOBILE
========================= */
@media (max-width: 599px) {
    body .biab-proposal {
        padding-bottom: 80px !important;
    }

    body .biab-proposal .biab-proposal__row,
    body .biab-proposal .biab-proposal__grid,
    body .biab-proposal .biab-proposal__cards {
        grid-template-columns: 1fr !important;
        row-gap: 18px !important;
    }

    body .biab-proposal .biab-proposal__card {
        max-width: 100% !important;
        padding: 22px 20px 24px !important;
        border-radius: 20px !important;
    }

    body .biab-proposal .biab-proposal__number {
        width: 42px !important;
        height: 42px !important;
        flex-basis: 42px !important;
        font-size: 13px !important;
    }

    body .biab-proposal .biab-proposal__icon {
        width: 54px !important;
        height: 54px !important;
        flex-basis: 54px !important;
        border-radius: 14px !important;
    }

    body .biab-proposal .biab-proposal__icon svg {
        width: 25px !important;
        height: 25px !important;
    }

    body .biab-proposal .biab-proposal__card h3 {
        font-size: 18px !important;
        line-height: 1.3 !important;
    }

    body .biab-proposal .biab-proposal__card p {
        font-size: 14px !important;
        line-height: 1.65 !important;
    }

    body .biab-proposal .biab-proposal__arrow {
        display: none !important;
    }
}


/* =========================================================
   BUSINESS IN A BOX — HOW IT WORKS
   Rebuilt to match the workflow process style
========================================================= */

body .biab-hiw {
    position: relative;
    padding: 110px 0 110px;
    background: transparent;
}

body .biab-hiw__inner {
    width: min(1400px, calc(100% - 80px));
    margin: 0 auto;
}

body .biab-hiw__intro {
    max-width: 1180px;
    margin-bottom: 72px;
}

body .biab-hiw__eyebrow {
    margin: 0 0 22px;
    font-size: 15px;
    line-height: 1;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #C8744E;
    font-weight: 600;
}

body .biab-hiw__title {
    margin: 0 0 26px;
    max-width: 1100px;
    font-size: clamp(44px, 5vw, 74px);
    line-height: 0.98;
    letter-spacing: -0.04em;
    color: #1C1F1B;
}

body .biab-hiw__description {
    margin: 0;
    max-width: 1200px;
    font-size: 18px;
    line-height: 1.75;
    color: #666B63;
}

body .biab-hiw__process {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr) 70px minmax(0, 1fr) 70px minmax(0, 1fr);
    align-items: start;
    column-gap: 0;
    row-gap: 30px;
}

body .biab-hiw__step {
    min-width: 0;
}

body .biab-hiw__visual {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 34px;
}

body .biab-hiw__number {
    position: absolute;
    top: -8px;
    left: -14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 999px;
    background: #4B6538;
    color: #F8F5EE;
    font-size: 22px;
    font-weight: 600;
    box-shadow: 0 10px 20px rgba(52, 72, 41, 0.16);
}

body .biab-hiw__icon {
    width: 116px;
    height: 116px;
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.24) 100%),
        #F3EEE6;
    border: 1px solid rgba(216, 205, 190, 0.75);
    box-shadow:
        inset 0 0 0 6px rgba(255,255,255,0.33),
        0 22px 44px rgba(109, 93, 72, 0.08),
        0 6px 14px rgba(109, 93, 72, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
}

body .biab-hiw__icon svg {
    width: 36px;
    height: 36px;
    stroke: #826D48;
    stroke-width: 1.7;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body .biab-hiw__connector {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 54px;
    gap: 16px;
}

body .biab-hiw__line {
    display: block;
    width: 100%;
    max-width: 120px;
    height: 1.5px;
    background: rgba(129, 117, 95, 0.55);
}

body .biab-hiw__arrow {
    font-size: 44px;
    line-height: 1;
    color: #8A775E;
    transform: translateY(-2px);
}

body .biab-hiw__content h3 {
    margin: 0 0 16px;
    font-size: 24px;
    line-height: 1.18;
    letter-spacing: -0.03em;
    color: #1E201C;
}

body .biab-hiw__content p {
    margin: 0;
    font-size: 17px;
    line-height: 1.72;
    color: #666A63;
}

body .biab-hiw__note {
    margin: 72px auto 0;
    max-width: 920px;
    text-align: center;
    font-size: 18px;
    line-height: 1.6;
    color: #232621;
    font-weight: 600;
}

/* =========================
   TABLET
========================= */
@media (min-width: 768px) and (max-width: 1180px) {
    body .biab-hiw {
        padding: 90px 0 90px;
    }

    body .biab-hiw__inner {
        width: min(100%, calc(100% - 48px));
    }

    body .biab-hiw__intro {
        margin-bottom: 56px;
    }

    body .biab-hiw__process {
        grid-template-columns: 1fr 56px 1fr;
        row-gap: 42px;
    }

    body .biab-hiw__connector {
        padding-top: 54px;
    }

    body .biab-hiw__step:nth-child(5),
    body .biab-hiw__step:nth-child(7) {
        grid-column: span 1;
    }
}

/* =========================
   MOBILE
========================= */
@media (max-width: 767px) {
    body .biab-hiw {
        padding: 76px 0 82px;
    }

    body .biab-hiw__inner {
        width: min(100%, calc(100% - 28px));
    }

    body .biab-hiw__intro {
        margin-bottom: 40px;
    }

    body .biab-hiw__title {
        font-size: 44px;
        line-height: 1.02;
    }

    body .biab-hiw__description {
        font-size: 16px;
        line-height: 1.7;
    }

    body .biab-hiw__process {
        display: flex;
        flex-direction: column;
        gap: 28px;
    }

    body .biab-hiw__step {
        width: 100%;
    }

    body .biab-hiw__visual {
        margin-bottom: 22px;
    }

    body .biab-hiw__number {
        width: 46px;
        height: 46px;
        font-size: 18px;
        top: -6px;
        left: -10px;
    }

    body .biab-hiw__icon {
        width: 92px;
        height: 92px;
    }

    body .biab-hiw__icon svg {
        width: 30px;
        height: 30px;
    }

    body .biab-hiw__connector {
        justify-content: flex-start;
        padding: 0 0 0 18px;
        gap: 12px;
    }

    body .biab-hiw__line {
        width: 52px;
    }

    body .biab-hiw__arrow {
        font-size: 28px;
    }

    body .biab-hiw__content h3 {
        font-size: 22px;
    }

    body .biab-hiw__content p {
        font-size: 16px;
        line-height: 1.7;
    }

    body .biab-hiw__note {
        margin-top: 44px;
        text-align: left;
        font-size: 16px;
    }
}


/* =========================================================
   FRAYORA — BUSINESS IN A BOX
   SECTION 04 — HOW IT WORKS

   WORKFLOWS SECTION 04 DESIGN SYSTEM

   Desktop: 1101px+
   Tablet: 600px–1100px
   Mobile: 0px–599px

   CSS ONLY — NO PHP CHANGES

   - Manrope + Inter typography
   - Four-stage connected workflow
   - Champagne dimensional icon medallions
   - Dark olive numbered badges
   - Fine connecting arrows
   - Responsive tablet carousel
   - Compact mobile process
========================================================= */


/* =========================================================
   01 — SECTION
========================================================= */

body .business-in-a-box-page .biab-hiw {
    position: relative !important;
    isolation: isolate;

    width: 100%;
    margin: 0;
    padding: 100px 0 110px !important;

    background: #F8F3EB !important;
    color: #1F211D !important;

    overflow: hidden;
    box-sizing: border-box;
}

body .business-in-a-box-page .biab-hiw *,
body .business-in-a-box-page .biab-hiw *::before,
body .business-in-a-box-page .biab-hiw *::after {
    box-sizing: border-box;
}


/* =========================================================
   02 — INNER CONTAINER
========================================================= */

body .business-in-a-box-page .biab-hiw__inner {
    position: relative;
    z-index: 2;

    width: 100% !important;
    max-width: 1600px !important;

    margin: 0 auto !important;
    padding: 0 80px !important;
}


/* =========================================================
   03 — SECTION INTRODUCTION
========================================================= */

body .business-in-a-box-page .biab-hiw__intro {
    width: 100%;
    max-width: 1150px;

    margin: 0 0 66px !important;
    padding: 0;

    text-align: left;
}

body .business-in-a-box-page .biab-hiw__eyebrow {
    display: block;

    margin: 0 0 18px !important;

    font-family: "Inter", sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase;

    color: #C96743 !important;
    text-align: left;
}

body .business-in-a-box-page .biab-hiw__title {
    width: 100%;
    max-width: 1100px;

    margin: 0 !important;

    font-family: "Manrope", "Inter", sans-serif !important;
    font-size: clamp(37px, 3.1vw, 47px) !important;
    font-weight: 600 !important;
    line-height: 1.14 !important;
    letter-spacing: -0.05em !important;

    color: #1F211D !important;
    text-align: left !important;
    text-wrap: balance;
}

body .business-in-a-box-page .biab-hiw__description {
    width: 100%;
    max-width: 1050px;

    margin: 24px 0 0 !important;

    font-family: "Inter", sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.75 !important;
    letter-spacing: 0 !important;

    color: rgba(31,33,29,0.75) !important;
    text-align: left !important;
}


/* =========================================================
   04 — FOUR-STEP WORKFLOW
========================================================= */

body .business-in-a-box-page .biab-hiw__process {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

    align-items: start !important;
    column-gap: 40px !important;
    row-gap: 0 !important;

    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

body .business-in-a-box-page .biab-hiw__step {
    position: relative;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;

    min-width: 0;
    width: 100%;

    margin: 0 !important;
    padding: 0 !important;

    text-align: left !important;
}


/* =========================================================
   05 — HIDE OLD HTML CONNECTORS

   Replace them visually with the same fine
   CSS connecting arrows used by Workflows.
========================================================= */

body .business-in-a-box-page .biab-hiw__connector {
    display: none !important;
}


/* =========================================================
   06 — TOP ICON GROUP
========================================================= */

body .business-in-a-box-page .biab-hiw__visual {
    position: relative;
    z-index: 2;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 100%;

    margin: 0 0 25px !important;
    padding: 0 !important;
}


/* =========================================================
   07 — DARK OLIVE NUMBER CHIPS
========================================================= */

body .business-in-a-box-page .biab-hiw__number {
    position: absolute !important;
    z-index: 4 !important;

    top: -8px !important;
    left: -10px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 34px !important;
    height: 34px !important;

    padding: 0 !important;
    margin: 0 !important;

    border-radius: 50% !important;

    background: #3D4C30 !important;
    color: #FFFFFF !important;

    font-family: "Inter", sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    box-shadow:
        0 4px 10px rgba(36,55,29,0.14),
        inset 0 1px 0 rgba(255,255,255,0.16) !important;
}


/* =========================================================
   08 — CHAMPAGNE CIRCULAR MEDALLIONS
   Copied from Workflows visual treatment
========================================================= */

body .business-in-a-box-page .biab-hiw__icon {
    position: relative !important;
    z-index: 2 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 82px !important;
    height: 82px !important;
    flex: 0 0 82px !important;

    padding: 0 !important;
    margin: 0 !important;

    border-radius: 50% !important;

    background-color: #F5F1E8 !important;

    background-image:
        linear-gradient(
            145deg,
            #FFFDF9 0%,
            #F6F1E7 52%,
            #EDE5D8 100%
        ) !important;

    border: 1px solid rgba(173,153,119,0.23) !important;

    box-shadow:
        0 5px 11px rgba(76,59,36,0.035),
        0 15px 26px rgba(76,59,36,0.055),
        inset 0 2px 1px rgba(255,255,255,0.93),
        inset 0 -4px 9px rgba(152,121,74,0.035) !important;

    transition:
        transform 420ms cubic-bezier(.22,1,.36,1),
        box-shadow 420ms ease !important;
}


/* Fine luminous inner circle */

body .business-in-a-box-page .biab-hiw__icon::before {
    content: "" !important;

    position: absolute;
    inset: 5px;
    z-index: 0;

    display: block !important;

    border: 1px solid rgba(255,255,255,0.78);
    border-radius: 50%;

    pointer-events: none;
}


/* SVG illustration */

body .business-in-a-box-page .biab-hiw__icon svg {
    position: relative;
    z-index: 2;

    display: block;

    width: 36px !important;
    height: 36px !important;

    fill: none !important;
    stroke: #66522B !important;
    stroke-width: 1.7 !important;

    stroke-linecap: round;
    stroke-linejoin: round;

    transition: transform 380ms ease;
}


/* =========================================================
   09 — STEP TITLES AND BODY COPY
========================================================= */

body .business-in-a-box-page .biab-hiw__content {
    display: block;
    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;
    text-align: left;
}

body .business-in-a-box-page .biab-hiw__content h3 {
    width: 100%;
    margin: 0 0 12px !important;

    font-family: "Manrope", "Inter", sans-serif !important;
    font-size: 19px !important;
    font-weight: 600 !important;
    line-height: 1.33 !important;
    letter-spacing: -0.035em !important;

    color: #1F211D !important;
    text-align: left !important;
}

body .business-in-a-box-page .biab-hiw__content p {
    width: 100%;
    max-width: 290px;

    margin: 0 !important;

    font-family: "Inter", sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
    letter-spacing: 0 !important;

    color: rgba(31,33,29,0.76) !important;
    text-align: left !important;
}


/* =========================================================
   10 — CONNECTED ARROWS

   Replicates the thin directional connectors
   from Workflows Section 04.
========================================================= */

body .business-in-a-box-page
.biab-hiw__step:not(:nth-last-child(2))::before {
    content: "" !important;

    position: absolute;
    z-index: 0;

    top: 40px;
    left: calc(100% + 3px);

    width: 26px;
    height: 1px;

    background: rgba(69,77,62,0.65);

    pointer-events: none;
}

body .business-in-a-box-page
.biab-hiw__step:not(:nth-last-child(2))::after {
    content: "" !important;

    position: absolute;
    z-index: 0;

    top: 36px;
    left: calc(100% + 23px);

    width: 9px;
    height: 9px;

    border-top: 1px solid rgba(69,77,62,0.75);
    border-right: 1px solid rgba(69,77,62,0.75);

    transform: rotate(45deg);

    pointer-events: none;
}

/* Don't draw an arrow after step 04 */

body .business-in-a-box-page
.biab-hiw__step:last-child::before,
body .business-in-a-box-page
.biab-hiw__step:last-child::after {
    content: none !important;
}


/* =========================================================
   11 — CLOSING STATEMENT
========================================================= */

body .business-in-a-box-page .biab-hiw__note {
    width: 100%;
    max-width: 900px;

    margin: 70px auto 0 !important;

    font-family: "Inter", sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.65 !important;
    letter-spacing: 0 !important;

    color: #1F211D !important;
    text-align: center !important;
}


/* =========================================================
   12 — HOVER DEPTH
========================================================= */

@media (hover: hover) {

    body .business-in-a-box-page
    .biab-hiw__step:hover .biab-hiw__icon {
        transform: translateY(-4px);

        box-shadow:
            0 9px 18px rgba(76,59,36,0.06),
            0 20px 32px rgba(76,59,36,0.085),
            inset 0 2px 1px rgba(255,255,255,0.93) !important;
    }

    body .business-in-a-box-page
    .biab-hiw__step:hover .biab-hiw__icon svg {
        transform: scale(1.06);
    }
}


/* =========================================================
   13 — SMALLER DESKTOP
   1101px–1350px
========================================================= */

@media (min-width: 1101px) and (max-width: 1350px) {

    body .business-in-a-box-page .biab-hiw__inner {
        padding: 0 60px !important;
    }

    body .business-in-a-box-page .biab-hiw__process {
        column-gap: 32px !important;
    }

    body .business-in-a-box-page .biab-hiw__icon {
        width: 74px !important;
        height: 74px !important;
        flex-basis: 74px !important;
    }

    body .business-in-a-box-page .biab-hiw__content h3 {
        font-size: 17px !important;
    }

    body .business-in-a-box-page .biab-hiw__content p {
        font-size: 12.5px !important;
    }

    body .business-in-a-box-page
    .biab-hiw__step:not(:last-child)::before {
        top: 36px;
        width: 20px;
    }

    body .business-in-a-box-page
    .biab-hiw__step:not(:last-child)::after {
        top: 32px;
        left: calc(100% + 17px);
    }
}


/* =========================================================
   14 — TABLET
   600px–1100px

   Swipeable four-step workflow, like Workflows.
========================================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .business-in-a-box-page .biab-hiw {
        padding: 85px 0 95px !important;
    }

    body .business-in-a-box-page .biab-hiw__inner {
        padding: 0 48px !important;
    }

    body .business-in-a-box-page .biab-hiw__intro {
        margin-bottom: 45px !important;
    }

    body .business-in-a-box-page .biab-hiw__title {
        font-size: clamp(34px, 4.7vw, 46px) !important;
    }

    body .business-in-a-box-page .biab-hiw__description {
        font-size: 14px !important;
    }

    body .business-in-a-box-page .biab-hiw__process {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;

        gap: 54px !important;

        width: 100%;
        padding: 12px 0 25px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;

        scrollbar-width: thin;
        scrollbar-color: #BE947E rgba(201,103,67,0.1);
    }

    body .business-in-a-box-page .biab-hiw__step {
        flex: 0 0 38% !important;
        width: 38% !important;

        scroll-snap-align: start;
    }

    body .business-in-a-box-page .biab-hiw__icon {
        width: 76px !important;
        height: 76px !important;
        flex-basis: 76px !important;
    }

    body .business-in-a-box-page .biab-hiw__content h3 {
        font-size: 18px !important;
    }

    body .business-in-a-box-page .biab-hiw__content p {
        font-size: 13px !important;
    }

    body .business-in-a-box-page
    .biab-hiw__step:not(:last-child)::before {
        top: 38px;
        left: calc(100% + 8px);
        width: 35px;
    }

    body .business-in-a-box-page
    .biab-hiw__step:not(:last-child)::after {
        top: 34px;
        left: calc(100% + 38px);
    }

    body .business-in-a-box-page .biab-hiw__note {
        margin-top: 45px !important;
    }
}


/* =========================================================
   15 — MOBILE
   0px–599px

   Compact open vertical workflow.
========================================================= */

@media (max-width: 599px) {

    body .business-in-a-box-page .biab-hiw {
        padding: 76px 0 88px !important;
    }

    body .business-in-a-box-page .biab-hiw__inner {
        padding: 0 24px !important;
    }

    body .business-in-a-box-page .biab-hiw__intro {
        margin-bottom: 40px !important;
    }

    body .business-in-a-box-page .biab-hiw__eyebrow {
        font-size: 11px !important;
        margin-bottom: 15px !important;
    }

    body .business-in-a-box-page .biab-hiw__title {
        font-size: clamp(30px, 8vw, 38px) !important;
        line-height: 1.14 !important;
    }

    body .business-in-a-box-page .biab-hiw__description {
        margin-top: 20px !important;
        font-size: 14px !important;
        line-height: 1.7 !important;
    }

    body .business-in-a-box-page .biab-hiw__process {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;

        gap: 34px !important;

        padding: 0 !important;

        overflow: visible !important;
    }

    body .business-in-a-box-page .biab-hiw__step {
        width: 100% !important;
    }

    body .business-in-a-box-page .biab-hiw__visual {
        margin-bottom: 19px !important;
    }

    body .business-in-a-box-page .biab-hiw__number {
        width: 30px !important;
        height: 30px !important;
        font-size: 10px !important;
    }

    body .business-in-a-box-page .biab-hiw__icon {
        width: 68px !important;
        height: 68px !important;
        flex-basis: 68px !important;
    }

    body .business-in-a-box-page .biab-hiw__icon svg {
        width: 30px !important;
        height: 30px !important;
    }

    body .business-in-a-box-page .biab-hiw__content h3 {
        margin-bottom: 9px !important;
        font-size: 18px !important;
    }

    body .business-in-a-box-page .biab-hiw__content p {
        max-width: 480px;
        font-size: 13px !important;
        line-height: 1.7 !important;
    }

    /* Remove horizontal arrows in vertical layout */

    body .business-in-a-box-page
    .biab-hiw__step::before,
    body .business-in-a-box-page
    .biab-hiw__step::after {
        content: none !important;
        display: none !important;
    }

    body .business-in-a-box-page .biab-hiw__note {
        margin-top: 42px !important;

        font-size: 14px !important;
        text-align: left !important;
    }
}


/* =========================================================
   16 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body .business-in-a-box-page .biab-hiw__icon,
    body .business-in-a-box-page .biab-hiw__icon svg {
        transition: none !important;
    }

    body .business-in-a-box-page .biab-hiw__process {
        scroll-behavior: auto !important;
    }
}

/* END BUSINESS IN A BOX — WORKFLOWS PROCESS DESIGN */



/* =========================================================
   FRAYORA — BUSINESS IN A BOX / PACKAGES & INVESTMENT
   Bond-inspired editorial layout; Frayora type, palette, depth
   Scoped exclusively to the new section
========================================================= */
body .business-in-a-box-page .biab-packages {
  position:relative; isolation:isolate; width:100%; overflow:hidden;
  background: #F5EDE4;
  background-image:radial-gradient(ellipse 65% 58% at 10% 5%,rgba(255,255,255,.64),transparent 85%),radial-gradient(ellipse 60% 70% at 95% 95%,rgba(192,201,178,.18),transparent 80%);
  color:#1F211D; padding:108px 0 95px;
}
body .business-in-a-box-page .biab-packages, body .business-in-a-box-page .biab-packages *, body .business-in-a-box-page .biab-packages *::before, body .business-in-a-box-page .biab-packages *::after {box-sizing:border-box}
body .business-in-a-box-page .biab-packages__inner {max-width:1540px;margin:0 auto;padding:0 72px}
body .business-in-a-box-page .biab-packages__header {display:grid;grid-template-columns:1.25fr .75fr;column-gap:65px;align-items:end;margin-bottom:43px}
body .business-in-a-box-page .biab-packages__eyebrow {margin:0 0 19px;color:#C96743;font:600 12px/1.4 'Inter',sans-serif;letter-spacing:.15em}
body .business-in-a-box-page .biab-packages__title {margin:0;max-width:740px;font:600 clamp(36px,3.4vw,49px)/1.13 'Manrope',sans-serif;letter-spacing:-.05em;color:#1F211D;text-wrap:balance}
body .business-in-a-box-page .biab-packages__intro {max-width:425px;justify-self:end;padding-bottom:3px}
body .business-in-a-box-page .biab-packages__intro p {font:400 14px/1.78 'Inter',sans-serif;color:#65695F;margin:0 0 19px}
body .business-in-a-box-page .biab-packages__currency {font:600 10px/1.5 'Inter',sans-serif;letter-spacing:.11em;color:#66745C}
body .business-in-a-box-page .biab-packages__grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px;align-items:stretch}
body .business-in-a-box-page .biab-packages__card {--b-text:#1F211D;--b-muted:#62665F;--b-line:rgba(65,72,59,.16);--b-surface:rgba(255,255,255,.61);--b-accent:#B96748;display:flex;flex-direction:column;min-width:0;border:1px solid rgba(112,98,81,.13);border-radius:18px;overflow:hidden;background:var(--b-surface);color:var(--b-text);box-shadow:0 15px 32px rgba(64,51,36,.055),0 3px 11px rgba(64,51,36,.035);transition:transform .35s ease,box-shadow .35s ease}
body .business-in-a-box-page .biab-packages__card--foundation {--b-surface:rgba(255,253,249,.80)}
body .business-in-a-box-page .biab-packages__card--growth {--b-surface:#F3E6DF;--b-accent:#C96743;border-color:rgba(201,103,67,.23)}
body .business-in-a-box-page .biab-packages__card--connected {--b-surface:#39483B;--b-text:#F8F3EB;--b-muted:rgba(248,243,235,.75);--b-line:rgba(248,243,235,.19);--b-accent:#EEE2CB;border-color:rgba(255,255,255,.10)}
body .business-in-a-box-page .biab-packages__card-head {position:relative;padding:30px 28px 23px;min-height:298px;border-bottom:1px solid var(--b-line)}
body .business-in-a-box-page .biab-packages__index {display:block;padding-right:58px;font:600 10px/1.4 'Inter',sans-serif;letter-spacing:.11em;color:var(--b-accent)}
body .business-in-a-box-page .biab-packages__mark {display:flex;align-items:center;justify-content:center;width:49px;height:49px;margin:19px 0 13px;border-radius:50%;background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(229,232,219,.67));box-shadow:inset 0 1px 2px rgba(255,255,255,.7),0 6px 16px rgba(47,55,43,.07);border:1px solid rgba(105,122,90,.12)}
body .business-in-a-box-page .biab-packages__mark svg {width:24px;height:24px;stroke:#637154;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
body .business-in-a-box-page .biab-packages__card--growth .biab-packages__mark {background:linear-gradient(145deg,#FFF8F1,#F0D7CA)}
body .business-in-a-box-page .biab-packages__card--growth .biab-packages__mark svg {stroke:#B65F3F}
body .business-in-a-box-page .biab-packages__card--connected .biab-packages__mark {background:rgba(244,238,218,.09);border-color:rgba(244,238,218,.20)}
body .business-in-a-box-page .biab-packages__card--connected .biab-packages__mark svg {stroke:#E9D9B7}
body .business-in-a-box-page .biab-packages__card h3 {margin:0 0 10px;font:600 28px/1.18 'Manrope',sans-serif;letter-spacing:-.045em;color:var(--b-text)}
body .business-in-a-box-page .biab-packages__summary {min-height:47px;margin:0 0 23px;font:400 13px/1.65 'Inter',sans-serif;color:var(--b-muted)}
body .business-in-a-box-page .biab-packages__price {display:flex;align-items:baseline;flex-wrap:wrap;column-gap:9px;row-gap:3px;color:var(--b-text)}
body .business-in-a-box-page .biab-packages__price>span {width:100%;font:600 10px/1.4 'Inter',sans-serif;letter-spacing:.06em;color:var(--b-muted)}
body .business-in-a-box-page .biab-packages__price strong {font:600 37px/1.14 'Manrope',sans-serif;letter-spacing:-.055em;color:var(--b-text)}
body .business-in-a-box-page .biab-packages__price--custom strong {font-size:28px;letter-spacing:-.04em}
body .business-in-a-box-page .biab-packages__price small {font:400 11px/1.4 'Inter',sans-serif;color:var(--b-muted)}
body .business-in-a-box-page .biab-packages__card-body {padding:27px 28px 25px;flex:1}
body .business-in-a-box-page .biab-packages__list-label {margin:0 0 19px;font:600 10px/1.4 'Inter',sans-serif;letter-spacing:.1em;color:var(--b-accent)}
body .business-in-a-box-page .biab-packages__list {list-style:none;margin:0;padding:0;display:grid;gap:16px}
body .business-in-a-box-page .biab-packages__list li {position:relative;padding-left:22px;min-width:0}
body .business-in-a-box-page .biab-packages__list li::before {content:'✓';position:absolute;top:1px;left:0;color:var(--b-accent);font:700 13px/1.5 'Inter',sans-serif}
body .business-in-a-box-page .biab-packages__list strong {display:block;font:600 12px/1.5 'Manrope',sans-serif;letter-spacing:-.018em;color:var(--b-text);margin-bottom:4px}
body .business-in-a-box-page .biab-packages__list span {display:block;font:400 12px/1.65 'Inter',sans-serif;color:var(--b-muted)}
body .business-in-a-box-page .biab-packages__card-foot {margin-top:auto;padding:0 28px 28px}
body .business-in-a-box-page .biab-packages__card-foot>p {padding-top:15px;border-top:1px solid var(--b-line);min-height:53px;margin:0;font:400 11px/1.6 'Inter',sans-serif;color:var(--b-muted)}
body .business-in-a-box-page .biab-packages__button {display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:47px;width:100%;padding:11px 18px;border-radius:999px;background:#53664B;color:#FFF;font:600 12px/1.35 'Manrope',sans-serif;text-decoration:none;box-shadow:0 7px 14px rgba(42,57,40,.11);transition:transform .25s ease,background .25s ease}
body .business-in-a-box-page .biab-packages__card--growth .biab-packages__button {background:#C96743}
body .business-in-a-box-page .biab-packages__card--connected .biab-packages__button {background:#F8F3EB;color:#344033}
body .business-in-a-box-page .biab-packages__button span {font:400 21px/1 'Inter',sans-serif}
body .business-in-a-box-page .biab-packages__button:focus-visible {outline:3px solid #C96743;outline-offset:3px}
@media (hover:hover) {body .business-in-a-box-page .biab-packages__card:hover {transform:translateY(-4px);box-shadow:0 21px 42px rgba(64,51,36,.1)}body .business-in-a-box-page .biab-packages__button:hover {transform:translateY(-2px);background:#43543C}body .business-in-a-box-page .biab-packages__card--growth .biab-packages__button:hover {background:#B75A3B}}
body .business-in-a-box-page .biab-packages__below {display:grid;grid-template-columns:.9fr 1.7fr;gap:38px;margin-top:28px;padding:23px 4px 0;border-top:1px solid rgba(71,73,61,.15)}
body .business-in-a-box-page .biab-packages__footnote {display:flex;align-items:flex-start;gap:13px}
body .business-in-a-box-page .biab-packages__footnote-icon {color:#C96743;font-size:18px;line-height:1.5}
body .business-in-a-box-page .biab-packages__footnote p {margin:0;font:400 12px/1.75 'Inter',sans-serif;color:#4E5948}
body .business-in-a-box-page .biab-packages__footnote strong {font-weight:600;color:#28362B}
body .business-in-a-box-page .biab-packages__terms p {margin:0 0 8px;font:400 11px/1.75 'Inter',sans-serif;color:#77756C}
@media (min-width:1101px) and (max-width:1350px) {body .business-in-a-box-page .biab-packages__inner {padding:0 55px}body .business-in-a-box-page .biab-packages__card-head {padding:26px 22px 22px}body .business-in-a-box-page .biab-packages__card-body {padding:25px 22px}body .business-in-a-box-page .biab-packages__card-foot {padding:0 22px 24px}}
@media (min-width:600px) and (max-width:1100px) {body .business-in-a-box-page .biab-packages {padding:82px 0 85px}body .business-in-a-box-page .biab-packages__inner {padding:0 44px}body .business-in-a-box-page .biab-packages__header {display:block;margin-bottom:34px}body .business-in-a-box-page .biab-packages__title {font-size:clamp(34px,4.7vw,44px)}body .business-in-a-box-page .biab-packages__intro {max-width:730px;margin-top:21px}body .business-in-a-box-page .biab-packages__grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}body .business-in-a-box-page .biab-packages__card:last-child {grid-column:1/-1}body .business-in-a-box-page .biab-packages__card:last-child .biab-packages__card-head {min-height:0}body .business-in-a-box-page .biab-packages__below {grid-template-columns:1fr;gap:17px}}
@media (max-width:599px) {body .business-in-a-box-page .biab-packages {padding:70px 0 72px}body .business-in-a-box-page .biab-packages__inner {padding:0 24px}body .business-in-a-box-page .biab-packages__header {display:block;margin-bottom:29px}body .business-in-a-box-page .biab-packages__eyebrow {font-size:11px;margin-bottom:14px}body .business-in-a-box-page .biab-packages__title {font-size:clamp(30px,8vw,38px);line-height:1.16}body .business-in-a-box-page .biab-packages__intro {margin-top:18px;max-width:none}body .business-in-a-box-page .biab-packages__intro p {font-size:13px}body .business-in-a-box-page .biab-packages__grid {grid-template-columns:1fr;gap:15px}body .business-in-a-box-page .biab-packages__card-head {padding:25px 23px 22px;min-height:0}body .business-in-a-box-page .biab-packages__card-body {padding:25px 23px 27px}body .business-in-a-box-page .biab-packages__card-foot {padding:0 23px 23px}body .business-in-a-box-page .biab-packages__card h3 {font-size:26px}body .business-in-a-box-page .biab-packages__summary {min-height:0}body .business-in-a-box-page .biab-packages__below {grid-template-columns:1fr;gap:18px;margin-top:24px}body .business-in-a-box-page .biab-packages__terms p {font-size:11px}}
@media (prefers-reduced-motion:reduce) {body .business-in-a-box-page .biab-packages__card,body .business-in-a-box-page .biab-packages__button {transition:none!important}}
/* Shared project schedule note — one note after all three cards */
body .business-in-a-box-page .biab-packages__schedule {
    max-width: 1040px;
    margin: 29px auto 0;
    padding: 0 16px;
    text-align: center;
}
body .business-in-a-box-page .biab-packages__schedule p {
    margin: 0;
    font-family: "Inter", sans-serif !important;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.8;
    color: #626A5F;
}
body .business-in-a-box-page .biab-packages__schedule strong {
    font-weight: 650;
    color: #3D4C30;
}
@media (max-width: 599px) {
    body .business-in-a-box-page .biab-packages__schedule {
        margin-top: 23px;
        padding: 0 2px;
        text-align: left;
    }
    body .business-in-a-box-page .biab-packages__schedule p {
        font-size: 11px;
        line-height: 1.75;
    }
}
/* END BUSINESS IN A BOX — PACKAGES & INVESTMENT */


/* =========================================================
   FRAYORA — BUSINESS IN A BOX
   PACKAGES — GLASS FINISH + CONNECTED CTA + SWIPE
   Paste AFTER the existing packages CSS in main.css
========================================================= */

/* Luminous editorial glass surfaces */
body .business-in-a-box-page .biab-packages__card {
    position: relative;
    isolation: isolate;
    backdrop-filter: blur(14px) saturate(1.08);
    -webkit-backdrop-filter: blur(14px) saturate(1.08);
    border: 1px solid rgba(255,255,255,.55);
    box-shadow:
        0 26px 52px rgba(45,41,34,.10),
        0 8px 16px rgba(45,41,34,.055),
        inset 0 1px 0 rgba(255,255,255,.78);
    transition: transform .35s ease, box-shadow .35s ease;
}

body .business-in-a-box-page .biab-packages__card--foundation {
    background:
        linear-gradient(150deg,rgba(255,255,255,.85),rgba(248,243,235,.76) 64%,rgba(235,228,216,.58));
    border-color:rgba(255,255,255,.74);
}
body .business-in-a-box-page .biab-packages__card--growth {
    background:
        linear-gradient(150deg,rgba(255,248,243,.88),rgba(245,228,219,.80) 65%,rgba(233,206,193,.64));
    border-color:rgba(255,255,255,.58);
}
body .business-in-a-box-page .biab-packages__card--connected {
    background:
        linear-gradient(145deg,rgba(78,95,78,.98) 0%,rgba(57,72,59,.98) 52%,rgba(45,60,49,.99) 100%);
    border-color:rgba(235,240,220,.22);
    box-shadow:
        0 27px 52px rgba(29,43,32,.22),
        0 8px 16px rgba(29,43,32,.10),
        inset 0 1px 0 rgba(255,255,255,.18);
}

/* Increase depth without exaggerated hover movement */
@media (hover:hover) {
    body .business-in-a-box-page .biab-packages__card:hover {
        transform:translateY(-5px);
        box-shadow:
            0 34px 65px rgba(45,41,34,.14),
            0 10px 18px rgba(45,41,34,.07),
            inset 0 1px 0 rgba(255,255,255,.82);
    }
    body .business-in-a-box-page .biab-packages__card--connected:hover {
        box-shadow:
            0 36px 66px rgba(29,43,32,.26),
            0 10px 18px rgba(29,43,32,.12),
            inset 0 1px 0 rgba(255,255,255,.20);
    }
}

/* Connected button — readable in normal, hover, focus and active states */
body .business-in-a-box-page .biab-packages__card--connected .biab-packages__button,
body .business-in-a-box-page .biab-packages__card--connected .biab-packages__button:visited {
    background:#F8F3EB !important;
    color:#2F4033 !important;
    border:1px solid rgba(255,255,255,.25);
}
body .business-in-a-box-page .biab-packages__card--connected .biab-packages__button span {
    color:inherit !important;
}
body .business-in-a-box-page .biab-packages__card--connected .biab-packages__button:hover,
body .business-in-a-box-page .biab-packages__card--connected .biab-packages__button:focus-visible {
    background:#E9D9C2 !important;
    color:#25372C !important;
}
body .business-in-a-box-page .biab-packages__card--connected .biab-packages__button:active {
    background:#DFCFB6 !important;
    color:#25372C !important;
}

/* Tablet and mobile: horizontal swipe cards with native scrollbar */
@media (max-width:1100px) {
    body .business-in-a-box-page .biab-packages__grid {
        display:flex !important;
        flex-wrap:nowrap !important;
        align-items:stretch !important;
        gap:18px !important;
        width:100% !important;
        min-width:0;
        overflow-x:scroll !important;
        overflow-y:hidden !important;
        padding:12px 3px 26px !important;
        margin:0 !important;
        scroll-snap-type:x mandatory;
        scroll-padding-inline:3px;
        overscroll-behavior-x:contain;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:auto;
        scrollbar-color:#A27D68 rgba(86,100,73,.16);
    }
    body .business-in-a-box-page .biab-packages__grid::-webkit-scrollbar {
        height:10px;
        display:block;
    }
    body .business-in-a-box-page .biab-packages__grid::-webkit-scrollbar-track {
        background:rgba(86,100,73,.13);
        border-radius:999px;
    }
    body .business-in-a-box-page .biab-packages__grid::-webkit-scrollbar-thumb {
        background:#A27D68;
        border:2px solid #F8F3EB;
        border-radius:999px;
    }
    body .business-in-a-box-page .biab-packages__card,
    body .business-in-a-box-page .biab-packages__card:last-child {
        grid-column:auto !important;
        flex:0 0 64% !important;
        width:64% !important;
        max-width:none !important;
        scroll-snap-align:start;
        scroll-snap-stop:always;
        transform:none;
    }
    body .business-in-a-box-page .biab-packages__card:hover {
        transform:none;
    }
}

@media (max-width:599px) {
    body .business-in-a-box-page .biab-packages__grid {
        gap:13px !important;
        padding-bottom:22px !important;
    }
    body .business-in-a-box-page .biab-packages__card,
    body .business-in-a-box-page .biab-packages__card:last-child {
        flex:0 0 88% !important;
        width:88% !important;
    }
}
@media (prefers-reduced-motion:reduce) {
    body .business-in-a-box-page .biab-packages__card {
        transition:none !important;
    }
}

/* ==========================================
   BUSINESS IN A BOX — PACKAGES
   MOBILE BUTTON SPACING FIX
   599px AND BELOW
========================================== */

@media screen and (max-width: 599px) {

    /* Add breathing room above package buttons */
    body .business-in-a-box-page
    .biab-packages__card .biab-packages__button {
        margin-top: 24px !important;
    }

    /* Keep button text on one line */
    body .business-in-a-box-page
    .biab-packages__button {
        white-space: nowrap;
        width: 100%;
        min-height: 54px;
        padding: 14px 20px;
        font-size: 13px;
    }

}

/* ==========================================
   BUSINESS IN A BOX — PACKAGES
   MOBILE BUTTON TEXT + ARROW REFINEMENT
   599px AND BELOW
========================================== */

@media screen and (max-width: 599px) {

    body .business-in-a-box-page
    .biab-packages__button {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        width: 100% !important;
        min-width: 0 !important;
        min-height: 52px !important;

        padding: 12px 18px !important;
        gap: 10px !important;

        font-family: "Inter", sans-serif !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        white-space: nowrap !important;

        box-sizing: border-box !important;
    }

    /* Smaller arrow, contained within button */

    body .business-in-a-box-page
    .biab-packages__button span {
        display: inline-block !important;
        flex: 0 0 auto !important;

        font-size: 16px !important;
        line-height: 1 !important;

        margin: 0 !important;
        transform: none;
    }

    /* Prevent arrow from sliding outside on hover */

    body .business-in-a-box-page
    .biab-packages__button:hover span {
        transform: translateX(2px) !important;
    }

}


/* =========================================================
   WEBSITE & DIGITAL INFRASTRUCTURE — SECTION 02
   ICON COLOR FIX
   01 peach / 02 sage / 03 sage / 04 peach
   Applies to desktop, tablet, and mobile
========================================================= */

/* PEACH ICONS — 01 and 04 */
body .digital-page .digital-design__item:nth-child(1) .digital-design__icon,
body .digital-page .digital-design__item:nth-child(4) .digital-design__icon {
    background:
        linear-gradient(
            145deg,
            #FFF7EF 0%,
            #F3E2D5 60%,
            #EAD2C2 100%
        ) !important;

    border: 1px solid rgba(181,143,119,.18) !important;

    box-shadow:
        0 5px 12px rgba(75,49,34,.035),
        0 18px 30px rgba(75,49,34,.075),
        inset 0 2px 2px rgba(255,255,255,.9),
        inset 0 -4px 9px rgba(136,91,62,.04) !important;
}

body .digital-page .digital-design__item:nth-child(1) .digital-design__icon svg,
body .digital-page .digital-design__item:nth-child(4) .digital-design__icon svg {
    stroke: #84634E !important;
}

/* SAGE ICONS — 02 and 03 */
body .digital-page .digital-design__item:nth-child(2) .digital-design__icon,
body .digital-page .digital-design__item:nth-child(3) .digital-design__icon {
    background:
        linear-gradient(
            145deg,
            #F7F9F2 0%,
            #E6EBDD 55%,
            #D4DFC8 100%
        ) !important;

    border: 1px solid rgba(111,137,101,.18) !important;

    box-shadow:
        0 5px 12px rgba(58,78,51,.035),
        0 18px 30px rgba(58,78,51,.075),
        inset 0 2px 2px rgba(255,255,255,.9),
        inset 0 -4px 9px rgba(68,98,59,.04) !important;
}

body .digital-page .digital-design__item:nth-child(2) .digital-design__icon svg,
body .digital-page .digital-design__item:nth-child(3) .digital-design__icon svg {
    stroke: #566449 !important;
}


/* =========================================================
   FRAYORA — WEBSITE & DIGITAL INFRASTRUCTURE
   SECTION 05 — OUR WEBSITE PROCESS

   MATCH BUSINESS IN A BOX — HOW IT WORKS
   Desktop: 1101px+
   Tablet: 600px–1100px
   Mobile: 599px and below

   CSS ONLY — ALL COPY PRESERVED
========================================================= */


/* ==========================================
   01 — INTRO LAYOUT
========================================== */

body .digital-page .digital-process__intro {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;

    gap: 0 !important;
    width: 100%;
    max-width: 1150px;
}

body .digital-page .digital-process__intro-left,
body .digital-page .digital-process__intro-right {
    width: 100% !important;
    max-width: 1150px !important;

    margin: 0 !important;
    padding: 0 !important;
}

body .digital-page .digital-process__eyebrow {
    font-family: "Inter", sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: .15em !important;
    color: #B97759 !important;
}

body .digital-page .digital-process__title {
    max-width: 1100px !important;

    font-family: "Manrope", "Inter", sans-serif !important;
    font-size: clamp(37px, 3.1vw, 47px) !important;
    font-weight: 600 !important;
    line-height: 1.14 !important;
    letter-spacing: -.05em !important;

    color: #1F211D !important;
}

body .digital-page .digital-process__body {
    width: 100%;
    max-width: 1050px !important;

    margin: 24px 0 0 !important;

    font-family: "Inter", sans-serif !important;
    font-size: 15px !important;
    line-height: 1.75 !important;
    color: rgba(31,33,29,.76) !important;
}


/* ==========================================
   02 — PROCESS STEPS
========================================== */

body .digital-page .digital-process__step {
    position: relative;

    min-width: 0;
    padding: 0 !important;

    text-align: left;
}

body .digital-page .digital-process__step-top {
    position: relative;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    min-height: 0 !important;
    margin: 0 0 22px !important;
    padding: 0 !important;
}

body .digital-page .digital-process__number {
    flex: 0 0 auto !important;

    margin: 0 14px 0 0 !important;

    font-family: "Inter", sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    color: #9F674F !important;
}

body .digital-page .digital-process__icon-wrap {
    flex: 0 0 auto !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* ==========================================
   03 — DIMENSIONAL CIRCULAR ICONS
========================================== */

body .digital-page .digital-process__icon {
    position: relative;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 78px !important;
    height: 78px !important;

    border-radius: 50% !important;

    background:
        linear-gradient(
            145deg,
            #FFF7EF 0%,
            #F3E2D5 60%,
            #EAD2C2 100%
        ) !important;

    border: 1px solid rgba(181,143,119,.18) !important;

    box-shadow:
        0 5px 12px rgba(75,49,34,.035),
        0 18px 30px rgba(75,49,34,.075),
        inset 0 2px 2px rgba(255,255,255,.9),
        inset 0 -4px 9px rgba(136,91,62,.04) !important;
}

/* Sage — steps 02 and 04 */

body .digital-page
.digital-process__step:nth-child(2) .digital-process__icon,
body .digital-page
.digital-process__step:nth-child(4) .digital-process__icon {
    background:
        linear-gradient(
            145deg,
            #F7F9F2 0%,
            #E6EBDD 55%,
            #D4DFC8 100%
        ) !important;

    border-color: rgba(111,137,101,.18) !important;
}

body .digital-page .digital-process__icon::before {
    content: "" !important;

    position: absolute;
    inset: 5px;

    border: 1px solid rgba(255,255,255,.82);
    border-radius: 50%;

    pointer-events: none;
}

body .digital-page .digital-process__icon svg {
    position: relative;
    z-index: 1;

    width: 30px !important;
    height: 30px !important;

    fill: none !important;
    stroke: #84634E !important;
    stroke-width: 1.7 !important;

    stroke-linecap: round;
    stroke-linejoin: round;

    filter: none !important;
}

body .digital-page
.digital-process__step:nth-child(2) .digital-process__icon svg,
body .digital-page
.digital-process__step:nth-child(4) .digital-process__icon svg {
    stroke: #566449 !important;
}


/* ==========================================
   04 — REMOVE OLD LONG LINES AND DOTS
========================================== */

body .digital-page .digital-process__connector {
    display: none !important;
}


/* ==========================================
   05 — TYPOGRAPHY
========================================== */

body .digital-page .digital-process__step-title {
    margin: 0 0 12px !important;

    font-family: "Manrope", "Inter", sans-serif !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    letter-spacing: -.035em !important;

    color: #1F211D !important;
}

body .digital-page .digital-process__step-body {
    width: 100%;
    max-width: 270px;

    margin: 0 !important;

    font-family: "Inter", sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;

    color: rgba(31,33,29,.76) !important;
}


/* ==========================================
   06 — DESKTOP
========================================== */

@media (min-width: 1101px) {

    body .digital-page .digital-process__inner {
        padding: 100px 80px 105px !important;
    }

    body .digital-page .digital-process__intro {
        margin-bottom: 65px !important;
    }

    body .digital-page .digital-process__steps {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;

        column-gap: 36px !important;
        align-items: start !important;
    }

    /* Thin directional arrow between steps */

    body .digital-page
    .digital-process__step:not(:last-child)::after {
        content: "→" !important;

        display: block !important;
        position: absolute;

        top: 23px;
        right: -29px;

        font-family: "Inter", sans-serif;
        font-size: 26px;
        font-weight: 300;
        line-height: 1;

        color: #B98569;
        pointer-events: none;
    }

    body .digital-page .digital-process__footer {
        margin-top: 65px !important;
    }
}


/* ==========================================
   07 — TABLET
========================================== */

@media (min-width: 600px) and (max-width: 1100px) {

    body .digital-page .digital-process__intro {
        margin-bottom: 48px !important;
    }

    body .digital-page .digital-process__title {
        font-size: clamp(34px, 4.5vw, 44px) !important;
    }

    body .digital-page .digital-process__body {
        font-size: 14px !important;
    }

    body .digital-page .digital-process__steps {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        gap: 44px 36px !important;
        overflow: visible !important;
    }

    body .digital-page
    .digital-process__step:nth-child(5) {
        grid-column: 1 / -1;
        width: 100% !important;
        max-width: 350px;
    }

    body .digital-page .digital-process__step::after {
        content: none !important;
        display: none !important;
    }
}


/* ==========================================
   08 — MOBILE
   Retain the original swipeable workflow.
========================================== */

@media (max-width: 599px) {

    body .digital-page .digital-process__intro {
        margin-bottom: 38px !important;
    }

    body .digital-page .digital-process__title {
        font-size: clamp(30px, 8vw, 38px) !important;
    }

    body .digital-page .digital-process__body {
        margin-top: 20px !important;
        font-size: 14px !important;
    }

    body .digital-page .digital-process__steps {
        display: flex !important;
        flex-wrap: nowrap !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory;
    }

    body .digital-page .digital-process__step {
        scroll-snap-align: start;
    }

    body .digital-page .digital-process__icon {
        width: 68px !important;
        height: 68px !important;
    }

    body .digital-page .digital-process__icon svg {
        width: 27px !important;
        height: 27px !important;
    }

    body .digital-page .digital-process__number {
        font-size: 13px !important;
        margin-right: 12px !important;
    }

    body .digital-page .digital-process__step-title {
        font-size: 17px !important;
    }

    body .digital-page .digital-process__step-body {
        font-size: 13px !important;
    }

    body .digital-page .digital-process__step::after {
        content: none !important;
        display: none !important;
    }
}


/* =========================================================
   FRAYORA — WEBSITE & DIGITAL INFRASTRUCTURE
   SECTION 05 — OUR WEBSITE PROCESS

   TABLET SCROLLING FIX
   600px–1100px

   - Horizontal swipeable steps
   - Two steps visible at once
   - Permanent visual scroll indicator
   - Peach / sage icon styling preserved
   - Desktop and mobile unchanged
========================================================= */

@media screen and (min-width: 600px) and (max-width: 1100px) {

    /* CONTAINER */

    body .digital-page .digital-process__inner {
        position: relative;
        padding-bottom: 100px !important;
    }

    /* HORIZONTAL SCROLLING ROW */

    body .digital-page .digital-process__steps {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        align-items: stretch !important;

        grid-template-columns: none !important;

        gap: 28px !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 8px 2px 34px !important;

        overflow-x: scroll !important;
        overflow-y: hidden !important;

        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;

        /* Firefox scrollbar */

        scrollbar-width: auto;
        scrollbar-color:
            #B47F66 rgba(180,127,102,0.18);
    }

    /* EACH PROCESS STEP */

    body .digital-page .digital-process__step,
    body .digital-page .digital-process__step:nth-child(5) {
        position: relative;

        flex: 0 0 calc((100% - 28px) / 2) !important;

        width: calc((100% - 28px) / 2) !important;
        max-width: none !important;
        min-width: 0 !important;

        grid-column: auto !important;

        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    /* KEEP ICON GROUPS CONSISTENT */

    body .digital-page .digital-process__step-top {
        justify-content: flex-start !important;
        margin-bottom: 20px !important;
    }

    body .digital-page .digital-process__icon {
        width: 76px !important;
        height: 76px !important;
    }

    /* NATIVE SCROLLBAR */

    body .digital-page
    .digital-process__steps::-webkit-scrollbar {
        height: 11px !important;
        display: block !important;
    }

    body .digital-page
    .digital-process__steps::-webkit-scrollbar-track {
        background: rgba(180,127,102,0.16);
        border-radius: 999px;
    }

    body .digital-page
    .digital-process__steps::-webkit-scrollbar-thumb {
        background: #B47F66;
        border-radius: 999px;
        border: 2px solid #F8F3EB;
    }

    /* REMOVE DESKTOP ARROWS */

    body .digital-page
    .digital-process__step::after {
        content: none !important;
        display: none !important;
    }

}

/* =========================================================
   FRAYORA — WEBSITE & DIGITAL INFRASTRUCTURE
   SECTION 04 — MOBILE CONNECTOR FIX

   iPhone / iOS Safari / WordPress Mobile Preview
   MOBILE ONLY: 599px AND BELOW
========================================================= */

@media screen and (max-width: 599px) {

    /* Keep both connector areas positioned correctly */

    body .digital-page .digital-system__connector {
        position: relative !important;
        display: block !important;

        width: 100% !important;
        height: 48px !important;

        flex-shrink: 0 !important;
        overflow: visible !important;
    }

    /* Preserve the horizontal dashed lines */

    body .digital-page
    .digital-system__connector::before {
        content: "" !important;

        position: absolute !important;
        display: block !important;

        left: 5% !important;
        right: 5% !important;

        width: auto !important;
        height: 0 !important;

        border: 0 !important;
        border-top: 1.5px dashed rgba(144,128,105,.58) !important;
    }

    /* Hide the original span-based vertical line */

    body .digital-page
    .digital-system__connector > span {
        display: none !important;
    }

    /* NEW: Draw vertical connectors directly with pseudo-elements */

    body .digital-page
    .digital-system__connector::after {
        content: "" !important;

        display: block !important;
        position: absolute !important;
        z-index: 2 !important;

        left: 50% !important;
        width: 0 !important;

        border: 0 !important;
        border-left: 1.5px dashed rgba(144,128,105,.65) !important;

        transform: translateX(-50%) !important;
        pointer-events: none !important;
    }

    /* TOP: Horizontal line → WEBSITE panel */

    body .digital-page
    .digital-system__connector--top::before {
        top: 15px !important;
    }

    body .digital-page
    .digital-system__connector--top::after {
        top: 15px !important;
        height: 33px !important;
    }

    /* BOTTOM: WEBSITE panel → Horizontal line */

    body .digital-page
    .digital-system__connector--bottom::before {
        top: 33px !important;
    }

    body .digital-page
    .digital-system__connector--bottom::after {
        top: 0 !important;
        height: 33px !important;
    }

}

/* Smaller iPhones */

@media screen and (max-width: 374px) {

    body .digital-page .digital-system__connector {
        height: 42px !important;
    }

    body .digital-page
    .digital-system__connector--top::before,
    body .digital-page
    .digital-system__connector--top::after {
        top: 13px !important;
    }

    body .digital-page
    .digital-system__connector--top::after,
    body .digital-page
    .digital-system__connector--bottom::after {
        height: 29px !important;
    }

    body .digital-page
    .digital-system__connector--bottom::before {
        top: 29px !important;
    }
}


/* ================================================
   BUSINESS IN A BOX — INSIDE THE BOX
   MOBILE TEXT ALIGNMENT FIX
   599px AND BELOW
================================================ */

@media screen and (max-width: 599px) {

    body .business-in-a-box-page
    .biab-foundation__intro {
        text-align: left !important;
        align-items: flex-start !important;
    }

    body .business-in-a-box-page
    .biab-foundation__eyebrow,
    body .business-in-a-box-page
    .biab-foundation__title,
    body .business-in-a-box-page
    .biab-foundation__body {
        text-align: left !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body .business-in-a-box-page
    .biab-foundation__title {
        max-width: 100% !important;
        text-wrap: pretty;
    }

}

/* =====================================================
   FRAYORA — BUSINESS IN A BOX
   BUILT FOR REAL TEAMS — IPHONE CAROUSEL FIX
   MOBILE ONLY: 599px AND BELOW
===================================================== */

@media screen and (max-width: 599px) {

    /* Prevent parent containers from forcing wide layouts */

    body .business-in-a-box-page .biab-proposal__inner,
    body .business-in-a-box-page .biab-proposal__steps {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Force a horizontal swipeable carousel */

    body .business-in-a-box-page .biab-proposal__steps {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        grid-template-columns: none !important;
        grid-auto-columns: auto !important;

        justify-content: flex-start !important;
        align-items: stretch !important;

        gap: 18px !important;

        width: 100% !important;
        margin: 36px 0 0 !important;
        padding: 12px 4px 28px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;

        scrollbar-width: auto;
        scrollbar-color: #B98569 rgba(185,133,105,.15);
    }

    /* Fix the cards being squeezed into thin columns */

    body .business-in-a-box-page
    .biab-proposal__steps > .biab-proposal__card {
        display: flex !important;
        flex-direction: column !important;

        flex: 0 0 84% !important;

        width: 84% !important;
        min-width: 84% !important;
        max-width: 84% !important;

        height: auto !important;
        min-height: 0 !important;

        padding: 26px 24px 30px !important;

        box-sizing: border-box !important;

        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    /* Restore normal title and paragraph wrapping */

    body .business-in-a-box-page .biab-proposal__card h3,
    body .business-in-a-box-page .biab-proposal__card p {
        width: 100% !important;
        max-width: 100% !important;

        overflow-wrap: normal !important;
        word-break: normal !important;
        white-space: normal !important;
    }

    body .business-in-a-box-page .biab-proposal__card h3 {
        font-size: 18px !important;
        line-height: 1.35 !important;
    }

    body .business-in-a-box-page .biab-proposal__card p {
        font-size: 13px !important;
        line-height: 1.7 !important;
    }

    /* Keep the arrows from overlapping card content */

    body .business-in-a-box-page
    .biab-proposal__card:not(:last-child)::after {
        display: none !important;
        content: none !important;
    }

    /* Style the native scrollbar */

    body .business-in-a-box-page
    .biab-proposal__steps::-webkit-scrollbar {
        height: 8px;
    }

    body .business-in-a-box-page
    .biab-proposal__steps::-webkit-scrollbar-track {
        background: rgba(185,133,105,.15);
        border-radius: 999px;
    }

    body .business-in-a-box-page
    .biab-proposal__steps::-webkit-scrollbar-thumb {
        background: #B98569;
        border-radius: 999px;
    }
}

/* =========================================================
   FRAYORA — WEBSITE & DIGITAL INFRASTRUCTURE
   SECTION 04 — IPHONE VERTICAL CONNECTOR FIX

   Mobile only: 599px and below
   Keeps horizontal dashed lines
   Restores vertical connections using backgrounds
========================================================= */

@media screen and (max-width: 599px) {

    body .digital-page .digital-system__connector {
        position: relative !important;
        display: block !important;

        width: 100% !important;
        height: 48px !important;
        min-height: 48px !important;

        flex: 0 0 48px !important;

        padding: 0 !important;

        overflow: visible !important;

        /* Vertical dashed centre line */
        background-image:
            repeating-linear-gradient(
                to bottom,
                rgba(144, 128, 105, 0.75) 0px,
                rgba(144, 128, 105, 0.75) 5px,
                transparent 5px,
                transparent 9px
            ) !important;

        background-repeat: no-repeat !important;
        background-size: 1.5px 100% !important;
        background-position: center center !important;
    }

    /* Keep horizontal dashed line */

    body .digital-page .digital-system__connector::before {
        content: "" !important;

        position: absolute !important;
        display: block !important;

        left: 5% !important;
        right: 5% !important;

        width: auto !important;
        height: 0 !important;

        border: 0 !important;
        border-top: 1.5px dashed
            rgba(144, 128, 105, 0.65) !important;
    }

    /* Prevent old vertical elements from interfering */

    body .digital-page .digital-system__connector::after,
    body .digital-page .digital-system__connector > span {
        content: none !important;
        display: none !important;
    }

    /* Upper connection */

    body .digital-page .digital-system__connector--top {
        margin-top: 13px !important;
        margin-bottom: 0 !important;
    }

    body .digital-page .digital-system__connector--top::before {
        top: 15px !important;
    }

    /* Lower connection */

    body .digital-page .digital-system__connector--bottom {
        margin-top: 0 !important;
        margin-bottom: 16px !important;
    }

    body .digital-page .digital-system__connector--bottom::before {
        top: 33px !important;
    }
}

/* =====================================================
   FRAYORA — WEBSITE & DIGITAL INFRASTRUCTURE
   SECTION 04 — MOBILE CONNECTOR REFINEMENT

   Remove vertical overshoot
   iPhone / Mobile: 599px and below
===================================================== */

@media screen and (max-width: 599px) {

    /* Keep the connector dimensions */

    body .digital-page .digital-system__connector {
        position: relative !important;
        height: 48px !important;
        min-height: 48px !important;

        /* Remove previous full-height vertical line */
        background-image: none !important;
    }

    /* Draw only the short vertical section */

    body .digital-page .digital-system__connector::after {
        content: "" !important;
        display: block !important;

        position: absolute !important;
        z-index: 2 !important;

        left: 50% !important;
        width: 2px !important;

        border: 0 !important;

        background: repeating-linear-gradient(
            to bottom,
            rgba(144,128,105,.75) 0 5px,
            transparent 5px 9px
        ) !important;

        transform: translateX(-50%) !important;
        pointer-events: none !important;
    }

    /* TOP: horizontal line to WEBSITE */

    body .digital-page
    .digital-system__connector--top::after {
        top: 15px !important;
        bottom: 0 !important;
        height: auto !important;
    }

    /* BOTTOM: WEBSITE to horizontal line */

    body .digital-page
    .digital-system__connector--bottom::after {
        top: 0 !important;
        height: 33px !important;
        bottom: auto !important;
    }

}

/* Compact phones */

@media screen and (max-width: 374px) {

    body .digital-page
    .digital-system__connector--top::after {
        top: 13px !important;
    }

    body .digital-page
    .digital-system__connector--bottom::after {
        height: 29px !important;
    }

}

/* ================================================
   FRAYORA — HOMEPAGE FINAL CTA
   MOBILE CENTER ALIGNMENT
   599px AND BELOW
================================================ */

@media screen and (max-width: 599px) {

    body .home-cta {
        text-align: center !important;
    }

    body .home-cta__inner {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 auto !important;
        text-align: center !important;
    }

    /* Decorative accent */
    body .home-cta__accent {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Heading and body copy */
    body .home-cta__title,
    body .home-cta__text,
    body .home-cta__text p {
        width: 100%;
        max-width: 100%;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }

    /* CTA button */
    body .home-cta__button-wrap {
        display: flex !important;
        justify-content: center !important;

        width: 100%;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body .home-cta__button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: fit-content !important;
        max-width: 100% !important;

        margin: 0 auto !important;
        text-align: center !important;
    }

}

/* ==========================================
   FRAYORA — BUSINESS IN A BOX
   PACKAGE ANCHOR SCROLL POSITIONING
========================================== */

#biab-packages,
#biab-p-foundation,
#biab-p-growth,
#biab-p-connected {
    scroll-margin-top: 110px;
}

@media (max-width: 599px) {
    #biab-packages,
    #biab-p-foundation,
    #biab-p-growth,
    #biab-p-connected {
        scroll-margin-top: 85px;
    }
}


/* =====================================================
   WEBSITE & DIGITAL INFRASTRUCTURE
   SECTION 02 — MOBILE ICON COLOURS

   01 — PEACH
   02 — SAGE
   03 — PEACH
   04 — SAGE

   MOBILE ONLY: 599px AND BELOW
===================================================== */

@media screen and (max-width: 599px) {

    /* PEACH — ICONS 01 AND 03 */
    body .digital-page
    .digital-design__item:nth-child(1) .digital-design__icon,
    body .digital-page
    .digital-design__item:nth-child(3) .digital-design__icon {
        background: linear-gradient(
            145deg,
            #FFF7EF 0%,
            #F3E2D5 60%,
            #EAD2C2 100%
        ) !important;

        border-color: rgba(181,143,119,.18) !important;
    }

    body .digital-page
    .digital-design__item:nth-child(1) .digital-design__icon svg,
    body .digital-page
    .digital-design__item:nth-child(3) .digital-design__icon svg {
        stroke: #84634E !important;
        color: #84634E !important;
    }

    /* SAGE — ICONS 02 AND 04 */
    body .digital-page
    .digital-design__item:nth-child(2) .digital-design__icon,
    body .digital-page
    .digital-design__item:nth-child(4) .digital-design__icon {
        background: linear-gradient(
            145deg,
            #F7F9F2 0%,
            #E6EBDD 55%,
            #D4DFC8 100%
        ) !important;

        border-color: rgba(111,137,101,.18) !important;
    }

    body .digital-page
    .digital-design__item:nth-child(2) .digital-design__icon svg,
    body .digital-page
    .digital-design__item:nth-child(4) .digital-design__icon svg {
        stroke: #566449 !important;
        color: #566449 !important;
    }
}


/* =====================================================================
   FRAYORA — GLOBAL CONTENT ALIGNMENT SYSTEM
   Linear-inspired narrow content frame (1,200px OUTER width)
   2026-10-22

   Scope: header, footer, editorial section INNER containers.
   Outer section backgrounds, hero media and full-width artwork stay full-bleed.
   Install at VERY END of main.css; do not change the PHP.
   This is a width-alignment foundation, not an exact copy of Linear's CSS.
===================================================================== */

:root {
    --fr-content-max: 1200px;
    --fr-gutter-desktop: 32px;
    --fr-gutter-tablet: 30px;
    --fr-gutter-mobile: 22px;
}

/* The full list is deliberately explicit: do not use [class*="__inner"],
   which would unexpectedly change components and carousels. */
body .about-final-cta__inner,
body .about-founder__inner,
body .about-hero__inner,
body .about-layer__inner,
body .about-method__inner,
body .about-summary__inner,
body .about-values-mission__inner,
body .about-why__inner,
body .biab-final-cta__inner,
body .biab-foundation__inner,
body .biab-hero__inner,
body .biab-hiw__inner,
body .biab-journey__inner,
body .biab-packages__inner,
body .biab-proposal__inner,
body .biab-stages__inner,
body .biab-transformation__inner,
body .bk-build__inner,
body .bk-final-cta__inner,
body .bk-hero__inner,
body .bk-outcome__inner,
body .bk-process__inner,
body .bk-solves__inner,
body .digital-benefits__inner,
body .digital-design__inner,
body .digital-final-cta__inner,
body .digital-hero__inner,
body .digital-process__inner,
body .digital-system__inner,
body .eks-final-cta__inner,
body .eks-hero__inner,
body .eks-impact__inner,
body .eks-path__inner,
body .eks-process__inner,
body .fc-booking__inner,
body .fc-inquiry__inner,
body .fc-options__inner,
body .fr-featured__inner,
body .fr-resources-cta__inner,
body .fr-resources-topics__inner,
body .frayora-biab-v4__inner,
body .frayora-connected-v3__inner,
body .frayora-home-hero__inner,
body .frayora-why-v3__inner,
body .frayora-work-v2__inner,
body .fw-final-cta__inner,
body .fw-final__inner,
body .fw-portfolio__inner,
body .fw-principles__inner,
body .home-approach__inner,
body .home-cta__inner,
body .home-why__inner,
body .home-work__inner,
body .infrastructure-section__inner,
body .oa-approach-cards__inner,
body .oa-compare__inner,
body .oa-difference__inner,
body .oa-final__inner,
body .oa-hero__inner,
body .oa-journey__inner,
body .oa-method__inner,
body .oi-approach__inner,
body .oi-cover__inner,
body .oi-final__inner,
body .oi-hero__inner,
body .oi-partner__inner,
body .oi-pricing__inner,
body .oi-real__inner,
body .oi-system__inner,
body .site-header__inner,
body .sops-build__inner,
body .sops-final-cta__inner,
body .sops-hero__inner,
body .sops-impact__inner,
body .sops-process__inner,
body .sops-solves__inner,
body .wf-benefits__inner,
body .wf-connected__inner,
body .wf-final-cta__inner,
body .wf-hero__inner,
body .wf-transformation__inner,
body .fw-final-cta__container,
body .site-footer__main,
body .site-footer__bottom {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: var(--fr-content-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--fr-gutter-desktop) !important;
    padding-right: var(--fr-gutter-desktop) !important;
}

/* Avoid desktop footer grid columns exceeding the new 1,200px frame. */
@media (min-width: 1101px) {
    body .site-footer__main {
        grid-template-columns: minmax(0,1.25fr) repeat(3,minmax(0,.8fr)) minmax(0,1.1fr) !important;
        gap: 24px !important;
    }
    body .site-footer__connect {
        padding-left: 24px !important;
        min-width: 0;
    }
}

@media (min-width: 600px) and (max-width: 1100px) {
body .about-final-cta__inner,
body .about-founder__inner,
body .about-hero__inner,
body .about-layer__inner,
body .about-method__inner,
body .about-summary__inner,
body .about-values-mission__inner,
body .about-why__inner,
body .biab-final-cta__inner,
body .biab-foundation__inner,
body .biab-hero__inner,
body .biab-hiw__inner,
body .biab-journey__inner,
body .biab-packages__inner,
body .biab-proposal__inner,
body .biab-stages__inner,
body .biab-transformation__inner,
body .bk-build__inner,
body .bk-final-cta__inner,
body .bk-hero__inner,
body .bk-outcome__inner,
body .bk-process__inner,
body .bk-solves__inner,
body .digital-benefits__inner,
body .digital-design__inner,
body .digital-final-cta__inner,
body .digital-hero__inner,
body .digital-process__inner,
body .digital-system__inner,
body .eks-final-cta__inner,
body .eks-hero__inner,
body .eks-impact__inner,
body .eks-path__inner,
body .eks-process__inner,
body .fc-booking__inner,
body .fc-inquiry__inner,
body .fc-options__inner,
body .fr-featured__inner,
body .fr-resources-cta__inner,
body .fr-resources-topics__inner,
body .frayora-biab-v4__inner,
body .frayora-connected-v3__inner,
body .frayora-home-hero__inner,
body .frayora-why-v3__inner,
body .frayora-work-v2__inner,
body .fw-final-cta__inner,
body .fw-final__inner,
body .fw-portfolio__inner,
body .fw-principles__inner,
body .home-approach__inner,
body .home-cta__inner,
body .home-why__inner,
body .home-work__inner,
body .infrastructure-section__inner,
body .oa-approach-cards__inner,
body .oa-compare__inner,
body .oa-difference__inner,
body .oa-final__inner,
body .oa-hero__inner,
body .oa-journey__inner,
body .oa-method__inner,
body .oi-approach__inner,
body .oi-cover__inner,
body .oi-final__inner,
body .oi-hero__inner,
body .oi-partner__inner,
body .oi-pricing__inner,
body .oi-real__inner,
body .oi-system__inner,
body .site-header__inner,
body .sops-build__inner,
body .sops-final-cta__inner,
body .sops-hero__inner,
body .sops-impact__inner,
body .sops-process__inner,
body .sops-solves__inner,
body .wf-benefits__inner,
body .wf-connected__inner,
body .wf-final-cta__inner,
body .wf-hero__inner,
body .wf-transformation__inner,
body .fw-final-cta__container,
body .site-footer__main,
body .site-footer__bottom {
        padding-left: var(--fr-gutter-tablet) !important;
        padding-right: var(--fr-gutter-tablet) !important;
    }
}

@media (max-width: 599px) {
body .about-final-cta__inner,
body .about-founder__inner,
body .about-hero__inner,
body .about-layer__inner,
body .about-method__inner,
body .about-summary__inner,
body .about-values-mission__inner,
body .about-why__inner,
body .biab-final-cta__inner,
body .biab-foundation__inner,
body .biab-hero__inner,
body .biab-hiw__inner,
body .biab-journey__inner,
body .biab-packages__inner,
body .biab-proposal__inner,
body .biab-stages__inner,
body .biab-transformation__inner,
body .bk-build__inner,
body .bk-final-cta__inner,
body .bk-hero__inner,
body .bk-outcome__inner,
body .bk-process__inner,
body .bk-solves__inner,
body .digital-benefits__inner,
body .digital-design__inner,
body .digital-final-cta__inner,
body .digital-hero__inner,
body .digital-process__inner,
body .digital-system__inner,
body .eks-final-cta__inner,
body .eks-hero__inner,
body .eks-impact__inner,
body .eks-path__inner,
body .eks-process__inner,
body .fc-booking__inner,
body .fc-inquiry__inner,
body .fc-options__inner,
body .fr-featured__inner,
body .fr-resources-cta__inner,
body .fr-resources-topics__inner,
body .frayora-biab-v4__inner,
body .frayora-connected-v3__inner,
body .frayora-home-hero__inner,
body .frayora-why-v3__inner,
body .frayora-work-v2__inner,
body .fw-final-cta__inner,
body .fw-final__inner,
body .fw-portfolio__inner,
body .fw-principles__inner,
body .home-approach__inner,
body .home-cta__inner,
body .home-why__inner,
body .home-work__inner,
body .infrastructure-section__inner,
body .oa-approach-cards__inner,
body .oa-compare__inner,
body .oa-difference__inner,
body .oa-final__inner,
body .oa-hero__inner,
body .oa-journey__inner,
body .oa-method__inner,
body .oi-approach__inner,
body .oi-cover__inner,
body .oi-final__inner,
body .oi-hero__inner,
body .oi-partner__inner,
body .oi-pricing__inner,
body .oi-real__inner,
body .oi-system__inner,
body .site-header__inner,
body .sops-build__inner,
body .sops-final-cta__inner,
body .sops-hero__inner,
body .sops-impact__inner,
body .sops-process__inner,
body .sops-solves__inner,
body .wf-benefits__inner,
body .wf-connected__inner,
body .wf-final-cta__inner,
body .wf-hero__inner,
body .wf-transformation__inner,
body .fw-final-cta__container,
body .site-footer__main,
body .site-footer__bottom {
        padding-left: var(--fr-gutter-mobile) !important;
        padding-right: var(--fr-gutter-mobile) !important;
    }
}

/* The page header/footer outer surfaces remain viewport-wide.
   Do not apply max-width to .site-header, .site-footer or section tags. */


/* =============================================================
   FRAYORA — HEADER CONTENT FRAME, MATCH GLOBAL 1200px SYSTEM
   The section/footer system uses an OUTER 1200px max-width and
   32/30/22px inner gutters. Override legacy 1600px header rule.
   No changes to logo, navigation, buttons or full-width background.
============================================================= */

/* All breakpoints: same content frame geometry as page sections. */
html body .site-header .site-header__inner {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: var(--fr-content-max, 1200px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--fr-gutter-desktop, 32px) !important;
    padding-right: var(--fr-gutter-desktop, 32px) !important;
}

/* Keep desktop header layout, but within the identical content edges. */
@media screen and (min-width: 1101px) {
    html body .site-header .site-header__inner {
        padding-left: var(--fr-gutter-desktop, 32px) !important;
        padding-right: var(--fr-gutter-desktop, 32px) !important;
    }
}

@media screen and (min-width: 600px) and (max-width: 1100px) {
    html body .site-header .site-header__inner {
        padding-left: var(--fr-gutter-tablet, 30px) !important;
        padding-right: var(--fr-gutter-tablet, 30px) !important;
    }
}

@media screen and (max-width: 599px) {
    html body .site-header .site-header__inner {
        padding-left: var(--fr-gutter-mobile, 22px) !important;
        padding-right: var(--fr-gutter-mobile, 22px) !important;
    }
}


/* =====================================================
   FRAYORA — ABOUT US
   SECTION 05 — THE MISSING LAYER

   Smaller icons inside THE FRAYORA APPROACH card
   All screen sizes
===================================================== */

/* Keep the five icons in one contained row */

body .about-us-page
.about-layer__symbols--connected {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 4px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* Reduce each circular icon */

body .about-us-page
.about-layer__symbols--connected
.about-layer__symbol--approach {
    flex: 0 1 36px !important;

    width: 36px !important;
    height: 36px !important;
    min-width: 0 !important;
    min-height: 36px !important;

    padding: 8px !important;
    margin: 0 !important;

    border-radius: 50% !important;
    box-sizing: border-box !important;
}

/* Reduce the artwork inside the circles */

body .about-us-page
.about-layer__symbol--approach svg {
    display: block !important;

    width: 19px !important;
    height: 19px !important;
    max-width: 100% !important;

    flex-shrink: 0 !important;
}

/* Tablet */

@media screen and (min-width: 600px) and (max-width: 1100px) {

    body .about-us-page
    .about-layer__symbols--connected
    .about-layer__symbol--approach {
        flex-basis: 34px !important;
        width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        padding: 7px !important;
    }

    body .about-us-page
    .about-layer__symbol--approach svg {
        width: 18px !important;
        height: 18px !important;
    }
}

/* Mobile */

@media screen and (max-width: 599px) {

    body .about-us-page
    .about-layer__symbols--connected {
        gap: 3px !important;
    }

    body .about-us-page
    .about-layer__symbols--connected
    .about-layer__symbol--approach {
        flex-basis: 32px !important;
        width: 32px !important;
        height: 32px !important;
        min-height: 32px !important;
        padding: 7px !important;
    }

    body .about-us-page
    .about-layer__symbol--approach svg {
        width: 17px !important;
        height: 17px !important;
    }
}

/* =====================================================
   FRAYORA — ABOUT US
   SECTION 05 — THE MISSING LAYER

   FIX THE OLD WAY ICON OVERFLOW
   Desktop, tablet and mobile
===================================================== */

/* Keep all five app icons within the card */

body .about-us-page .about-layer__symbols--apps {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    gap: 4px !important;
    box-sizing: border-box !important;
}

/* Smaller square icon containers */

body .about-us-page
.about-layer__symbols--apps
.about-layer__symbol--app {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 1 34px !important;

    width: 34px !important;
    height: 34px !important;
    min-width: 0 !important;
    min-height: 34px !important;

    padding: 5px !important;
    margin: 0 !important;

    border-radius: 9px !important;
    box-sizing: border-box !important;
}

/* Smaller app logos */

body .about-us-page
.about-layer__symbols--apps
.about-layer__symbol--app img {
    display: block !important;
    width: 21px !important;
    height: 21px !important;
    max-width: 100% !important;

    object-fit: contain !important;
}

/* Make the three dots fit too */

body .about-us-page
.about-layer__symbols--apps
.about-layer__symbol--dots svg {
    width: 18px !important;
    height: 18px !important;
    max-width: 100% !important;
}

/* Very narrow screens */

@media screen and (max-width: 599px) {

    body .about-us-page .about-layer__symbols--apps {
        gap: 3px !important;
    }

    body .about-us-page
    .about-layer__symbols--apps
    .about-layer__symbol--app {
        flex-basis: 30px !important;
        width: 30px !important;
        height: 30px !important;
        min-height: 30px !important;

        padding: 4px !important;
    }

    body .about-us-page
    .about-layer__symbols--apps
    .about-layer__symbol--app img,
    body .about-us-page
    .about-layer__symbols--apps
    .about-layer__symbol--dots svg {
        width: 18px !important;
        height: 18px !important;
    }
}

/* =========================================================
   FRAYORA — CONTACT US
   SECTION 03 — START A PROJECT

   GLOBAL ALIGNMENT FIX
   Matches header, sections and footer

   Desktop: 1200px outer frame / 32px gutters
   Tablet: 30px gutters
   Mobile: 22px gutters
========================================================= */


/* DESKTOP — 1101px AND ABOVE */

@media screen and (min-width: 1101px) {

    body .frayora-contact-page .fc-inquiry__inner {
        width: 100% !important;
        max-width: 1200px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding-left: 32px !important;
        padding-right: 32px !important;

        box-sizing: border-box !important;

        display: grid !important;

        grid-template-columns:
            minmax(0, 360px)
            minmax(0, 1fr) !important;

        gap: 48px !important;

        justify-content: stretch !important;
        align-items: start !important;
    }

    /* Align left editorial copy to the global boundary */

    body .frayora-contact-page .fc-inquiry__intro {
        width: 100% !important;
        max-width: 360px !important;

        justify-self: start !important;
        align-self: start !important;

        margin: 0 !important;
        padding-top: 42px !important;
    }

    /* Keep form inside the shared content frame */

    body .frayora-contact-page .fc-inquiry__form-shell {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        justify-self: stretch !important;

        box-sizing: border-box !important;
    }
}


/* TABLET — 600px TO 1100px */

@media screen and (min-width: 600px) and (max-width: 1100px) {

    body .frayora-contact-page .fc-inquiry__inner {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;

        width: 100% !important;
        max-width: 1200px !important;

        margin: 0 auto !important;
        padding-left: 30px !important;
        padding-right: 30px !important;

        gap: 36px !important;
        box-sizing: border-box !important;
    }

    body .frayora-contact-page .fc-inquiry__intro {
        width: 100% !important;
        max-width: 650px !important;

        margin: 0 !important;
        padding-top: 0 !important;
        justify-self: start !important;
    }

    body .frayora-contact-page .fc-inquiry__form-shell {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        box-sizing: border-box !important;
    }
}


/* MOBILE — 599px AND BELOW */

@media screen and (max-width: 599px) {

    body .frayora-contact-page .fc-inquiry__inner {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 auto !important;
        padding-left: 22px !important;
        padding-right: 22px !important;

        gap: 30px !important;
        box-sizing: border-box !important;
    }

    body .frayora-contact-page .fc-inquiry__intro {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding-top: 0 !important;
        justify-self: start !important;
    }

    body .frayora-contact-page .fc-inquiry__form-shell {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        box-sizing: border-box !important;
    }
}



/* =========================================================
   FRAYORA — GLOBAL FOOTER
   DESKTOP COLUMN DISTRIBUTION FIX

   - Maintain global 1200px outer width
   - Align with header and page sections
   - Spread columns across the available width
   - Preserve existing typography, colours and links
   - Desktop only: 1101px+
========================================================= */

@media screen and (min-width: 1101px) {

    /* Global footer layout */

    body .site-footer .site-footer__main {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1.55fr)
            minmax(0, 1.10fr)
            minmax(0, 0.85fr)
            minmax(0, 0.85fr) !important;

        column-gap: clamp(38px, 4vw, 70px) !important;
        row-gap: 0 !important;

        width: 100% !important;
        max-width: 1200px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding-left: 32px !important;
        padding-right: 32px !important;

        box-sizing: border-box !important;
        justify-content: stretch !important;
        align-items: start !important;
    }

    /* 01 — FRAYORA INTRODUCTION */

    body .site-footer .site-footer__intro {
        grid-column: 1 !important;
        grid-row: 1 !important;

        min-width: 0 !important;
        width: 100% !important;
    }

    /* 02 — SERVICES */

    body .site-footer .site-footer__services {
        grid-column: 2 !important;
        grid-row: 1 !important;

        min-width: 0 !important;
        width: 100% !important;

        margin: 0 !important;
        padding-left: 0 !important;
    }

    /* 03 — COMPANY */

    body .site-footer .site-footer__company {
        grid-column: 3 !important;
        grid-row: 1 !important;

        min-width: 0 !important;
        width: 100% !important;

        margin: 0 !important;
        padding-left: 0 !important;
    }

    /* 04 — RESOURCES */

    body .site-footer .site-footer__resources {
        grid-column: 4 !important;
        grid-row: 1 !important;

        min-width: 0 !important;
        width: 100% !important;

        margin: 0 !important;
        padding-left: 0 !important;
    }

    /* Prevent the legacy fifth-column rule
       from affecting the current footer. */

    body .site-footer .site-footer__main > * {
        min-width: 0;
    }

    /* Footer legal section:
       retain identical content boundaries */

    body .site-footer .site-footer__bottom {
        width: 100% !important;
        max-width: 1200px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding-left: 32px !important;
        padding-right: 32px !important;

        box-sizing: border-box !important;
    }

}

/* =======================================================================
   FRAYORA | GLOBAL TYPOGRAPHY & CTA SIZE SYSTEM v1
   Appended to latest user-supplied main.css. Tested syntactically, not
   visually against the live WordPress site.

   BREAKPOINTS: Desktop >=1101; Tablet 600–1100; Mobile <=599.
   SCOPE: named hero text, SECTION INTRO text, FINAL CTA text, primary
   buttons. Does NOT change card interior typography, page widths,
   text alignment, backgrounds, positioning, page PHP, or animations.
   These are shared design tokens, not a full destructive CSS refactor.
======================================================================== */

:root {
    --fr-type-hero-title: 64px;
    --fr-type-hero-eyebrow: 12px;
    --fr-type-hero-body: 16px;
    --fr-type-section-title: 42px;
    --fr-type-section-eyebrow: 12px;
    --fr-type-section-body: 15px;
    --fr-type-final-title: 50px;
    --fr-type-final-body: 17px;
    --fr-btn-text: 14px;
    --fr-btn-height: 52px;
    --fr-btn-padx: 28px;
    --fr-btn-gap: 12px;
}

@media (min-width: 600px) and (max-width: 1100px) {
  :root {
    --fr-type-hero-title: 50px;
    --fr-type-hero-body: 15px;
    --fr-type-section-title: 36px;
    --fr-type-section-body: 15px;
    --fr-type-final-title: 42px;
    --fr-type-final-body: 16px;
    --fr-btn-text: 14px;
    --fr-btn-height: 48px;
    --fr-btn-padx: 24px;
  }
}

@media (max-width: 599px) {
  :root {
    --fr-type-hero-title: 39px;
    --fr-type-hero-body: 15px;
    --fr-type-section-title: 31px;
    --fr-type-section-body: 14px;
    --fr-type-final-title: 35px;
    --fr-type-final-body: 15px;
    --fr-btn-text: 13px;
    --fr-btn-height: 46px;
    --fr-btn-padx: 20px;
    --fr-btn-gap: 9px;
  }
}


/* 01 HERO EYEBROWS (8 scoped selectors) */
body .biab-hero__eyebrow,
body .digital-hero__eyebrow,
body .bk-hero__eyebrow,
body .eks-hero__eyebrow,
body .sops-hero__eyebrow,
body .wf-hero__eyebrow,
body .oi-hero__eyebrow,
body .oa-hero__eyebrow {
    font-family: "Inter", sans-serif !important;
    font-size: var(--fr-type-hero-eyebrow) !important;
    font-weight: 600 !important;
    letter-spacing: 0.11em !important;
    line-height: 1.45 !important;
}


/* 02 HERO HEADINGS (10 scoped selectors) */
body .frayora-home-hero__title,
body .biab-hero__title,
body .digital-hero__title,
body .bk-hero__title,
body .eks-hero__title,
body .sops-hero__title,
body .wf-hero__title,
body .oi-hero__title,
body .oa-hero__title,
body .about-hero__title {
    font-family: "Manrope", sans-serif !important;
    font-size: var(--fr-type-hero-title) !important;
    font-weight: 600 !important;
    letter-spacing: -0.052em !important;
    line-height: 1.08 !important;
}


/* 03 HERO BODY (9 scoped selectors) */
body .frayora-home-hero__description,
body .biab-hero__body,
body .digital-hero__body,
body .bk-hero__body,
body .eks-hero__body,
body .sops-hero__body,
body .wf-hero__body,
body .oi-hero__body,
body .oa-hero__copy {
    font-family: "Inter", sans-serif !important;
    font-size: var(--fr-type-hero-body) !important;
    line-height: 1.7 !important;
}


/* 03B HERO BODY PARAGRAPHS (1 scoped selectors) */
body .oa-hero__copy p {
    font-family: "Inter", sans-serif !important;
    font-size: var(--fr-type-hero-body) !important;
    line-height: 1.7 !important;
}


/* 04 SECTION EYEBROWS (54 scoped selectors) */
body .about-founder__eyebrow,
body .about-layer__eyebrow,
body .about-method__eyebrow,
body .about-missing-layer__eyebrow,
body .about-values-mission__eyebrow,
body .about-why__eyebrow,
body .biab-foundation__eyebrow,
body .biab-hiw__eyebrow,
body .biab-journey__eyebrow,
body .biab-packages__eyebrow,
body .biab-proposal__eyebrow,
body .biab-stages__eyebrow,
body .biab-transformation__eyebrow,
body .bk-build__eyebrow,
body .bk-outcome__eyebrow,
body .bk-process__eyebrow,
body .bk-solves__eyebrow,
body .digital-benefits__eyebrow,
body .digital-design__eyebrow,
body .digital-process__eyebrow,
body .digital-system__eyebrow,
body .eks-impact__eyebrow,
body .eks-process__eyebrow,
body .fc-booking__eyebrow,
body .fc-inquiry__eyebrow,
body .fc-options__eyebrow,
body .fr-featured__eyebrow,
body .fr-resources-topics__eyebrow,
body .frayora-biab-v4__eyebrow,
body .frayora-connected-v3__eyebrow,
body .frayora-why-v3__eyebrow,
body .frayora-work-v2__eyebrow,
body .fw-portfolio__eyebrow,
body .home-approach__eyebrow,
body .home-why__eyebrow,
body .home-work__eyebrow,
body .infrastructure-section__eyebrow,
body .oa-approach-cards__eyebrow,
body .oa-compare__eyebrow,
body .oa-difference__eyebrow,
body .oa-journey__eyebrow,
body .oa-method__eyebrow,
body .oi-approach__eyebrow,
body .oi-cover__eyebrow,
body .oi-partner__eyebrow,
body .oi-pricing__eyebrow,
body .oi-real__eyebrow,
body .oi-system__eyebrow,
body .sops-build__eyebrow,
body .sops-impact__eyebrow,
body .sops-process__eyebrow,
body .sops-solves__eyebrow,
body .wf-connected__eyebrow,
body .wf-transformation__eyebrow {
    font-family: "Inter", sans-serif !important;
    font-size: var(--fr-type-section-eyebrow) !important;
    font-weight: 600 !important;
    letter-spacing: 0.11em !important;
    line-height: 1.45 !important;
}


/* 05 SECTION HEADINGS (59 scoped selectors) */
body .about-founder__title,
body .about-layer__title,
body .about-method__heading,
body .about-missing-layer__heading,
body .about-values-mission__heading,
body .about-why__heading,
body .about-why__title,
body .biab-foundation__title,
body .biab-hiw__title,
body .biab-journey__title,
body .biab-packages__title,
body .biab-proposal__title,
body .biab-stages__title,
body .biab-transformation__title,
body .bk-build__title,
body .bk-outcome__title,
body .bk-process__title,
body .bk-solves__title,
body .digital-benefits__title,
body .digital-design__title,
body .digital-process__title,
body .digital-system__title,
body .eks-impact__title,
body .eks-process__title,
body .fc-booking__title,
body .fc-inquiry__title,
body .fc-options__heading,
body .fr-featured__heading,
body .fr-resources-topics__heading,
body .frayora-biab-v4__heading,
body .frayora-biab-v4__title,
body .frayora-connected-v3__title,
body .frayora-why-v3__title,
body .frayora-work-v2__heading,
body .frayora-work-v2__title,
body .fw-final-cta__title,
body .fw-portfolio__title,
body .home-approach__title,
body .home-why__title,
body .home-work__heading,
body .home-work__title,
body .infrastructure-section__heading,
body .oa-approach-cards__title,
body .oa-compare__heading,
body .oa-difference__title,
body .oa-journey__heading,
body .oa-method__title,
body .oi-approach__title,
body .oi-partner__title,
body .oi-pricing__title,
body .oi-real__title,
body .oi-system__title,
body .sops-build__title,
body .sops-impact__title,
body .sops-process__title,
body .sops-solves__title,
body .wf-benefits__title,
body .wf-connected__title,
body .wf-transformation__title {
    font-family: "Manrope", sans-serif !important;
    font-size: var(--fr-type-section-title) !important;
    font-weight: 600 !important;
    letter-spacing: -0.046em !important;
    line-height: 1.16 !important;
}


/* 06 SECTION INTRO BODY (37 scoped selectors) */
body .about-layer__body,
body .about-founder__body,
body .about-method__description,
body .about-values-mission__description,
body .biab-foundation__body,
body .biab-journey__description,
body .biab-stages__copy,
body .biab-proposal__body,
body .biab-transformation__body,
body .bk-process__body,
body .bk-outcome__body,
body .digital-design__body,
body .digital-process__body,
body .digital-system__body,
body .eks-impact__description,
body .eks-process__description,
body .fc-inquiry__copy,
body .fc-booking__description,
body .fc-options__intro-description,
body .fr-featured__description,
body .frayora-biab-v4__description,
body .frayora-work-v2__description,
body .frayora-why-v3__copy,
body .home-approach__description,
body .home-why__copy,
body .home-work__description,
body .oa-method__description,
body .oa-difference__description,
body .oa-journey__description,
body .oi-approach__description,
body .oi-partner__description,
body .oi-system__body,
body .sops-build__description,
body .sops-process__description,
body .wf-connected__description,
body .wf-transformation__description,
body .wf-benefits__description {
    font-family: "Inter", sans-serif !important;
    font-size: var(--fr-type-section-body) !important;
    line-height: 1.75 !important;
}


/* 06B SECTION INTRO PARAGRAPHS (4 scoped selectors) */
body .about-layer__body p,
body .about-founder__body p,
body .fc-inquiry__copy p,
body .home-why__copy p {
    font-size: var(--fr-type-section-body) !important;
    line-height: 1.75 !important;
}


/* 07 FINAL CTA EYEBROWS (2 scoped selectors) */
body .biab-final-cta__eyebrow,
body .wf-final-cta__eyebrow {
    font-family: "Inter", sans-serif !important;
    font-size: var(--fr-type-section-eyebrow) !important;
    font-weight: 600 !important;
    letter-spacing: 0.11em !important;
    line-height: 1.45 !important;
}


/* 08 FINAL CTA HEADINGS (13 scoped selectors) */
body .home-cta__title,
body .biab-final-cta__title,
body .digital-final-cta__title,
body .bk-final-cta__title,
body .eks-final-cta__title,
body .sops-final-cta__title,
body .wf-final-cta__title,
body .oi-final__title,
body .oa-final__title,
body .about-final-cta__heading,
body .fr-resources-cta__title,
body .fw-final-cta__heading,
body .fw-final__title {
    font-family: "Manrope", sans-serif !important;
    font-size: var(--fr-type-final-title) !important;
    font-weight: 600 !important;
    letter-spacing: -0.051em !important;
    line-height: 1.12 !important;
}


/* 09 FINAL CTA BODY (10 scoped selectors) */
body .home-cta__text,
body .biab-final-cta__body,
body .biab-final-cta__support,
body .wf-final-cta__body,
body .oi-final__body,
body .oa-final__description,
body .about-final-cta__description,
body .fr-resources-cta__description,
body .fw-final-cta__description,
body .fw-final__description {
    font-family: "Inter", sans-serif !important;
    font-size: var(--fr-type-final-body) !important;
    line-height: 1.7 !important;
}


/* 09B FINAL CTA PARAGRAPHS (1 scoped selectors) */
body .home-cta__text p {
    font-size: var(--fr-type-final-body) !important;
    line-height: 1.7 !important;
}


/* 10 PRIMARY BUTTON SIZING (29 scoped selectors) */
body .header-cta,
body .fc-inquiry__submit,
body .fc-booking__button,
body .fc-options__button,
body .site-footer__book,
body .about-final-cta__button,
body .biab-final-cta__button,
body .biab-hero__button,
body .bk-final-cta__button,
body .bk-hero__button,
body .digital-final-cta__button,
body .digital-hero__button,
body .eks-final-cta__button,
body .eks-hero__button,
body .fr-resources-cta__button,
body .frayora-home-hero__button,
body .fw-final-cta__button,
body .home-approach__button,
body .home-cta__button,
body .oa-final__button,
body .oa-hero__button,
body .oi-final__button,
body .oi-hero__button,
body .sops-final-cta__button,
body .sops-hero__button,
body .wf-final-cta__button,
body .wf-hero__button {
    font-family: "Manrope", sans-serif !important;
    font-size: var(--fr-btn-text) !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    min-height: var(--fr-btn-height) !important;
    padding-left: var(--fr-btn-padx) !important;
    padding-right: var(--fr-btn-padx) !important;
    box-sizing: border-box !important;
    gap: var(--fr-btn-gap) !important;
}


/* Preserve existing button label sizing even when wrapped in spans. */

body .header-cta > span:first-child,
body .fc-booking__button > span:first-child,
body .fc-options__button > span:first-child,
body .site-footer__book > span:first-child,
body .about-final-cta__button > span:first-child,
body .biab-final-cta__button > span:first-child,
body .biab-hero__button > span:first-child,
body .bk-final-cta__button > span:first-child,
body .bk-hero__button > span:first-child,
body .digital-final-cta__button > span:first-child,
body .digital-hero__button > span:first-child,
body .eks-final-cta__button > span:first-child,
body .eks-hero__button > span:first-child,
body .fr-resources-cta__button > span:first-child,
body .frayora-home-hero__button > span:first-child,
body .fw-final-cta__button > span:first-child,
body .home-approach__button > span:first-child,
body .home-cta__button > span:first-child,
body .oa-final__button > span:first-child,
body .oa-hero__button > span:first-child,
body .oi-final__button > span:first-child,
body .oi-hero__button > span:first-child,
body .sops-final-cta__button > span:first-child,
body .sops-hero__button > span:first-child,
body .wf-final-cta__button > span:first-child,
body .wf-hero__button > span:first-child {
    font-size: inherit !important;
    line-height: inherit !important;
}


/* Keyboard accessibility: do not suppress existing focus rings. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}


/* =====================================================
   FRAYORA — HOMEPAGE SECTION 04
   BUSINESS-IN-A-BOX — TABLET BUTTON CLIPPING FIX

   Tablet only: 600px–1100px
   Preserve carousel and global typography
===================================================== */

@media screen and (min-width: 600px) and (max-width: 1100px) {

    /* Let cards grow to contain text and buttons */

    body .frayora-biab-v4__packages
    > .frayora-biab-v4__card {
        height: auto !important;
        min-height: 430px !important;

        padding-bottom: 32px !important;

        display: flex !important;
        flex-direction: column !important;

        align-self: stretch !important;

        box-sizing: border-box !important;
    }

    /* Keep the Learn More button inside each card */

    body .frayora-biab-v4__card
    .frayora-biab-v4__learn {
        flex-shrink: 0 !important;

        margin-top: auto !important;
        margin-bottom: 0 !important;

        min-height: 48px !important;

        position: relative !important;
        z-index: 3 !important;
    }

    /* Maintain spacing above the button */

    body .frayora-biab-v4__card
    .frayora-biab-v4__description {
        margin-bottom: 26px !important;
    }

    /* Preserve horizontal swipe functionality */

    body .frayora-biab-v4__packages {
        align-items: stretch !important;

        overflow-x: scroll !important;
        overflow-y: hidden !important;

        padding-bottom: 24px !important;
    }
}

/* =========================================
   BUSINESS KNOWLEDGE & ORGANIZATION
   HERO VISUAL — SLIGHTLY SMALLER
========================================= */

/* Desktop */
@media screen and (min-width: 1101px) {
    body .bk-hero__visual {
        width: min(38vw, 610px) !important;
        height: 450px !important;
    }
}

/* Tablet */
@media screen and (min-width: 600px) and (max-width: 1100px) {
    body .bk-hero__visual {
        width: clamp(320px, 53vw, 580px) !important;
        max-width: 100% !important;
        height: clamp(280px, 42vw, 460px) !important;
    }
}

/* Mobile */
@media screen and (max-width: 599px) {
    body .bk-hero__visual {
        width: 92% !important;
        max-width: 380px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}


/* =====================================================
   FRAYORA — OUR WORK
   SECTION 02 — MOBILE PROJECT FILTER DROPDOWN
   Mobile only: 599px and below
===================================================== */

/* Hidden on desktop and tablet */

body .frayora-work-page .fw-portfolio__mobile-select {
    display: none;
}

@media screen and (max-width: 599px) {

    /* Hide original buttons ONLY once the dropdown is ready */

    body .frayora-work-page
    .fw-portfolio__filters.is-mobile-enhanced {
        display: none !important;
    }

    /* Dropdown container */

    body .frayora-work-page
    .fw-portfolio__mobile-select {
        position: relative;
        display: block;

        width: 100%;
        max-width: 100%;

        margin: 0 0 32px;
    }

    /* Native dropdown */

    body .frayora-work-page
    .fw-portfolio__mobile-select select {
        display: block;

        width: 100%;
        min-height: 52px;

        padding: 0 48px 0 19px;

        border: 1px solid rgba(48,59,50,.20);
        border-radius: 14px;

        background: #FFFCF7;
        color: #303B32;

        font-family: "Inter", sans-serif;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.4;

        appearance: none;
        -webkit-appearance: none;

        box-shadow:
            0 7px 20px rgba(42,39,30,.045),
            inset 0 1px 0 rgba(255,255,255,.85);

        cursor: pointer;
        box-sizing: border-box;
    }

    /* Dropdown arrow */

    body .frayora-work-page
    .fw-portfolio__mobile-select::after {
        content: "";
        position: absolute;

        top: 50%;
        right: 21px;

        width: 9px;
        height: 9px;

        border-right: 1.8px solid #566449;
        border-bottom: 1.8px solid #566449;

        transform: translateY(-70%) rotate(45deg);
        pointer-events: none;
    }

    body .frayora-work-page
    .fw-portfolio__mobile-select select:focus-visible {
        outline: 2px solid #C96743;
        outline-offset: 3px;
    }
}


/* =====================================================
   FRAYORA — GLOBAL HEADER LOGO SIZE REFINEMENT

   Preserve existing header alignment and spacing
   Desktop + tablet only
   Mobile symbol-only logo remains unchanged
===================================================== */

/* DESKTOP — 1101px AND ABOVE */
@media screen and (min-width: 1101px) {

    html body .site-header .site-logo {
        width: 170px !important;
        max-width: 170px !important;
        flex-shrink: 0 !important;
    }

    html body .site-header .site-logo picture,
    html body .site-header .site-logo img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }
}

/* TABLET — 600px TO 1100px */
@media screen and (min-width: 600px) and (max-width: 1100px) {

    html body .site-header .site-logo {
        width: 155px !important;
        max-width: 155px !important;
        flex-shrink: 0 !important;
    }

    html body .site-header .site-logo picture,
    html body .site-header .site-logo img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }
}


/* =====================================================
   FRAYORA — MOBILE HEADER LOGO FIX
   Mobile only: 0–599px

   - Smaller symbol-only logo
   - Vertically centered
   - No overflow into hero
   - Preserve global header alignment
===================================================== */

@media screen and (max-width: 599px) {

    /* Keep the existing mobile header height */

    html body .site-header {
        height: 68px;
    }

    /* Preserve global 22px alignment */

    html body .site-header .site-header__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;

        height: 100%;

        padding-left: 22px !important;
        padding-right: 22px !important;

        box-sizing: border-box;
    }

    /* Contain the symbol within the header */

    html body .site-header .site-logo {
        display: flex !important;
        align-items: center;
        justify-content: flex-start;

        width: 74px !important;
        max-width: 74px !important;
        height: 52px !important;

        flex: 0 0 74px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    /* Picture wrapper */

    html body .site-header .site-logo picture {
        display: flex !important;
        align-items: center;
        justify-content: flex-start;

        width: 100% !important;
        height: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    /* Mobile symbol image */

    html body .site-header .site-logo picture img {
        display: block !important;

        width: 74px !important;
        max-width: 74px !important;

        height: 52px !important;
        max-height: 52px !important;

        object-fit: contain !important;
        object-position: left center !important;

        margin: 0 !important;
        padding: 0 !important;

        filter: none !important;
    }

    /* Keep hamburger neatly aligned */

    html body .site-header .site-header__actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;

        margin-left: auto;
    }

    html body .site-header .menu-toggle {
        flex-shrink: 0;
    }
}

/* =====================================================
   FRAYORA — BON D-INSPIRED RESPONSIVE HEADER
   TABLET + MOBILE: 1100px AND BELOW
   DESKTOP HEADER REMAINS UNCHANGED
===================================================== */

.fr-header-contact-toggle,
.fr-header-contact-overlay[hidden] {
    display: none !important;
}

@media screen and (max-width: 1100px) {

    body .site-header {
        position: relative;
        z-index: 1000;
        height: 78px;
        background: #FFFCF8;
        border-bottom: 1px solid rgba(31,33,29,.08);
    }

    body .site-header .site-header__inner {
        position: relative;
        display: grid;
        grid-template-columns: 52px minmax(0, 1fr) 52px;
        align-items: center;
        gap: 12px;

        width: 100%;
        max-width: 1200px;
        height: 78px;

        margin: 0 auto;
        padding: 0 var(--fr-gutter-tablet, 30px) !important;
        box-sizing: border-box;
    }

    /* Center the logo independently of the side buttons */

    body .site-header .site-logo {
        grid-column: 2;
        grid-row: 1;
        justify-self: center;

        width: 155px !important;
        max-width: 155px !important;
        height: 58px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center;
        justify-content: center;
        min-width: 0;
    }

    body .site-header .site-logo picture {
        display: flex !important;
        align-items: center;
        justify-content: center;

        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
    }

    body .site-header .site-logo picture img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 58px !important;

        object-fit: contain !important;
        object-position: center !important;

        margin: 0 !important;
        padding: 0 !important;
        filter: none !important;
    }

    /* Keep actions from disturbing logo centering */

    body .site-header .site-header__actions {
        display: contents;
    }

    body .site-header .header-cta {
        display: none !important;
    }

    /* Hamburger — LEFT */

    body .site-header .menu-toggle {
        grid-column: 1;
        grid-row: 1;

        display: flex !important;
        align-items: center;
        justify-content: center;

        width: 52px !important;
        height: 52px !important;
        min-width: 52px;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        border-radius: 50% !important;

        background: #344532 !important;
        color: #FFFFFF !important;

        font-family: "Inter", sans-serif;
        font-size: 25px !important;
        line-height: 1 !important;
        cursor: pointer;
        box-shadow: 0 5px 14px rgba(35,45,34,.12);
    }

    /* Message icon — RIGHT */

    body .site-header .fr-header-contact-toggle {
        grid-column: 3;
        grid-row: 1;

        display: flex !important;
        align-items: center;
        justify-content: center;

        width: 52px;
        height: 52px;

        margin: 0;
        padding: 0;

        border: 0;
        border-radius: 50%;

        background: #C96743;
        color: #FFFFFF;

        cursor: pointer;
        box-shadow: 0 5px 14px rgba(201,103,67,.17);
    }

    .fr-header-contact-toggle svg {
        display: block;
        width: 23px;
        height: 23px;
    }

    body .site-header .site-nav {
        display: none;
    }
}

/* MOBILE — 599px AND BELOW */

@media screen and (max-width: 599px) {

    body .site-header {
        height: 68px;
    }

    body .site-header .site-header__inner {
        height: 68px;
        grid-template-columns: 44px minmax(0,1fr) 44px;
        gap: 8px;

        padding: 0 var(--fr-gutter-mobile, 22px) !important;
    }

    body .site-header .menu-toggle,
    body .site-header .fr-header-contact-toggle {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px;
    }

    body .site-header .menu-toggle {
        font-size: 21px !important;
    }

    body .site-header .fr-header-contact-toggle svg {
        width: 20px;
        height: 20px;
    }

    /* Symbol-only logo, centered */

    body .site-header .site-logo {
        width: 76px !important;
        max-width: 76px !important;
        height: 52px !important;
        flex: initial !important;
    }

    body .site-header .site-logo picture,
    body .site-header .site-logo picture img {
        width: 100% !important;
        height: 100% !important;
        max-height: 52px !important;
        object-fit: contain !important;
        object-position: center !important;
    }
}

/* =====================================================
   QUICK CONTACT OVERLAY
===================================================== */

body .fr-header-contact-overlay:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 99999;
}

.fr-header-contact-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(23,33,26,.57);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.fr-header-contact-dialog {
    position: absolute;
    top: 0;
    right: 0;

    width: min(100%, 570px);
    height: 100%;
    height: 100dvh;

    overflow-y: auto;
    overscroll-behavior: contain;

    background: #F8F3EB;
    box-shadow: -20px 0 60px rgba(22,29,22,.16);
}

.fr-header-contact-inner {
    max-width: 570px;
    padding: 88px 42px 50px;
    box-sizing: border-box;
}

.fr-header-contact-close {
    position: absolute;
    z-index: 2;
    top: 23px;
    right: 26px;

    display: grid;
    place-items: center;

    width: 40px;
    height: 40px;

    border: 1px solid rgba(31,33,29,.12);
    border-radius: 50%;

    background: #FFFFFF;
    color: #344532;

    font-size: 27px;
    line-height: 1;
    cursor: pointer;
}

.fr-header-contact-eyebrow {
    margin: 0 0 16px;

    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .13em;

    color: #C96743;
}

.fr-header-contact-inner h2 {
    margin: 0 0 17px;

    font-family: "Manrope", sans-serif;
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.045em;

    color: #1F211D;
}

.fr-header-contact-intro {
    margin: 0 0 35px;

    font-family: "Inter", sans-serif;
    font-size: 15px;
    line-height: 1.75;

    color: #656B61;
}

.fr-header-contact-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 16px;
}

.fr-header-contact-full {
    grid-column: 1 / -1;
}

.fr-header-contact-field label {
    display: block;
    margin-bottom: 9px;

    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 600;

    color: #344532;
}

.fr-header-contact-field label span {
    color: #C96743;
}

.fr-header-contact-field input,
.fr-header-contact-field textarea {
    display: block;

    width: 100%;
    min-height: 49px;

    padding: 13px 15px;
    box-sizing: border-box;

    border: 1px solid #DCD9D2;
    border-radius: 9px;

    outline: none;
    background: #FFFEFC;

    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;

    color: #1F211D;

    box-shadow: inset 0 1px 2px rgba(0,0,0,.02);
}

.fr-header-contact-field textarea {
    min-height: 130px;
    resize: vertical;
}

.fr-header-contact-field input:focus,
.fr-header-contact-field textarea:focus {
    border-color: #566449;
    box-shadow: 0 0 0 3px rgba(86,100,73,.1);
}

.fr-header-contact-privacy {
    margin: 24px 0 20px;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    line-height: 1.65;
    color: #70766A;
}

.fr-header-contact-privacy a,
.fr-header-contact-alternative a {
    color: #344532;
    text-underline-offset: 3px;
}

.fr-header-contact-submit {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;

    width: 100%;
    min-height: 52px;

    padding: 0 23px;

    border: 0;
    border-radius: 999px;

    background: #C96743;
    color: white;

    font-family: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 600;

    cursor: pointer;
    box-shadow: 0 8px 22px rgba(201,103,67,.16);
}

.fr-header-contact-submit span {
    font-size: 21px;
    font-weight: 400;
}

.fr-header-contact-alternative {
    margin: 25px 0 0;

    font-family: "Inter", sans-serif;
    font-size: 13px;
    line-height: 1.6;
    color: #70766A;
}

.fr-header-contact-alternative a {
    margin-left: 5px;
    font-weight: 600;
}

.fr-header-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

body.fr-header-contact-open {
    overflow: hidden;
}

/* MOBILE CONTACT PANEL */

@media screen and (max-width: 599px) {

    .fr-header-contact-dialog {
        width: 100%;
    }

    .fr-header-contact-inner {
        padding: 78px 22px 40px;
    }

    .fr-header-contact-inner h2 {
        font-size: 31px;
    }

    .fr-header-contact-fields {
        grid-template-columns: 1fr;
        gap: 19px;
    }

    .fr-header-contact-full {
        grid-column: auto;
    }

    .fr-header-contact-close {
        top: 18px;
        right: 20px;
    }
}

/* FOCUS / ACCESSIBILITY */

.site-header .menu-toggle:focus-visible,
.site-header .fr-header-contact-toggle:focus-visible,
.fr-header-contact-close:focus-visible,
.fr-header-contact-submit:focus-visible {
    outline: 2px solid #C96743;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .fr-header-contact-dialog {
        scroll-behavior: auto;
    }
}


/* =====================================================
   FRAYORA — MOBILE HEADER FINAL ALIGNMENT FIX

   HAMBURGER  |  CENTERED LOGO  |  MESSAGE

   Mobile only: 599px and below
   Preserve existing global gutters
===================================================== */

@media screen and (max-width: 599px) {

    /* 01 — HEADER */

    html body .site-header {
        height: 68px !important;
        min-height: 68px !important;
        background: #FFFCF8;
    }

    /* 02 — THREE EQUAL HEADER ZONES */

    html body .site-header .site-header__inner {
        display: grid !important;

        grid-template-columns: 44px minmax(0, 1fr) 44px !important;
        grid-template-rows: 68px !important;

        align-items: center !important;
        justify-items: center !important;

        width: 100% !important;
        max-width: 1200px !important;
        height: 68px !important;
        min-height: 68px !important;

        margin: 0 auto !important;
        padding: 0 22px !important;

        box-sizing: border-box !important;
    }

    /* 03 — ALLOW BUTTONS TO OCCUP GRID COLUMNS */

    html body .site-header .site-header__actions {
        display: contents !important;
    }

    /* 04 — HAMBURGER ON LEFT */

    html body .site-header .menu-toggle {
        display: flex !important;

        grid-column: 1 !important;
        grid-row: 1 !important;

        align-items: center !important;
        justify-content: center !important;
        justify-self: start !important;

        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;

        margin: 0 !important;
        padding: 0 !important;

        border: none !important;
        border-radius: 50% !important;

        background: #344532 !important;
        color: #FFFFFF !important;

        font-size: 21px !important;
        line-height: 1 !important;

        position: relative !important;
        inset: auto !important;
        transform: none !important;
    }

    /* 05 — LOGO PERFECTLY CENTERED */

    html body .site-header .site-logo {
        display: flex !important;

        grid-column: 2 !important;
        grid-row: 1 !important;

        justify-self: center !important;
        align-self: center !important;

        align-items: center !important;
        justify-content: center !important;

        width: 76px !important;
        max-width: 76px !important;
        height: 52px !important;

        flex: none !important;

        margin: 0 !important;
        padding: 0 !important;

        position: relative !important;
        inset: auto !important;
        transform: none !important;
    }

    html body .site-header .site-logo picture {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        height: 100% !important;
    }

    html body .site-header .site-logo picture img {
        display: block !important;

        width: 100% !important;
        height: 100% !important;
        max-height: 52px !important;

        object-fit: contain !important;
        object-position: center !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    /* 06 — MESSAGE ICON ON RIGHT */

    html body .site-header .fr-header-contact-toggle {
        display: flex !important;

        grid-column: 3 !important;
        grid-row: 1 !important;

        align-items: center !important;
        justify-content: center !important;
        justify-self: end !important;

        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;

        margin: 0 !important;
        padding: 0 !important;

        position: relative !important;
        inset: auto !important;
        transform: none !important;

        border: none !important;
        border-radius: 50% !important;

        background: #C96743 !important;
        color: #FFFFFF !important;
    }

    html body .site-header .fr-header-contact-toggle svg {
        width: 20px !important;
        height: 20px !important;
    }

    /* 07 — HIDE DESKTOP ITEMS */

    html body .site-header .header-cta,
    html body .site-header .site-nav {
        display: none !important;
    }
}

/* FRAYORA — QUICK CONTACT INTERACTION FIX */

.fr-header-contact-dialog {
    position: absolute;
    z-index: 2;
    pointer-events: auto;
}

.fr-header-contact-form,
.fr-header-contact-submit {
    position: relative;
    z-index: 3;
    pointer-events: auto;
}

.fr-header-contact-submit {
    cursor: pointer;
}

.fr-header-form-error:not([hidden]) {
    display: block;
    margin: 0 0 18px;
    padding: 12px 15px;
    border-radius: 8px;
    background: #F7E9E2;
    color: #A5482E;
    font: 500 13px/1.6 "Inter", sans-serif;
}



/* =====================================================
   FRAYORA — TABLET HEADER SYMBOL LOGO
   Tablet: 600px–1100px
   Preserve global header alignment
===================================================== */

@media screen and (min-width: 600px) and (max-width: 1100px) {

    html body .site-header .site-logo {
        width: 92px !important;
        max-width: 92px !important;
        height: 64px !important;

        justify-self: center !important;
        align-self: center !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    html body .site-header .site-logo picture {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        height: 100% !important;
    }

    html body .site-header .site-logo picture img {
        display: block !important;

        width: 100% !important;
        height: 100% !important;
        max-height: 64px !important;

        object-fit: contain !important;
        object-position: center !important;
    }
}


/* =====================================================
   FRAYORA — COMPACT DESKTOP HEADER
   Inspired by Bond's navigation proportions

   Desktop only: 1101px+
   Header height: 78px
   Keep existing global horizontal alignment
===================================================== */

@media screen and (min-width: 1101px) {

    /* HEADER CONTAINER */

    html body .site-header {
        height: 78px !important;
        min-height: 78px !important;
        max-height: 78px !important;

        padding: 0 !important;
        margin: 0 !important;

        box-sizing: border-box !important;
    }

    /* INNER CONTENT */

    html body .site-header .site-header__inner {
        height: 100% !important;
        min-height: 0 !important;
        max-height: 78px !important;

        padding-top: 0 !important;
        padding-bottom: 0 !important;

        display: flex !important;
        align-items: center !important;

        box-sizing: border-box !important;
    }

    /* LOGO */

    html body .site-header .site-logo {
        display: flex !important;
        align-items: center !important;

        width: 170px !important;
        max-width: 170px !important;
        height: 52px !important;

        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    html body .site-header .site-logo picture {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        height: 100% !important;
    }

    html body .site-header .site-logo img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 52px !important;
        object-fit: contain !important;
    }

    /* NAVIGATION */

    html body .site-header .site-nav {
        display: flex !important;
        align-items: center !important;

        height: 100% !important;

        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* HEADER CTA */

    html body .site-header .site-header__actions {
        display: flex !important;
        align-items: center !important;

        height: 100% !important;

        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    html body .site-header .header-cta {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        min-height: 44px !important;
        height: 44px !important;

        padding: 0 22px !important;
        margin: 0 !important;

        box-sizing: border-box !important;
    }
}

/* =====================================================
   FRAYORA — GLOBAL SYMBOL-ONLY HEADER LOGO
===================================================== */

.site-header .site-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* DESKTOP */
@media (min-width: 1101px) {
    html body .site-header .site-logo {
        width: 76px !important;
        max-width: 76px !important;
        height: 62px !important;
        flex: 0 0 76px !important;
    }
}

/* TABLET */
@media (min-width: 600px) and (max-width: 1100px) {
    html body .site-header .site-logo {
        width: 76px !important;
        max-width: 76px !important;
        height: 62px !important;
    }
}

/* MOBILE */
@media (max-width: 599px) {
    html body .site-header .site-logo {
        width: 68px !important;
        max-width: 68px !important;
        height: 52px !important;
    }
}


/* =====================================================
   FRAYORA — COMPACT QUICK-CONTACT SUBMIT BUTTON
   All screen sizes
===================================================== */

html body .fr-header-contact-submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: fit-content !important;
    max-width: 100% !important;
    min-width: 0 !important;

    min-height: 48px !important;
    height: auto !important;

    padding: 13px 28px !important;
    gap: 0 !important;

    border-radius: 999px !important;

    text-align: center !important;
}

html body .fr-header-contact-submit .fr-header-submit-label {
    font-family: "Manrope", sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
}

/* FRAYORA — RECAPTCHA SPACING */

.fr-header-recaptcha {
    margin: 0 0 25px;
    max-width: 100%;
}

.fr-header-recaptcha .g-recaptcha {
    transform-origin: top left;
}

@media (max-width: 360px) {
    .fr-header-recaptcha .g-recaptcha {
        transform: scale(0.88);
        margin-bottom: -9px;
    }
}



/* =====================================================
   FRAYORA — CONTACT US PROJECT FORM REFINEMENT
   Desktop / Tablet / Mobile
===================================================== */

/* Center the Google verification checkbox */

body .frayora-contact-page .fc-inquiry__recaptcha {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    margin: 28px 0 0;
    box-sizing: border-box;
}

/* Center the submit button beneath reCAPTCHA */

body .frayora-contact-page .fc-inquiry__submit-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 24px;
}

/* Compact terracotta pill */

body .frayora-contact-page .fc-inquiry__submit-wrap
.fc-inquiry__submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: fit-content !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 50px !important;

    margin: 0 !important;
    padding: 13px 30px !important;
    gap: 0 !important;

    border-radius: 999px !important;

    font-family: "Manrope", sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;

    text-align: center !important;
    white-space: nowrap !important;
}

/* Suppress any inherited decorative arrow */

body .frayora-contact-page .fc-inquiry__submit-wrap
.fc-inquiry__submit svg {
    display: none !important;
}

/* Privacy stays below the button inside the card */

body .frayora-contact-page .fc-inquiry__privacy {
    margin-top: 25px;
}

/* Mobile spacing */

@media (max-width: 599px) {
    body .frayora-contact-page .fc-inquiry__submit-wrap {
        margin-top: 22px;
    }

    body .frayora-contact-page .fc-inquiry__submit-wrap
    .fc-inquiry__submit {
        min-height: 48px !important;
        padding: 12px 25px !important;
    }

    body .frayora-contact-page .fc-inquiry__recaptcha {
        justify-content: flex-start;
    }

    /* Use Google's compact layout on small devices
       via the widget's JavaScript configuration. */
}


/* =========================================================
   FRAYORA — HEADER POLISH
   subtle logo shadow + soft glass/luminous header
========================================================= */

.site-header {
    position: relative;
    background: rgba(248, 246, 240, 0.82);
    backdrop-filter: blur(14px) saturate(115%);
    -webkit-backdrop-filter: blur(14px) saturate(115%);
    border-bottom: 1px solid rgba(31, 33, 29, 0.06);
    box-shadow: 0 8px 24px rgba(31, 33, 29, 0.05);
    
}

/* soft luminous sheen */
.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.42) 0%,
            rgba(255, 255, 255, 0.14) 45%,
            rgba(255, 255, 255, 0.00) 100%
        );
    opacity: 0.9;
}

/* faint warm glow for depth */
.site-header::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(255, 255, 255, 0.24) 0%,
            rgba(255, 255, 255, 0.00) 32%
        ),
        radial-gradient(
            circle at 18% 0%,
            rgba(210, 110, 67, 0.08) 0%,
            rgba(210, 110, 67, 0.00) 28%
        );
}

/* keep content above the glow layers */
.site-header__inner {
    position: relative;
    z-index: 2;
}

/* logo shadow for all versions */
.site-logo img,
.site-logo picture img {
    display: block;
    filter:
        drop-shadow(0 2px 5px rgba(31, 33, 29, 0.10))
        drop-shadow(0 1px 1px rgba(255, 255, 255, 0.22));
    transition: filter 0.25s ease, transform 0.25s ease;
}

/* tiny hover polish on desktop */
@media (hover: hover) {
    .site-logo:hover img,
    .site-logo:hover picture img {
        filter:
            drop-shadow(0 4px 10px rgba(31, 33, 29, 0.13))
            drop-shadow(0 1px 2px rgba(255, 255, 255, 0.28));
        transform: translateY(-1px);
    }
}


/* =====================================================
   FRAYORA — CONTACT US
   CENTERED PRIVACY NOTICE
   DESKTOP / TABLET / MOBILE
===================================================== */

body .frayora-contact-page .fc-inquiry__privacy {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 28px auto 0 !important;
    padding: 0 !important;
    gap: 8px !important;

    text-align: center !important;
}

body .frayora-contact-page .fc-inquiry__privacy p {
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;

    text-align: center !important;
    line-height: 1.6 !important;
}

body .frayora-contact-page .fc-inquiry__privacy a {
    display: inline-block !important;
    width: fit-content !important;

    margin: 0 auto !important;
    text-align: center !important;
}


/* =====================================================
   FRAYORA — RECAPTCHA RESPONSIVE ALIGNMENT
===================================================== */

body .frayora-contact-page .fc-inquiry__recaptcha {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 28px auto 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

@media screen and (max-width: 599px) {

    body .frayora-contact-page .fc-inquiry__recaptcha {
        justify-content: center !important;
        overflow: visible;
    }

    body .frayora-contact-page #fc-project-recaptcha {
        display: block;
        width: fit-content;
        max-width: 100%;
        margin: 0 auto;
    }

    body .frayora-contact-page .fc-inquiry__privacy {
        padding: 0 8px !important;
        box-sizing: border-box !important;
    }
}


/* =====================================================
   FRAYORA — FIX DESKTOP SERVICES DROPDOWN
   Preserve glass header and active navigation styling
===================================================== */

@media screen and (min-width: 1101px) {

    /* Allow dropdowns to extend below the header */

    html body .site-header {
        overflow: visible !important;
    }

    /* Make sure the header content stays above its glow */

    html body .site-header__inner {
        position: relative;
        z-index: 2;
        overflow: visible !important;
    }

    /* Anchor dropdown directly underneath Services */

    html body .site-header .nav-dropdown {
        position: relative;
        overflow: visible !important;
    }

    html body .site-header .nav-dropdown__menu {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;

        z-index: 1100 !important;

        min-width: 280px;
        overflow: visible !important;
    }

    /* Restore hover and keyboard access */

    html body .site-header
    .nav-dropdown:hover > .nav-dropdown__menu,
    html body .site-header
    .nav-dropdown:focus-within > .nav-dropdown__menu {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}


/* =====================================================
   FRAYORA — LARGER DESKTOP HEADER LOGO
   Desktop only: 1101px and above
===================================================== */

@media screen and (min-width: 1101px) {

    .site-header .site-logo {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 150px;
        height: 72px;
        flex-shrink: 0;
    }

    .site-header .site-logo img {
        display: block;
        width: 150px !important;
        max-width: none !important;
        height: auto !important;
        max-height: 70px !important;
        object-fit: contain;
    }

}



/* =====================================================
   FRAYORA — CONTACT US SECTION 03
   MOBILE + TABLET BOTTOM FORM ALIGNMENT

   Desktop unchanged.
===================================================== */

@media screen and (max-width: 1100px) {

    /* 01 — LEFT ALIGN RECAPTCHA */

    body .frayora-contact-page .fc-inquiry__recaptcha {
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 28px 0 0 !important;
        padding: 0 !important;
    }

    body .frayora-contact-page #fc-project-recaptcha {
        margin: 0 !important;
        align-self: flex-start !important;
    }


    /* 02 — LEFT ALIGN SUBMIT BUTTON */

    body .frayora-contact-page .fc-inquiry__submit-wrap {
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;

        width: 100% !important;

        margin: 24px 0 0 !important;
        padding: 0 !important;
    }

    body .frayora-contact-page
    .fc-inquiry__submit-wrap .fc-inquiry__submit {
        margin: 0 !important;
    }


    /* 03 — REMOVE EXCESSIVE PRIVACY SPACING */

    body .frayora-contact-page .fc-inquiry__privacy {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;

        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        margin: 26px 0 0 !important;
        padding: 0 !important;

        gap: 6px !important;

        position: static !important;
        text-align: left !important;
    }

    body .frayora-contact-page .fc-inquiry__privacy p {
        margin: 0 !important;
        padding: 0 !important;

        width: 100% !important;

        text-align: left !important;
        line-height: 1.6 !important;
    }

    body .frayora-contact-page .fc-inquiry__privacy a {
        display: inline-block !important;
        align-self: flex-start !important;

        width: fit-content !important;

        margin: 0 !important;
        padding: 0 !important;

        position: static !important;
        text-align: left !important;
    }
}


/* =====================================================
   TABLET — 600px to 1100px
   Slightly wider submit button
===================================================== */

@media screen and (min-width: 600px)
and (max-width: 1100px) {

    body .frayora-contact-page
    .fc-inquiry__submit-wrap .fc-inquiry__submit {
        min-width: 275px !important;
        padding: 15px 36px !important;
    }

}


/* =====================================================
   MOBILE — 599px and below
   Preserve compact layout
===================================================== */

@media screen and (max-width: 599px) {

    body .frayora-contact-page
    .fc-inquiry__submit-wrap .fc-inquiry__submit {
        min-width: 0 !important;
        padding: 12px 25px !important;
    }

    body .frayora-contact-page .fc-inquiry__privacy {
        margin-top: 22px !important;
        gap: 6px !important;
    }

}



/* =========================================================
   FRAYORA — CONTACT US SECTION 03
   FINAL FORM FOOTER ALIGNMENT

   Desktop + tablet:
   - Same width as fields above
   - Center reCAPTCHA and button
   - Center privacy text and link
   - Remove excessive vertical spacing

   Mobile:
   - Preserve left alignment
   - Fix privacy spacing
========================================================= */


/* DESKTOP + TABLET — 600px and above */

@media screen and (min-width: 600px) {

    /* Keep bottom sections within the form width */

    body .frayora-contact-page .fc-inquiry__recaptcha,
    body .frayora-contact-page .fc-inquiry__submit-wrap,
    body .frayora-contact-page .fc-inquiry__privacy {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }


    /* Center Google reCAPTCHA */

    body .frayora-contact-page .fc-inquiry__recaptcha {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 30px 0 0 !important;
        padding: 0 !important;
    }

    body .frayora-contact-page #fc-project-recaptcha {
        margin: 0 auto !important;
        align-self: center !important;
    }


    /* Center submit button */

    
/* =====================================================
   FULL-WIDTH SUBMIT BUTTON — DESKTOP + TABLET
===================================================== */

body .frayora-contact-page .fc-inquiry__submit-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 24px 0 0 !important;
    padding: 0 !important;
}

body .frayora-contact-page
.fc-inquiry__submit-wrap .fc-inquiry__submit {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    min-height: 54px !important;
    padding: 14px 28px !important;

    margin: 0 !important;
    box-sizing: border-box !important;

    text-align: center !important;
}


    body .frayora-contact-page
    .fc-inquiry__submit-wrap .fc-inquiry__submit {
        margin: 0 !important;
    }


    /* Center the entire privacy section */

    body .frayora-contact-page .fc-inquiry__privacy {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 26px 0 0 !important;
        padding: 0 !important;

        gap: 6px !important;
        text-align: center !important;
    }


    /* IMPORTANT: Remove old flex spacing */

    body .frayora-contact-page .fc-inquiry__privacy p {
        flex: 0 1 auto !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        text-align: center !important;
        line-height: 1.6 !important;
    }


    /* Position link directly below fine print */

    body .frayora-contact-page .fc-inquiry__privacy a {
        display: inline-block !important;
        flex: 0 0 auto !important;
        align-self: center !important;

        width: fit-content !important;

        margin: 0 !important;
        padding: 0 !important;

        position: static !important;
        text-align: center !important;
    }

}


/* MOBILE — keep previous left alignment,
   but eliminate the extra privacy gap */

@media screen and (max-width: 599px) {

    body .frayora-contact-page .fc-inquiry__privacy p {
        flex: 0 1 auto !important;
        min-height: 0 !important;
    }

    body .frayora-contact-page .fc-inquiry__privacy {
        height: auto !important;
        min-height: 0 !important;
        gap: 6px !important;
    }

}



/* =========================================================
   FRAYORA — SHARED POLICY PAGES
   EDITORIAL / LUMINOUS DESIGN SYSTEM

   Desktop: 1101px+
   Tablet: 600px–1100px
   Mobile: 599px and below

   Manrope + Inter
   Ivory / Olive / Terracotta

   Uses existing policy background images.
========================================================= */


/* =========================================================
   01 — PAGE FOUNDATION
========================================================= */

body .fr-policy-page {
    --fp-ivory: #F8F3EB;
    --fp-surface: #FFFCF9;
    --fp-ink: #1F211D;
    --fp-forest: #26382B;
    --fp-terracotta: #C96743;
    --fp-muted: #687065;

    position: relative;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    background: var(--fp-ivory);

    color: var(--fp-ink);

    font-family: "Inter", sans-serif;

    overflow: clip;
}

body .fr-policy-page *,
body .fr-policy-page *::before,
body .fr-policy-page *::after {
    box-sizing: border-box;
}


/* =========================================================
   02 — HERO
   Same size and lower curve as About Us
========================================================= */

body .fr-policy-page .fr-policy-hero {
    position: relative;
    isolation: isolate;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 600px;
    min-height: 600px;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background: #F2EBE1;

    border-radius:
        0 0 50% 50% /
        0 0 6% 6%;

    box-shadow:
        0 24px 48px rgba(43, 50, 37, 0.12);
}


/* =========================================================
   03 — HERO BACKGROUND
========================================================= */

body .fr-policy-page .fr-policy-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;

    width: 100%;
    height: 100%;

    background-color: #F2EBE1;

    background-image:
        url("../images/Policies/desktop");

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    transform: scale(1.055);

    animation:
        fpHeroImageIn 1.8s
        cubic-bezier(.22,1,.36,1) both;
}


/* =========================================================
   04 — SOFT LUMINOUS TREATMENT
   No dark photographic overlay
========================================================= */

body .fr-policy-page .fr-policy-hero__light {
    position: absolute;
    inset: 0;
    z-index: 1;

    background-image:
        radial-gradient(
            ellipse 70% 72% at 50% 38%,
            rgba(255,255,255,.32),
            transparent 78%
        ),
        linear-gradient(
            180deg,
            rgba(255,255,255,.12) 0%,
            transparent 55%,
            rgba(248,243,235,.08) 100%
        );

    pointer-events: none;
}


/* =========================================================
   05 — HERO CONTENT
========================================================= */

body .fr-policy-page .fr-policy-hero__inner {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 1200px;
    height: 100%;

    margin: 0 auto;
    padding: 85px 32px 70px;

    text-align: center;
}

body .fr-policy-page .fr-policy-hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 1000px;

    margin: 0 auto;
    padding: 0;

    text-align: center;
}

body .fr-policy-page .fr-policy-hero__eyebrow {
    margin: 0 0 18px;
    padding: 0;

    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;

    letter-spacing: .13em;
    text-transform: uppercase;

    color: var(--fp-terracotta);

    animation:
        fpTextIn .8s ease .12s both;
}

body .fr-policy-page .fr-policy-hero__title {
    margin: 0;
    padding: 0;

    font-family: "Manrope", sans-serif;
    font-size: 64px;
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -.05em;

    color: var(--fp-forest);

    text-align: center;
    text-wrap: balance;

    text-shadow:
        0 3px 18px rgba(255,255,255,.28);

    animation:
        fpTextIn 1s
        cubic-bezier(.22,1,.36,1)
        .22s both;
}



/* Remove decorative underline */

body .fr-policy-page .fr-policy-hero__accent {
    display: none;
}

/* Soft editorial luminosity */

body .fr-policy-page .fr-policy-hero__light {
    background:
        radial-gradient(
            ellipse 48% 48% at 50% 43%,
            rgba(255, 255, 255, 0.30) 0%,
            rgba(255, 255, 255, 0.12) 55%,
            transparent 100%
        );

    pointer-events: none;
}



/* =========================================================
   06 — DOCUMENT SECTION BACKGROUND
========================================================= */

body .fr-policy-page .fr-policy-document {
    position: relative;
    isolation: isolate;

    padding: 100px 32px 120px;

    background-color: var(--fp-ivory);

    background-image:
        radial-gradient(
            ellipse 75% 35% at 95% 10%,
            rgba(255,255,255,.36),
            transparent 100%
        ),
        radial-gradient(
            ellipse 65% 35% at 0% 90%,
            rgba(225,213,195,.15),
            transparent 100%
        );
}


/* =========================================================
   07 — DOCUMENT INNER LAYOUT
========================================================= */

body .fr-policy-page .fr-policy-document__inner {
    display: grid;

    grid-template-columns:
        minmax(0, 250px)
        minmax(0, 1fr);

    gap: 48px;

    align-items: start;

    width: 100%;
    max-width: 1200px;

    margin: 0 auto;
}


/* =========================================================
   08 — STICKY POLICY NAVIGATION
========================================================= */

body .fr-policy-page .fr-policy-document__sidebar {
    min-width: 0;
}

body .fr-policy-page
.fr-policy-document__sidebar[hidden] {
    display: none;
}

body .fr-policy-page .fr-policy-document__nav {
    position: sticky;
    top: 115px;

    max-height: calc(100vh - 145px);

    padding: 27px 22px;

    overflow-y: auto;

    border: 1px solid rgba(79,91,73,.12);
    border-radius: 18px;

    background: rgba(255,252,249,.73);

    box-shadow:
        0 12px 30px rgba(45,49,38,.045),
        inset 0 1px 0 rgba(255,255,255,.85);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

body .fr-policy-page .fr-policy-document__nav-label {
    margin: 0 0 20px;

    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .12em;

    color: var(--fp-terracotta);
}

body .fr-policy-page .fr-policy-document__links {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

body .fr-policy-page .fr-policy-document__nav-link {
    display: block;

    padding: 10px 11px;

    border-left: 3px solid transparent;
    border-radius: 0 8px 8px 0;

    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;

    color: var(--fp-muted);

    text-decoration: none;

    transition:
        color .25s ease,
        background .25s ease,
        border-color .25s ease;
}

body .fr-policy-page
.fr-policy-document__nav-link--sub {
    padding-left: 23px;
    font-size: 11px;
}

body .fr-policy-page
.fr-policy-document__nav-link:hover,
body .fr-policy-page
.fr-policy-document__nav-link.is-active {
    color: var(--fp-terracotta);

    border-left-color: var(--fp-terracotta);

    background: rgba(201,103,67,.055);
}

body .fr-policy-page
.fr-policy-document__nav-link:focus-visible {
    outline: 2px solid var(--fp-terracotta);
    outline-offset: 3px;
}


/* =========================================================
   09 — POLICY CONTENT CARD
========================================================= */

body .fr-policy-page .fr-policy-document__card {
    position: relative;

    min-width: 0;

    padding: 64px 62px 72px;

    border: 1px solid rgba(102,112,91,.10);
    border-radius: 26px;

    background: var(--fp-surface);

    box-shadow:
        0 8px 20px rgba(56,48,38,.035),
        0 25px 60px rgba(56,48,38,.075),
        inset 0 1px 0 rgba(255,255,255,.95);
}

body .fr-policy-page .fr-policy-document__content {
    width: 100%;
    min-width: 0;

    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.85;

    color: var(--fp-ink);
}


/* =========================================================
   10 — TYPOGRAPHY
========================================================= */

body .fr-policy-page
.fr-policy-document__content h2 {
    margin: 48px 0 18px;

    padding: 0 0 14px;

    border-bottom:
        1px solid rgba(79,91,73,.15);

    font-family: "Manrope", sans-serif;
    font-size: 25px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.035em;

    color: var(--fp-forest);

    scroll-margin-top: 125px;
}

body .fr-policy-page
.fr-policy-document__content h2:first-child {
    margin-top: 0;
}

body .fr-policy-page
.fr-policy-document__content h3 {
    margin: 30px 0 14px;

    font-family: "Manrope", sans-serif;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.4;

    color: var(--fp-forest);

    scroll-margin-top: 125px;
}

body .fr-policy-page
.fr-policy-document__content p {
    margin: 0 0 18px;
    padding: 0;

    line-height: 1.85;
}

body .fr-policy-page
.fr-policy-document__content p:last-child {
    margin-bottom: 0;
}

body .fr-policy-page
.fr-policy-document__content strong {
    font-weight: 600;
    color: var(--fp-forest);
}

body .fr-policy-page
.fr-policy-document__content ul,
body .fr-policy-page
.fr-policy-document__content ol {
    margin: 15px 0 25px;
    padding-left: 24px;
}

body .fr-policy-page
.fr-policy-document__content li {
    margin: 0 0 9px;
    padding-left: 3px;

    line-height: 1.75;
}

body .fr-policy-page
.fr-policy-document__content li::marker {
    color: var(--fp-terracotta);
}

body .fr-policy-page
.fr-policy-document__content a {
    color: var(--fp-terracotta);

    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

body .fr-policy-page
.fr-policy-document__content a:hover {
    color: #A94E32;
}

body .fr-policy-page
.fr-policy-document__content a:focus-visible {
    outline: 2px solid var(--fp-terracotta);
    outline-offset: 3px;
}

body .fr-policy-page
.fr-policy-document__content > * {
    max-width: 100%;
}


/* =========================================================
   11 — TABLET
   600px to 1100px
========================================================= */

@media screen and (min-width: 600px)
and (max-width: 1100px) {

    body .fr-policy-page .fr-policy-hero {
        height: 580px;
        min-height: 580px;

        border-radius:
            0 0 50% 50% /
            0 0 5% 5%;
    }

    body .fr-policy-page
    .fr-policy-hero__media {
        background-image:
            url("../images/Policies/tablet.png");
    }

    body .fr-policy-page
    .fr-policy-hero__inner {
        padding: 85px 40px 70px;
    }

    body .fr-policy-page
    .fr-policy-hero__title {
        font-size: 50px;
    }

    body .fr-policy-page
    .fr-policy-document {
        padding: 75px 30px 90px;
    }

    body .fr-policy-page
    .fr-policy-document__inner {
        grid-template-columns:
            minmax(0, 190px)
            minmax(0, 1fr);

        gap: 24px;
    }

    body .fr-policy-page
    .fr-policy-document__nav {
        top: 95px;

        padding: 21px 15px;

        border-radius: 15px;
    }

    body .fr-policy-page
    .fr-policy-document__nav-link {
        font-size: 11px;
        padding: 9px 8px;
    }

    body .fr-policy-page
    .fr-policy-document__card {
        padding: 42px 35px 55px;
        border-radius: 22px;
    }

    body .fr-policy-page
    .fr-policy-document__content {
        font-size: 14px;
        line-height: 1.8;
    }

    body .fr-policy-page
    .fr-policy-document__content h2 {
        font-size: 22px;
        margin-top: 38px;
    }

}


/* =========================================================
   12 — MOBILE
   599px and below
========================================================= */

@media screen and (max-width: 599px) {

    body .fr-policy-page .fr-policy-hero {
        height: 390px;
        min-height: 390px;

        border-radius:
            0 0 50% 50% /
            0 0 4% 4%;
    }

    body .fr-policy-page
    .fr-policy-hero__media {
        background-image:
            url("../images/Policies/mobile.png");

        background-position: center;
    }

    body .fr-policy-page
    .fr-policy-hero__inner {
        padding: 75px 24px 45px;
    }

    body .fr-policy-page
    .fr-policy-hero__eyebrow {
        font-size: 10px;
        margin-bottom: 15px;
    }

    body .fr-policy-page
    .fr-policy-hero__title {
        font-size: 39px;
        line-height: 1.12;
    }

    body .fr-policy-page
    .fr-policy-hero__accent {
        width: 36px;
        margin-top: 23px;
    }

    body .fr-policy-page
    .fr-policy-document {
        padding: 45px 18px 65px;
    }

    body .fr-policy-page
    .fr-policy-document__inner {
        display: block;
    }

    body .fr-policy-page
    .fr-policy-document__sidebar {
        display: none;
    }

    body .fr-policy-page
    .fr-policy-document__card {
        padding: 34px 24px 45px;

        border-radius: 20px;

        box-shadow:
            0 10px 30px rgba(56,48,38,.055),
            inset 0 1px 0 rgba(255,255,255,.9);
    }

    body .fr-policy-page
    .fr-policy-document__content {
        font-size: 14px;
        line-height: 1.8;
    }

    body .fr-policy-page
    .fr-policy-document__content h2 {
        font-size: 20px;

        margin: 34px 0 14px;
        padding-bottom: 12px;
    }

    body .fr-policy-page
    .fr-policy-document__content h3 {
        font-size: 17px;
        margin-top: 26px;
    }

    body .fr-policy-page
    .fr-policy-document__content ul,
    body .fr-policy-page
    .fr-policy-document__content ol {
        padding-left: 20px;
    }

}


/* =========================================================
   13 — ENTRANCE ANIMATIONS
========================================================= */

@keyframes fpHeroImageIn {
    from {
        opacity: .7;
        transform: scale(1.055);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fpTextIn {
    from {
        opacity: 0;
        transform: translateY(18px);
        filter: blur(3px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}


/* =========================================================
   14 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body .fr-policy-page
    .fr-policy-hero__media,
    body .fr-policy-page
    .fr-policy-hero__eyebrow,
    body .fr-policy-page
    .fr-policy-hero__title,
    body .fr-policy-page
    .fr-policy-hero__accent {
        animation: none !important;
        transform: none !important;
        filter: none !important;
        opacity: 1 !important;
    }

    body .fr-policy-page
    .fr-policy-document__nav-link {
        transition: none !important;
    }

}


/* =====================================================
   FRAYORA — COOKIE POLICY
   SHARED PRIVACY POLICY DESIGN

   Same responsive styles:
   Desktop: 1101px+
   Tablet: 600px–1100px
   Mobile: 599px and below
===================================================== */

/* Remove decorative line on all policy heroes */

body .fr-policy-page .fr-policy-hero__accent {
    display: none;
}

/* Soft luminous background */

body .fr-policy-page .fr-policy-hero__light {
    background:
        radial-gradient(
            ellipse 48% 48% at 50% 43%,
            rgba(255, 255, 255, 0.30) 0%,
            rgba(255, 255, 255, 0.12) 55%,
            transparent 100%
        );

    pointer-events: none;
}

/* Ensure policy document remains in main column */

@media screen and (min-width: 1101px) {

    body .fr-policy-page .fr-policy-document__sidebar {
        grid-column: 1;
        min-width: 0;
    }

    body .fr-policy-page .fr-policy-document__card {
        grid-column: 2;
        width: 100%;
        min-width: 0;
    }

}

@media screen and (min-width: 600px)
and (max-width: 1100px) {

    body .fr-policy-page .fr-policy-document__sidebar {
        grid-column: 1;
        min-width: 0;
    }

    body .fr-policy-page .fr-policy-document__card {
        grid-column: 2;
        width: 100%;
        min-width: 0;
    }

}

@media screen and (max-width: 599px) {

    body .fr-policy-page .fr-policy-document__inner {
        display: block;
    }

    body .fr-policy-page .fr-policy-document__sidebar {
        display: none;
    }

    body .fr-policy-page .fr-policy-document__card {
        display: block;
        width: 100%;
        min-width: 0;
    }

}



/* =========================================================
   FRAYORA — REFUNDS & CANCELLATIONS POLICY

   Uses existing Privacy / Cookie Policy system.

   Desktop: 1101px+
   Tablet: 600px–1100px
   Mobile: 599px and below

   Manrope + Inter
   Ivory / Forest / Terracotta
========================================================= */


/* =========================================================
   01 — HERO REFINEMENTS
========================================================= */

body .fr-refunds-page .fr-policy-hero__accent {
    display: none;
}

body .fr-refunds-page .fr-policy-hero__light {
    background:
        radial-gradient(
            ellipse 48% 48% at 50% 43%,
            rgba(255,255,255,.30) 0%,
            rgba(255,255,255,.12) 55%,
            transparent 100%
        );

    pointer-events: none;
}


/* =========================================================
   02 — MAINTAIN FULL CONTENT WIDTH
========================================================= */

body .fr-refunds-page
.fr-policy-document__inner {
    width: 100%;
    max-width: 1200px;
}

body .fr-refunds-page
.fr-policy-document__sidebar {
    min-width: 0;
}

body .fr-refunds-page
.fr-policy-document__card {
    width: 100%;
    min-width: 0;
}


/* =========================================================
   03 — DOCUMENT READABILITY
========================================================= */

body .fr-refunds-page
.fr-policy-document__content {
    overflow-wrap: break-word;
}

body .fr-refunds-page
.fr-policy-document__content h2 {
    scroll-margin-top: 125px;
}

body .fr-refunds-page
.fr-policy-document__content h3 {
    scroll-margin-top: 125px;
}

body .fr-refunds-page
.fr-policy-document__content a {
    text-underline-offset: 4px;
}


/* =========================================================
   04 — DESKTOP
   1101px and above
========================================================= */

@media screen and (min-width: 1101px) {

    body .fr-refunds-page
    .fr-policy-document__inner {
        display: grid;

        grid-template-columns:
            250px minmax(0, 1fr);

        gap: 48px;
    }

    body .fr-refunds-page
    .fr-policy-document__sidebar {
        grid-column: 1;
    }

    body .fr-refunds-page
    .fr-policy-document__card {
        grid-column: 2;
    }

}


/* =========================================================
   05 — TABLET
   600px to 1100px
========================================================= */

@media screen and (min-width: 600px)
and (max-width: 1100px) {

    body .fr-refunds-page
    .fr-policy-document__inner {
        display: grid;

        grid-template-columns:
            190px minmax(0, 1fr);

        gap: 24px;
    }

    body .fr-refunds-page
    .fr-policy-document__sidebar {
        grid-column: 1;
    }

    body .fr-refunds-page
    .fr-policy-document__card {
        grid-column: 2;
    }

    body .fr-refunds-page
    .fr-policy-hero__title {
        max-width: 780px;
        font-size: clamp(35px, 5vw, 50px);
    }

}


/* =========================================================
   06 — MOBILE
   599px and below
========================================================= */

@media screen and (max-width: 599px) {

    body .fr-refunds-page
    .fr-policy-document__inner {
        display: block;
    }

    body .fr-refunds-page
    .fr-policy-document__sidebar {
        display: none;
    }

    body .fr-refunds-page
    .fr-policy-document__card {
        display: block;

        width: 100%;
        max-width: 100%;
    }

    body .fr-refunds-page
    .fr-policy-hero__title {
        max-width: 100%;

        font-size: clamp(29px, 8vw, 39px);
        line-height: 1.12;

        text-wrap: balance;
    }

}


/* =========================================================
   07 — ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    body .fr-refunds-page
    .fr-policy-document__nav-link {
        transition: none;
    }

}



/* =====================================================
   FRAYORA — TERMS & CONDITIONS
   SAME DESIGN AS EXISTING POLICY PAGES

   Desktop: 1101px+
   Tablet: 600px–1100px
   Mobile: 599px and below
===================================================== */

/* Keep approved hero appearance */

body .fr-terms-page .fr-policy-hero__accent {
    display: none;
}

body .fr-terms-page .fr-policy-hero__light {
    background:
        radial-gradient(
            ellipse 48% 48% at 50% 43%,
            rgba(255,255,255,.30) 0%,
            rgba(255,255,255,.12) 55%,
            transparent 100%
        );

    pointer-events: none;
}

/* Ensure policy document fills the correct column */

body .fr-terms-page
.fr-policy-document__inner {
    width: 100%;
    max-width: 1200px;
}

body .fr-terms-page
.fr-policy-document__card {
    width: 100%;
    min-width: 0;
}

body .fr-terms-page
.fr-policy-document__content {
    overflow-wrap: break-word;
}

/* Desktop */

@media screen and (min-width: 1101px) {

    body .fr-terms-page
    .fr-policy-document__sidebar {
        grid-column: 1;
        min-width: 0;
    }

    body .fr-terms-page
    .fr-policy-document__card {
        grid-column: 2;
    }

}

/* Tablet */

@media screen and (min-width: 600px)
and (max-width: 1100px) {

    body .fr-terms-page
    .fr-policy-document__sidebar {
        grid-column: 1;
        min-width: 0;
    }

    body .fr-terms-page
    .fr-policy-document__card {
        grid-column: 2;
    }

    body .fr-terms-page
    .fr-policy-hero__title {
        font-size: clamp(36px, 5vw, 50px);
    }

}

/* Mobile */

@media screen and (max-width: 599px) {

    body .fr-terms-page
    .fr-policy-document__inner {
        display: block;
    }

    body .fr-terms-page
    .fr-policy-document__sidebar {
        display: none;
    }

    body .fr-terms-page
    .fr-policy-document__card {
        display: block;
        width: 100%;
        max-width: 100%;
    }

    body .fr-terms-page
    .fr-policy-hero__title {
        font-size: clamp(31px, 8vw, 39px);
        line-height: 1.12;
        text-wrap: balance;
    }

}

/* Motion accessibility */

@media (prefers-reduced-motion: reduce) {

    body .fr-terms-page
    .fr-policy-document__nav-link {
        transition: none;
    }

}



/* FRAYORA — FOOTER SOCIAL LINK CLICK FIX */

.site-footer__socials {
    position: relative;
    z-index: 5;
}

.site-footer__socials a {
    position: relative;
    z-index: 6;
    pointer-events: auto;
    cursor: pointer;
}



/* =========================================
   FRAYORA — FOOTER SOCIAL SVG ICONS
   Preserves existing circle design
========================================= */

.site-footer__socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #F8F3EB;

    cursor: pointer;
    text-decoration: none;
}

.site-footer__socials a svg {
    display: block;

    width: 22px;
    height: 22px;

    flex-shrink: 0;
    color: #F8F3EB;

    pointer-events: none;
}

/* Keyboard accessibility */

.site-footer__socials a:focus-visible {
    outline: 2px solid #F8F3EB;
    outline-offset: 5px;
    border-radius: 50%;
}



/* =====================================================
   FRAYORA — SELECTED WORK
   VEYRON INDUSTRIAL PORTFOLIO IMAGE

   Desktop / Tablet / Mobile
   Preserves existing card structure and effects
===================================================== */



/* VEYRON — SAME IMAGE ON ALL DEVICES */

body .frayora-work-v2__card.frayora-work-v2__card--veyron {
    background-image: url("../images/Homepage/veyron.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Desktop */
@media (min-width: 1101px) {
    body .frayora-work-v2__card.frayora-work-v2__card--veyron {
        background-position: center;
    }
}

/* Tablet */
@media (min-width: 600px) and (max-width: 1100px) {
    body .frayora-work-v2__card.frayora-work-v2__card--veyron {
        background-position: center;
    }
}

/* Mobile */
@media (max-width: 599px) {
    body .frayora-work-v2__card.frayora-work-v2__card--veyron {
        background-position: center;
    }
}



/* KEEP EXISTING PHOTO OVERLAY, GLASS AND SHADOWS */

body .frayora-work-v2__card--veyron
.frayora-work-v2__glass {
    z-index: 2;
}

body .frayora-work-v2__card--veyron
.frayora-work-v2__number {
    z-index: 3;
}


/* ACCESSIBLE ARROW FOCUS */

body .frayora-work-v2__card--veyron
.frayora-work-v2__arrow:focus-visible {
    outline: 2px solid #F8F3EB;
    outline-offset: 4px;
}



/* =====================================================
   OUR WORK — VEYRON BROWSER WINDOW
   Desktop / Tablet / Mobile
===================================================== */

.fw-project--veyron .fw-project__media {
    background: #F8F3EB;
    overflow: hidden;
}

.fw-project--veyron .fw-project__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* TABLET */

@media (min-width: 600px) and (max-width: 1100px) {
    .fw-project--veyron .fw-project__image {
        object-fit: contain;
        object-position: center;
    }
}

/* MOBILE */

@media (max-width: 599px) {
    .fw-project--veyron .fw-project__image {
        object-fit: contain;
        object-position: center;
    }
}



/* =====================================================
   FRAYORA — SELECTED WORK
   VEYRON INDUSTRIAL FULL WEBSITE PREVIEW

   Displays the COMPLETE horizontal screenshot.
   No cropping of logo, navigation, or heading.

   Desktop / Tablet / Mobile
===================================================== */

/* 01 — VEYRON CARD */

body .frayora-work-v2__card.frayora-work-v2__card--veyron {
    position: relative;
    isolation: isolate;

    background-image: none !important;
    background-color: #102736 !important;

    overflow: hidden;
}


/* 02 — SOFT INDUSTRIAL BACKDROP */

body .frayora-work-v2__card--veyron::before {
    content: "";

    position: absolute;
    inset: -18px;

    background:
        linear-gradient(
            180deg,
            rgba(8, 25, 38, 0.38),
            rgba(8, 25, 38, 0.76)
        ),
        url("../images/Homepage/veyron.png")
        center / cover no-repeat;

    filter: blur(14px) saturate(90%);
    transform: scale(1.08);

    z-index: 0;
    pointer-events: none;
}


/* 03 — COMPLETE WEBSITE SCREENSHOT */

body .frayora-work-v2__card--veyron
.frayora-work-v2__veyron-preview {
    display: block;

    position: absolute;
    top: 72px;
    left: 0;

    width: 100%;
    height: auto;
    max-width: none;

    aspect-ratio: 1665 / 945;

    object-fit: contain;
    object-position: center;

    border: 0;

    box-shadow:
        0 12px 30px rgba(4, 18, 29, 0.28);

    z-index: 1;
    pointer-events: none;
}


/* 04 — KEEP ORIGINAL GLASS PANEL */

body .frayora-work-v2__card--veyron
.frayora-work-v2__glass {
    z-index: 3;
}


/* 05 — KEEP PROJECT NUMBER VISIBLE */

body .frayora-work-v2__card--veyron
.frayora-work-v2__number {
    z-index: 4;
}


/* =====================================================
   DESKTOP — 1101px+
===================================================== */

@media screen and (min-width: 1101px) {

    body .frayora-work-v2__card--veyron
    .frayora-work-v2__veyron-preview {
        top: 76px;
        width: 100%;
    }

}


/* =====================================================
   TABLET — 600px–1100px
===================================================== */

@media screen and (min-width: 600px)
and (max-width: 1100px) {

    body .frayora-work-v2__card--veyron
    .frayora-work-v2__veyron-preview {
        top: 70px;
        width: 100%;
    }

}


/* =====================================================
   MOBILE — BELOW 600px
===================================================== */

@media screen and (max-width: 599px) {

    body .frayora-work-v2__card--veyron
    .frayora-work-v2__veyron-preview {
        top: 68px;
        width: 100%;
    }

}


/* =====================================================
   ACCESSIBLE ARROW
===================================================== */

body .frayora-work-v2__card--veyron
.frayora-work-v2__arrow:focus-visible {
    outline: 2px solid #F8F3EB;
    outline-offset: 4px;
}

/* ======================================================
   FRAYORA — SINGLE FEATURED PROJECT

   Desktop: 1101px+
   Tablet:  600px–1100px
   Mobile:  599px and below
====================================================== */

.fr-featured {
    --fr-work-ivory: #F8F3EB;
    --fr-work-ink: #1F211D;
    --fr-work-olive: #566449;
    --fr-work-orange: #C96743;
    --fr-work-muted: #706F68;

    position: relative;
    isolation: isolate;

    padding: clamp(72px, 7vw, 120px) 40px;

    background: var(--fr-work-ivory);
    color: var(--fr-work-ink);

    font-family: "Inter", sans-serif;
}

.fr-featured,
.fr-featured *,
.fr-featured *::before,
.fr-featured *::after {
    box-sizing: border-box;
}

.fr-featured .fr-featured__inner {
    width: 100%;
    max-width: 1360px;
    margin-inline: auto;
}

/* ======================================================
   SECTION HEADER
====================================================== */

.fr-featured .fr-featured__header {
    display: grid;
    grid-template-columns:
        minmax(0, 1.5fr)
        minmax(0, 1fr)
        auto;

    align-items: end;
    gap: 40px;

    margin-bottom: 44px;
}

.fr-featured .fr-featured__intro {
    min-width: 0;
}

.fr-featured .fr-featured__eyebrow {
    margin: 0 0 24px;

    color: var(--fr-work-orange);

    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.14em;
}

.fr-featured .fr-featured__heading {
    margin: 0;

    color: var(--fr-work-ink);
    font-family: "Manrope", sans-serif;

    font-size: clamp(36px, 3.6vw, 56px);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.055em;
}

.fr-featured .fr-featured__heading span {
    color: var(--fr-work-olive);
}

.fr-featured .fr-featured__description {
    max-width: 360px;
    margin: 0;

    color: var(--fr-work-muted);

    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
}

/* VIEW ALL PROJECTS */

.fr-featured .fr-featured__all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 24px;

    min-height: 56px;
    padding: 16px 26px;

    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;

    background: var(--fr-work-orange);
    color: #FFFFFF;

    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 10px 24px rgba(155, 74, 42, 0.16);

    transition:
        transform 260ms ease,
        background-color 260ms ease,
        box-shadow 260ms ease;
}

.fr-featured .fr-featured__all span {
    display: inline-block;

    font-size: 24px;
    font-weight: 400;
    line-height: 1;

    transition: transform 260ms ease;
}

/* ======================================================
   FEATURED PROJECT SURFACE
====================================================== */

.fr-featured .fr-featured__project {
    position: relative;

    margin: 0;
    padding: clamp(20px, 3.4vw, 48px);

    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 28px;

    background:
        radial-gradient(
            ellipse at 15% 0%,
            rgba(255, 255, 255, 0.9),
            transparent 65%
        ),
        linear-gradient(
            135deg,
            #F0E9DE 0%,
            #E8E2D7 60%,
            #E1DDD2 100%
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 4px 8px rgba(47, 42, 31, 0.025),
        0 20px 42px rgba(47, 42, 31, 0.075),
        0 46px 80px -36px rgba(47, 42, 31, 0.2);

    animation: fr-featured-enter 800ms cubic-bezier(.2, .7, .2, 1) both;
}

/* ======================================================
   FULL WEBSITE PREVIEW

   Natural image ratio.
   No fixed height, cover, or clipping.
====================================================== */

.fr-featured .fr-featured__preview {
    position: relative;
    display: block;

    width: 100%;
    margin: 0;

    border-radius: 12px;

    background: transparent;
    text-decoration: none;

    transition: transform 450ms cubic-bezier(.2, .7, .2, 1);
}

.fr-featured .fr-featured__image {
    position: static;
    display: block;

    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    margin: 0;

    border: 0;
    border-radius: 12px;

    opacity: 1;
    transform: none;

    filter:
        drop-shadow(0 5px 7px rgba(16, 31, 39, 0.08))
        drop-shadow(0 20px 22px rgba(16, 31, 39, 0.14));

    transition: filter 450ms ease;
}

/* ======================================================
   PROJECT INFORMATION — BELOW IMAGE
====================================================== */

.fr-featured .fr-featured__details {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;

    margin-top: 32px;
    padding-top: 28px;

    border-top: 1px solid rgba(62, 65, 49, 0.14);
}

.fr-featured .fr-featured__project-copy {
    min-width: 0;
}

.fr-featured .fr-featured__category {
    margin: 0 0 10px;

    color: #A64F32;

    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.12em;
}

.fr-featured .fr-featured__project-title {
    margin: 0;

    color: var(--fr-work-ink);
    font-family: "Manrope", sans-serif;

    font-size: clamp(28px, 3vw, 42px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.045em;
}

.fr-featured .fr-featured__project-description {
    margin: 12px 0 0;

    color: #62665A;

    font-size: 15px;
    line-height: 1.65;
}

/* LIVE WEBSITE ARROW */

.fr-featured .fr-featured__visit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    width: 62px;
    height: 62px;

    border: 1px solid rgba(79, 91, 73, 0.24);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.55);
    color: #344331;

    text-decoration: none;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 6px 14px rgba(45, 54, 38, 0.05);

    transition:
        transform 260ms ease,
        color 260ms ease,
        background-color 260ms ease,
        box-shadow 260ms ease;
}

.fr-featured .fr-featured__visit span {
    font-size: 30px;
    font-weight: 400;
    line-height: 1;

    transition: transform 260ms ease;
}

/* ======================================================
   HOVER — POINTER DEVICES
====================================================== */

@media (hover: hover) and (pointer: fine) {

    .fr-featured .fr-featured__preview:hover {
        transform: translateY(-4px);
    }

    .fr-featured .fr-featured__preview:hover
    .fr-featured__image {
        filter:
            drop-shadow(0 7px 9px rgba(16, 31, 39, 0.08))
            drop-shadow(0 26px 26px rgba(16, 31, 39, 0.18));
    }

    .fr-featured .fr-featured__all:hover {
        background: #B75837;
        color: #FFFFFF;

        transform: translateY(-2px);

        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.2),
            0 14px 28px rgba(155, 74, 42, 0.22);
    }

    .fr-featured .fr-featured__all:hover span {
        transform: translateX(4px);
    }

    .fr-featured .fr-featured__visit:hover {
        background: #4F5B49;
        color: #FFFFFF;

        transform: translateY(-2px);

        box-shadow: 0 10px 20px rgba(45, 54, 38, 0.14);
    }

    .fr-featured .fr-featured__visit:hover span {
        transform: translate(2px, -2px);
    }

}

/* KEYBOARD FOCUS */

.fr-featured a:focus-visible {
    outline: 3px solid var(--fr-work-olive);
    outline-offset: 6px;
}

/* SUBTLE ENTRANCE */

@keyframes fr-featured-enter {

    from {
        opacity: 0;
        transform: translateY(18px);
    }

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

}

/* ======================================================
   TABLET — 600px TO 1100px
====================================================== */

@media screen and (min-width: 600px) and (max-width: 1100px) {

    .fr-featured {
        padding: 80px 30px;
    }

    .fr-featured .fr-featured__header {
        grid-template-columns:
            minmax(0, 1.2fr)
            minmax(0, 1fr);

        align-items: start;
        gap: 24px 32px;

        margin-bottom: 32px;
    }

    .fr-featured .fr-featured__heading {
        font-size: clamp(36px, 4.5vw, 48px);
    }

    .fr-featured .fr-featured__description {
        max-width: none;
        font-size: 15px;
    }

    .fr-featured .fr-featured__all {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .fr-featured .fr-featured__project {
        padding: 28px;
        border-radius: 24px;
    }

    .fr-featured .fr-featured__details {
        margin-top: 28px;
        padding-top: 24px;
    }

    .fr-featured .fr-featured__project-title {
        font-size: 34px;
    }

}

/* ======================================================
   MOBILE — 599px AND BELOW
====================================================== */

@media screen and (max-width: 599px) {

    .fr-featured {
        padding: 60px 20px;
    }

    .fr-featured .fr-featured__header {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: 22px;

        margin-bottom: 28px;
    }

    .fr-featured .fr-featured__eyebrow {
        margin-bottom: 16px;
        font-size: 10px;
    }

    .fr-featured .fr-featured__heading {
        max-width: 100%;

        font-size: clamp(32px, 8.5vw, 42px);
        line-height: 1.14;
    }

    .fr-featured .fr-featured__description {
        max-width: 100%;

        font-size: 14px;
        line-height: 1.8;
    }

    .fr-featured .fr-featured__all {
        justify-self: start;

        min-height: 50px;
        padding: 13px 22px;

        font-size: 13px;
    }

    .fr-featured .fr-featured__project {
        padding: 12px;
        border-radius: 20px;

        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.95),
            0 12px 28px rgba(47, 42, 31, 0.07),
            0 28px 44px -28px rgba(47, 42, 31, 0.2);
    }

    .fr-featured .fr-featured__preview,
    .fr-featured .fr-featured__image {
        border-radius: 8px;
    }

    .fr-featured .fr-featured__details {
        align-items: center;
        gap: 12px;

        margin-top: 20px;
        padding: 20px 4px 8px;
    }

    .fr-featured .fr-featured__category {
        margin-bottom: 8px;

        font-size: 9px;
        letter-spacing: 0.09em;
    }

    .fr-featured .fr-featured__project-title {
        font-size: clamp(23px, 6vw, 30px);
        line-height: 1.2;
    }

    .fr-featured .fr-featured__project-description {
        margin-top: 8px;

        font-size: 12px;
        line-height: 1.6;
    }

    .fr-featured .fr-featured__visit {
        width: 46px;
        height: 46px;
    }

    .fr-featured .fr-featured__visit span {
        font-size: 25px;
    }

}

/* ======================================================
   REDUCED MOTION
====================================================== */

@media (prefers-reduced-motion: reduce) {

    .fr-featured .fr-featured__project {
        animation: none;
    }

    .fr-featured a,
    .fr-featured a span,
    .fr-featured .fr-featured__image {
        transition: none;
    }

    .fr-featured .fr-featured__preview:hover,
    .fr-featured .fr-featured__all:hover,
    .fr-featured .fr-featured__visit:hover,
    .fr-featured .fr-featured__all:hover span,
    .fr-featured .fr-featured__visit:hover span {
        transform: none;
    }

}


/* =========================================================
   FRAYORA — HERO STRUCTURE UPDATE

   APPEND AT THE VERY BOTTOM OF main.css.

   Retains existing:
   - Copy and typography
   - Responsive photographs
   - Button styles
   - Content alignment
   - Entrance animations and reduced-motion rules
========================================================= */


/* =========================================
   HERO CONTAINER — DESKTOP DEFAULTS
========================================= */

body .frayora-home-hero.frayora-home-hero--shaped {
    --fr-hero-paper: #F8F3EB;

    --fr-hero-height: 720px;
    --fr-hero-top: 88px;
    --fr-hero-bottom: 148px;

    --fr-hero-cut-left: 30px;
    --fr-hero-cut-right: 64px;

    --fr-hero-fold-top: 62%;
    --fr-hero-fold-bottom: 41%;
    --fr-hero-fold-opacity: 1;

    position: relative;
    isolation: isolate;

    width: 100%;
    max-width: none;

    height: auto !important;
    min-height: 0 !important;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background: var(--fr-hero-paper);
}


/* =========================================
   SOFT DEPTH AROUND THE SHAPED BACKGROUND
========================================= */

body .frayora-home-hero--shaped
.frayora-home-hero__frame {
    position: absolute;
    inset: 0;
    z-index: 0;

    pointer-events: none;

    filter:
        drop-shadow(
            0 10px 12px rgba(24, 34, 26, 0.12)
        );
}


/* =========================================
   ANGLED LOWER EDGE

   Only the background is clipped.
   Text and buttons remain outside this mask.
========================================= */

body .frayora-home-hero--shaped
.frayora-home-hero__scene {
    position: absolute;
    inset: 0;

    overflow: hidden;
    isolation: isolate;

    background: #283327;

    clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - var(--fr-hero-cut-right)),
        65% 100%,
        0 calc(100% - var(--fr-hero-cut-left))
    );
}


/* =========================================
   TRANSLUCENT DIAGONAL SURFACE
========================================= */

body .frayora-home-hero--shaped
.frayora-home-hero__scene::after {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 2;

    pointer-events: none;

    opacity: var(--fr-hero-fold-opacity);

    background:
        linear-gradient(
            110deg,
            rgba(24, 39, 28, 0.24) 0%,
            rgba(43, 59, 42, 0.10) 70%,
            rgba(248, 243, 235, 0.06) 100%
        );

    clip-path: polygon(
        0 0,
        var(--fr-hero-fold-top) 0,
        var(--fr-hero-fold-bottom) 100%,
        0 100%
    );
}


/* =========================================
   CONTENT SPACING

   Preserves your existing horizontal grid.
   Reserves space above the angled lower edge.
========================================= */

body .frayora-home-hero--shaped
.frayora-home-hero__inner {
    position: relative;
    z-index: 2;

    height: auto !important;
    min-height: var(--fr-hero-height) !important;

    padding-top: var(--fr-hero-top) !important;
    padding-bottom: var(--fr-hero-bottom) !important;
}


/* =========================================
   TABLET — 600px TO 1100px
========================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .frayora-home-hero.frayora-home-hero--shaped {
        --fr-hero-height: 820px;
        --fr-hero-top: 90px;
        --fr-hero-bottom: 139px;

        --fr-hero-cut-left: 22px;
        --fr-hero-cut-right: 44px;

        --fr-hero-fold-top: 78%;
        --fr-hero-fold-bottom: 43%;
        --fr-hero-fold-opacity: 0.8;
    }

}


/* =========================================
   SMALL TABLET — 600px TO 750px
========================================= */

@media (min-width: 600px) and (max-width: 750px) {

    body .frayora-home-hero.frayora-home-hero--shaped {
        --fr-hero-height: 780px;
        --fr-hero-top: 76px;
        --fr-hero-bottom: 124px;
    }

}


/* =========================================
   MOBILE — UP TO 599px

   Content determines the hero height.
========================================= */

@media (max-width: 599px) {

    body .frayora-home-hero.frayora-home-hero--shaped {
        --fr-hero-height: 0px;
        --fr-hero-top: 88px;
        --fr-hero-bottom: 120px;

        --fr-hero-cut-left: 12px;
        --fr-hero-cut-right: 28px;

        --fr-hero-fold-top: 100%;
        --fr-hero-fold-bottom: 50%;
        --fr-hero-fold-opacity: 0.5;
    }

}


/* =========================================
   SMALL MOBILE — UP TO 374px
========================================= */

@media (max-width: 374px) {

    body .frayora-home-hero.frayora-home-hero--shaped {
        --fr-hero-top: 76px;
        --fr-hero-bottom: 106px;

        --fr-hero-cut-left: 10px;
        --fr-hero-cut-right: 24px;
    }
    
    

}


/* Slightly darken the left diagonal overlay */

body .frayora-home-hero--shaped
.frayora-home-hero__scene::after {
    background: linear-gradient(
        110deg,
        rgba(24, 39, 28, 0.34) 0%,
        rgba(34, 50, 36, 0.20) 70%,
        rgba(34, 50, 36, 0.10) 100%
    );
}



/* ==========================================
   FRAYORA — SECTION 02
   SCULPTED SECTION SHAPE
   Desktop / Tablet / Mobile
========================================== */

/* DESKTOP */

body .frayora-connected-v3.frayora-connected-v3--sculpted {
    --fc-shape-drop: 44px;
    --fc-notch-width: clamp(44px, 5.8vw, 86px);
    --fc-notch-height: clamp(205px, 25vw, 330px);
    --fc-notch-top: clamp(58px, 7vw, 118px);

    position: relative;
    z-index: 3;
    isolation: isolate;
    overflow: visible !important;

    background: transparent !important;
    background-image: none !important;
}

/* ANGLED LOWER SECTION EDGE */

body .frayora-connected-v3.frayora-connected-v3--sculpted::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: calc(100% + var(--fc-shape-drop));
    z-index: -1;
    pointer-events: none;

    background: #F8F3EB;

    clip-path: polygon(
        0 0,
        100% 0,
        100% 100%,
        44% 100%,
        0 calc(100% - var(--fc-shape-drop))
    );
}

/* SUBTLE LEFT ARCHITECTURAL NOTCH */

body .frayora-connected-v3.frayora-connected-v3--sculpted::after {
    content: "";
    position: absolute;
    top: var(--fc-notch-top);
    left: 0;
    width: var(--fc-notch-width);
    height: var(--fc-notch-height);
    z-index: 0;
    pointer-events: none;

    background: #F5EDE4;

    clip-path: polygon(
        0 0,
        100% 50%,
        0 100%
    );
}

/* KEEP ORIGINAL CONTENT ABOVE SHAPES */

body .frayora-connected-v3.frayora-connected-v3--sculpted
.frayora-connected-v3__inner {
    position: relative;
    z-index: 1;
}

/* ==========================================
   TABLET — 600px TO 1100px
========================================== */

@media (min-width: 600px) and (max-width: 1100px) {

    body .frayora-connected-v3.frayora-connected-v3--sculpted {
        --fc-shape-drop: 32px;
        --fc-notch-width: 45px;
        --fc-notch-height: 195px;
        --fc-notch-top: 70px;
    }

    body .frayora-connected-v3.frayora-connected-v3--sculpted::before {
        clip-path: polygon(
            0 0,
            100% 0,
            100% 100%,
            52% 100%,
            0 calc(100% - var(--fc-shape-drop))
        );
    }
}

/* ==========================================
   MOBILE — UP TO 599px
========================================== */

@media (max-width: 599px) {

    body .frayora-connected-v3.frayora-connected-v3--sculpted {
        --fc-shape-drop: 22px;
        --fc-notch-width: 25px;
        --fc-notch-height: 145px;
        --fc-notch-top: 74px;
    }

    body .frayora-connected-v3.frayora-connected-v3--sculpted::before {
        clip-path: polygon(
            0 0,
            100% 0,
            100% 100%,
            64% 100%,
            0 calc(100% - var(--fc-shape-drop))
        );
    }
}


/* =========================================================
   FRAYORA — HOMEPAGE SECTION 01
   SMOOTH CURVED HERO STRUCTURE

   DESKTOP + TABLET + MOBILE

   Preserves:
   - Existing responsive photography
   - Existing gradient overlays
   - Existing typography
   - Existing button styling
   - Existing animations
   - Existing copywriting
========================================================= */


/* =========================================
   01 — HERO CONTAINER
========================================= */

body .frayora-home-hero.frayora-home-hero--shaped {

    --fr-hero-height: 760px;
    --fr-hero-top: 110px;
    --fr-hero-bottom: 155px;
    --fr-hero-wave-height: 225px;

    position: relative;
    isolation: isolate;

    display: block !important;

    width: 100vw !important;
    max-width: none !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 0 0 calc(50% - 50vw) !important;
    padding: 0 !important;

    overflow: hidden;

    background: #F8F3EB !important;
}


/* =========================================
   02 — PHOTO FRAME

   Keeps the existing image and overlays.
   Removes the previous angular clipping.
========================================= */

body .frayora-home-hero--shaped
.frayora-home-hero__frame {

    position: absolute;
    inset: 0;
    z-index: 0;

    pointer-events: none;

    filter: none !important;
}


body .frayora-home-hero--shaped
.frayora-home-hero__scene {

    position: absolute;
    inset: 0;

    overflow: hidden;

    clip-path: none !important;
    -webkit-clip-path: none !important;

    border-radius: 0 !important;
}


/* =========================================
   03 — HERO CONTENT POSITIONING

   Wider editorial layout.
   Typography remains unchanged.
========================================= */

body .frayora-home-hero--shaped
.frayora-home-hero__inner {

    position: relative;
    z-index: 2;

    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    width: 100% !important;
    max-width: 1520px !important;

    min-height: var(--fr-hero-height) !important;
    height: auto !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding:
        var(--fr-hero-top)
        80px
        var(--fr-hero-bottom) !important;
}


/* =========================================
   04 — CONTENT WIDTH

   Preserves font sizes and text styling.
========================================= */

body .frayora-home-hero--shaped
.frayora-home-hero__content {

    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 800px;
    min-width: 0;
}


/* =========================================
   05 — SMOOTH BOTTOM CURVE

   Ivory matches the website background.
   SVG scales smoothly across screen sizes.
========================================= */

body .frayora-home-hero--shaped
.frayora-home-hero__bottom-wave {

    position: absolute;

    left: 0;
    bottom: -1px;

    z-index: 4;

    display: block;

    width: 100% !important;
    height: var(--fr-hero-wave-height) !important;

    overflow: hidden;

    pointer-events: none;

    fill: #F8F3EB;
}


/* =========================================
   06 — COMPACT DESKTOP
   1101px–1350px
========================================= */

@media (min-width: 1101px) and (max-width: 1350px) {

    body .frayora-home-hero--shaped
    .frayora-home-hero__inner {

        padding-left: 6vw !important;
        padding-right: 6vw !important;
    }

}


/* =========================================
   07 — TABLET
   600px–1100px
========================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .frayora-home-hero.frayora-home-hero--shaped {

        --fr-hero-height: 820px;
        --fr-hero-top: 100px;
        --fr-hero-bottom: 155px;

        --fr-hero-wave-height: 180px;
    }


    body .frayora-home-hero--shaped
    .frayora-home-hero__inner {

        max-width: 1100px !important;

        padding-left:
            clamp(34px, 5.5vw, 60px) !important;

        padding-right:
            clamp(34px, 5.5vw, 60px) !important;
    }


    body .frayora-home-hero--shaped
    .frayora-home-hero__content {

        max-width: 780px;
    }

}


/* =========================================
   08 — SMALL TABLET
   600px–750px
========================================= */

@media (min-width: 600px) and (max-width: 750px) {

    body .frayora-home-hero.frayora-home-hero--shaped {

        --fr-hero-height: 780px;
        --fr-hero-top: 95px;
        --fr-hero-bottom: 145px;

        --fr-hero-wave-height: 155px;
    }

}


/* =========================================
   09 — MOBILE
   0px–599px

   Smaller, softer lower curve.
   Content determines section height.
========================================= */

@media (max-width: 599px) {

    body .frayora-home-hero.frayora-home-hero--shaped {

        --fr-hero-height: 0px;

        --fr-hero-top: 104px;
        --fr-hero-bottom: 135px;

        --fr-hero-wave-height: 120px;
    }


    body .frayora-home-hero--shaped
    .frayora-home-hero__inner {

        max-width: 599px !important;

        min-height: 0 !important;

        padding:
            var(--fr-hero-top)
            28px
            var(--fr-hero-bottom)
            34px !important;
    }


    body .frayora-home-hero--shaped
    .frayora-home-hero__content {

        max-width: 100%;
    }

}


/* =========================================
   10 — SMALL MOBILE
   0px–374px
========================================= */

@media (max-width: 374px) {

    body .frayora-home-hero.frayora-home-hero--shaped {

        --fr-hero-top: 94px;
        --fr-hero-bottom: 125px;

        --fr-hero-wave-height: 104px;
    }


    body .frayora-home-hero--shaped
    .frayora-home-hero__inner {

        padding-left: 29px !important;
        padding-right: 23px !important;
    }

}

/* END — FRAYORA HOMEPAGE SECTION 01 */


/* =====================================================
   FRAYORA — SECTION 01
   CLEAN MOCKUP DIAGONAL OVERLAY FIX
   Desktop / Tablet / Mobile
===================================================== */


/* 01 — REMOVE THE ORIGINAL REVERSED DIAGONAL */

body .frayora-home-hero.frayora-home-hero--shaped
.frayora-home-hero__scene::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
}


/* 02 — REMOVE THE OLD GLOW / GLASS STREAK */

body .frayora-home-hero.frayora-home-hero--shaped
.frayora-home-hero__overlay::after {
    content: none !important;
    display: none !important;
}


/* 03 — BASE PHOTO OVERLAY */

body .frayora-home-hero.frayora-home-hero--shaped
.frayora-home-hero__overlay {

    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(15, 29, 20, 0.20) 0%,
            rgba(15, 29, 20, 0.10) 58%,
            rgba(15, 29, 20, 0.00) 90%
        ) !important;

    pointer-events: none;
}


/* 04 — ONE CLEAN "\" DARK OLIVE PANEL */

body .frayora-home-hero.frayora-home-hero--shaped
.frayora-home-hero__overlay::before {

    content: "";
    display: block !important;

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(15, 29, 21, 0.68) 0%,
            rgba(21, 35, 25, 0.58) 65%,
            rgba(27, 41, 29, 0.46) 100%
        ) !important;

    /* TOP-LEFT TO BOTTOM-RIGHT DIAGONAL */

    clip-path: polygon(
        0 0,
        48% 0,
        73% 100%,
        0 100%
    ) !important;

    -webkit-clip-path: polygon(
        0 0,
        48% 0,
        73% 100%,
        0 100%
    ) !important;

    opacity: 1 !important;
    pointer-events: none;
}


/* =====================================================
   TABLET — EXTEND PANEL FOR TEXT READABILITY
===================================================== */

@media (min-width: 600px) and (max-width: 1100px) {

    body .frayora-home-hero.frayora-home-hero--shaped
    .frayora-home-hero__overlay::before {

        clip-path: polygon(
            0 0,
            69% 0,
            96% 100%,
            0 100%
        ) !important;

        -webkit-clip-path: polygon(
            0 0,
            69% 0,
            96% 100%,
            0 100%
        ) !important;
    }
}


/* SMALL TABLET — ALMOST FULL-WIDTH PANEL */

@media (min-width: 600px) and (max-width: 750px) {

    body .frayora-home-hero.frayora-home-hero--shaped
    .frayora-home-hero__overlay::before {

        clip-path: polygon(
            0 0,
            88% 0,
            100% 100%,
            0 100%
        ) !important;

        -webkit-clip-path: polygon(
            0 0,
            88% 0,
            100% 100%,
            0 100%
        ) !important;
    }
}


/* =====================================================
   MOBILE — FULL DARK OLIVE OVERLAY
   NO DIAGONAL
===================================================== */

@media (max-width: 599px) {

    body .frayora-home-hero.frayora-home-hero--shaped
    .frayora-home-hero__overlay {

        background:
            linear-gradient(
                180deg,
                rgba(16, 31, 22, 0.64) 0%,
                rgba(16, 31, 22, 0.66) 55%,
                rgba(16, 31, 22, 0.69) 100%
            ) !important;
    }

    body .frayora-home-hero.frayora-home-hero--shaped
    .frayora-home-hero__overlay::before {
        content: none !important;
        display: none !important;
    }
}


/* ==========================================
   FRAYORA — SECTION 02
   LARGER LEFT TRIANGLE DETAIL
   DESKTOP / TABLET / MOBILE
========================================== */

/* DESKTOP */
@media (min-width: 1101px) {
    body .frayora-connected-v3.frayora-connected-v3--sculpted {
        --fc-notch-width: clamp(100px, 10vw, 160px);
        --fc-notch-height: clamp(330px, 34vw, 460px);
        --fc-notch-top: 80px;
    }
}

/* TABLET */
@media (min-width: 600px) and (max-width: 1100px) {
    body .frayora-connected-v3.frayora-connected-v3--sculpted {
        --fc-notch-width: clamp(60px, 8vw, 90px);
        --fc-notch-height: 280px;
        --fc-notch-top: 70px;
    }
}

/* MOBILE */
@media (max-width: 599px) {
    body .frayora-connected-v3.frayora-connected-v3--sculpted {
        --fc-notch-width: 48px;
        --fc-notch-height: 190px;
        --fc-notch-top: 74px;
    }
}

/* =====================================================
   FRAYORA — SECTION 01
   REFINED LIGHT OLIVE DIAGONAL OVERLAY

   DESKTOP / TABLET / MOBILE

   PRESERVES:
   - Typography
   - Photography
   - Buttons
   - Content positioning
   - Bottom curve
===================================================== */


/* =========================================
   01 — REMOVE OLD DECORATIVE EFFECTS
========================================= */

body .frayora-home-hero.frayora-home-hero--shaped
.frayora-home-hero__scene::after {
    content: none !important;
    display: none !important;
}

body .frayora-home-hero.frayora-home-hero--shaped
.frayora-home-hero__overlay::after {
    content: none !important;
    display: none !important;
}


/* =========================================
   02 — DESKTOP BASE OVERLAY

   Very light shading across the image.
   The landscape remains visible.
========================================= */

body .frayora-home-hero.frayora-home-hero--shaped
.frayora-home-hero__overlay {

    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(23, 37, 27, 0.14) 0%,
            rgba(23, 37, 27, 0.09) 40%,
            rgba(23, 37, 27, 0.03) 70%,
            rgba(23, 37, 27, 0.00) 100%
        ) !important;

    pointer-events: none;
}


/* =========================================
   03 — DESKTOP DIAGONAL PANEL

   Lighter translucent olive.
   Same "\" direction as the mockup.
========================================= */

body .frayora-home-hero.frayora-home-hero--shaped
.frayora-home-hero__overlay::before {

    content: "";
    display: block !important;

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(30, 49, 36, 0.36) 0%,
            rgba(38, 54, 40, 0.31) 60%,
            rgba(43, 58, 43, 0.25) 100%
        ) !important;

    clip-path: polygon(
        0 0,
        48% 0,
        73% 100%,
        0 100%
    ) !important;

    -webkit-clip-path: polygon(
        0 0,
        48% 0,
        73% 100%,
        0 100%
    ) !important;

    opacity: 1 !important;

    filter: none !important;
    transform: none !important;

    pointer-events: none;
}


/* =========================================
   04 — TABLET

   Balanced diagonal.
   More visible landscape on right.
   Soft shading remains behind text.
========================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .frayora-home-hero.frayora-home-hero--shaped
    .frayora-home-hero__overlay {

        background:
            linear-gradient(
                90deg,
                rgba(22, 37, 27, 0.28) 0%,
                rgba(22, 37, 27, 0.23) 35%,
                rgba(22, 37, 27, 0.15) 65%,
                rgba(22, 37, 27, 0.04) 100%
            ) !important;
    }

    body .frayora-home-hero.frayora-home-hero--shaped
    .frayora-home-hero__overlay::before {

        background:
            linear-gradient(
                90deg,
                rgba(30, 48, 35, 0.30) 0%,
                rgba(34, 51, 38, 0.25) 60%,
                rgba(39, 54, 41, 0.19) 100%
            ) !important;

        clip-path: polygon(
            0 0,
            56% 0,
            84% 100%,
            0 100%
        ) !important;

        -webkit-clip-path: polygon(
            0 0,
            56% 0,
            84% 100%,
            0 100%
        ) !important;
    }
}


/* =========================================
   05 — SMALL TABLET

   Diagonal stays visible on narrow screens.
   No nearly vertical dark strip.
========================================= */

@media (min-width: 600px) and (max-width: 750px) {

    body .frayora-home-hero.frayora-home-hero--shaped
    .frayora-home-hero__overlay {

        background:
            linear-gradient(
                90deg,
                rgba(22, 37, 27, 0.34) 0%,
                rgba(22, 37, 27, 0.27) 45%,
                rgba(22, 37, 27, 0.15) 80%,
                rgba(22, 37, 27, 0.09) 100%
            ) !important;
    }

    body .frayora-home-hero.frayora-home-hero--shaped
    .frayora-home-hero__overlay::before {

        clip-path: polygon(
            0 0,
            64% 0,
            90% 100%,
            0 100%
        ) !important;

        -webkit-clip-path: polygon(
            0 0,
            64% 0,
            90% 100%,
            0 100%
        ) !important;
    }
}


/* =========================================
   06 — MOBILE

   Full-image overlay.
   No diagonal panel.
========================================= */

@media (max-width: 599px) {

    body .frayora-home-hero.frayora-home-hero--shaped
    .frayora-home-hero__overlay {

        background:
            linear-gradient(
                180deg,
                rgba(20, 35, 25, 0.58) 0%,
                rgba(20, 35, 25, 0.60) 55%,
                rgba(20, 35, 25, 0.62) 100%
            ) !important;
    }

    body .frayora-home-hero.frayora-home-hero--shaped
    .frayora-home-hero__overlay::before {

        content: none !important;
        display: none !important;
    }
}

/* END — FRAYORA SECTION 01 OVERLAY */


/* =========================================
   FRAYORA — SECTION 01
   TABLET OVERLAY WIDTH FIX

   Extends the diagonal beyond the heading.
   Preserves overlay colour and transparency.
========================================= */

@media (min-width: 600px) and (max-width: 1100px) {

    body .frayora-home-hero.frayora-home-hero--shaped
    .frayora-home-hero__overlay::before {

        clip-path: polygon(
            0 0,
            76% 0,
            100% 100%,
            0 100%
        ) !important;

        -webkit-clip-path: polygon(
            0 0,
            76% 0,
            100% 100%,
            0 100%
        ) !important;
    }
}


/* =====================================================
   FRAYORA — HOMEPAGE SECTION 03
   OUR APPROACH — EDITORIAL ANGLED STRUCTURE

   Preserves:
   - Existing Manrope + Inter typography
   - Existing PNG illustrations
   - Existing CTA styling
   - Existing visual journey text
   - Existing hover effects
===================================================== */


/* ==========================================
   BASE SECTION
========================================== */

body .home-approach.home-approach--editorial {
    position: relative;
    isolation: isolate;

    width: 100%;
    max-width: none;

    margin-left: 0;

    background-color: #F5EDE4 !important;
    background-image: none !important;

    overflow: hidden;
}

/* Remove unrelated section decorations */

body .home-approach--editorial::after {
    content: none;
    display: none;
}

/* Keep content above background geometry */

body .home-approach--editorial
.home-approach__inner {
    position: relative;
    z-index: 2;

    box-sizing: border-box;
}

body .home-approach--editorial
.home-approach__intro,
body .home-approach--editorial
.home-approach__journey {
    position: relative;
    z-index: 2;

    min-width: 0;
}

/* Prevent existing image rules from creating
   backgrounds around the illustrations */

body .home-approach--editorial
.home-approach__visual {
    background: transparent;
    border: 0;
}


/* ==========================================
   DESKTOP — 1101PX AND ABOVE
========================================== */

@media screen and (min-width: 1101px) {

    body .home-approach.home-approach--editorial {
        display: flex;
        align-items: center;

        min-height: 520px;
        height: auto;

        padding: 0;
    }

    /* DEEP GREEN ANGLED PANEL */

    body .home-approach--editorial::before {
        content: "";

        position: absolute;
        z-index: 0;

        top: 0;
        bottom: 0;
        left: 0;

        width: 42%;

        background:
            linear-gradient(
                125deg,
                #34483B 0%,
                #293C31 60%,
                #233329 100%
            );

        clip-path: polygon(
            0 0,
            79% 0,
            100% 50%,
            79% 100%,
            0 100%
        );

        pointer-events: none;
    }

    /* TWO-COLUMN SECTION */

    body .home-approach--editorial
    .home-approach__inner {
        display: grid;

        grid-template-columns:
            minmax(0, 35%)
            minmax(0, 65%);

        align-items: center;

        gap: 0;

        width: 100%;
        max-width: 1600px;

        min-height: 520px;

        margin: 0 auto;

        padding: 65px 70px;
    }

    /* LEFT COPY */

    body .home-approach--editorial
    .home-approach__intro {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        width: 100%;
        max-width: 410px;

        padding: 0 60px 0 0;

        text-align: left;
    }

    /* PRESERVE TYPOGRAPHY — CHANGE COLOR ONLY */

    body .home-approach--editorial
    .home-approach__eyebrow {
        color: #E8B59E !important;
    }

    body .home-approach--editorial
    .home-approach__title {
        color: #F8F3EB !important;
    }

    body .home-approach--editorial
    .home-approach__title span {
        color: #F8F3EB !important;
    }

    body .home-approach--editorial
    .home-approach__description {
        color: rgba(248, 243, 235, 0.88) !important;
    }

    /* RIGHT VISUAL JOURNEY */

    body .home-approach--editorial
    .home-approach__journey {
        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            28px
            minmax(0, 1fr)
            28px
            minmax(0, 1fr);

        align-items: start;

        column-gap: 13px;

        width: 100%;
        max-width: 810px;

        margin: 0 0 0 auto;
        padding: 0 0 0 30px;
    }

    /* KEEP EXISTING IMAGES */

    body .home-approach--editorial
    .home-approach__visual {
        width: 100%;
        height: 180px;

        margin-bottom: 18px;
    }

    /* KEEP STAGE CONTENT CENTERED */

    body .home-approach--editorial
    .home-approach__stage {
        align-items: center;
        text-align: center;
    }

    body .home-approach--editorial
    .home-approach__stage h3,
    body .home-approach--editorial
    .home-approach__details p {
        text-align: center;
    }

    /* EXISTING ARROWS */

    body .home-approach--editorial
    .home-approach__arrow {
        align-self: start;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 28px;
        height: 180px;

        transform: none;
    }
}


/* ==========================================
   SMALL DESKTOP — 1101PX TO 1350PX
========================================== */

@media screen and (min-width: 1101px)
                   and (max-width: 1350px) {

    body .home-approach--editorial::before {
        width: 43%;
    }

    body .home-approach--editorial
    .home-approach__inner {
        grid-template-columns:
            minmax(0, 37%)
            minmax(0, 63%);

        padding: 60px 45px;
    }

    body .home-approach--editorial
    .home-approach__intro {
        padding-right: 50px;
    }

    body .home-approach--editorial
    .home-approach__journey {
        padding-left: 24px;
        column-gap: 8px;
    }
}


/* ==========================================
   LARGE TABLET — 900PX TO 1100PX
   SIDE-BY-SIDE WITH SOFTER ANGLE
========================================== */

@media screen and (min-width: 900px)
                   and (max-width: 1100px) {

    body .home-approach--editorial {
        display: block;
    }

    body .home-approach--editorial::before {
        content: "";

        position: absolute;
        inset: 0 auto 0 0;

        width: 43%;

        background: #2F4135;

        clip-path: polygon(
            0 0,
            78% 0,
            100% 50%,
            78% 100%,
            0 100%
        );

        z-index: 0;
        pointer-events: none;
    }

    body .home-approach--editorial
    .home-approach__inner {
        display: grid;

        grid-template-columns:
            minmax(0, 37%)
            minmax(0, 63%);

        gap: 0;

        align-items: center;

        width: 100%;
        max-width: none;

        padding: 70px 35px;
    }

    body .home-approach--editorial
    .home-approach__intro {
        align-items: flex-start;

        max-width: none;
        padding-right: 45px;

        text-align: left;
    }

    body .home-approach--editorial
    .home-approach__eyebrow {
        color: #E8B59E !important;
    }

    body .home-approach--editorial
    .home-approach__title,
    body .home-approach--editorial
    .home-approach__title span {
        color: #F8F3EB !important;
    }

    body .home-approach--editorial
    .home-approach__description {
        color: rgba(248,243,235,.88) !important;
    }

    body .home-approach--editorial
    .home-approach__journey {
        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            18px
            minmax(0, 1fr)
            18px
            minmax(0, 1fr);

        align-items: start;
        column-gap: 8px;

        width: 100%;
        max-width: none;

        margin: 0;
        padding-left: 25px;
    }

    body .home-approach--editorial
    .home-approach__visual,
    body .home-approach--editorial
    .home-approach__arrow {
        height: 135px;
    }

    body .home-approach--editorial
    .home-approach__visual img {
        max-width: 125px !important;
        height: 125px !important;
        max-height: 125px !important;
    }

    body .home-approach--editorial
    .home-approach__stage {
        align-items: center;
    }

    body .home-approach--editorial
    .home-approach__stage h3,
    body .home-approach--editorial
    .home-approach__details p {
        text-align: center;
    }

    body .home-approach--editorial
    .home-approach__arrow {
        width: 18px;
        transform: none;
    }
}


/* ==========================================
   SMALL TABLET — 600PX TO 899PX

   INTRO ABOVE THE THREE ILLUSTRATIONS
========================================== */

@media screen and (min-width: 600px)
                   and (max-width: 899px) {

    body .home-approach--editorial::before {
        content: "";

        position: absolute;
        inset: 0 0 auto 0;

        width: 100%;
        height: 47%;

        background: #2F4135;

        clip-path: polygon(
            0 0,
            100% 0,
            100% 87%,
            50% 100%,
            0 87%
        );

        z-index: 0;
        pointer-events: none;
    }

    body .home-approach--editorial
    .home-approach__inner {
        display: flex;
        flex-direction: column;

        align-items: stretch;

        gap: 90px;

        width: 100%;
        max-width: none;

        padding: 60px 40px 80px;
    }

    body .home-approach--editorial
    .home-approach__intro {
        align-items: center;

        width: 100%;
        max-width: 620px;

        margin: 0 auto;

        text-align: center;
    }

    body .home-approach--editorial
    .home-approach__eyebrow {
        color: #E8B59E !important;
        text-align: center;
    }

    body .home-approach--editorial
    .home-approach__title,
    body .home-approach--editorial
    .home-approach__title span {
        color: #F8F3EB !important;
        text-align: center;
    }

    body .home-approach--editorial
    .home-approach__description {
        color: rgba(248,243,235,.88) !important;
        text-align: center;
    }

    body .home-approach--editorial
    .home-approach__journey {
        width: 100%;
        max-width: 760px;

        margin: 0 auto;
        padding: 0;
    }
}


/* ==========================================
   MOBILE — 599PX AND BELOW
   FULL-WIDTH ANGLED TOP PANEL
========================================== */

@media screen and (max-width: 599px) {

    body .home-approach.home-approach--editorial {
        background-color: #F5EDE4 !important;
        background-image: none !important;
    }

    /* DARK PANEL FOR THE INTRO */

    body .home-approach--editorial::before {
        content: "";

        position: absolute;
        z-index: 0;

        top: 0;
        left: 0;
        right: 0;

        width: 100%;
        height: 510px;

        background: #2F4135;

        clip-path: polygon(
            0 0,
            100% 0,
            100% 91%,
            50% 100%,
            0 91%
        );

        pointer-events: none;
    }

    body .home-approach--editorial
    .home-approach__inner {
        display: flex;
        flex-direction: column;

        gap: 75px;

        width: 100%;
        max-width: none;

        padding: 65px 25px 80px;
    }

    body .home-approach--editorial
    .home-approach__intro {
        display: flex;
        flex-direction: column;
        align-items: center;

        width: 100%;
        max-width: 440px;

        margin: 0 auto;

        text-align: center !important;
    }

    body .home-approach--editorial
    .home-approach__eyebrow {
        color: #E8B59E !important;
        text-align: center !important;
    }

    body .home-approach--editorial
    .home-approach__title,
    body .home-approach--editorial
    .home-approach__title span {
        color: #F8F3EB !important;
        text-align: center !important;
    }

    body .home-approach--editorial
    .home-approach__description {
        color: rgba(248,243,235,.90) !important;
        text-align: center !important;
    }

    /* PRESERVE ORIGINAL BUTTON */

    body .home-approach--editorial
    .home-approach__button {
        align-self: center;
    }

    /* PRESERVE VERTICAL MOBILE JOURNEY */

    body .home-approach--editorial
    .home-approach__journey {
        display: flex;
        flex-direction: column;
        align-items: center;

        width: 100%;
        max-width: 100%;

        margin: 0 auto;
        padding: 0;
    }

    body .home-approach--editorial
    .home-approach__stage {
        width: 100%;
    }

    body .home-approach--editorial
    .home-approach__arrow {
        transform: rotate(90deg);
    }
}


/* ==========================================
   EXTRA SMALL MOBILE
========================================== */

@media screen and (max-width: 374px) {

    body .home-approach--editorial::before {
        height: 540px;
    }

    body .home-approach--editorial
    .home-approach__inner {
        padding-left: 23px;
        padding-right: 23px;

        gap: 85px;
    }
}

/* =========================================
   FRAYORA — SECTION 01
   MOBILE — SOFTER BOTTOM CURVE
========================================= */

@media (max-width: 599px) {

    body .frayora-home-hero.frayora-home-hero--shaped {
        --fr-hero-wave-height: 65px;
    }

    body .frayora-home-hero--shaped
    .frayora-home-hero__bottom-wave {
        height: 65px !important;
    }
}

/* SMALL MOBILE */

@media (max-width: 374px) {

    body .frayora-home-hero.frayora-home-hero--shaped {
        --fr-hero-wave-height: 55px;
    }

    body .frayora-home-hero--shaped
    .frayora-home-hero__bottom-wave {
        height: 55px !important;
    }
}



/* =========================================================
   FRAYORA — HOMEPAGE SECTION 03
   FINAL GREEN PANEL + CORNER DETAILS
   Safe at end of existing main.css.
   No PHP, typography, image or button changes.
========================================================= */

/* Warm, layered deep-green treatment across every breakpoint */
body .home-approach.home-approach--editorial {
    --frayora-approach-green:
        radial-gradient(
            ellipse 85% 95% at 10% 18%,
            rgba(132, 155, 120, 0.16) 0%,
            rgba(132, 155, 120, 0.05) 53%,
            transparent 78%
        ),
        linear-gradient(
            43deg,
            rgba(8, 24, 17, 0.20) 0%,
            transparent 47%
        ),
        linear-gradient(
            128deg,
            #364D3E 0%,
            #2A4034 38%,
            #20352C 73%,
            #293D32 100%
        );
}

/* Use the same subtle green depth on desktop, tablet and mobile */
body .home-approach.home-approach--editorial::before {
    background: var(--frayora-approach-green) !important;
}

/* Tiny warm-stone triangular accents on the light side */
body .home-approach.home-approach--editorial::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    background-image:
        linear-gradient(
            135deg,
            transparent 49.5%,
            rgba(220, 207, 192, 0.34) 50%
        ),
        linear-gradient(
            225deg,
            transparent 49.5%,
            rgba(220, 207, 192, 0.34) 50%
        );
    background-position: right top, right bottom;
    background-size: 98px 88px, 110px 100px;
    background-repeat: no-repeat;
}

/* Faceted, barely visible fold inside the left green panel */
@media (min-width: 900px) {
    body .home-approach.home-approach--editorial
    .home-approach__inner::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: clamp(85px, 10vw, 165px);
        z-index: 0;
        pointer-events: none;
        background: rgba(161, 183, 155, 0.055);
        clip-path: polygon(0 0, 100% 50%, 0 100%);
    }
}

/* Slightly smaller corner details on side-by-side tablets */
@media (min-width: 900px) and (max-width: 1100px) {
    body .home-approach.home-approach--editorial::after {
        background-size: 66px 62px, 72px 72px;
    }
}

/* On stacked tablets, keep only a subtle bottom-right corner */
@media (min-width: 600px) and (max-width: 899px) {
    body .home-approach.home-approach--editorial::after {
        background-image: linear-gradient(
            225deg,
            transparent 49.5%,
            rgba(220, 207, 192, 0.28) 50%
        );
        background-position: right bottom;
        background-size: 74px 74px;
    }
}

/* On phones, scale down the corner to avoid visual clutter */
@media (max-width: 599px) {
    body .home-approach.home-approach--editorial::after {
        background-image: linear-gradient(
            225deg,
            transparent 49.5%,
            rgba(220, 207, 192, 0.26) 50%
        );
        background-position: right bottom;
        background-size: 52px 56px;
    }
}



/* =========================================================
   FRAYORA — HOMEPAGE SECTION 04
   BUSINESS IN A BOX™ — SHOWCASE LAYOUT

   REFERENCE STRUCTURE:
   - Introduction above cards
   - Three cards in one row on wide screens
   - Soft angular background geometry
   - Subtle sloping section ending

   PRESERVES ORIGINAL:
   - Typography
   - Card colours
   - Card icons
   - Button styling
   - Button links
   - Hover and entrance effects
========================================================= */


/* =========================================
   01 — SECTION
========================================= */

body .frayora-biab-v4.frayora-biab-v4--showcase {

    position: relative;
    isolation: isolate;

    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background-color: #F8F3EB !important;

    background-image:
        radial-gradient(
            ellipse 95% 65% at 35% 20%,
            rgba(255,255,255,.72),
            rgba(255,255,255,.22) 65%,
            transparent 100%
        ),
        linear-gradient(
            150deg,
            rgba(255,255,255,.18),
            rgba(225,211,195,.12)
        ) !important;
}


/* =========================================
   02 — LARGE BACKGROUND FACETS
========================================= */

body .frayora-biab-v4--showcase::before {

    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    background:
        linear-gradient(
            145deg,
            rgba(224,211,196,.18),
            rgba(255,255,255,.10) 60%,
            rgba(225,211,195,.20)
        );

    clip-path: polygon(
        0 0,
        100% 0,
        100% 17%,
        45% 54%,
        0 84%
    );

    pointer-events: none;
}


/* =========================================
   03 — DECORATIVE GEOMETRY CONTAINER
========================================= */

body .frayora-biab-v4--showcase
.frayora-biab-v4__geometry {

    position: absolute;
    inset: 0;

    z-index: 0;

    overflow: hidden;
    pointer-events: none;
}


/* Left architectural facet */

body .frayora-biab-v4--showcase
.frayora-biab-v4__geometry::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 16%;
    height: 72%;

    background:
        linear-gradient(
            135deg,
            rgba(208,192,171,.25),
            rgba(255,255,255,.06)
        );

    clip-path: polygon(
        0 0,
        100% 0,
        0 100%
    );
}


/* Muted olive architectural corner */

body .frayora-biab-v4--showcase
.frayora-biab-v4__geometry::after {

    content: "";

    position: absolute;

    right: 0;
    bottom: 0;

    width: 35%;
    height: 38%;

    background:
        linear-gradient(
            140deg,
            rgba(85,106,77,.04),
            rgba(61,82,59,.18)
        );

    clip-path: polygon(
        100% 0,
        100% 100%,
        0 100%
    );
}


/* =========================================
   04 — SOFT ANGLED LOWER EDGE
========================================= */

body .frayora-biab-v4--showcase::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -1px;

    z-index: 2;

    height: 115px;

    background: #FBFAF7;

    clip-path: polygon(
        0 32%,
        100% 94%,
        100% 100%,
        0 100%
    );

    pointer-events: none;
}


/* =========================================
   05 — MAIN LAYOUT CONTAINER
========================================= */

body .frayora-biab-v4--showcase
.frayora-biab-v4__inner {

    position: relative;
    z-index: 3;

    display: flex;
    flex-direction: column;

    width: 100%;
    max-width: 1500px;

    margin: 0 auto;

    padding: 105px 80px 165px;

    box-sizing: border-box;
}


/* =========================================
   06 — INTRODUCTION ABOVE CARDS
========================================= */

body .frayora-biab-v4--showcase
.frayora-biab-v4__header {

    display: flex;
    flex-direction: column;

    align-items: flex-start;
    justify-content: flex-start;

    gap: 0;

    width: 100%;

    margin: 0 0 48px;
    padding: 0;
}


body .frayora-biab-v4--showcase
.frayora-biab-v4__heading-group {

    width: 100%;
    max-width: 940px;

    min-width: 0;
    flex: none;
}


/* =========================================
   07 — SUPPORTING PARAGRAPH

   Matches existing Inter body typography.
========================================= */

body .frayora-biab-v4--showcase
.frayora-biab-v4__intro-copy {

    width: 100%;
    max-width: 720px;

    margin: 25px 0 0;
    padding: 0;

    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-weight: 400;

    line-height: 1.75;
    letter-spacing: 0;

    color: rgba(31,33,29,.76);
    text-align: left;
}


/* =========================================
   08 — COMPARE PACKAGES PLACEMENT

   Keeps original rounded terracotta button.
========================================= */

body .frayora-biab-v4--showcase
.frayora-biab-v4__compare {

    align-self: flex-start;
    flex: none;

    margin: 28px 0 0;
}


/* =========================================
   09 — THREE-CARD ROW

   Original card styling remains active.
========================================= */

body .frayora-biab-v4--showcase
.frayora-biab-v4__packages {

    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    grid-auto-flow: row;

    align-items: stretch;

    gap: 22px;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    overflow: visible;
}


/* =========================================
   10 — CARD STRUCTURE ONLY
========================================= */

body .frayora-biab-v4--showcase
.frayora-biab-v4__card {

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    width: 100%;
    min-width: 0;
    min-height: 460px;

    height: auto;

    box-sizing: border-box;
}


/* Ensure the third card does not span rows */

body .frayora-biab-v4--showcase
.frayora-biab-v4__card--enterprise {

    grid-column: auto !important;
}


/* =========================================
   11 — DESKTOP
   1101px AND ABOVE
========================================= */

@media (min-width: 1101px) {

    body .frayora-biab-v4--showcase
    .frayora-biab-v4__inner {

        padding:
            105px
            clamp(55px, 5vw, 85px)
            165px;
    }

    body .frayora-biab-v4--showcase
    .frayora-biab-v4__packages {

        gap: clamp(17px, 1.65vw, 25px);
    }
}


/* =========================================
   12 — COMPACT DESKTOP
   1101px–1350px
========================================= */

@media (min-width: 1101px) and (max-width: 1350px) {

    body .frayora-biab-v4--showcase
    .frayora-biab-v4__inner {

        padding: 90px 55px 145px;
    }

    body .frayora-biab-v4--showcase
    .frayora-biab-v4__card {

        min-height: 460px;
    }
}


/* =========================================
   13 — LARGE TABLET
   860px–1100px

   Introduction above all three cards.
========================================= */

@media (min-width: 860px) and (max-width: 1100px) {

    body .frayora-biab-v4--showcase
    .frayora-biab-v4__inner {

        padding: 88px 42px 145px;
    }

    body .frayora-biab-v4--showcase
    .frayora-biab-v4__header {

        margin-bottom: 40px;
    }

    body .frayora-biab-v4--showcase
    .frayora-biab-v4__intro-copy {

        max-width: 690px;
    }

    body .frayora-biab-v4--showcase
    .frayora-biab-v4__packages {

        grid-template-columns:
            repeat(3, minmax(0,1fr)) !important;

        gap: 15px;
    }

    body .frayora-biab-v4--showcase
    .frayora-biab-v4__card {

        min-height: 490px;

        padding: 30px 22px 28px;
    }
}


/* =========================================
   14 — NARROW TABLET
   700px–859px

   Keep readable card widths.
   Swipe horizontally if needed.
========================================= */

@media (min-width: 700px) and (max-width: 859px) {

    body .frayora-biab-v4--showcase
    .frayora-biab-v4__inner {

        padding: 80px 36px 135px;
    }

    body .frayora-biab-v4--showcase
    .frayora-biab-v4__header {

        margin-bottom: 35px;
    }

    body .frayora-biab-v4--showcase
    .frayora-biab-v4__packages {

        display: grid !important;

        grid-template-columns: none !important;
        grid-auto-flow: column;

        grid-auto-columns: minmax(270px, 43%);

        gap: 18px;

        overflow-x: auto;
        overflow-y: hidden;

        padding: 8px 4px 25px;

        scroll-snap-type: x mandatory;
        scroll-padding-left: 4px;

        -webkit-overflow-scrolling: touch;
    }

    body .frayora-biab-v4--showcase
    .frayora-biab-v4__card {

        min-height: 450px;
        padding: 33px 27px 30px;

        scroll-snap-align: start;
    }
}


/* =========================================
   15 — MOBILE
   UP TO 699px

   Introduction above three stacked cards.
========================================= */

@media (max-width: 699px) {

    body .frayora-biab-v4--showcase
    .frayora-biab-v4__inner {

        max-width: 100%;

        padding: 75px 24px 110px;
    }

    body .frayora-biab-v4--showcase
    .frayora-biab-v4__header {

        width: 100%;
        margin-bottom: 35px;
    }

    body .frayora-biab-v4--showcase
    .frayora-biab-v4__heading-group {

        max-width: 100%;
    }

    body .frayora-biab-v4--showcase
    .frayora-biab-v4__intro-copy {

        max-width: 100%;

        margin-top: 20px;

        font-size: 14px;
        line-height: 1.75;
    }

    body .frayora-biab-v4--showcase
    .frayora-biab-v4__compare {

        margin-top: 24px;
    }

    body .frayora-biab-v4--showcase
    .frayora-biab-v4__packages {

        grid-template-columns:
            minmax(0,1fr) !important;

        grid-auto-flow: row;

        gap: 19px;

        overflow: visible;
    }

    body .frayora-biab-v4--showcase
    .frayora-biab-v4__card {

        width: 100%;
        min-height: 375px;

        height: auto;
    }

    /* Softer facets on small screens */

    body .frayora-biab-v4--showcase
    .frayora-biab-v4__geometry::before {

        width: 32%;
        height: 40%;

        opacity: .5;
    }

    body .frayora-biab-v4--showcase
    .frayora-biab-v4__geometry::after {

        width: 45%;
        height: 20%;

        opacity: .55;
    }

    body .frayora-biab-v4--showcase::after {

        height: 72px;

        clip-path: polygon(
            0 48%,
            100% 90%,
            100% 100%,
            0 100%
        );
    }
}


/* =========================================
   16 — SMALL MOBILE
========================================= */

@media (max-width: 380px) {

    body .frayora-biab-v4--showcase
    .frayora-biab-v4__inner {

        padding-left: 19px;
        padding-right: 19px;
    }
}

/* END — FRAYORA SECTION 04 SHOWCASE */



/* ==========================================================
   FRAYORA — HOMEPAGE SECTION 03
   RESPONSIVE REFINEMENT — FINAL

   Fixes:
   01. Full-width green dimension on desktop
   02. Tablet button stays inside green background
   03. Mobile image no longer overlaps green panel
   04. Reduced excessive mobile green spacing
   05. No overlapping stages at intermediate widths
   06. Preserves subtle triangular corner details

   Preserves:
   - All original copywriting
   - Manrope and Inter typography
   - Existing PNG illustrations
   - Existing terracotta CTA
   - Original hover treatments
========================================================== */


/* ==========================================================
   01 — SHARED SECTION FOUNDATION
========================================================== */

body .home-approach.home-approach--editorial {
    position: relative;
    isolation: isolate;

    width: 100%;
    max-width: none;

    margin-left: 0;

    min-height: 0;
    height: auto;

    overflow: hidden;

    background-color: #F5EDE4 !important;
    background-image: none !important;

    --frayora-approach-green:
        radial-gradient(
            ellipse 85% 95% at 10% 18%,
            rgba(132,155,120,0.16) 0%,
            rgba(132,155,120,0.05) 53%,
            transparent 78%
        ),
        linear-gradient(
            43deg,
            rgba(8,24,17,0.20) 0%,
            transparent 47%
        ),
        linear-gradient(
            128deg,
            #364D3E 0%,
            #2A4034 38%,
            #20352C 73%,
            #293D32 100%
        );
}

/* Remove previous centered green facet.
   This is what created the visible seam. */

body .home-approach--editorial
.home-approach__inner::before {
    content: none !important;
    display: none !important;
}

/* Prevent inherited width problems */

body .home-approach--editorial .home-approach__inner,
body .home-approach--editorial .home-approach__intro,
body .home-approach--editorial .home-approach__journey,
body .home-approach--editorial .home-approach__stage,
body .home-approach--editorial .home-approach__visual {
    box-sizing: border-box;
    min-width: 0;
}

body .home-approach--editorial
.home-approach__inner {
    position: relative;
    z-index: 2;
}


/* ==========================================================
   02 — LITTLE TRIANGULAR CORNER DETAILS
========================================================== */

body .home-approach.home-approach--editorial::after {
    content: "" !important;
    display: block !important;

    position: absolute;
    inset: 0;

    z-index: 1;
    pointer-events: none;

    background-image:
        linear-gradient(
            135deg,
            transparent 49.5%,
            rgba(220,207,192,0.27) 50%
        ),
        linear-gradient(
            225deg,
            transparent 49.5%,
            rgba(220,207,192,0.27) 50%
        );

    background-position:
        right top,
        right bottom;

    background-repeat: no-repeat;

    background-size:
        96px 84px,
        104px 92px;
}


/* ==========================================================
   03 — PREVENT STAGE CONTENT FROM OVERLAPPING
========================================================== */

body .home-approach--editorial
.home-approach__stage {
    width: 100%;
    min-width: 0;
}

body .home-approach--editorial
.home-approach__stage h3,
body .home-approach--editorial
.home-approach__details,
body .home-approach--editorial
.home-approach__details p {
    width: 100%;
    min-width: 0;
    max-width: 100%;

    box-sizing: border-box;

    text-align: center;
    overflow-wrap: normal;
    white-space: normal;
}

body .home-approach--editorial
.home-approach__visual {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    overflow: visible;
}


/* ==========================================================
   04 — DESKTOP
   1200PX AND ABOVE
========================================================== */

@media screen and (min-width: 1200px) {

    body .home-approach.home-approach--editorial {
        display: block;
    }

    /* FULL-WIDTH GREEN PANEL */

    body .home-approach.home-approach--editorial::before {
        content: "" !important;
        display: block !important;

        position: absolute;

        inset: 0 auto 0 0;

        width: 43%;
        height: 100%;

        z-index: 0;
        pointer-events: none;

        background:
            /* Seamless dimensional facet */
            linear-gradient(
                55deg,
                rgba(174,193,161,0.09) 0%,
                rgba(174,193,161,0.09) 25%,
                transparent 25.2%
            ),

            /* Soft green illumination */
            radial-gradient(
                ellipse 95% 100% at 0% 8%,
                rgba(150,179,148,0.14),
                transparent 73%
            ),

            /* Deep green foundation */
            linear-gradient(
                128deg,
                #364D3E 0%,
                #2A4034 38%,
                #20352C 73%,
                #293D32 100%
            ) !important;

        clip-path: polygon(
            0 0,
            79% 0,
            100% 50%,
            79% 100%,
            0 100%
        );
    }

    /* TWO-COLUMN DESKTOP STRUCTURE */

    body .home-approach--editorial
    .home-approach__inner {
        display: grid;

        grid-template-columns:
            minmax(0, 37%)
            minmax(0, 63%);

        align-items: center;
        gap: 0;

        width: 100% !important;
        max-width: 1600px !important;

        min-height: 570px;
        height: auto;

        margin: 0 auto !important;

        padding:
            68px clamp(42px, 4.5vw, 78px) !important;
    }

    /* EXISTING INTRO CONTENT */

    body .home-approach--editorial
    .home-approach__intro {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        width: 100%;
        max-width: 440px;

        margin: 0;
        padding: 0 38px 0 0;

        text-align: left;
    }

    /* THREE DISTINCT VISUAL STAGES */

    body .home-approach--editorial
    .home-approach__journey {
        position: relative;

        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            26px
            minmax(0, 1fr)
            26px
            minmax(0, 1fr);

        align-items: start;
        gap: 10px;

        width: 100%;
        max-width: 100% !important;

        margin: 0;

        padding:
            0 0 0 clamp(38px, 4.6vw, 72px);
    }

    /* Explicit positions prevent overlap */

    body .home-approach--editorial
    .home-approach__journey >
    .home-approach__stage:nth-child(1) {
        grid-column: 1;
    }

    body .home-approach--editorial
    .home-approach__journey >
    .home-approach__stage:nth-child(3) {
        grid-column: 3;
    }

    body .home-approach--editorial
    .home-approach__journey >
    .home-approach__stage:nth-child(5) {
        grid-column: 5;
    }

    /* EXISTING ARROWS */

    body .home-approach--editorial
    .home-approach__journey >
    .home-approach__arrow {
        position: static !important;

        display: flex;
        align-items: center;
        justify-content: center;

        transform: none !important;

        width: 26px;
        height: 170px;

        margin: 0;
    }

    body .home-approach--editorial
    .home-approach__journey >
    .home-approach__arrow:nth-child(2) {
        grid-column: 2;
    }

    body .home-approach--editorial
    .home-approach__journey >
    .home-approach__arrow:nth-child(4) {
        grid-column: 4;
    }

    /* ORIGINAL PNG ILLUSTRATIONS */

    body .home-approach--editorial
    .home-approach__visual {
        height: 170px;
        margin-bottom: 20px;
    }

    body .home-approach--editorial
    .home-approach__visual img {
        display: block;

        width: auto !important;
        max-width: 100% !important;

        height: 165px !important;
        max-height: 165px !important;

        object-fit: contain !important;
    }

    body .home-approach--editorial
    .home-approach__stage {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}


/* ==========================================================
   05 — TABLET + NARROW LAPTOP
   600PX TO 1199PX

   Switch before the three visuals become crowded.
   The green panel grows naturally with its content.
========================================================== */

@media screen and (min-width: 600px)
and (max-width: 1199px) {

    /* DISABLE OLD FIXED GREEN PANEL */

    body .home-approach.home-approach--editorial::before {
        content: none !important;
        display: none !important;
    }

    /* SMALLER CORNER DETAILS */

    body .home-approach.home-approach--editorial::after {
        background-size:
            72px 64px,
            78px 72px;
    }

    /* STACK THE INTRO ABOVE THE JOURNEY */

    body .home-approach--editorial
    .home-approach__inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 0;

        width: 100% !important;
        max-width: none !important;

        min-height: 0;

        margin: 0 auto !important;
        padding: 0 !important;
    }

    /* CONTENT-SIZED GREEN BACKGROUND */

    body .home-approach--editorial
    .home-approach__intro {
        display: flex;
        flex-direction: column;
        align-items: center;

        width: 100%;
        max-width: none;

        min-height: 0;

        margin: 0;

        padding:
            62px clamp(38px, 8vw, 110px) 95px;

        background:
            var(--frayora-approach-green) !important;

        clip-path: polygon(
            0 0,
            100% 0,
            100% calc(100% - 38px),
            50% 100%,
            0 calc(100% - 38px)
        );

        text-align: center;
    }

    /* ALIGN EXISTING TEXT */

    body .home-approach--editorial
    .home-approach__eyebrow,
    body .home-approach--editorial
    .home-approach__title,
    body .home-approach--editorial
    .home-approach__description {
        text-align: center !important;
    }

    body .home-approach--editorial
    .home-approach__title {
        width: 100%;
        max-width: 710px;
    }

    body .home-approach--editorial
    .home-approach__description {
        max-width: 700px;
    }

    body .home-approach--editorial
    .home-approach__button {
        align-self: center;
    }

    /* THREE SEPARATE STAGES */

    body .home-approach--editorial
    .home-approach__journey {
        position: relative;

        display: grid;

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        align-items: start;
        gap: 18px;

        width: 100%;
        max-width: 1050px !important;

        margin: 0 auto;

        padding:
            46px clamp(24px, 5vw, 56px) 72px;
    }

    body .home-approach--editorial
    .home-approach__journey >
    .home-approach__stage:nth-child(1) {
        grid-column: 1;
    }

    body .home-approach--editorial
    .home-approach__journey >
    .home-approach__stage:nth-child(3) {
        grid-column: 2;
    }

    body .home-approach--editorial
    .home-approach__journey >
    .home-approach__stage:nth-child(5) {
        grid-column: 3;
    }

    /* ARROWS BETWEEN ILLUSTRATIONS */

    body .home-approach--editorial
    .home-approach__journey >
    .home-approach__arrow {
        position: absolute !important;

        top: 46px;
        left: 33.333% !important;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 24px;
        height: 155px;

        margin: 0;
        padding: 0;

        transform:
            translateX(-50%) !important;
    }

    body .home-approach--editorial
    .home-approach__journey >
    .home-approach__arrow:nth-child(4) {
        left: 66.666% !important;
    }

    body .home-approach--editorial
    .home-approach__stage {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* RESPONSIVE ORIGINAL ILLUSTRATIONS */

    body .home-approach--editorial
    .home-approach__visual {
        height: 155px;
        margin-bottom: 20px;
    }

    body .home-approach--editorial
    .home-approach__visual img {
        display: block;

        width: auto !important;
        max-width: 100% !important;

        height: 148px !important;
        max-height: 148px !important;

        object-fit: contain !important;
    }
}


/* ==========================================================
   06 — MOBILE
   599PX AND BELOW

   Green panel ends naturally after the CTA.
   The first illustration stays completely outside it.
========================================================== */

@media screen and (max-width: 599px) {

    /* REMOVE OLD 510PX / 540PX BACKGROUND */

    body .home-approach.home-approach--editorial::before {
        content: none !important;
        display: none !important;
    }

    /* SMALL CORNER TRIANGLE */

    body .home-approach.home-approach--editorial::after {
        background-image:
            linear-gradient(
                225deg,
                transparent 49.5%,
                rgba(220,207,192,0.27) 50%
            );

        background-position: right bottom;
        background-size: 48px 51px;
    }

    /* REMOVE OLD LARGE OUTER SPACING */

    body .home-approach--editorial
    .home-approach__inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        width: 100% !important;
        max-width: none !important;

        gap: 0;
        min-height: 0;

        margin: 0 auto !important;
        padding: 0 !important;
    }

    /* DYNAMIC GREEN PANEL */

    body .home-approach--editorial
    .home-approach__intro {
        display: flex;
        flex-direction: column;
        align-items: center;

        width: 100%;
        max-width: none;

        min-height: 0;
        margin: 0;

        padding: 52px 24px 73px;

        background:
            var(--frayora-approach-green) !important;

        clip-path: polygon(
            0 0,
            100% 0,
            100% calc(100% - 26px),
            50% 100%,
            0 calc(100% - 26px)
        );

        text-align: center;
    }

    /* ORIGINAL TEXT — CENTERED */

    body .home-approach--editorial
    .home-approach__eyebrow,
    body .home-approach--editorial
    .home-approach__title,
    body .home-approach--editorial
    .home-approach__description {
        text-align: center !important;
    }

    /* EXISTING BUTTON — UNCHANGED */

    body .home-approach--editorial
    .home-approach__button {
        align-self: center;
    }

    /* ILLUSTRATIONS BEGIN IN IVORY AREA */

    body .home-approach--editorial
    .home-approach__journey {
        position: relative;

        display: flex;
        flex-direction: column;
        align-items: center;

        gap: 0;

        width: 100%;
        max-width: none !important;

        margin: 0 auto;

        padding: 38px 22px 62px;
    }

    body .home-approach--editorial
    .home-approach__stage {
        display: flex;
        flex-direction: column;
        align-items: center;

        width: 100%;
        max-width: 370px;

        margin: 0 auto;
    }

    body .home-approach--editorial
    .home-approach__visual {
        width: 100%;
        height: 148px;

        margin-bottom: 18px;
    }

    body .home-approach--editorial
    .home-approach__visual img {
        display: block;

        width: auto !important;
        max-width: 100% !important;

        height: 142px !important;
        max-height: 142px !important;

        object-fit: contain !important;
    }

    /* VERTICAL EXISTING ARROWS */

    body .home-approach--editorial
    .home-approach__journey >
    .home-approach__arrow {
        position: relative !important;

        inset: auto !important;
        left: auto !important;
        top: auto !important;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        height: 40px;

        margin: 7px 0;

        transform:
            rotate(90deg) !important;
    }
}


/* =====================================================
   FRAYORA — HOMEPAGE CONTENT ALIGNMENT FIX

   SECTION 01 — HERO
   SECTION 03 — OUR APPROACH

   Aligns content with the existing 1200px header.

   Preserves:
   - Full-width backgrounds
   - Hero photography and curved edge
   - Section 3 green angled panel
   - Existing typography
   - Buttons and hover effects
   - 3D illustrations
   - Corner triangle details
===================================================== */


/* ==========================================
   DESKTOP — 1200PX AND ABOVE
========================================== */

@media screen and (min-width: 1200px) {

    /* SECTION 01 — HERO CONTENT CONTAINER */

    body .frayora-home-hero.frayora-home-hero--shaped
    > .frayora-home-hero__inner {

        box-sizing: border-box !important;

        width: 100% !important;
        max-width: 1200px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding-left: 32px !important;
        padding-right: 32px !important;
    }


    /* SECTION 03 — OUR APPROACH CONTENT CONTAINER */

    body .home-approach.home-approach--editorial
    > .home-approach__inner {

        box-sizing: border-box !important;

        width: 100% !important;
        max-width: 1200px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding-left: 32px !important;
        padding-right: 32px !important;
    }

}


/* ==========================================
   NARROW DESKTOP — 1101PX TO 1199PX

   Section 3 keeps its existing stacked
   responsive layout.
========================================== */

@media screen and (min-width: 1101px)
and (max-width: 1199px) {

    body .frayora-home-hero.frayora-home-hero--shaped
    > .frayora-home-hero__inner {

        box-sizing: border-box !important;

        width: 100% !important;
        max-width: 1200px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding-left: 32px !important;
        padding-right: 32px !important;
    }

}


/* ==========================================
   TABLET — 600PX TO 1100PX
========================================== */

@media screen and (min-width: 600px)
and (max-width: 1100px) {

    body .frayora-home-hero.frayora-home-hero--shaped
    > .frayora-home-hero__inner {

        box-sizing: border-box !important;

        width: 100% !important;
        max-width: 1200px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding-left: 30px !important;
        padding-right: 30px !important;
    }

}


/* ==========================================
   MOBILE — 599PX AND BELOW
========================================== */

@media screen and (max-width: 599px) {

    body .frayora-home-hero.frayora-home-hero--shaped
    > .frayora-home-hero__inner {

        box-sizing: border-box !important;

        width: 100% !important;
        max-width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding-left: 22px !important;
        padding-right: 22px !important;
    }

}

/* END — HOMEPAGE ALIGNMENT FIX */



/* =========================================================
   FRAYORA — HOMEPAGE SECTION 05
   SELECTED WORK — EDITORIAL SPLIT FEATURE

   Desktop: Left introduction + right featured project
   Tablet:  Introduction above project
   Mobile:  Full image + information panel below

   PRESERVED:
   - Original Veyron photograph
   - Original typography
   - Original CTA buttons
   - Original hover effects
   - Original project links
========================================================= */


/* =========================================
   01 — SECTION BACKGROUND AND SHAPE
========================================= */

body .fr-featured.fr-featured--editorial {

    position: relative;
    isolation: isolate;

    width: 100%;
    max-width: none;

    margin: 0;

    padding: 112px 48px 120px;

    overflow: hidden;

    background: #FBFAF7;
    color: #1F211D;

    /*
       Subtle angled upper-right edge.
       Avoids a completely rectangular section.
    */

    clip-path: polygon(
        0 0,
        81% 0,
        100% 75px,
        100% 100%,
        0 100%
    );
}


/* =========================================
   02 — SUBTLE ARCHITECTURAL BACKGROUND
========================================= */

body .fr-featured.fr-featured--editorial::before {

    content: "";

    position: absolute;
    inset: 0;

    z-index: -1;

    background:
        radial-gradient(
            ellipse 90% 80% at 15% 25%,
            rgba(255,255,255,.66),
            transparent 75%
        ),
        linear-gradient(
            140deg,
            rgba(239,232,219,.12),
            transparent 65%
        );

    pointer-events: none;
}


body .fr-featured.fr-featured--editorial::after {

    content: "";

    position: absolute;

    right: 0;
    top: 0;

    width: 35%;
    height: 250px;

    z-index: -1;

    background: rgba(86,100,73,.055);

    clip-path: polygon(
        70% 0,
        100% 0,
        100% 100%
    );

    pointer-events: none;
}


/* =========================================
   03 — MAIN CONTENT STRUCTURE
========================================= */

body .fr-featured--editorial
.fr-featured__inner {

    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(0, .85fr)
        minmax(0, 1.65fr);

    align-items: center;

    gap: clamp(42px, 4.4vw, 76px);

    width: 100%;
    max-width: 1500px;

    margin: 0 auto;
}


/* =========================================
   04 — LEFT INTRODUCTION
========================================= */

body .fr-featured--editorial
.fr-featured__header {

    display: flex;
    flex-direction: column;

    align-items: flex-start;
    justify-content: center;

    gap: 0;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;
}


body .fr-featured--editorial
.fr-featured__intro {

    width: 100%;
    max-width: 510px;
    min-width: 0;
}


/* Existing heading typography remains intact */

body .fr-featured--editorial
.fr-featured__heading {

    max-width: 510px;
}


/* Existing description typography remains intact */

body .fr-featured--editorial
.fr-featured__description {

    max-width: 390px;

    margin-top: 25px;
}


/* =========================================
   05 — ORIGINAL VIEW ALL PROJECTS BUTTON
========================================= */

body .fr-featured--editorial
.fr-featured__all {

    align-self: flex-start;
    justify-self: start;

    margin-top: 32px;
}


/* =========================================
   06 — FEATURED PROJECT SURFACE

   Removes the oversized cream browser-card
   framing from the old structure.

   Does not change the actual image.
========================================= */

body .fr-featured--editorial
.fr-featured__project {

    position: relative;
    isolation: isolate;

    display: block;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    overflow: hidden;

    border: 1px solid rgba(31,33,29,.10);
    border-radius: 16px;

    background: #25392D;
}


/* =========================================
   07 — ORIGINAL PROJECT IMAGE

   Maintain the complete screenshot.
   No stretching or forced image cropping.
========================================= */

body .fr-featured--editorial
.fr-featured__preview {

    position: relative;
    z-index: 1;

    display: block;

    width: 100%;
    height: auto;

    margin: 0;
    padding: 0;

    border-radius: 0;
    overflow: hidden;
}


body .fr-featured--editorial
.fr-featured__image {

    display: block;

    width: 100%;
    max-width: 100%;

    height: auto;
    max-height: none;

    margin: 0;
    padding: 0;

    border-radius: 0;

    object-fit: contain;
}


/* =========================================
   08 — DARK OLIVE ANGLED INFORMATION PANEL

   Positioned over the right side of the
   existing project image.

   The left edge slopes subtly outward
   toward the bottom.
========================================= */

body .fr-featured--editorial
.fr-featured__details {

    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;

    z-index: 3;

    display: flex;
    flex-direction: column;

    align-items: flex-start;
    justify-content: space-between;

    gap: 18px;

    width: 41%;
    min-width: 0;
    height: 100%;

    margin: 0;

    padding:
        clamp(26px, 2.8vw, 43px)
        clamp(20px, 1.9vw, 32px)
        clamp(25px, 2.8vw, 40px)
        clamp(58px, 5.5vw, 90px);

    border: 0;
    border-radius: 0;

    background:
        linear-gradient(
            145deg,
            rgba(35,56,43,.97) 0%,
            rgba(29,47,37,.97) 100%
        );

    clip-path: polygon(
        17% 0,
        100% 0,
        100% 100%,
        0 100%
    );

    -webkit-clip-path: polygon(
        17% 0,
        100% 0,
        100% 100%,
        0 100%
    );
}


/* =========================================
   09 — ORIGINAL PROJECT TYPOGRAPHY

   Fonts, weights and sizing are inherited.

   Only text colours are adjusted for
   readability against the olive surface.
========================================= */

body .fr-featured--editorial
.fr-featured__project-copy {

    width: 100%;
    min-width: 0;
}


body .fr-featured--editorial
.fr-featured__category {

    color: #E99572;
}


body .fr-featured--editorial
.fr-featured__project-title {

    color: #F8F3EB;
}


body .fr-featured--editorial
.fr-featured__project-description {

    color: rgba(248,243,235,.88);
}


/* =========================================
   10 — ORIGINAL CIRCULAR PROJECT BUTTON

   Retains its original design and hover.
========================================= */

body .fr-featured--editorial
.fr-featured__visit {

    position: relative;

    flex-shrink: 0;

    align-self: flex-start;

    margin: 0;
}


/* =========================================
   11 — COMPACT DESKTOP

   Move to a stacked layout before the
   angled panel becomes cramped.
========================================= */

@media (min-width: 950px) and (max-width: 1299px) {

    body .fr-featured.fr-featured--editorial {

        padding: 90px 48px 105px;
    }

    body .fr-featured--editorial
    .fr-featured__inner {

        grid-template-columns: minmax(0,1fr);

        gap: 45px;
    }

    body .fr-featured--editorial
    .fr-featured__header {

        max-width: 760px;
    }

    body .fr-featured--editorial
    .fr-featured__intro {

        max-width: 760px;
    }

    body .fr-featured--editorial
    .fr-featured__description {

        max-width: 600px;
    }

    body .fr-featured--editorial
    .fr-featured__project {

        width: 100%;
    }

    body .fr-featured--editorial
    .fr-featured__details {

        width: 39%;

        padding-left: clamp(55px, 7vw, 90px);
    }
}


/* =========================================
   12 — TABLET

   700px–949px

   Full photograph, project information below.
   Prevents an overly narrow diagonal panel.
========================================= */

@media (min-width: 700px) and (max-width: 949px) {

    body .fr-featured.fr-featured--editorial {

        padding: 82px 38px 100px;

        clip-path: polygon(
            0 0,
            82% 0,
            100% 48px,
            100% 100%,
            0 100%
        );
    }

    body .fr-featured--editorial
    .fr-featured__inner {

        display: flex;
        flex-direction: column;

        align-items: stretch;

        gap: 38px;
    }

    body .fr-featured--editorial
    .fr-featured__header {

        max-width: 740px;
    }

    body .fr-featured--editorial
    .fr-featured__description {

        max-width: 570px;
    }

    body .fr-featured--editorial
    .fr-featured__project {

        display: flex;
        flex-direction: column;
    }

    body .fr-featured--editorial
    .fr-featured__details {

        position: relative;

        top: auto;
        right: auto;
        bottom: auto;

        width: 100%;
        height: auto;

        padding: 35px 40px;

        clip-path: none;
        -webkit-clip-path: none;

        gap: 25px;
    }

    body .fr-featured--editorial
    .fr-featured__project-copy {

        max-width: 620px;
    }
}


/* =========================================
   13 — MOBILE

   UP TO 699px

   Introduction and CTA above the project.
   Full image, dark information panel below.
========================================= */

@media (max-width: 699px) {

    body .fr-featured.fr-featured--editorial {

        width: 100%;

        padding: 68px 22px 85px;

        clip-path: polygon(
            0 0,
            88% 0,
            100% 24px,
            100% 100%,
            0 100%
        );
    }

    body .fr-featured--editorial
    .fr-featured__inner {

        display: flex;
        flex-direction: column;

        align-items: stretch;

        gap: 34px;
    }

    body .fr-featured--editorial
    .fr-featured__header {

        width: 100%;
        max-width: 100%;
    }

    body .fr-featured--editorial
    .fr-featured__intro {

        width: 100%;
        max-width: 100%;
    }

    body .fr-featured--editorial
    .fr-featured__description {

        max-width: 100%;

        margin-top: 20px;
    }

    body .fr-featured--editorial
    .fr-featured__all {

        margin-top: 25px;
    }

    body .fr-featured--editorial
    .fr-featured__project {

        display: flex;
        flex-direction: column;

        width: 100%;

        border-radius: 15px;
    }

    body .fr-featured--editorial
    .fr-featured__preview {

        width: 100%;
    }

    body .fr-featured--editorial
    .fr-featured__image {

        width: 100%;
        height: auto;
    }

    body .fr-featured--editorial
    .fr-featured__details {

        position: relative;

        top: auto;
        right: auto;
        bottom: auto;

        display: flex;
        flex-direction: column;

        align-items: flex-start;

        width: 100%;
        height: auto;

        min-height: 0;

        margin: 0;
        padding: 29px 26px 30px;

        gap: 24px;

        clip-path: none;
        -webkit-clip-path: none;

        background:
            linear-gradient(
                145deg,
                #293D30,
                #1E3127
            );
    }

    body .fr-featured--editorial
    .fr-featured__project-copy {

        width: 100%;
    }

    body .fr-featured--editorial
    .fr-featured__visit {

        align-self: flex-start;
    }

    body .fr-featured.fr-featured--editorial::after {

        height: 100px;
        opacity: .5;
    }
}


/* =========================================
   14 — SMALL MOBILE
========================================= */

@media (max-width: 380px) {

    body .fr-featured.fr-featured--editorial {

        padding-left: 18px;
        padding-right: 18px;
    }

    body .fr-featured--editorial
    .fr-featured__details {

        padding: 25px 22px 28px;
    }
}


/* =========================================
   15 — REDUCED MOTION

   Original accessibility behaviour kept.
========================================= */

@media (prefers-reduced-motion: reduce) {

    body .fr-featured--editorial
    .fr-featured__project {

        animation: none;
    }
}

/* END — FRAYORA SECTION 05 EDITORIAL */


/* =========================================================
   FRAYORA — HOMEPAGE SECTION 01 (HERO)
   REFINEMENTS — PASTE AT THE VERY BOTTOM OF main.css

   1. Crisper, more deliberate diagonal panel
   2. Stronger hero subtext contrast
   3. More visible secondary button
   4. Less dead space below the curve

   Nav is untouched. PHP is unchanged.
   Selectors are more specific than the earlier hero blocks
   and this file loads last, so no old CSS needs deleting.
========================================================= */


/* =========================================
   1 — DIAGONAL PANEL (desktop 1101px+)

   - Edge moved right so the whole headline sits
     inside the panel instead of being cut by it.
   - Same "\" direction as before.
   - Tint is a touch stronger at the left (text side)
     and fades toward the edge, so it reads as a
     deliberate shape, not a muddy wash.
   - A thin light line on the edge makes it crisp.
========================================= */

body .frayora-home-hero.frayora-home-hero--shaped
.frayora-home-hero__overlay {
    background:
        linear-gradient(
            90deg,
            rgba(23, 37, 27, 0.10) 0%,
            rgba(23, 37, 27, 0.05) 50%,
            rgba(23, 37, 27, 0.00) 100%
        ) !important;
}

body .frayora-home-hero.frayora-home-hero--shaped
.frayora-home-hero__overlay::before {
    background:
        linear-gradient(
            90deg,
            rgba(22, 38, 27, 0.52) 0%,
            rgba(26, 42, 30, 0.42) 55%,
            rgba(30, 46, 33, 0.30) 100%
        ) !important;

    clip-path: polygon(0 0, 56% 0, 80% 100%, 0 100%) !important;
    -webkit-clip-path: polygon(0 0, 56% 0, 80% 100%, 0 100%) !important;
}

/* Thin highlight along the diagonal edge.
   Same polygon as the panel, minus a 2px-wide inner cut. */
body .frayora-home-hero.frayora-home-hero--shaped
.frayora-home-hero__overlay::after {
    content: "" !important;
    display: block !important;

    position: absolute;
    inset: 0;

    background: rgba(248, 243, 235, 0.22);

    clip-path: polygon(
        56% 0,
        calc(56% + 2px) 0,
        calc(80% + 2px) 100%,
        80% 100%
    ) !important;
    -webkit-clip-path: polygon(
        56% 0,
        calc(56% + 2px) 0,
        calc(80% + 2px) 100%,
        80% 100%
    ) !important;

    pointer-events: none;
}

/* Tablet — keep the existing wider diagonal, just crisper */
@media (min-width: 600px) and (max-width: 1100px) {

    body .frayora-home-hero.frayora-home-hero--shaped
    .frayora-home-hero__overlay::before {
        background:
            linear-gradient(
                90deg,
                rgba(22, 38, 27, 0.50) 0%,
                rgba(26, 42, 30, 0.40) 60%,
                rgba(30, 46, 33, 0.28) 100%
            ) !important;

        clip-path: polygon(0 0, 76% 0, 100% 100%, 0 100%) !important;
        -webkit-clip-path: polygon(0 0, 76% 0, 100% 100%, 0 100%) !important;
    }

    /* No edge line on tablet — the panel reaches the right edge */
    body .frayora-home-hero.frayora-home-hero--shaped
    .frayora-home-hero__overlay::after {
        content: none !important;
        display: none !important;
    }
}

/* Mobile — full-image overlay, no diagonal (unchanged) */
@media (max-width: 599px) {

    body .frayora-home-hero.frayora-home-hero--shaped
    .frayora-home-hero__overlay::after {
        content: none !important;
        display: none !important;
    }
}


/* =========================================
   2 — HERO SUBTEXT CONTRAST

   Slightly larger, heavier, fully ivory, with a
   soft shadow so it holds up over mid-tone grass.
========================================= */

body .frayora-home-hero.frayora-home-hero--shaped
.frayora-home-hero__description {
    max-width: 640px;

    font-size: 17px !important;
    font-weight: 450;
    line-height: 1.7 !important;

    color: #FBF7F0 !important;

    text-shadow:
        0 1px 2px rgba(10, 20, 14, 0.45),
        0 2px 18px rgba(10, 20, 14, 0.35);
}

@media (min-width: 600px) and (max-width: 1100px) {
    body .frayora-home-hero.frayora-home-hero--shaped
    .frayora-home-hero__description {
        font-size: 16.5px !important;
    }
}

@media (max-width: 599px) {
    body .frayora-home-hero.frayora-home-hero--shaped
    .frayora-home-hero__description {
        font-size: 15px !important;
        line-height: 1.7 !important;
    }
}


/* =========================================
   3 — SECONDARY BUTTON

   Stronger border + soft dark glass fill so it
   no longer disappears into the grass texture.
========================================= */

body .frayora-home-hero.frayora-home-hero--shaped
.frayora-home-hero__button--secondary {
    background: rgba(20, 34, 24, 0.34) !important;
    border: 1.5px solid rgba(248, 243, 235, 0.92) !important;
    color: #FFFFFF !important;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

body .frayora-home-hero.frayora-home-hero--shaped
.frayora-home-hero__button--secondary:hover {
    background: rgba(248, 243, 235, 0.20) !important;
    border-color: #FFFFFF !important;
    color: #FFFFFF !important;
}


/* =========================================
   4 — LESS DEAD SPACE BELOW THE CURVE

   Shorter hero + shallower wave, so the next
   section arrives sooner. Curve shape is kept.
   Mobile already has its own smaller values.
========================================= */

/* Desktop (1101px+) */
@media (min-width: 1101px) {
    body .frayora-home-hero.frayora-home-hero--shaped {
        --fr-hero-height: 700px;
        --fr-hero-bottom: 125px;
        --fr-hero-wave-height: 185px;
    }
}

/* Tablet (600–1100px) */
@media (min-width: 600px) and (max-width: 1100px) {
    body .frayora-home-hero.frayora-home-hero--shaped {
        --fr-hero-height: 760px;
        --fr-hero-bottom: 135px;
        --fr-hero-wave-height: 150px;
    }
}

/* END — HERO REFINEMENTS */



/* =========================================================
   FRAYORA — HOMEPAGE SECTION 05 (SELECTED WORK)
   FEATURED PROJECT — FINAL — PASTE AT THE VERY BOTTOM OF main.css

   This REPLACES both earlier blocks (section-05-v3.css and
   section-05-clickfix.css). Delete those, paste this one.

   Composition:
   - Sunset photo of the Veyron building is the stage.
   - The website preview floats over it and hangs off the
     bottom edge for depth.
   - Project info sits in a frosted glass card on the photo.
   - Tablet / mobile: same look, stacked — photo behind
     everything, website over it, frosted card below.

   Scoped to .fr-featured--v3 (plus the two small global
   fixes at the end: divider + sideways scroll).
========================================================= */


/* =========================================
   00 — FRAYORA PALETTE (used by this section)
========================================= */

body .fr-featured.fr-featured--v3 {
    --fr-terracotta: #D66A43;
    --fr-terracotta-deep: #C25A35;
    --fr-sage: #87947B;
    --fr-sand: #D9B77E;
    --fr-brown: #987159;
    --fr-olive: #4F5B49;
    --fr-cream: #F7F0E6;
    --fr-nude: #F5EDE4;
}


/* =========================================
   01 — SECTION
========================================= */

body .fr-featured.fr-featured--v3 {
    position: relative;
    isolation: isolate;

    width: 100%;
    max-width: none;
    margin: 0;

    padding: 112px 48px 56px;

    overflow-x: clip;

    clip-path: none;
    -webkit-clip-path: none;

    /* Starts on the same cream as the section above,
       lightens through the middle, returns to the cream
       of the section below — no visible seam. */
    background:
        linear-gradient(
            180deg,
            #F8F3EB 0%,
            #FAF7F1 16%,
            #FBFAF7 50%,
            #FAF7F1 84%,
            #F8F3EB 100%
        );
}

body .fr-featured.fr-featured--v3 .fr-featured__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 64px;

    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
}


/* =========================================
   02 — HEADER (heading left, copy + button right)
========================================= */

body .fr-featured.fr-featured--v3
.fr-featured__header {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: end;
    gap: 64px;

    margin: 0;
    padding: 0;
}

body .fr-featured.fr-featured--v3
.fr-featured__intro {
    max-width: none;
    min-width: 0;
}

body .fr-featured.fr-featured--v3
.fr-featured__heading {
    max-width: none;
    margin: 0;

    font-size: clamp(40px, 4.2vw, 62px) !important;
    line-height: 1.06 !important;
}

body .fr-featured.fr-featured--v3
.fr-featured__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 26px;

    max-width: 430px;
    padding-bottom: 6px;
}

body .fr-featured.fr-featured--v3
.fr-featured__description {
    max-width: 430px;
    margin: 0;

    font-size: 17px;
    line-height: 1.7;
}

body .fr-featured.fr-featured--v3
.fr-featured__all {
    margin: 0;
}


/* =========================================
   03 — THE STAGE
========================================= */

body .fr-featured.fr-featured--v3
.fr-featured__project {
    position: relative;
    isolation: isolate;

    display: block;

    width: 100%;
    min-height: 720px;

    margin: 0 0 72px;
    padding: 0;

    border: 0;
    border-radius: 28px;
    overflow: visible;

    background: #1E3127;

    box-shadow:
        0 2px 4px rgba(24, 36, 28, .05),
        0 40px 70px -30px rgba(24, 36, 28, .50);
}

/* Photo */
body .fr-featured.fr-featured--v3
.fr-featured__backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;

    border-radius: 28px;
    overflow: hidden;

    background: linear-gradient(135deg, #2A4032, #16241B);
}

body .fr-featured.fr-featured--v3
.fr-featured__backdrop .fr-featured__photo {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: 28% 50%;

    transform: scale(1);
    transition: transform 1400ms cubic-bezier(.2, .7, .2, 1);
}

/* <picture> wrapper fills the backdrop */
body .fr-featured.fr-featured--v3
.fr-featured__picture {
    position: absolute;
    inset: 0;

    display: block;
}

/* Soft shading so the info card and preview sit naturally */
body .fr-featured.fr-featured--v3
.fr-featured__backdrop::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            100deg,
            rgba(10, 20, 14, .42) 0%,
            rgba(10, 20, 14, .12) 42%,
            rgba(10, 20, 14, 0) 70%
        ),
        linear-gradient(
            0deg,
            rgba(10, 20, 14, .38) 0%,
            rgba(10, 20, 14, 0) 45%
        );

    pointer-events: none;
}


/* =========================================
   04 — FLOATING WEBSITE PREVIEW
========================================= */

body .fr-featured.fr-featured--v3
.fr-featured__preview {
    position: absolute;
    z-index: 2;

    right: clamp(28px, 3.6vw, 52px);
    bottom: -56px;

    display: block;

    width: 54%;

    margin: 0;
    padding: 0;

    border-radius: 0;
    overflow: visible;

    background: transparent;

    transition: transform 600ms cubic-bezier(.2, .7, .2, 1);
}

body .fr-featured.fr-featured--v3
.fr-featured__image {
    display: block;

    width: 100%;
    height: auto;

    border-radius: 0;

    filter:
        drop-shadow(0 6px 10px rgba(0, 0, 0, .22))
        drop-shadow(0 34px 44px rgba(0, 0, 0, .38));

    transition: filter 600ms ease;
}


/* =========================================
   05 — FROSTED INFORMATION CARD
========================================= */

body .fr-featured.fr-featured--v3
.fr-featured__details {
    position: absolute;
    z-index: 3;

    left: clamp(28px, 3.6vw, 52px);
    bottom: clamp(28px, 3.4vw, 48px);

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 28px;

    width: min(410px, 36%);
    height: auto;

    margin: 0;
    padding: 34px 34px 32px;

    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 22px;

    background: rgba(15, 28, 20, .88);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .10),
        0 28px 56px -20px rgba(0, 0, 0, .55);

    clip-path: none;
    -webkit-clip-path: none;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

    body .fr-featured.fr-featured--v3
    .fr-featured__details {
        background: rgba(15, 28, 20, .66);

        backdrop-filter: blur(20px) saturate(1.3);
        -webkit-backdrop-filter: blur(20px) saturate(1.3);
    }
}

body .fr-featured.fr-featured--v3
.fr-featured__project-copy {
    width: 100%;
    min-width: 0;
}

body .fr-featured.fr-featured--v3
.fr-featured__category {
    display: flex;
    align-items: center;
    gap: 12px;

    margin: 0 0 16px;

    color: #F0A888;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    line-height: 1.4;
    text-transform: uppercase;
}

body .fr-featured.fr-featured--v3
.fr-featured__category::before {
    content: "";

    width: 28px;
    height: 1px;

    background: currentColor;
}

body .fr-featured.fr-featured--v3
.fr-featured__project-title {
    margin: 0;

    color: #F8F3EB;

    font-size: clamp(30px, 2.8vw, 40px);
    line-height: 1.08;
    letter-spacing: -.048em;
}

body .fr-featured.fr-featured--v3
.fr-featured__project-description {
    margin: 14px 0 0;

    color: rgba(248, 243, 235, .86);

    font-size: 15px;
    line-height: 1.68;
}


/* =========================================
   06 — VISIT LIVE SITE BUTTON
========================================= */

body .fr-featured.fr-featured--v3
.fr-featured__live {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;

    min-height: 54px;
    padding: 0 28px;

    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;

    background: #C96743;
    color: #FFFFFF;

    font-family: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .22),
        0 12px 26px rgba(0, 0, 0, .30);

    transition:
        transform 260ms ease,
        background-color 260ms ease,
        box-shadow 260ms ease;
}

body .fr-featured.fr-featured--v3
.fr-featured__live span {
    display: inline-block;

    font-size: 20px;
    line-height: 1;

    transition: transform 260ms ease;
}

body .fr-featured.fr-featured--v3
.fr-featured__live:focus-visible,
body .fr-featured.fr-featured--v3
.fr-featured__preview:focus-visible {
    outline: 3px solid #F8F3EB;
    outline-offset: 4px;
}


/* =========================================
   07 — HOVER (mouse devices only)
========================================= */

@media (hover: hover) and (pointer: fine) {

    body .fr-featured.fr-featured--v3
    .fr-featured__project:hover
    .fr-featured__photo {
        transform: scale(1.045);
    }

    body .fr-featured.fr-featured--v3
    .fr-featured__preview:hover {
        transform: translateY(-8px);
    }

    body .fr-featured.fr-featured--v3
    .fr-featured__preview:hover
    .fr-featured__image {
        filter:
            drop-shadow(0 8px 12px rgba(0, 0, 0, .24))
            drop-shadow(0 44px 54px rgba(0, 0, 0, .44));
    }

    body .fr-featured.fr-featured--v3
    .fr-featured__live:hover {
        background: #B75837;
        transform: translateY(-2px);

        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .22),
            0 16px 32px rgba(0, 0, 0, .38);
    }

    body .fr-featured.fr-featured--v3
    .fr-featured__live:hover span {
        transform: translateX(4px);
    }
}


/* =========================================
   08 — TABLET + MOBILE LAYOUT (up to 1199px)

   Same look as desktop, stacked:
   - the tablet / mobile photo is shown at its natural
     proportions across the top, so the building and logo
     are always fully visible
   - the website preview overlaps only the photo's lower edge
   - the photo fades into a deep-olive background with soft
     sage and sand glows; the info card is transparent
     deep-olive glass sitting on it

   Applies to EVERY tablet and mobile width
   (1199 / 899 / 699 / 380 and everything between).
========================================= */

@media (max-width: 1199px) {

    body .fr-featured.fr-featured--v3 {
        padding: 88px 38px 72px;
    }

    body .fr-featured.fr-featured--v3
    .fr-featured__inner {
        gap: 48px;
    }

    body .fr-featured.fr-featured--v3
    .fr-featured__project {
        /* how far the preview hangs below the photo
           (a share of the card width) */
        --fr-hang: 16%;
        --fr-pad: clamp(16px, 4vw, 40px);
        --fr-gap: clamp(14px, 2.6vw, 22px);

        display: grid;
        grid-template-columns: minmax(0, 1fr);

        min-height: 0;
        margin: 0;
        padding: 0 0 var(--fr-pad);

        overflow: hidden;

        border-radius: 24px;

        /* Deep olive with soft sage and sand glows —
           brand colours only, no brown. The photo fades
           into this, and the glass card sits on it. */
        background:
            radial-gradient(
                ellipse 75% 42% at 88% 80%,
                rgba(217, 183, 126, .15),
                transparent 70%
            ),
            radial-gradient(
                ellipse 85% 48% at 6% 96%,
                rgba(135, 148, 123, .30),
                transparent 70%
            ),
            linear-gradient(
                180deg,
                #243126 0%,
                #18211B 100%
            );
    }

    /* --- Main photo: natural proportions --- */

    body .fr-featured.fr-featured--v3
    .fr-featured__backdrop {
        position: relative;
        inset: auto;

        grid-area: 1 / 1;
        z-index: 1;

        border-radius: 0;
        overflow: hidden;

        background: none;
    }

    body .fr-featured.fr-featured--v3
    .fr-featured__backdrop .fr-featured__picture {
        position: relative;
        inset: auto;

        display: block;
    }

    body .fr-featured.fr-featured--v3
    .fr-featured__backdrop .fr-featured__photo {
        position: static;

        display: block;

        width: 100%;
        height: auto;

        transform: none;

        -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 66%, transparent 100%);
        mask-image: linear-gradient(180deg, #000 0%, #000 66%, transparent 100%);
    }

    /* Very light olive shading only */
    body .fr-featured.fr-featured--v3
    .fr-featured__backdrop::after {
        background:
            linear-gradient(
                180deg,
                rgba(22, 32, 22, .06) 0%,
                rgba(22, 32, 22, 0) 50%,
                rgba(22, 32, 22, .16) 100%
            );
    }

    /* --- Website preview: overlaps the photo's lower edge --- */

    body .fr-featured.fr-featured--v3
    .fr-featured__preview {
        position: relative;
        right: auto;
        bottom: auto;

        grid-area: 1 / 1;
        align-self: end;
        z-index: 2;

        width: auto;

        margin:
            0
            var(--fr-pad)
            calc(-1 * var(--fr-hang));
    }

    /* --- Frosted info card --- */

    body .fr-featured.fr-featured--v3
    .fr-featured__details {
        position: relative;
        left: auto;
        bottom: auto;

        grid-row: 2;
        z-index: 3;

        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 32px;

        width: auto;

        margin:
            calc(var(--fr-hang) + var(--fr-gap))
            var(--fr-pad)
            0;

        padding: clamp(24px, 4.6vw, 40px);

        border: 1px solid rgba(255, 255, 255, .16);
        border-radius: 22px;

        background: rgba(30, 42, 31, .92);

        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .10),
            0 28px 56px -22px rgba(0, 0, 0, .55);
    }

    /* Transparent deep olive glass (Frayora Deep Olive #4F5B49,
       darkened). Saturation is lowered so the orange sky behind
       it can never turn the card brown. */
    @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

        body .fr-featured.fr-featured--v3
        .fr-featured__details {
            background:
                linear-gradient(
                    145deg,
                    rgba(79, 91, 73, .38) 0%,
                    rgba(30, 42, 31, .70) 100%
                );

            backdrop-filter: blur(22px) saturate(.85);
            -webkit-backdrop-filter: blur(22px) saturate(.85);
        }
    }

    body .fr-featured.fr-featured--v3
    .fr-featured__project-copy {
        max-width: 520px;
    }
}


/* =========================================
   09 — TABLET / MOBILE HEADER AND CARD (up to 899px)
========================================= */

@media (max-width: 899px) {

    body .fr-featured.fr-featured--v3
    .fr-featured__header {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: 22px;
    }

    body .fr-featured.fr-featured--v3
    .fr-featured__aside {
        gap: 24px;
        max-width: 560px;
        padding-bottom: 0;
    }

    body .fr-featured.fr-featured--v3
    .fr-featured__description {
        max-width: 560px;
    }

    body .fr-featured.fr-featured--v3
    .fr-featured__details {
        flex-direction: column;
        align-items: flex-start;
        gap: 26px;
    }

    body .fr-featured.fr-featured--v3
    .fr-featured__project-copy {
        max-width: none;
    }
}


/* =========================================
   10 — MOBILE (up to 699px)
========================================= */

@media (max-width: 699px) {

    body .fr-featured.fr-featured--v3 {
        padding: 68px 20px 60px;
    }

    body .fr-featured.fr-featured--v3
    .fr-featured__project {
        border-radius: 20px;
    }

    body .fr-featured.fr-featured--v3
    .fr-featured__description {
        font-size: 16px;
    }

    body .fr-featured.fr-featured--v3
    .fr-featured__details {
        padding: 26px 22px 26px;
        border-radius: 18px;
    }

    body .fr-featured.fr-featured--v3
    .fr-featured__project-description {
        font-size: 14.5px;
    }

    body .fr-featured.fr-featured--v3
    .fr-featured__live {
        width: 100%;
        justify-content: space-between;
    }
}


/* =========================================
   11 — SMALL MOBILE (up to 380px)
========================================= */

@media (max-width: 380px) {

    body .fr-featured.fr-featured--v3 {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Photo runs edge to edge — no side padding inside the card */
    body .fr-featured.fr-featured--v3
    .fr-featured__project {
        --fr-pad: 12px;

        padding-left: 0;
        padding-right: 0;
        padding-bottom: 12px;
    }

    body .fr-featured.fr-featured--v3
    .fr-featured__details {
        padding: 22px 18px;
    }

    body .fr-featured.fr-featured--v3
    .fr-featured__project-title {
        font-size: 28px;
    }
}


/* =========================================
   12 — CLICK FIX (merged from section-05-clickfix.css)
========================================= */

body .fr-featured.fr-featured--v3 {
    z-index: 10;
}

body .fr-featured.fr-featured--v3
.fr-featured__details {
    z-index: 30;
    pointer-events: auto;
}

body .fr-featured.fr-featured--v3
.fr-featured__live {
    position: relative;
    z-index: 31;

    pointer-events: auto;
    cursor: pointer;
}

body .fr-featured.fr-featured--v3
.fr-featured__live::after {
    content: "";

    position: absolute;
    inset: -6px;

    border-radius: 999px;
}

body .fr-featured.fr-featured--v3
.fr-featured__backdrop,
body .fr-featured.fr-featured--v3
.fr-featured__backdrop::after {
    pointer-events: none;
}


/* =========================================
   13 — REMOVE THE WHITE DIVIDER
   (all desktop, tablet and mobile widths)

   The Business in a Box section ends in a near-white
   angled wedge. It created the thin white band between
   the two sections. Section 05 now starts on the same
   cream, so the sections flow into each other.

   To bring the wedge back, delete this block.
========================================= */

body .frayora-biab-v4.frayora-biab-v4--showcase::after {
    content: none !important;
    display: none !important;
}


/* =========================================
   14 — STOP SIDEWAYS SCROLLING (whole site)

   Your screenshots show a horizontal scrollbar. Something
   on the page is slightly wider than the screen. This hides
   the overflow without affecting sticky headers.
========================================= */

html,
body {
    overflow-x: clip;
}


@media (prefers-reduced-motion: reduce) {

    body .fr-featured.fr-featured--v3 * {
        transition: none !important;
    }
}




/* =========================================
   15 — PALETTE APPLIED (desktop, tablet, mobile)
========================================= */

/* Heading accent: Deep Olive */
body .fr-featured.fr-featured--v3
.fr-featured__heading span {
    color: var(--fr-olive);
}

/* View Portfolio + Visit Live Site: Terracotta */
body .fr-featured.fr-featured--v3
.fr-featured__all,
body .fr-featured.fr-featured--v3
.fr-featured__live {
    background: var(--fr-terracotta);
}

@media (hover: hover) and (pointer: fine) {

    body .fr-featured.fr-featured--v3
    .fr-featured__all:hover,
    body .fr-featured.fr-featured--v3
    .fr-featured__live:hover {
        background: var(--fr-terracotta-deep);
    }
}

/* Info card text: Cream, with Golden Sand label */
body .fr-featured.fr-featured--v3
.fr-featured__category {
    color: var(--fr-sand);
}

body .fr-featured.fr-featured--v3
.fr-featured__project-title {
    color: var(--fr-cream);
}

body .fr-featured.fr-featured--v3
.fr-featured__project-description {
    color: rgba(247, 240, 230, .88);
}

/* END — SECTION 05 FINAL */




/* =========================================================
   FRAYORA — SITE-WIDE SIGNATURE DETAILS
   PASTE AT THE VERY BOTTOM OF main.css

   Slanted terracotta marker beside every eyebrow
      (left-aligned: marker before the text,
       centered: marker on both sides, mirrored)
      Sand on dark olive sections.

   Only decoration is added. No fonts, sizes, colours of text,
   words or buttons change. Desktop, tablet and mobile.
========================================================= */


/* ---------- 01 — EYEBROW MARKER (LEFT-ALIGNED) ---------- */

body .about-founder__eyebrow,
body .about-layer__eyebrow,
body .about-values-mission__eyebrow,
body .biab-hero__eyebrow,
body .biab-foundation__eyebrow,
body .biab-transformation__eyebrow,
body .biab-journey__eyebrow,
body .biab-stages__eyebrow,
body .biab-packages__eyebrow,
body .biab-proposal__eyebrow,
body .bk-hero__eyebrow,
body .bk-solves__eyebrow,
body .bk-build__eyebrow,
body .bk-outcome__eyebrow,
body .bk-process__eyebrow,
body .fc-options__eyebrow,
body .fc-inquiry__eyebrow,
body .fc-booking__eyebrow,
body .digital-hero__eyebrow,
body .digital-design__eyebrow,
body .digital-benefits__eyebrow,
body .digital-system__eyebrow,
body .digital-process__eyebrow,
body .eks-hero__eyebrow,
body .eks-impact__eyebrow,
body .eks-process__eyebrow,
body .frayora-connected-v3__eyebrow,
body .home-approach__eyebrow,
body .frayora-biab-v4__eyebrow,
body .fr-featured__eyebrow,
body .oi-hero__eyebrow,
body .oi-cover__eyebrow,
body .oi-partner__eyebrow,
body .oi-pricing__eyebrow,
body .oi-approach__eyebrow,
body .oi-real__eyebrow,
body .fr-resources-topics__eyebrow,
body .sops-hero__eyebrow,
body .sops-solves__eyebrow,
body .sops-build__eyebrow,
body .sops-impact__eyebrow,
body .sops-process__eyebrow,
body .fw-portfolio__eyebrow,
body .wf-hero__eyebrow,
body .wf-transformation__eyebrow,
body .wf-connected__eyebrow {
    display: flex !important;
    align-items: center;
    gap: 14px;
}

body .about-founder__eyebrow::before,
body .about-layer__eyebrow::before,
body .about-values-mission__eyebrow::before,
body .biab-hero__eyebrow::before,
body .biab-foundation__eyebrow::before,
body .biab-transformation__eyebrow::before,
body .biab-journey__eyebrow::before,
body .biab-stages__eyebrow::before,
body .biab-packages__eyebrow::before,
body .biab-proposal__eyebrow::before,
body .bk-hero__eyebrow::before,
body .bk-solves__eyebrow::before,
body .bk-build__eyebrow::before,
body .bk-outcome__eyebrow::before,
body .bk-process__eyebrow::before,
body .fc-options__eyebrow::before,
body .fc-inquiry__eyebrow::before,
body .fc-booking__eyebrow::before,
body .digital-hero__eyebrow::before,
body .digital-design__eyebrow::before,
body .digital-benefits__eyebrow::before,
body .digital-system__eyebrow::before,
body .digital-process__eyebrow::before,
body .eks-hero__eyebrow::before,
body .eks-impact__eyebrow::before,
body .eks-process__eyebrow::before,
body .frayora-connected-v3__eyebrow::before,
body .home-approach__eyebrow::before,
body .frayora-biab-v4__eyebrow::before,
body .fr-featured__eyebrow::before,
body .oi-hero__eyebrow::before,
body .oi-cover__eyebrow::before,
body .oi-partner__eyebrow::before,
body .oi-pricing__eyebrow::before,
body .oi-approach__eyebrow::before,
body .oi-real__eyebrow::before,
body .fr-resources-topics__eyebrow::before,
body .sops-hero__eyebrow::before,
body .sops-solves__eyebrow::before,
body .sops-build__eyebrow::before,
body .sops-impact__eyebrow::before,
body .sops-process__eyebrow::before,
body .fw-portfolio__eyebrow::before,
body .wf-hero__eyebrow::before,
body .wf-transformation__eyebrow::before,
body .wf-connected__eyebrow::before,
body .about-why__eyebrow::before,
body .about-method__eyebrow::before,
body .oa-approach-cards__eyebrow::before,
body .oa-journey__eyebrow::before,
body .oa-compare__eyebrow::before,
body .biab-final-cta__eyebrow::before,
body .oi-system__eyebrow::before,
body .wf-final-cta__eyebrow::before,
body .fr-policy-hero__eyebrow::before,
body .about-why__eyebrow::after,
body .about-method__eyebrow::after,
body .oa-approach-cards__eyebrow::after,
body .oa-journey__eyebrow::after,
body .oa-compare__eyebrow::after,
body .biab-final-cta__eyebrow::after,
body .oi-system__eyebrow::after,
body .wf-final-cta__eyebrow::after,
body .fr-policy-hero__eyebrow::after {
    content: "";
    flex: none;
    width: 30px;
    height: 10px;
    background: #D66A43;
    clip-path: polygon(30% 0, 100% 0, 70% 100%, 0 100%);
    -webkit-clip-path: polygon(30% 0, 100% 0, 70% 100%, 0 100%);
}


/* ---------- 02 — EYEBROW MARKER (CENTERED) ---------- */

body .about-why__eyebrow,
body .about-method__eyebrow,
body .oa-approach-cards__eyebrow,
body .oa-journey__eyebrow,
body .oa-compare__eyebrow,
body .biab-final-cta__eyebrow,
body .oi-system__eyebrow,
body .wf-final-cta__eyebrow,
body .fr-policy-hero__eyebrow {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

body .about-why__eyebrow::after,
body .about-method__eyebrow::after,
body .oa-approach-cards__eyebrow::after,
body .oa-journey__eyebrow::after,
body .oa-compare__eyebrow::after,
body .biab-final-cta__eyebrow::after,
body .oi-system__eyebrow::after,
body .wf-final-cta__eyebrow::after,
body .fr-policy-hero__eyebrow::after {
    clip-path: polygon(0 0, 70% 0, 100% 100%, 30% 100%);
    -webkit-clip-path: polygon(0 0, 70% 0, 100% 100%, 30% 100%);
}


/* ---------- 03 — MARKER COLOUR ON DARK OLIVE ---------- */

body .about-values-mission__eyebrow::before,
body .biab-hero__eyebrow::before,
body .biab-transformation__eyebrow::before,
body .bk-hero__eyebrow::before,
body .digital-hero__eyebrow::before,
body .eks-hero__eyebrow::before,
body .home-approach__eyebrow::before,
body .oi-hero__eyebrow::before,
body .oi-partner__eyebrow::before,
body .oi-system__eyebrow::before,
body .sops-hero__eyebrow::before,
body .wf-hero__eyebrow::before,
body .about-values-mission__eyebrow::after,
body .biab-hero__eyebrow::after,
body .biab-transformation__eyebrow::after,
body .bk-hero__eyebrow::after,
body .digital-hero__eyebrow::after,
body .eks-hero__eyebrow::after,
body .home-approach__eyebrow::after,
body .oi-hero__eyebrow::after,
body .oi-partner__eyebrow::after,
body .oi-system__eyebrow::after,
body .sops-hero__eyebrow::after,
body .wf-hero__eyebrow::after {
    background: #D9B77E;
}

/* Contact page: marker follows the eyebrow's own colour */
body .fc-inquiry__eyebrow::before,
body .fc-booking__eyebrow::before {
    background: currentColor;
}


/* ---------- 04 — MOBILE (up to 599px) ---------- */

@media screen and (max-width: 599px) {

    body .about-founder__eyebrow::before,
    body .about-layer__eyebrow::before,
    body .about-values-mission__eyebrow::before,
    body .biab-hero__eyebrow::before,
    body .biab-foundation__eyebrow::before,
    body .biab-transformation__eyebrow::before,
    body .biab-journey__eyebrow::before,
    body .biab-stages__eyebrow::before,
    body .biab-packages__eyebrow::before,
    body .biab-proposal__eyebrow::before,
    body .bk-hero__eyebrow::before,
    body .bk-solves__eyebrow::before,
    body .bk-build__eyebrow::before,
    body .bk-outcome__eyebrow::before,
    body .bk-process__eyebrow::before,
    body .fc-options__eyebrow::before,
    body .fc-inquiry__eyebrow::before,
    body .fc-booking__eyebrow::before,
    body .digital-hero__eyebrow::before,
    body .digital-design__eyebrow::before,
    body .digital-benefits__eyebrow::before,
    body .digital-system__eyebrow::before,
    body .digital-process__eyebrow::before,
    body .eks-hero__eyebrow::before,
    body .eks-impact__eyebrow::before,
    body .eks-process__eyebrow::before,
    body .frayora-connected-v3__eyebrow::before,
    body .home-approach__eyebrow::before,
    body .frayora-biab-v4__eyebrow::before,
    body .fr-featured__eyebrow::before,
    body .oi-hero__eyebrow::before,
    body .oi-cover__eyebrow::before,
    body .oi-partner__eyebrow::before,
    body .oi-pricing__eyebrow::before,
    body .oi-approach__eyebrow::before,
    body .oi-real__eyebrow::before,
    body .fr-resources-topics__eyebrow::before,
    body .sops-hero__eyebrow::before,
    body .sops-solves__eyebrow::before,
    body .sops-build__eyebrow::before,
    body .sops-impact__eyebrow::before,
    body .sops-process__eyebrow::before,
    body .fw-portfolio__eyebrow::before,
    body .wf-hero__eyebrow::before,
    body .wf-transformation__eyebrow::before,
    body .wf-connected__eyebrow::before,
    body .about-why__eyebrow::before,
    body .about-method__eyebrow::before,
    body .oa-approach-cards__eyebrow::before,
    body .oa-journey__eyebrow::before,
    body .oa-compare__eyebrow::before,
    body .biab-final-cta__eyebrow::before,
    body .oi-system__eyebrow::before,
    body .wf-final-cta__eyebrow::before,
    body .fr-policy-hero__eyebrow::before,
    body .about-why__eyebrow::after,
    body .about-method__eyebrow::after,
    body .oa-approach-cards__eyebrow::after,
    body .oa-journey__eyebrow::after,
    body .oa-compare__eyebrow::after,
    body .biab-final-cta__eyebrow::after,
    body .oi-system__eyebrow::after,
    body .wf-final-cta__eyebrow::after,
    body .fr-policy-hero__eyebrow::after {
        width: 24px;
        height: 8px;
    }

    body .about-founder__eyebrow,
    body .about-layer__eyebrow,
    body .about-values-mission__eyebrow,
    body .biab-hero__eyebrow,
    body .biab-foundation__eyebrow,
    body .biab-transformation__eyebrow,
    body .biab-journey__eyebrow,
    body .biab-stages__eyebrow,
    body .biab-packages__eyebrow,
    body .biab-proposal__eyebrow,
    body .bk-hero__eyebrow,
    body .bk-solves__eyebrow,
    body .bk-build__eyebrow,
    body .bk-outcome__eyebrow,
    body .bk-process__eyebrow,
    body .fc-options__eyebrow,
    body .fc-inquiry__eyebrow,
    body .fc-booking__eyebrow,
    body .digital-hero__eyebrow,
    body .digital-design__eyebrow,
    body .digital-benefits__eyebrow,
    body .digital-system__eyebrow,
    body .digital-process__eyebrow,
    body .eks-hero__eyebrow,
    body .eks-impact__eyebrow,
    body .eks-process__eyebrow,
    body .frayora-connected-v3__eyebrow,
    body .home-approach__eyebrow,
    body .frayora-biab-v4__eyebrow,
    body .fr-featured__eyebrow,
    body .oi-hero__eyebrow,
    body .oi-cover__eyebrow,
    body .oi-partner__eyebrow,
    body .oi-pricing__eyebrow,
    body .oi-approach__eyebrow,
    body .oi-real__eyebrow,
    body .fr-resources-topics__eyebrow,
    body .sops-hero__eyebrow,
    body .sops-solves__eyebrow,
    body .sops-build__eyebrow,
    body .sops-impact__eyebrow,
    body .sops-process__eyebrow,
    body .fw-portfolio__eyebrow,
    body .wf-hero__eyebrow,
    body .wf-transformation__eyebrow,
    body .wf-connected__eyebrow,
    body .about-why__eyebrow,
    body .about-method__eyebrow,
    body .oa-approach-cards__eyebrow,
    body .oa-journey__eyebrow,
    body .oa-compare__eyebrow,
    body .biab-final-cta__eyebrow,
    body .oi-system__eyebrow,
    body .wf-final-cta__eyebrow,
    body .fr-policy-hero__eyebrow {
        gap: 11px;
    }

}

/* END — SITE-WIDE SIGNATURE DETAILS */


/* =========================================================
   FRAYORA — HOMEPAGE SECTION 06 (A CLEARER WAY FORWARD)
   REDESIGN v4 — PASTE AT THE VERY BOTTOM OF main.css

   Typography, words and the glass photo are untouched.
   Only the structure around them changes:
   - angled sage/sand panel bleeding off the right edge
   - slim terracotta edge line on the angle
   - connecting lines + soft floor behind the glass photo
   - small slanted marker by the eyebrow
   Scoped to .frayora-why-v3--v4.
========================================================= */

/* ---------- 01 — SECTION + ANGLED PANEL (desktop) ---------- */

body .frayora-why-v3.frayora-why-v3--v4 {
    background-color: #F8F3EB !important;
}

body .frayora-why-v3.frayora-why-v3--v4::before,
body .frayora-why-v3.frayora-why-v3--v4::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 47%;
    pointer-events: none;
    z-index: 0;
}

body .frayora-why-v3.frayora-why-v3--v4::before {
    clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
    -webkit-clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
    background:
        radial-gradient(ellipse 60% 55% at 62% 52%, rgba(255,255,255,.55), transparent 70%),
        linear-gradient(155deg, rgba(135,148,123,.24) 0%, rgba(217,183,126,.22) 62%, rgba(214,106,67,.07) 100%);
}

/* slim edge line that follows the angle */
body .frayora-why-v3.frayora-why-v3--v4::after {
    clip-path: polygon(22% 0, calc(22% + 3px) 0, 3px 100%, 0 100%);
    -webkit-clip-path: polygon(22% 0, calc(22% + 3px) 0, 3px 100%, 0 100%);
    background: linear-gradient(180deg, #D66A43, #D9B77E 60%, rgba(135,148,123,.6));
    opacity: .7;
}

body .frayora-why-v3.frayora-why-v3--v4 .frayora-why-v3__inner {
    z-index: 1;
}

/* ---------- 02 — CONTENT DETAILS (decor only) ---------- */

body .frayora-why-v3--v4 .frayora-why-v3__eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
}

body .frayora-why-v3--v4 .frayora-why-v3__eyebrow::before {
    content: "";
    flex: none;
    width: 30px;
    height: 10px;
    background: #D66A43;
    clip-path: polygon(30% 0, 100% 0, 70% 100%, 0 100%);
    -webkit-clip-path: polygon(30% 0, 100% 0, 70% 100%, 0 100%);
}

/* ---------- 03 — STAGE ---------- */

body .frayora-why-v3--v4 .frayora-why-v3__stage {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    width: 100%;
    min-width: 0;
}

body .frayora-why-v3--v4 .frayora-why-v3__stage > .frayora-why-v3__visual {
    grid-area: 1 / 1;
    z-index: 2;
}

body .frayora-why-v3--v4 .frayora-why-v3__floor {
    grid-area: 1 / 1;
    z-index: 0;
    align-self: end;
    justify-self: center;
    width: 82%;
    height: 14%;
    margin-bottom: -2%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(79,91,73,.26), rgba(79,91,73,0) 70%);
    filter: blur(6px);
    pointer-events: none;
}

body .frayora-why-v3--v4 .frayora-why-v3__links {
    grid-area: 1 / 1;
    z-index: 1;
    width: 100%;
    max-width: none;
    height: auto;
    overflow: visible;
    pointer-events: none;
}

body .frayora-why-v3--v4 .frayora-why-v3__links path {
    fill: none;
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-dasharray: 3 7;
}

body .frayora-why-v3--v4 .frayora-why-v3__links .l1 { stroke: rgba(79,91,73,.55); }
body .frayora-why-v3--v4 .frayora-why-v3__links .l2 { stroke: rgba(214,106,67,.5); }
body .frayora-why-v3--v4 .frayora-why-v3__links .l3 { stroke: rgba(217,183,126,.9); stroke-dasharray: none; }

body .frayora-why-v3--v4 .frayora-why-v3__links .n { stroke: #F8F3EB; stroke-width: 2; }
body .frayora-why-v3--v4 .frayora-why-v3__links .n-s { fill: #87947B; }
body .frayora-why-v3--v4 .frayora-why-v3__links .n-a { fill: #D9B77E; }
body .frayora-why-v3--v4 .frayora-why-v3__links .n-t { fill: #D66A43; }

/* ---------- 04 — STACKED: TABLET PORTRAIT + MOBILE (≤899) ---------- */

@media screen and (max-width: 899px) {

    /* panel moves from the section to the stage, edge to edge */
    body .frayora-why-v3.frayora-why-v3--v4::before,
    body .frayora-why-v3.frayora-why-v3--v4::after {
        content: none;
        display: none;
    }

    body .frayora-why-v3--v4 .frayora-why-v3__inner {
        max-width: none;
        padding-bottom: 0;
        gap: 0;
    }

    body .frayora-why-v3--v4 .frayora-why-v3__stage {
        width: auto;
        margin: 36px -48px 0;
        padding: 74px 48px 64px;
    }

    body .frayora-why-v3--v4 .frayora-why-v3__stage::before,
    body .frayora-why-v3--v4 .frayora-why-v3__stage::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
    }

    body .frayora-why-v3--v4 .frayora-why-v3__stage::before {
        clip-path: polygon(0 16%, 100% 0, 100% 100%, 0 100%);
        -webkit-clip-path: polygon(0 16%, 100% 0, 100% 100%, 0 100%);
        background:
            radial-gradient(ellipse 60% 60% at 50% 55%, rgba(255,255,255,.55), transparent 70%),
            linear-gradient(165deg, rgba(135,148,123,.26) 0%, rgba(217,183,126,.24) 65%, rgba(214,106,67,.08) 100%);
    }

    body .frayora-why-v3--v4 .frayora-why-v3__stage::after {
        clip-path: polygon(0 16%, 100% 0, 100% calc(0% + 3px), 0 calc(16% + 3px));
        -webkit-clip-path: polygon(0 16%, 100% 0, 100% calc(0% + 3px), 0 calc(16% + 3px));
        background: linear-gradient(90deg, #D66A43, #D9B77E 60%, rgba(135,148,123,.6));
        opacity: .7;
    }

    body .frayora-why-v3--v4 .frayora-why-v3__links {
        width: 104%;
    }
}

/* mobile (≤599) */
@media screen and (max-width: 599px) {

    body .frayora-why-v3--v4 .frayora-why-v3__stage {
        margin: 28px -24px 0;
        padding: 58px 24px 50px;
    }

    body .frayora-why-v3--v4 .frayora-why-v3__eyebrow::before {
        width: 24px;
        height: 8px;
    }
}

/* small mobile (≤374) */
@media screen and (max-width: 374px) {

    body .frayora-why-v3--v4 .frayora-why-v3__stage {
        margin: 24px -20px 0;
        padding: 50px 20px 44px;
    }
}

/* ---------- 05 — LANDSCAPE TABLET (900–1100) ---------- */

@media screen and (min-width: 900px) and (max-width: 1100px) {

    body .frayora-why-v3.frayora-why-v3--v4::before,
    body .frayora-why-v3.frayora-why-v3--v4::after {
        width: 47%;
    }

    body .frayora-why-v3--v4 .frayora-why-v3__links {
        width: 94%;
    }
}

/* ---------- 06 — MOTION ---------- */

@media (prefers-reduced-motion: no-preference) {
    body .frayora-why-v3--v4 .frayora-why-v3__links .l1 {
        animation: frWhyDash 24s linear infinite;
    }
    @keyframes frWhyDash { to { stroke-dashoffset: -200; } }
}

/* END — SECTION 06 REDESIGN v4 */


/* =========================================================
   FRAYORA — HOMEPAGE ELEVATION v2 (decoration only)
   PASTE AT THE VERY BOTTOM OF main.css
   (replace the earlier homepage-elevation block if pasted)

   No words, type, photos or buttons touched. Adds:
   - angled layered shards behind Featured Project + final CTA
   - stacked offset sheets peeking out behind the Veyron card
   - layered hero curve + brand edge, shaped section edges
   Tablet + mobile versions included.
========================================================= */


/* ---------- S5 · FEATURED PROJECT ---------- */
body .fr-featured { overflow-x: clip; }
body .fr-featured__inner { position: relative; z-index: 1; isolation: isolate; }

/* big angled shards on the section background */
body .fr-featured::before,
body .fr-featured::after {
    content: ""; position: absolute; pointer-events: none; z-index: 0;
}
body .fr-featured::before {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24%, #000 76%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 24%, #000 76%, transparent 100%);
    top: 24%; right: 0; width: 36%; height: 52%;
    clip-path: polygon(38% 0, 100% 0, 100% 100%, 0 100%);
    -webkit-clip-path: polygon(38% 0, 100% 0, 100% 100%, 0 100%);
    background: linear-gradient(160deg, rgba(135,148,123,.20), rgba(217,183,126,.16) 70%, rgba(214,106,67,.05));
}
body .fr-featured::after {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24%, #000 76%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 24%, #000 76%, transparent 100%);
    bottom: 4%; left: 0; width: 30%; height: 38%;
    clip-path: polygon(0 0, 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
    background: linear-gradient(20deg, rgba(217,183,126,.22), rgba(214,106,67,.07));
}

/* stacked offset sheets peeking out behind the Veyron card */
body .fr-featured__inner::before,
body .fr-featured__inner::after {
    content: "" !important; display: block !important;
    position: absolute; z-index: -1; pointer-events: none;
}
body .fr-featured__inner::before {          /* sage sheet, bottom-right */
    right: -34px; bottom: -22px; width: 44%; height: 52%;
    clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%);
    -webkit-clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%);
    background: linear-gradient(150deg, rgba(135,148,123,.42), rgba(79,91,73,.38));
    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 45%), linear-gradient(to bottom, transparent 0, #000 24%, #000 76%, transparent 100%); mask-image: linear-gradient(to left, transparent 0, #000 45%), linear-gradient(to bottom, transparent 0, #000 24%, #000 76%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect;
}
body .fr-featured__inner::after {           /* sand sheet, left of card */
    left: -34px; top: 34%; width: 30%; height: 44%;
    clip-path: polygon(0 14%, 100% 0, 78% 100%, 0 100%);
    -webkit-clip-path: polygon(0 14%, 100% 0, 78% 100%, 0 100%);
    background: linear-gradient(170deg, rgba(217,183,126,.55), rgba(214,106,67,.22));
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 45%), linear-gradient(to bottom, transparent 0, #000 24%, #000 76%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 45%), linear-gradient(to bottom, transparent 0, #000 24%, #000 76%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect;
}


/* ---- Veyron card: angled, not a rectangle (desktop, photo fills the card) ---- */
@media screen and (min-width: 1200px) {
body .fr-featured.fr-featured--v3 .fr-featured__project {
    --fr-cut-a: 110px; --fr-cut-b: 64px;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    filter: none !important;
}
body .fr-featured.fr-featured--v3 .fr-featured__backdrop {
    border-radius: 0 !important;
    clip-path: polygon(0 0, calc(100% - var(--fr-cut-a)) 0, 100% var(--fr-cut-a), 100% 100%, var(--fr-cut-b) 100%, 0 calc(100% - var(--fr-cut-b)));
    -webkit-clip-path: polygon(0 0, calc(100% - var(--fr-cut-a)) 0, 100% var(--fr-cut-a), 100% 100%, var(--fr-cut-b) 100%, 0 calc(100% - var(--fr-cut-b)));
}
/* soft shadow that follows the cut shape (a blurred clone, so the
   glass blur on the info card keeps working) */
body .fr-featured.fr-featured--v3 .fr-featured__project::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    transform: translateY(26px) scale(.96);
    clip-path: polygon(0 0, calc(100% - var(--fr-cut-a)) 0, 100% var(--fr-cut-a), 100% 100%, var(--fr-cut-b) 100%, 0 calc(100% - var(--fr-cut-b)));
    -webkit-clip-path: polygon(0 0, calc(100% - var(--fr-cut-a)) 0, 100% var(--fr-cut-a), 100% 100%, var(--fr-cut-b) 100%, 0 calc(100% - var(--fr-cut-b)));
    background: rgba(24,36,28,.42);
    filter: blur(28px);
}
/* slim terracotta -> sand edge along each cut */
body .fr-featured.fr-featured--v3 .fr-featured__project::after {
    content: "" !important; display: block !important;
    position: absolute; z-index: 1; pointer-events: none;
    left: calc(100% - var(--fr-cut-a)); top: 0;
    width: calc(var(--fr-cut-a) * 1.4142); height: 3px;
    transform-origin: 0 0; transform: rotate(45deg);
    background: linear-gradient(90deg, #D66A43, #D9B77E);
}
body .fr-featured.fr-featured--v3 .fr-featured__backdrop::before {
    content: ""; position: absolute; z-index: 2; pointer-events: none;
    left: 0; top: calc(100% - var(--fr-cut-b));
    width: calc(var(--fr-cut-b) * 1.4142); height: 3px;
    transform-origin: 0 0; transform: rotate(45deg);
    background: linear-gradient(90deg, #D66A43, #D9B77E);
}
}

/* ---- Veyron card on tablet + mobile: the whole stacked card gets the
   cut corners and keeps its own deep-olive background ---- */
@media screen and (max-width: 1199px) {
    body .fr-featured.fr-featured--v3 .fr-featured__project {
        --fr-cut-a: 90px; --fr-cut-b: 52px;
        border-radius: 0 !important;
        clip-path: polygon(0 0, calc(100% - var(--fr-cut-a)) 0, 100% var(--fr-cut-a), 100% 100%, var(--fr-cut-b) 100%, 0 calc(100% - var(--fr-cut-b)));
        -webkit-clip-path: polygon(0 0, calc(100% - var(--fr-cut-a)) 0, 100% var(--fr-cut-a), 100% 100%, var(--fr-cut-b) 100%, 0 calc(100% - var(--fr-cut-b)));
    }
    /* slim terracotta -> sand edge along each cut, drawn inside the card */
    body .fr-featured.fr-featured--v3 .fr-featured__project::before,
    body .fr-featured.fr-featured--v3 .fr-featured__project::after {
        content: "" !important; display: block !important;
        position: absolute; z-index: 5; pointer-events: none; height: 3px;
        transform-origin: 0 0; transform: rotate(45deg);
        background: linear-gradient(90deg, #D66A43, #D9B77E);
    }
    body .fr-featured.fr-featured--v3 .fr-featured__project::after {
        left: calc(100% - var(--fr-cut-a)); top: 0;
        width: calc(var(--fr-cut-a) * 1.4142);
    }
    body .fr-featured.fr-featured--v3 .fr-featured__project::before {
        left: 0; top: calc(100% - var(--fr-cut-b));
        width: calc(var(--fr-cut-b) * 1.4142);
    }
}

/* ---------- TABLET ---------- */
@media screen and (max-width: 899px) {
    body .fr-featured.fr-featured--v3 .fr-featured__project { --fr-cut-a: 72px; --fr-cut-b: 44px; }
    body .fr-featured__inner::before,
    body .fr-featured__inner::after { display: none !important; }
    body .fr-featured::before { width: 46%; top: 6%; height: 26%; }
    body .fr-featured::after { width: 40%; height: 22%; bottom: 3%; }
}

/* ---------- MOBILE ---------- */
@media screen and (max-width: 599px) {
    body .fr-featured.fr-featured--v3 .fr-featured__project { --fr-cut-a: 48px; --fr-cut-b: 30px; }
    body .fr-featured::before { width: 58%; top: 4%; height: 18%; }
    body .fr-featured::after { width: 44%; height: 16%; }
}

/* =========================================================
   SECTION SHAPES — the sections themselves are no longer
   straight rectangles. Each boundary has its own angled or
   curved edge, with a soft tonal change so the shape reads.
   Layout spacing is unchanged (negative margin + matching
   transparent border keep every section's content in place).
========================================================= */

:root { --fr-edge: 64px; }
@media screen and (max-width: 1100px) { :root { --fr-edge: 52px; } }
@media screen and (max-width: 899px)  { :root { --fr-edge: 44px; } }
@media screen and (max-width: 599px)  { :root { --fr-edge: 34px; } }

/* sections that get pulled up under the previous section's cut edge.
   The inner wrapper is pushed down by the same amount, so every
   section's content stays exactly where it was and the section
   background fills the whole shape (no seams / white gaps). */
body .home-approach,
body .frayora-biab-v4,
body .fr-featured,
body .frayora-why-v3,
body .home-cta {
    margin-top: calc(var(--fr-edge) * -1) !important;
}
body .home-approach__inner,
body .frayora-biab-v4__inner,
body .fr-featured__inner,
body .frayora-why-v3__inner,
body .home-cta__inner {
    margin-top: var(--fr-edge) !important;
}

/* S2 · bottom edge rises to the right */
body .frayora-connected-v3 {
    background-color: #F8F3EB;
    clip-path: polygon(0 0, 100% 0, 100.0% calc(100% - var(--fr-edge) * 1.000), 0.0% calc(100% - var(--fr-edge) * 0.000));
    -webkit-clip-path: polygon(0 0, 100% 0, 100.0% calc(100% - var(--fr-edge) * 1.000), 0.0% calc(100% - var(--fr-edge) * 0.000));
}

/* S4 · top edge flows in as a soft S-curve, original cream */
body .frayora-biab-v4.frayora-biab-v4--showcase {
    background-color: #FAF7F2 !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 4.2% calc(var(--fr-edge) * 0.004), 8.3% calc(var(--fr-edge) * 0.017), 12.5% calc(var(--fr-edge) * 0.038), 16.7% calc(var(--fr-edge) * 0.067), 20.8% calc(var(--fr-edge) * 0.103), 25.0% calc(var(--fr-edge) * 0.146), 29.2% calc(var(--fr-edge) * 0.196), 33.3% calc(var(--fr-edge) * 0.250), 37.5% calc(var(--fr-edge) * 0.309), 41.7% calc(var(--fr-edge) * 0.371), 45.8% calc(var(--fr-edge) * 0.435), 50.0% calc(var(--fr-edge) * 0.500), 54.2% calc(var(--fr-edge) * 0.565), 58.3% calc(var(--fr-edge) * 0.629), 62.5% calc(var(--fr-edge) * 0.691), 66.7% calc(var(--fr-edge) * 0.750), 70.8% calc(var(--fr-edge) * 0.804), 75.0% calc(var(--fr-edge) * 0.854), 79.2% calc(var(--fr-edge) * 0.897), 83.3% calc(var(--fr-edge) * 0.933), 87.5% calc(var(--fr-edge) * 0.962), 91.7% calc(var(--fr-edge) * 0.983), 95.8% calc(var(--fr-edge) * 0.996), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 4.2% calc(var(--fr-edge) * 0.004), 8.3% calc(var(--fr-edge) * 0.017), 12.5% calc(var(--fr-edge) * 0.038), 16.7% calc(var(--fr-edge) * 0.067), 20.8% calc(var(--fr-edge) * 0.103), 25.0% calc(var(--fr-edge) * 0.146), 29.2% calc(var(--fr-edge) * 0.196), 33.3% calc(var(--fr-edge) * 0.250), 37.5% calc(var(--fr-edge) * 0.309), 41.7% calc(var(--fr-edge) * 0.371), 45.8% calc(var(--fr-edge) * 0.435), 50.0% calc(var(--fr-edge) * 0.500), 54.2% calc(var(--fr-edge) * 0.565), 58.3% calc(var(--fr-edge) * 0.629), 62.5% calc(var(--fr-edge) * 0.691), 66.7% calc(var(--fr-edge) * 0.750), 70.8% calc(var(--fr-edge) * 0.804), 75.0% calc(var(--fr-edge) * 0.854), 79.2% calc(var(--fr-edge) * 0.897), 83.3% calc(var(--fr-edge) * 0.933), 87.5% calc(var(--fr-edge) * 0.962), 91.7% calc(var(--fr-edge) * 0.983), 95.8% calc(var(--fr-edge) * 0.996), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
}

/* S5 · top edge slopes, bottom edge is a gentle wave */
body .fr-featured.fr-featured--v3 {
    background-color: #FAF6EF;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(100% - var(--fr-edge) * 0.500), 95.8% calc(100% - var(--fr-edge) * 0.371), 91.7% calc(100% - var(--fr-edge) * 0.250), 87.5% calc(100% - var(--fr-edge) * 0.146), 83.3% calc(100% - var(--fr-edge) * 0.067), 79.2% calc(100% - var(--fr-edge) * 0.017), 75.0% calc(100% - var(--fr-edge) * 0.000), 70.8% calc(100% - var(--fr-edge) * 0.017), 66.7% calc(100% - var(--fr-edge) * 0.067), 62.5% calc(100% - var(--fr-edge) * 0.146), 58.3% calc(100% - var(--fr-edge) * 0.250), 54.2% calc(100% - var(--fr-edge) * 0.371), 50.0% calc(100% - var(--fr-edge) * 0.500), 45.8% calc(100% - var(--fr-edge) * 0.629), 41.7% calc(100% - var(--fr-edge) * 0.750), 37.5% calc(100% - var(--fr-edge) * 0.854), 33.3% calc(100% - var(--fr-edge) * 0.933), 29.2% calc(100% - var(--fr-edge) * 0.983), 25.0% calc(100% - var(--fr-edge) * 1.000), 20.8% calc(100% - var(--fr-edge) * 0.983), 16.7% calc(100% - var(--fr-edge) * 0.933), 12.5% calc(100% - var(--fr-edge) * 0.854), 8.3% calc(100% - var(--fr-edge) * 0.750), 4.2% calc(100% - var(--fr-edge) * 0.629), 0.0% calc(100% - var(--fr-edge) * 0.500));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(100% - var(--fr-edge) * 0.500), 95.8% calc(100% - var(--fr-edge) * 0.371), 91.7% calc(100% - var(--fr-edge) * 0.250), 87.5% calc(100% - var(--fr-edge) * 0.146), 83.3% calc(100% - var(--fr-edge) * 0.067), 79.2% calc(100% - var(--fr-edge) * 0.017), 75.0% calc(100% - var(--fr-edge) * 0.000), 70.8% calc(100% - var(--fr-edge) * 0.017), 66.7% calc(100% - var(--fr-edge) * 0.067), 62.5% calc(100% - var(--fr-edge) * 0.146), 58.3% calc(100% - var(--fr-edge) * 0.250), 54.2% calc(100% - var(--fr-edge) * 0.371), 50.0% calc(100% - var(--fr-edge) * 0.500), 45.8% calc(100% - var(--fr-edge) * 0.629), 41.7% calc(100% - var(--fr-edge) * 0.750), 37.5% calc(100% - var(--fr-edge) * 0.854), 33.3% calc(100% - var(--fr-edge) * 0.933), 29.2% calc(100% - var(--fr-edge) * 0.983), 25.0% calc(100% - var(--fr-edge) * 1.000), 20.8% calc(100% - var(--fr-edge) * 0.983), 16.7% calc(100% - var(--fr-edge) * 0.933), 12.5% calc(100% - var(--fr-edge) * 0.854), 8.3% calc(100% - var(--fr-edge) * 0.750), 4.2% calc(100% - var(--fr-edge) * 0.629), 0.0% calc(100% - var(--fr-edge) * 0.500));
}

/* S6 · soft nude beige so the S5 wave reads */
body .frayora-why-v3.frayora-why-v3--v4 {
    background-color: #F5EDE4 !important;
}

/* S7 · top edge arcs up like the hero, original cream */
body .home-cta {
    background-color: #F8F3EB !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 4.2% calc(var(--fr-edge) * 0.869), 8.3% calc(var(--fr-edge) * 0.741), 12.5% calc(var(--fr-edge) * 0.617), 16.7% calc(var(--fr-edge) * 0.500), 20.8% calc(var(--fr-edge) * 0.391), 25.0% calc(var(--fr-edge) * 0.293), 29.2% calc(var(--fr-edge) * 0.207), 33.3% calc(var(--fr-edge) * 0.134), 37.5% calc(var(--fr-edge) * 0.076), 41.7% calc(var(--fr-edge) * 0.034), 45.8% calc(var(--fr-edge) * 0.009), 50.0% calc(var(--fr-edge) * 0.000), 54.2% calc(var(--fr-edge) * 0.009), 58.3% calc(var(--fr-edge) * 0.034), 62.5% calc(var(--fr-edge) * 0.076), 66.7% calc(var(--fr-edge) * 0.134), 70.8% calc(var(--fr-edge) * 0.207), 75.0% calc(var(--fr-edge) * 0.293), 79.2% calc(var(--fr-edge) * 0.391), 83.3% calc(var(--fr-edge) * 0.500), 87.5% calc(var(--fr-edge) * 0.617), 91.7% calc(var(--fr-edge) * 0.741), 95.8% calc(var(--fr-edge) * 0.869), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 4.2% calc(var(--fr-edge) * 0.869), 8.3% calc(var(--fr-edge) * 0.741), 12.5% calc(var(--fr-edge) * 0.617), 16.7% calc(var(--fr-edge) * 0.500), 20.8% calc(var(--fr-edge) * 0.391), 25.0% calc(var(--fr-edge) * 0.293), 29.2% calc(var(--fr-edge) * 0.207), 33.3% calc(var(--fr-edge) * 0.134), 37.5% calc(var(--fr-edge) * 0.076), 41.7% calc(var(--fr-edge) * 0.034), 45.8% calc(var(--fr-edge) * 0.009), 50.0% calc(var(--fr-edge) * 0.000), 54.2% calc(var(--fr-edge) * 0.009), 58.3% calc(var(--fr-edge) * 0.034), 62.5% calc(var(--fr-edge) * 0.076), 66.7% calc(var(--fr-edge) * 0.134), 70.8% calc(var(--fr-edge) * 0.207), 75.0% calc(var(--fr-edge) * 0.293), 79.2% calc(var(--fr-edge) * 0.391), 83.3% calc(var(--fr-edge) * 0.500), 87.5% calc(var(--fr-edge) * 0.617), 91.7% calc(var(--fr-edge) * 0.741), 95.8% calc(var(--fr-edge) * 0.869), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
}

/* END — SECTION SHAPES */

/* =========================================================
   HERO — overlay always covers the text (tablet + mobile)
========================================================= */

/* 600–1199: one even overlay over the whole picture, no edge line */
@media screen and (min-width: 600px) and (max-width: 1199px) {
    body .frayora-home-hero.frayora-home-hero--shaped .frayora-home-hero__overlay::before {
        content: "" !important; display: block !important;
        position: absolute !important; inset: 0 !important;
        clip-path: none !important; -webkit-clip-path: none !important;
        background: linear-gradient(180deg, rgba(20,34,24,.56) 0%, rgba(20,34,24,.44) 50%, rgba(20,34,24,.52) 100%) !important;
    }
    body .frayora-home-hero.frayora-home-hero--shaped .frayora-home-hero__overlay::after {
        content: none !important; display: none !important;
    }
}

/* mobile: same full overlay */
@media screen and (max-width: 599px) {
    body .frayora-home-hero.frayora-home-hero--shaped .frayora-home-hero__overlay::before {
        content: "" !important; display: block !important;
        position: absolute !important; inset: 0 !important;
        clip-path: none !important; -webkit-clip-path: none !important;
        background: linear-gradient(180deg, rgba(20,34,24,.62) 0%, rgba(20,34,24,.50) 50%, rgba(20,34,24,.58) 100%) !important;
    }
    body .frayora-home-hero.frayora-home-hero--shaped .frayora-home-hero__overlay::after {
        content: none !important; display: none !important;
    }
}

/* =========================================================
   CENTERED EYEBROWS — marker on both sides when text is centered
========================================================= */
@media screen and (max-width: 1180px) {
    body .home-approach__eyebrow { justify-content: center !important; }
    body .home-approach__eyebrow::after {
        content: ""; flex: none; width: 30px; height: 10px; background: #D9B77E;
        clip-path: polygon(0 0, 70% 0, 100% 100%, 30% 100%);
        -webkit-clip-path: polygon(0 0, 70% 0, 100% 100%, 30% 100%);
    }
}
@media screen and (max-width: 1100px) {
    body .about-founder__eyebrow,
    body .about-values-mission__eyebrow { justify-content: center !important; }
    body .about-founder__eyebrow::after,
    body .about-values-mission__eyebrow::after {
        content: ""; flex: none; width: 30px; height: 10px; background: #D66A43;
        clip-path: polygon(0 0, 70% 0, 100% 100%, 30% 100%);
        -webkit-clip-path: polygon(0 0, 70% 0, 100% 100%, 30% 100%);
    }
    body .about-values-mission__eyebrow::after { background: #D9B77E; }
}
@media screen and (max-width: 599px) {
    body .home-approach__eyebrow::after,
    body .about-founder__eyebrow::after,
    body .about-values-mission__eyebrow::after { width: 24px; height: 8px; }
}


/* =========================================================
   HERO — brand edge, glass band, light details, layered wave
   (decoration only; photo, words and buttons untouched)
========================================================= */

/* all sizes: layered bottom curve (a sand + sage strip that follows
   the exact curve of your cream wave) */
body .frayora-home-hero .frayora-home-hero__bottom-wave {
    filter:
        drop-shadow(0 -7px 0 rgba(217,183,126,.50))
        drop-shadow(0 -7px 0 rgba(135,148,123,.38));
}

/* desktop only (the angled overlay exists here): brand edge + glass band */
@media screen and (min-width: 1200px) {
    body .frayora-home-hero.frayora-home-hero--shaped::before,
    body .frayora-home-hero.frayora-home-hero--shaped::after {
        content: "" !important; display: block !important;
        position: absolute; inset: 0; pointer-events: none; z-index: 1;
    }
    /* glass band parallel to the overlay edge */
    body .frayora-home-hero.frayora-home-hero--shaped::before {
        clip-path: polygon(calc(56% + 3px) 0, calc(56% + 7%) 0, calc(80% + 7%) 100%, calc(80% + 3px) 100%);
        -webkit-clip-path: polygon(calc(56% + 3px) 0, calc(56% + 7%) 0, calc(80% + 7%) 100%, calc(80% + 3px) 100%);
        background: linear-gradient(90deg, rgba(247,240,230,.26) 0%, rgba(217,183,126,.10) 55%, rgba(217,183,126,0) 100%);
        -webkit-backdrop-filter: blur(3px) saturate(1.1);
        backdrop-filter: blur(3px) saturate(1.1);
    }
    /* terracotta -> sand edge line on the angle */
    body .frayora-home-hero.frayora-home-hero--shaped::after {
        clip-path: polygon(56% 0, calc(56% + 3px) 0, calc(80% + 3px) 100%, 80% 100%);
        -webkit-clip-path: polygon(56% 0, calc(56% + 3px) 0, calc(80% + 3px) 100%, 80% 100%);
        background: linear-gradient(180deg, #D66A43 0%, #D9B77E 60%, rgba(217,183,126,.55) 100%);
        opacity: .9;
    }
}

/* tablet */
@media screen and (max-width: 899px) {
}

/* mobile */
@media screen and (max-width: 599px) {
    body .frayora-home-hero .frayora-home-hero__bottom-wave {
        filter:
            drop-shadow(0 -5px 0 rgba(217,183,126,.50))
            drop-shadow(0 -5px 0 rgba(135,148,123,.38));
    }
}

/* END — HERO */

/* END — HOMEPAGE ELEVATION */

/* =========================================================
   FRAYORA — HEADER (transparent on the homepage, solid elsewhere)
   PASTE AT THE VERY BOTTOM OF main.css
   Needs the small script in header-scroll.js.txt (added to header.php).

   - Every page: sticky header, cream background at 90%, soft blur,
     fine terracotta -> sand line underneath.
   - Homepage only, at the very top: header is transparent over the
     hero photo with cream text + a light logo. After a short scroll it
     fades into the solid 90% header.
   - Without JavaScript the header simply stays solid (always readable).
   Tablet + mobile are included.
========================================================= */

:root { --fr-header-h: 78px; }

html { scroll-padding-top: calc(var(--fr-header-h) + 14px); }

/* ---------- 01 · SOLID HEADER (all pages, and the homepage once scrolled) ---------- */

html body .site-header {
    position: sticky !important;
    top: var(--wp-admin--admin-bar--height, 0px) !important;
    z-index: 1000;
    background: rgba(250, 247, 242, .90) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
    backdrop-filter: blur(16px) saturate(1.2) !important;
    border-bottom: 0 !important;
    box-shadow: 0 10px 30px -22px rgba(31, 33, 29, .45) !important;
    transition:
        background-color .35s ease,
        box-shadow .35s ease,
        -webkit-backdrop-filter .35s ease,
        backdrop-filter .35s ease;
}

/* remove the old white sheen layers, replace with one fine brand line */
html body .site-header::before { display: none !important; }
html body .site-header::after {
    content: "" !important;
    position: absolute !important;
    inset: auto 0 0 0 !important;
    height: 2px !important;
    width: auto !important;
    background: linear-gradient(90deg, rgba(214,106,67,0) 0%, #D66A43 22%, #D9B77E 78%, rgba(217,183,126,0) 100%) !important;
    opacity: .55 !important;
    pointer-events: none;
    transition: opacity .35s ease;
}

/* ---------- 02 · HOMEPAGE, AT THE TOP: TRANSPARENT ---------- */

/* hero slides up under the header so the photo reaches the very top;
   its content stays exactly where it was */
html.fr-hdr-js body.home .frayora-home-hero {
    margin-top: calc(var(--fr-header-h) * -1) !important;
    padding-top: var(--fr-header-h) !important;
}

html.fr-hdr-js body.home .site-header:not(.is-scrolled) {
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}
html.fr-hdr-js body.home .site-header:not(.is-scrolled)::after { opacity: 0 !important; }

/* soft dark veil behind the transparent header so cream text stays readable
   on the bright part of the photo */
html.fr-hdr-js body.home .site-header:not(.is-scrolled)::before {
    display: block !important;
    content: "" !important;
    position: absolute !important;
    inset: 0 0 -46px 0 !important;
    z-index: -1 !important;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(18, 28, 20, .58) 0%, rgba(18, 28, 20, .26) 55%, rgba(18, 28, 20, 0) 100%) !important;
    opacity: 1 !important;
}

/* logo: light version while transparent */
html body .site-logo img { transition: filter .35s ease, transform .25s ease; }
html.fr-hdr-js body.home .site-header:not(.is-scrolled) .site-logo img {
    filter: brightness(0) invert(1) drop-shadow(0 1px 6px rgba(0,0,0,.25));
}

/* nav text: cream while transparent */
html.fr-hdr-js body.home .site-header:not(.is-scrolled) .site-nav > a,
html.fr-hdr-js body.home .site-header:not(.is-scrolled) .nav-dropdown__trigger {
    color: #FAF7F2 !important;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .28);
}
html.fr-hdr-js body.home .site-header:not(.is-scrolled) .site-nav > a:hover,
html.fr-hdr-js body.home .site-header:not(.is-scrolled) .site-nav > a:focus-visible,
html.fr-hdr-js body.home .site-header:not(.is-scrolled) .nav-dropdown__trigger:hover,
html.fr-hdr-js body.home .site-header:not(.is-scrolled) .nav-dropdown__trigger:focus-visible,
html.fr-hdr-js body.home .site-header:not(.is-scrolled) .site-nav > a.is-current,
html.fr-hdr-js body.home .site-header:not(.is-scrolled) .nav-dropdown__trigger.is-current {
    color: #F0CF9C !important;
}

/* CTA: frosted glass while transparent */
html.fr-hdr-js body.home .site-header:not(.is-scrolled) .header-cta {
    background: rgba(250, 247, 242, .16) !important;
    color: #FAF7F2 !important;
    border: 1px solid rgba(250, 247, 242, .55) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    backdrop-filter: blur(10px) saturate(1.2);
}
html.fr-hdr-js body.home .site-header:not(.is-scrolled) .header-cta:hover,
html.fr-hdr-js body.home .site-header:not(.is-scrolled) .header-cta:focus-visible {
    background: #C96743 !important;
    border-color: #C96743 !important;
}

/* tablet + mobile buttons: glass hamburger while transparent */
html.fr-hdr-js body.home .site-header:not(.is-scrolled) .menu-toggle {
    background: rgba(250, 247, 242, .16) !important;
    color: #FAF7F2 !important;
    border: 1px solid rgba(250, 247, 242, .55) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    backdrop-filter: blur(10px) saturate(1.2);
}

html.fr-hdr-js body.home .site-header:not(.is-scrolled) .fr-header-contact-toggle {
    background: rgba(250, 247, 242, .16) !important;
    color: #FAF7F2 !important;
    border: 1px solid rgba(250, 247, 242, .55) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    backdrop-filter: blur(10px) saturate(1.2);
}
html body .site-header .fr-header-contact-toggle {
    transition: color .3s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}

/* ---------- 03 · REFINEMENTS (all pages) ---------- */

/* a slimmer, two-tone active/hover underline instead of the thick bar */
@media screen and (min-width: 1101px) {
    html body .site-header .site-nav > a::after,
    html body .site-header .nav-dropdown__trigger::after {
        height: 3px !important;
        border-radius: 3px 3px 0 0 !important;
        background: linear-gradient(90deg, #D66A43, #D9B77E) !important;
    }
}

/* smoother colour changes */
html body .site-header .site-nav > a,
html body .site-header .nav-dropdown__trigger,
html body .site-header .header-cta,
html body .site-header .menu-toggle {
    transition: color .3s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}

@media (prefers-reduced-motion: reduce) {
    html body .site-header,
    html body .site-header::after,
    html body .site-logo img { transition: none !important; }
}

/* END — HEADER */

/* ===== Drawer / contact panel open: remove stray layer behind it (tablet + mobile) ===== */
@media (max-width:1100px){
  html.fr-hdr-js body.home:has(.fr-mobile-menu-overlay:not([hidden])) .site-header:not(.fr-x)::before,
  html.fr-hdr-js body.home:has(.fr-header-contact-overlay:not([hidden])) .site-header:not(.fr-x)::before,
  html body:has(.fr-mobile-menu-overlay:not([hidden])) .site-header::before,
  html body:has(.fr-header-contact-overlay:not([hidden])) .site-header::before{
    display:none !important; content:none !important;
  }
  html body:has(.fr-mobile-menu-overlay:not([hidden])) .site-header,
  html body:has(.fr-header-contact-overlay:not([hidden])) .site-header{
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  }
  /* while a drawer/panel is open, the page behind it is just a dark scrim */
  html body:has(.fr-mobile-menu-overlay:not([hidden])) .frayora-home-hero__inner,
  html body:has(.fr-header-contact-overlay:not([hidden])) .frayora-home-hero__inner{
    visibility:hidden !important;
  }
  html body .fr-mobile-menu-shade{
    background:rgba(23,33,26,.84) !important;
  }
  html body .fr-mobile-menu-overlay:not([hidden]),
  html body .fr-header-contact-overlay:not([hidden]){
    isolation:isolate;
  }
  html body .fr-mobile-menu-shade{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
}

/* =========================================================
   FRAYORA — HEADER (transparent on the homepage, solid elsewhere)
   PASTE AT THE VERY BOTTOM OF main.css
   Needs the small script in header-scroll.js.txt (added to header.php).

   - Every page: sticky header, cream background at 90%, soft blur,
     fine terracotta -> sand line underneath.
   - Homepage only, at the very top: header is transparent over the
     hero photo with cream text + a light logo. After a short scroll it
     fades into the solid 90% header.
   - Without JavaScript the header simply stays solid (always readable).
   Tablet + mobile are included.
========================================================= */

:root { --fr-header-h: 78px; }

html { scroll-padding-top: calc(var(--fr-header-h) + 14px); }

/* ---------- 01 · SOLID HEADER (all pages, and the homepage once scrolled) ---------- */

html body .site-header {
    position: sticky !important;
    top: var(--wp-admin--admin-bar--height, 0px) !important;
    z-index: 1000;
    background: rgba(250, 247, 242, .90) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
    backdrop-filter: blur(16px) saturate(1.2) !important;
    border-bottom: 0 !important;
    box-shadow: 0 10px 30px -22px rgba(31, 33, 29, .45) !important;
    transition:
        background-color .35s ease,
        box-shadow .35s ease,
        -webkit-backdrop-filter .35s ease,
        backdrop-filter .35s ease;
}

/* remove the old white sheen layers, replace with one fine brand line */
html body .site-header::before { display: none !important; }
html body .site-header::after {
    content: "" !important;
    position: absolute !important;
    inset: auto 0 0 0 !important;
    height: 2px !important;
    width: auto !important;
    background: linear-gradient(90deg, rgba(214,106,67,0) 0%, #D66A43 22%, #D9B77E 78%, rgba(217,183,126,0) 100%) !important;
    opacity: .55 !important;
    pointer-events: none;
    transition: opacity .35s ease;
}

/* ---------- 02 · HOMEPAGE, AT THE TOP: TRANSPARENT ---------- */

/* hero slides up under the header so the photo reaches the very top;
   its content stays exactly where it was */
html.fr-hdr-js body.home .frayora-home-hero {
    margin-top: calc(var(--fr-header-h) * -1) !important;
    padding-top: var(--fr-header-h) !important;
}

html.fr-hdr-js body.home .site-header:not(.is-scrolled) {
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}
html.fr-hdr-js body.home .site-header:not(.is-scrolled)::after { opacity: 0 !important; }

/* soft dark veil behind the transparent header so cream text stays readable
   on the bright part of the photo */
html.fr-hdr-js body.home .site-header:not(.is-scrolled)::before {
    display: block !important;
    content: "" !important;
    position: absolute !important;
    inset: 0 0 -46px 0 !important;
    z-index: -1 !important;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(18, 28, 20, .58) 0%, rgba(18, 28, 20, .26) 55%, rgba(18, 28, 20, 0) 100%) !important;
    opacity: 1 !important;
}

/* logo: light version while transparent */
html body .site-logo img { transition: filter .35s ease, transform .25s ease; }
html.fr-hdr-js body.home .site-header:not(.is-scrolled) .site-logo img {
    filter: brightness(0) invert(1) drop-shadow(0 1px 6px rgba(0,0,0,.25));
}

/* nav text: cream while transparent */
html.fr-hdr-js body.home .site-header:not(.is-scrolled) .site-nav > a,
html.fr-hdr-js body.home .site-header:not(.is-scrolled) .nav-dropdown__trigger {
    color: #FAF7F2 !important;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .28);
}
html.fr-hdr-js body.home .site-header:not(.is-scrolled) .site-nav > a:hover,
html.fr-hdr-js body.home .site-header:not(.is-scrolled) .site-nav > a:focus-visible,
html.fr-hdr-js body.home .site-header:not(.is-scrolled) .nav-dropdown__trigger:hover,
html.fr-hdr-js body.home .site-header:not(.is-scrolled) .nav-dropdown__trigger:focus-visible,
html.fr-hdr-js body.home .site-header:not(.is-scrolled) .site-nav > a.is-current,
html.fr-hdr-js body.home .site-header:not(.is-scrolled) .nav-dropdown__trigger.is-current {
    color: #F0CF9C !important;
}

/* CTA: frosted glass while transparent */
html.fr-hdr-js body.home .site-header:not(.is-scrolled) .header-cta {
    background: rgba(250, 247, 242, .16) !important;
    color: #FAF7F2 !important;
    border: 1px solid rgba(250, 247, 242, .55) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    backdrop-filter: blur(10px) saturate(1.2);
}
html.fr-hdr-js body.home .site-header:not(.is-scrolled) .header-cta:hover,
html.fr-hdr-js body.home .site-header:not(.is-scrolled) .header-cta:focus-visible {
    background: #C96743 !important;
    border-color: #C96743 !important;
}

/* tablet + mobile buttons: glass hamburger while transparent */
html.fr-hdr-js body.home .site-header:not(.is-scrolled) .menu-toggle {
    background: rgba(250, 247, 242, .16) !important;
    color: #FAF7F2 !important;
    border: 1px solid rgba(250, 247, 242, .55) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    backdrop-filter: blur(10px) saturate(1.2);
}

html.fr-hdr-js body.home .site-header:not(.is-scrolled) .fr-header-contact-toggle {
    background: rgba(250, 247, 242, .16) !important;
    color: #FAF7F2 !important;
    border: 1px solid rgba(250, 247, 242, .55) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    backdrop-filter: blur(10px) saturate(1.2);
}
html body .site-header .fr-header-contact-toggle {
    transition: color .3s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}

/* ---------- 03 · REFINEMENTS (all pages) ---------- */

/* a slimmer, two-tone active/hover underline instead of the thick bar */
@media screen and (min-width: 1101px) {
    html body .site-header .site-nav > a::after,
    html body .site-header .nav-dropdown__trigger::after {
        height: 3px !important;
        border-radius: 3px 3px 0 0 !important;
        background: linear-gradient(90deg, #D66A43, #D9B77E) !important;
    }
}

/* smoother colour changes */
html body .site-header .site-nav > a,
html body .site-header .nav-dropdown__trigger,
html body .site-header .header-cta,
html body .site-header .menu-toggle {
    transition: color .3s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}

@media (prefers-reduced-motion: reduce) {
    html body .site-header,
    html body .site-header::after,
    html body .site-logo img { transition: none !important; }
}

/* END — HEADER */

/* ===== Drawer / contact panel open: remove stray layer behind it (tablet + mobile) ===== */
@media (max-width:1100px){
  html.fr-hdr-js body.home:has(.fr-mobile-menu-overlay:not([hidden])) .site-header:not(.fr-x)::before,
  html.fr-hdr-js body.home:has(.fr-header-contact-overlay:not([hidden])) .site-header:not(.fr-x)::before,
  html body:has(.fr-mobile-menu-overlay:not([hidden])) .site-header::before,
  html body:has(.fr-header-contact-overlay:not([hidden])) .site-header::before{
    display:none !important; content:none !important;
  }
  html body:has(.fr-mobile-menu-overlay:not([hidden])) .site-header,
  html body:has(.fr-header-contact-overlay:not([hidden])) .site-header{
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  }
  /* while a drawer/panel is open, the page behind it is just a dark scrim */
  html body:has(.fr-mobile-menu-overlay:not([hidden])) .frayora-home-hero__inner,
  html body:has(.fr-header-contact-overlay:not([hidden])) .frayora-home-hero__inner{
    visibility:hidden !important;
  }
  html body .fr-mobile-menu-shade{
    background:rgba(23,33,26,.84) !important;
  }
  html body .fr-mobile-menu-overlay:not([hidden]),
  html body .fr-header-contact-overlay:not([hidden]){
    isolation:isolate;
  }
  html body .fr-mobile-menu-shade{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
  /* the original header nav must never open as a panel on tablet/mobile (the drawer has its own copy) */
  html body .site-header .site-nav,
  html body .site-header.menu-open .site-nav,
  html body .site-header .site-nav .nav-dropdown__menu{
    display:none !important; visibility:hidden !important;
  }
}

/* =========================================================
   FRAYORA — BUSINESS-IN-A-BOX ELEVATION v1 (decoration only)
   PASTE AT THE VERY BOTTOM OF main.css

   - No words, photos, typography or buttons are changed.
   - Sections get the same shaped edges as the homepage
     (S-curves, slopes and arcs) with a fine sage-to-sand
     edge line, on desktop, tablet and mobile.
   - Cards get the softer "leaf" corner used across the site.
========================================================= */

:root { --fr-edge: 64px; }
@media screen and (max-width: 1100px) { :root { --fr-edge: 52px; } }
@media screen and (max-width: 899px)  { :root { --fr-edge: 44px; } }
@media screen and (max-width: 599px)  { :root { --fr-edge: 34px; } }

/* ---------- 01 · SECTION SHAPES ---------- */

/* pull every section up under the one above it, then give the
   content the same amount back so the layout does not move */
html body .biab-foundation__inner,
html body .biab-transformation__inner,
html body .biab-journey__inner,
html body .biab-stages__inner,
html body .biab-packages__inner,
html body .biab-proposal__inner,
html body .biab-final-cta__inner {
    margin-top: var(--fr-edge) !important;
}

/* the hero never sits under the next section's shape */
html body .biab-hero__inner { z-index: 2; }

/* colours that let the shapes read (cream family only) */
html body .biab-journey   { background-color: #FAF7F2 !important; }
html body .biab-stages    { background-color: #F5EDE4 !important; }
html body .biab-proposal  { background-color: #FAF7F2 !important; }

/* stronger edge line where a light shape meets a dark section */
html body .biab-transformation,
html body .biab-journey { --biab-line: .85; }

html body .biab-foundation{
    margin-top: calc(var(--fr-edge) * -1) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.989), 12.5% calc(var(--fr-edge) * 0.957), 18.8% calc(var(--fr-edge) * 0.908), 25.0% calc(var(--fr-edge) * 0.844), 31.2% calc(var(--fr-edge) * 0.768), 37.5% calc(var(--fr-edge) * 0.684), 43.8% calc(var(--fr-edge) * 0.593), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.407), 62.5% calc(var(--fr-edge) * 0.316), 68.8% calc(var(--fr-edge) * 0.232), 75.0% calc(var(--fr-edge) * 0.156), 81.2% calc(var(--fr-edge) * 0.092), 87.5% calc(var(--fr-edge) * 0.043), 93.8% calc(var(--fr-edge) * 0.011), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.989), 12.5% calc(var(--fr-edge) * 0.957), 18.8% calc(var(--fr-edge) * 0.908), 25.0% calc(var(--fr-edge) * 0.844), 31.2% calc(var(--fr-edge) * 0.768), 37.5% calc(var(--fr-edge) * 0.684), 43.8% calc(var(--fr-edge) * 0.593), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.407), 62.5% calc(var(--fr-edge) * 0.316), 68.8% calc(var(--fr-edge) * 0.232), 75.0% calc(var(--fr-edge) * 0.156), 81.2% calc(var(--fr-edge) * 0.092), 87.5% calc(var(--fr-edge) * 0.043), 93.8% calc(var(--fr-edge) * 0.011), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
}
html body .biab-foundation::before{
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 3;
    inset: 0 0 auto 0 !important;
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: var(--biab-line, .55);
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.989), 12.5% calc(var(--fr-edge) * 0.957), 18.8% calc(var(--fr-edge) * 0.908), 25.0% calc(var(--fr-edge) * 0.844), 31.2% calc(var(--fr-edge) * 0.768), 37.5% calc(var(--fr-edge) * 0.684), 43.8% calc(var(--fr-edge) * 0.593), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.407), 62.5% calc(var(--fr-edge) * 0.316), 68.8% calc(var(--fr-edge) * 0.232), 75.0% calc(var(--fr-edge) * 0.156), 81.2% calc(var(--fr-edge) * 0.092), 87.5% calc(var(--fr-edge) * 0.043), 93.8% calc(var(--fr-edge) * 0.011), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.011 + 3px), 87.5% calc(var(--fr-edge) * 0.043 + 3px), 81.2% calc(var(--fr-edge) * 0.092 + 3px), 75.0% calc(var(--fr-edge) * 0.156 + 3px), 68.8% calc(var(--fr-edge) * 0.232 + 3px), 62.5% calc(var(--fr-edge) * 0.316 + 3px), 56.2% calc(var(--fr-edge) * 0.407 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.593 + 3px), 37.5% calc(var(--fr-edge) * 0.684 + 3px), 31.2% calc(var(--fr-edge) * 0.768 + 3px), 25.0% calc(var(--fr-edge) * 0.844 + 3px), 18.8% calc(var(--fr-edge) * 0.908 + 3px), 12.5% calc(var(--fr-edge) * 0.957 + 3px), 6.2% calc(var(--fr-edge) * 0.989 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.989), 12.5% calc(var(--fr-edge) * 0.957), 18.8% calc(var(--fr-edge) * 0.908), 25.0% calc(var(--fr-edge) * 0.844), 31.2% calc(var(--fr-edge) * 0.768), 37.5% calc(var(--fr-edge) * 0.684), 43.8% calc(var(--fr-edge) * 0.593), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.407), 62.5% calc(var(--fr-edge) * 0.316), 68.8% calc(var(--fr-edge) * 0.232), 75.0% calc(var(--fr-edge) * 0.156), 81.2% calc(var(--fr-edge) * 0.092), 87.5% calc(var(--fr-edge) * 0.043), 93.8% calc(var(--fr-edge) * 0.011), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.011 + 3px), 87.5% calc(var(--fr-edge) * 0.043 + 3px), 81.2% calc(var(--fr-edge) * 0.092 + 3px), 75.0% calc(var(--fr-edge) * 0.156 + 3px), 68.8% calc(var(--fr-edge) * 0.232 + 3px), 62.5% calc(var(--fr-edge) * 0.316 + 3px), 56.2% calc(var(--fr-edge) * 0.407 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.593 + 3px), 37.5% calc(var(--fr-edge) * 0.684 + 3px), 31.2% calc(var(--fr-edge) * 0.768 + 3px), 25.0% calc(var(--fr-edge) * 0.844 + 3px), 18.8% calc(var(--fr-edge) * 0.908 + 3px), 12.5% calc(var(--fr-edge) * 0.957 + 3px), 6.2% calc(var(--fr-edge) * 0.989 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
}

html body .biab-transformation{
    margin-top: calc(var(--fr-edge) * -1) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.062), 12.5% calc(var(--fr-edge) * 0.125), 18.8% calc(var(--fr-edge) * 0.188), 25.0% calc(var(--fr-edge) * 0.250), 31.2% calc(var(--fr-edge) * 0.312), 37.5% calc(var(--fr-edge) * 0.375), 43.8% calc(var(--fr-edge) * 0.438), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.562), 62.5% calc(var(--fr-edge) * 0.625), 68.8% calc(var(--fr-edge) * 0.688), 75.0% calc(var(--fr-edge) * 0.750), 81.2% calc(var(--fr-edge) * 0.812), 87.5% calc(var(--fr-edge) * 0.875), 93.8% calc(var(--fr-edge) * 0.938), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.062), 12.5% calc(var(--fr-edge) * 0.125), 18.8% calc(var(--fr-edge) * 0.188), 25.0% calc(var(--fr-edge) * 0.250), 31.2% calc(var(--fr-edge) * 0.312), 37.5% calc(var(--fr-edge) * 0.375), 43.8% calc(var(--fr-edge) * 0.438), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.562), 62.5% calc(var(--fr-edge) * 0.625), 68.8% calc(var(--fr-edge) * 0.688), 75.0% calc(var(--fr-edge) * 0.750), 81.2% calc(var(--fr-edge) * 0.812), 87.5% calc(var(--fr-edge) * 0.875), 93.8% calc(var(--fr-edge) * 0.938), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
}
html body .biab-transformation::before{
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 3;
    inset: 0 0 auto 0 !important;
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: var(--biab-line, .55);
    clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.062), 12.5% calc(var(--fr-edge) * 0.125), 18.8% calc(var(--fr-edge) * 0.188), 25.0% calc(var(--fr-edge) * 0.250), 31.2% calc(var(--fr-edge) * 0.312), 37.5% calc(var(--fr-edge) * 0.375), 43.8% calc(var(--fr-edge) * 0.438), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.562), 62.5% calc(var(--fr-edge) * 0.625), 68.8% calc(var(--fr-edge) * 0.688), 75.0% calc(var(--fr-edge) * 0.750), 81.2% calc(var(--fr-edge) * 0.812), 87.5% calc(var(--fr-edge) * 0.875), 93.8% calc(var(--fr-edge) * 0.938), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 93.8% calc(var(--fr-edge) * 0.938 + 3px), 87.5% calc(var(--fr-edge) * 0.875 + 3px), 81.2% calc(var(--fr-edge) * 0.812 + 3px), 75.0% calc(var(--fr-edge) * 0.750 + 3px), 68.8% calc(var(--fr-edge) * 0.688 + 3px), 62.5% calc(var(--fr-edge) * 0.625 + 3px), 56.2% calc(var(--fr-edge) * 0.562 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.438 + 3px), 37.5% calc(var(--fr-edge) * 0.375 + 3px), 31.2% calc(var(--fr-edge) * 0.312 + 3px), 25.0% calc(var(--fr-edge) * 0.250 + 3px), 18.8% calc(var(--fr-edge) * 0.188 + 3px), 12.5% calc(var(--fr-edge) * 0.125 + 3px), 6.2% calc(var(--fr-edge) * 0.062 + 3px), 0.0% calc(var(--fr-edge) * 0.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.062), 12.5% calc(var(--fr-edge) * 0.125), 18.8% calc(var(--fr-edge) * 0.188), 25.0% calc(var(--fr-edge) * 0.250), 31.2% calc(var(--fr-edge) * 0.312), 37.5% calc(var(--fr-edge) * 0.375), 43.8% calc(var(--fr-edge) * 0.438), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.562), 62.5% calc(var(--fr-edge) * 0.625), 68.8% calc(var(--fr-edge) * 0.688), 75.0% calc(var(--fr-edge) * 0.750), 81.2% calc(var(--fr-edge) * 0.812), 87.5% calc(var(--fr-edge) * 0.875), 93.8% calc(var(--fr-edge) * 0.938), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 93.8% calc(var(--fr-edge) * 0.938 + 3px), 87.5% calc(var(--fr-edge) * 0.875 + 3px), 81.2% calc(var(--fr-edge) * 0.812 + 3px), 75.0% calc(var(--fr-edge) * 0.750 + 3px), 68.8% calc(var(--fr-edge) * 0.688 + 3px), 62.5% calc(var(--fr-edge) * 0.625 + 3px), 56.2% calc(var(--fr-edge) * 0.562 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.438 + 3px), 37.5% calc(var(--fr-edge) * 0.375 + 3px), 31.2% calc(var(--fr-edge) * 0.312 + 3px), 25.0% calc(var(--fr-edge) * 0.250 + 3px), 18.8% calc(var(--fr-edge) * 0.188 + 3px), 12.5% calc(var(--fr-edge) * 0.125 + 3px), 6.2% calc(var(--fr-edge) * 0.062 + 3px), 0.0% calc(var(--fr-edge) * 0.000 + 3px));
}

html body .biab-journey{
    margin-top: calc(var(--fr-edge) * -1) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
}
html body .biab-journey::before{
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 3;
    inset: 0 0 auto 0 !important;
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: var(--biab-line, .55);
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 93.8% calc(var(--fr-edge) * 0.805 + 3px), 87.5% calc(var(--fr-edge) * 0.617 + 3px), 81.2% calc(var(--fr-edge) * 0.444 + 3px), 75.0% calc(var(--fr-edge) * 0.293 + 3px), 68.8% calc(var(--fr-edge) * 0.169 + 3px), 62.5% calc(var(--fr-edge) * 0.076 + 3px), 56.2% calc(var(--fr-edge) * 0.019 + 3px), 50.0% calc(var(--fr-edge) * 0.000 + 3px), 43.8% calc(var(--fr-edge) * 0.019 + 3px), 37.5% calc(var(--fr-edge) * 0.076 + 3px), 31.2% calc(var(--fr-edge) * 0.169 + 3px), 25.0% calc(var(--fr-edge) * 0.293 + 3px), 18.8% calc(var(--fr-edge) * 0.444 + 3px), 12.5% calc(var(--fr-edge) * 0.617 + 3px), 6.2% calc(var(--fr-edge) * 0.805 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 93.8% calc(var(--fr-edge) * 0.805 + 3px), 87.5% calc(var(--fr-edge) * 0.617 + 3px), 81.2% calc(var(--fr-edge) * 0.444 + 3px), 75.0% calc(var(--fr-edge) * 0.293 + 3px), 68.8% calc(var(--fr-edge) * 0.169 + 3px), 62.5% calc(var(--fr-edge) * 0.076 + 3px), 56.2% calc(var(--fr-edge) * 0.019 + 3px), 50.0% calc(var(--fr-edge) * 0.000 + 3px), 43.8% calc(var(--fr-edge) * 0.019 + 3px), 37.5% calc(var(--fr-edge) * 0.076 + 3px), 31.2% calc(var(--fr-edge) * 0.169 + 3px), 25.0% calc(var(--fr-edge) * 0.293 + 3px), 18.8% calc(var(--fr-edge) * 0.444 + 3px), 12.5% calc(var(--fr-edge) * 0.617 + 3px), 6.2% calc(var(--fr-edge) * 0.805 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
}

html body .biab-stages{
    margin-top: calc(var(--fr-edge) * -1) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.011), 12.5% calc(var(--fr-edge) * 0.043), 18.8% calc(var(--fr-edge) * 0.092), 25.0% calc(var(--fr-edge) * 0.156), 31.2% calc(var(--fr-edge) * 0.232), 37.5% calc(var(--fr-edge) * 0.316), 43.8% calc(var(--fr-edge) * 0.407), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.593), 62.5% calc(var(--fr-edge) * 0.684), 68.8% calc(var(--fr-edge) * 0.768), 75.0% calc(var(--fr-edge) * 0.844), 81.2% calc(var(--fr-edge) * 0.908), 87.5% calc(var(--fr-edge) * 0.957), 93.8% calc(var(--fr-edge) * 0.989), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.011), 12.5% calc(var(--fr-edge) * 0.043), 18.8% calc(var(--fr-edge) * 0.092), 25.0% calc(var(--fr-edge) * 0.156), 31.2% calc(var(--fr-edge) * 0.232), 37.5% calc(var(--fr-edge) * 0.316), 43.8% calc(var(--fr-edge) * 0.407), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.593), 62.5% calc(var(--fr-edge) * 0.684), 68.8% calc(var(--fr-edge) * 0.768), 75.0% calc(var(--fr-edge) * 0.844), 81.2% calc(var(--fr-edge) * 0.908), 87.5% calc(var(--fr-edge) * 0.957), 93.8% calc(var(--fr-edge) * 0.989), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
}
html body .biab-stages::before{
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 3;
    inset: 0 0 auto 0 !important;
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: var(--biab-line, .55);
    clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.011), 12.5% calc(var(--fr-edge) * 0.043), 18.8% calc(var(--fr-edge) * 0.092), 25.0% calc(var(--fr-edge) * 0.156), 31.2% calc(var(--fr-edge) * 0.232), 37.5% calc(var(--fr-edge) * 0.316), 43.8% calc(var(--fr-edge) * 0.407), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.593), 62.5% calc(var(--fr-edge) * 0.684), 68.8% calc(var(--fr-edge) * 0.768), 75.0% calc(var(--fr-edge) * 0.844), 81.2% calc(var(--fr-edge) * 0.908), 87.5% calc(var(--fr-edge) * 0.957), 93.8% calc(var(--fr-edge) * 0.989), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 93.8% calc(var(--fr-edge) * 0.989 + 3px), 87.5% calc(var(--fr-edge) * 0.957 + 3px), 81.2% calc(var(--fr-edge) * 0.908 + 3px), 75.0% calc(var(--fr-edge) * 0.844 + 3px), 68.8% calc(var(--fr-edge) * 0.768 + 3px), 62.5% calc(var(--fr-edge) * 0.684 + 3px), 56.2% calc(var(--fr-edge) * 0.593 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.407 + 3px), 37.5% calc(var(--fr-edge) * 0.316 + 3px), 31.2% calc(var(--fr-edge) * 0.232 + 3px), 25.0% calc(var(--fr-edge) * 0.156 + 3px), 18.8% calc(var(--fr-edge) * 0.092 + 3px), 12.5% calc(var(--fr-edge) * 0.043 + 3px), 6.2% calc(var(--fr-edge) * 0.011 + 3px), 0.0% calc(var(--fr-edge) * 0.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.011), 12.5% calc(var(--fr-edge) * 0.043), 18.8% calc(var(--fr-edge) * 0.092), 25.0% calc(var(--fr-edge) * 0.156), 31.2% calc(var(--fr-edge) * 0.232), 37.5% calc(var(--fr-edge) * 0.316), 43.8% calc(var(--fr-edge) * 0.407), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.593), 62.5% calc(var(--fr-edge) * 0.684), 68.8% calc(var(--fr-edge) * 0.768), 75.0% calc(var(--fr-edge) * 0.844), 81.2% calc(var(--fr-edge) * 0.908), 87.5% calc(var(--fr-edge) * 0.957), 93.8% calc(var(--fr-edge) * 0.989), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 93.8% calc(var(--fr-edge) * 0.989 + 3px), 87.5% calc(var(--fr-edge) * 0.957 + 3px), 81.2% calc(var(--fr-edge) * 0.908 + 3px), 75.0% calc(var(--fr-edge) * 0.844 + 3px), 68.8% calc(var(--fr-edge) * 0.768 + 3px), 62.5% calc(var(--fr-edge) * 0.684 + 3px), 56.2% calc(var(--fr-edge) * 0.593 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.407 + 3px), 37.5% calc(var(--fr-edge) * 0.316 + 3px), 31.2% calc(var(--fr-edge) * 0.232 + 3px), 25.0% calc(var(--fr-edge) * 0.156 + 3px), 18.8% calc(var(--fr-edge) * 0.092 + 3px), 12.5% calc(var(--fr-edge) * 0.043 + 3px), 6.2% calc(var(--fr-edge) * 0.011 + 3px), 0.0% calc(var(--fr-edge) * 0.000 + 3px));
}

html body .biab-packages{
    margin-top: calc(var(--fr-edge) * -1) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.938), 12.5% calc(var(--fr-edge) * 0.875), 18.8% calc(var(--fr-edge) * 0.812), 25.0% calc(var(--fr-edge) * 0.750), 31.2% calc(var(--fr-edge) * 0.688), 37.5% calc(var(--fr-edge) * 0.625), 43.8% calc(var(--fr-edge) * 0.562), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.438), 62.5% calc(var(--fr-edge) * 0.375), 68.8% calc(var(--fr-edge) * 0.312), 75.0% calc(var(--fr-edge) * 0.250), 81.2% calc(var(--fr-edge) * 0.188), 87.5% calc(var(--fr-edge) * 0.125), 93.8% calc(var(--fr-edge) * 0.062), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.938), 12.5% calc(var(--fr-edge) * 0.875), 18.8% calc(var(--fr-edge) * 0.812), 25.0% calc(var(--fr-edge) * 0.750), 31.2% calc(var(--fr-edge) * 0.688), 37.5% calc(var(--fr-edge) * 0.625), 43.8% calc(var(--fr-edge) * 0.562), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.438), 62.5% calc(var(--fr-edge) * 0.375), 68.8% calc(var(--fr-edge) * 0.312), 75.0% calc(var(--fr-edge) * 0.250), 81.2% calc(var(--fr-edge) * 0.188), 87.5% calc(var(--fr-edge) * 0.125), 93.8% calc(var(--fr-edge) * 0.062), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
}
html body .biab-packages::before{
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 3;
    inset: 0 0 auto 0 !important;
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: var(--biab-line, .55);
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.938), 12.5% calc(var(--fr-edge) * 0.875), 18.8% calc(var(--fr-edge) * 0.812), 25.0% calc(var(--fr-edge) * 0.750), 31.2% calc(var(--fr-edge) * 0.688), 37.5% calc(var(--fr-edge) * 0.625), 43.8% calc(var(--fr-edge) * 0.562), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.438), 62.5% calc(var(--fr-edge) * 0.375), 68.8% calc(var(--fr-edge) * 0.312), 75.0% calc(var(--fr-edge) * 0.250), 81.2% calc(var(--fr-edge) * 0.188), 87.5% calc(var(--fr-edge) * 0.125), 93.8% calc(var(--fr-edge) * 0.062), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.062 + 3px), 87.5% calc(var(--fr-edge) * 0.125 + 3px), 81.2% calc(var(--fr-edge) * 0.188 + 3px), 75.0% calc(var(--fr-edge) * 0.250 + 3px), 68.8% calc(var(--fr-edge) * 0.312 + 3px), 62.5% calc(var(--fr-edge) * 0.375 + 3px), 56.2% calc(var(--fr-edge) * 0.438 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.562 + 3px), 37.5% calc(var(--fr-edge) * 0.625 + 3px), 31.2% calc(var(--fr-edge) * 0.688 + 3px), 25.0% calc(var(--fr-edge) * 0.750 + 3px), 18.8% calc(var(--fr-edge) * 0.812 + 3px), 12.5% calc(var(--fr-edge) * 0.875 + 3px), 6.2% calc(var(--fr-edge) * 0.938 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.938), 12.5% calc(var(--fr-edge) * 0.875), 18.8% calc(var(--fr-edge) * 0.812), 25.0% calc(var(--fr-edge) * 0.750), 31.2% calc(var(--fr-edge) * 0.688), 37.5% calc(var(--fr-edge) * 0.625), 43.8% calc(var(--fr-edge) * 0.562), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.438), 62.5% calc(var(--fr-edge) * 0.375), 68.8% calc(var(--fr-edge) * 0.312), 75.0% calc(var(--fr-edge) * 0.250), 81.2% calc(var(--fr-edge) * 0.188), 87.5% calc(var(--fr-edge) * 0.125), 93.8% calc(var(--fr-edge) * 0.062), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.062 + 3px), 87.5% calc(var(--fr-edge) * 0.125 + 3px), 81.2% calc(var(--fr-edge) * 0.188 + 3px), 75.0% calc(var(--fr-edge) * 0.250 + 3px), 68.8% calc(var(--fr-edge) * 0.312 + 3px), 62.5% calc(var(--fr-edge) * 0.375 + 3px), 56.2% calc(var(--fr-edge) * 0.438 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.562 + 3px), 37.5% calc(var(--fr-edge) * 0.625 + 3px), 31.2% calc(var(--fr-edge) * 0.688 + 3px), 25.0% calc(var(--fr-edge) * 0.750 + 3px), 18.8% calc(var(--fr-edge) * 0.812 + 3px), 12.5% calc(var(--fr-edge) * 0.875 + 3px), 6.2% calc(var(--fr-edge) * 0.938 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
}

html body .biab-proposal{
    margin-top: calc(var(--fr-edge) * -1) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.176), 12.5% calc(var(--fr-edge) * 0.344), 18.8% calc(var(--fr-edge) * 0.500), 25.0% calc(var(--fr-edge) * 0.636), 31.2% calc(var(--fr-edge) * 0.748), 37.5% calc(var(--fr-edge) * 0.831), 43.8% calc(var(--fr-edge) * 0.883), 50.0% calc(var(--fr-edge) * 0.900), 56.2% calc(var(--fr-edge) * 0.883), 62.5% calc(var(--fr-edge) * 0.831), 68.8% calc(var(--fr-edge) * 0.748), 75.0% calc(var(--fr-edge) * 0.636), 81.2% calc(var(--fr-edge) * 0.500), 87.5% calc(var(--fr-edge) * 0.344), 93.8% calc(var(--fr-edge) * 0.176), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.176), 12.5% calc(var(--fr-edge) * 0.344), 18.8% calc(var(--fr-edge) * 0.500), 25.0% calc(var(--fr-edge) * 0.636), 31.2% calc(var(--fr-edge) * 0.748), 37.5% calc(var(--fr-edge) * 0.831), 43.8% calc(var(--fr-edge) * 0.883), 50.0% calc(var(--fr-edge) * 0.900), 56.2% calc(var(--fr-edge) * 0.883), 62.5% calc(var(--fr-edge) * 0.831), 68.8% calc(var(--fr-edge) * 0.748), 75.0% calc(var(--fr-edge) * 0.636), 81.2% calc(var(--fr-edge) * 0.500), 87.5% calc(var(--fr-edge) * 0.344), 93.8% calc(var(--fr-edge) * 0.176), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
}
html body .biab-proposal::before{
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 3;
    inset: 0 0 auto 0 !important;
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: var(--biab-line, .55);
    clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.176), 12.5% calc(var(--fr-edge) * 0.344), 18.8% calc(var(--fr-edge) * 0.500), 25.0% calc(var(--fr-edge) * 0.636), 31.2% calc(var(--fr-edge) * 0.748), 37.5% calc(var(--fr-edge) * 0.831), 43.8% calc(var(--fr-edge) * 0.883), 50.0% calc(var(--fr-edge) * 0.900), 56.2% calc(var(--fr-edge) * 0.883), 62.5% calc(var(--fr-edge) * 0.831), 68.8% calc(var(--fr-edge) * 0.748), 75.0% calc(var(--fr-edge) * 0.636), 81.2% calc(var(--fr-edge) * 0.500), 87.5% calc(var(--fr-edge) * 0.344), 93.8% calc(var(--fr-edge) * 0.176), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.176 + 3px), 87.5% calc(var(--fr-edge) * 0.344 + 3px), 81.2% calc(var(--fr-edge) * 0.500 + 3px), 75.0% calc(var(--fr-edge) * 0.636 + 3px), 68.8% calc(var(--fr-edge) * 0.748 + 3px), 62.5% calc(var(--fr-edge) * 0.831 + 3px), 56.2% calc(var(--fr-edge) * 0.883 + 3px), 50.0% calc(var(--fr-edge) * 0.900 + 3px), 43.8% calc(var(--fr-edge) * 0.883 + 3px), 37.5% calc(var(--fr-edge) * 0.831 + 3px), 31.2% calc(var(--fr-edge) * 0.748 + 3px), 25.0% calc(var(--fr-edge) * 0.636 + 3px), 18.8% calc(var(--fr-edge) * 0.500 + 3px), 12.5% calc(var(--fr-edge) * 0.344 + 3px), 6.2% calc(var(--fr-edge) * 0.176 + 3px), 0.0% calc(var(--fr-edge) * 0.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.176), 12.5% calc(var(--fr-edge) * 0.344), 18.8% calc(var(--fr-edge) * 0.500), 25.0% calc(var(--fr-edge) * 0.636), 31.2% calc(var(--fr-edge) * 0.748), 37.5% calc(var(--fr-edge) * 0.831), 43.8% calc(var(--fr-edge) * 0.883), 50.0% calc(var(--fr-edge) * 0.900), 56.2% calc(var(--fr-edge) * 0.883), 62.5% calc(var(--fr-edge) * 0.831), 68.8% calc(var(--fr-edge) * 0.748), 75.0% calc(var(--fr-edge) * 0.636), 81.2% calc(var(--fr-edge) * 0.500), 87.5% calc(var(--fr-edge) * 0.344), 93.8% calc(var(--fr-edge) * 0.176), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.176 + 3px), 87.5% calc(var(--fr-edge) * 0.344 + 3px), 81.2% calc(var(--fr-edge) * 0.500 + 3px), 75.0% calc(var(--fr-edge) * 0.636 + 3px), 68.8% calc(var(--fr-edge) * 0.748 + 3px), 62.5% calc(var(--fr-edge) * 0.831 + 3px), 56.2% calc(var(--fr-edge) * 0.883 + 3px), 50.0% calc(var(--fr-edge) * 0.900 + 3px), 43.8% calc(var(--fr-edge) * 0.883 + 3px), 37.5% calc(var(--fr-edge) * 0.831 + 3px), 31.2% calc(var(--fr-edge) * 0.748 + 3px), 25.0% calc(var(--fr-edge) * 0.636 + 3px), 18.8% calc(var(--fr-edge) * 0.500 + 3px), 12.5% calc(var(--fr-edge) * 0.344 + 3px), 6.2% calc(var(--fr-edge) * 0.176 + 3px), 0.0% calc(var(--fr-edge) * 0.000 + 3px));
}

html body .biab-final-cta{
    margin-top: calc(var(--fr-edge) * -1) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 3.1% calc(var(--fr-edge) * 0.844), 6.2% calc(var(--fr-edge) * 0.729), 9.4% calc(var(--fr-edge) * 0.628), 12.5% calc(var(--fr-edge) * 0.536), 15.6% calc(var(--fr-edge) * 0.452), 18.8% calc(var(--fr-edge) * 0.375), 21.9% calc(var(--fr-edge) * 0.305), 25.0% calc(var(--fr-edge) * 0.242), 28.1% calc(var(--fr-edge) * 0.186), 31.2% calc(var(--fr-edge) * 0.137), 34.4% calc(var(--fr-edge) * 0.096), 37.5% calc(var(--fr-edge) * 0.061), 40.6% calc(var(--fr-edge) * 0.035), 43.8% calc(var(--fr-edge) * 0.015), 46.9% calc(var(--fr-edge) * 0.004), 50.0% calc(var(--fr-edge) * 0.000), 53.1% calc(var(--fr-edge) * 0.004), 56.2% calc(var(--fr-edge) * 0.015), 59.4% calc(var(--fr-edge) * 0.035), 62.5% calc(var(--fr-edge) * 0.061), 65.6% calc(var(--fr-edge) * 0.096), 68.8% calc(var(--fr-edge) * 0.137), 71.9% calc(var(--fr-edge) * 0.186), 75.0% calc(var(--fr-edge) * 0.242), 78.1% calc(var(--fr-edge) * 0.305), 81.2% calc(var(--fr-edge) * 0.375), 84.4% calc(var(--fr-edge) * 0.452), 87.5% calc(var(--fr-edge) * 0.536), 90.6% calc(var(--fr-edge) * 0.628), 93.8% calc(var(--fr-edge) * 0.729), 96.9% calc(var(--fr-edge) * 0.844), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 3.1% calc(var(--fr-edge) * 0.844), 6.2% calc(var(--fr-edge) * 0.729), 9.4% calc(var(--fr-edge) * 0.628), 12.5% calc(var(--fr-edge) * 0.536), 15.6% calc(var(--fr-edge) * 0.452), 18.8% calc(var(--fr-edge) * 0.375), 21.9% calc(var(--fr-edge) * 0.305), 25.0% calc(var(--fr-edge) * 0.242), 28.1% calc(var(--fr-edge) * 0.186), 31.2% calc(var(--fr-edge) * 0.137), 34.4% calc(var(--fr-edge) * 0.096), 37.5% calc(var(--fr-edge) * 0.061), 40.6% calc(var(--fr-edge) * 0.035), 43.8% calc(var(--fr-edge) * 0.015), 46.9% calc(var(--fr-edge) * 0.004), 50.0% calc(var(--fr-edge) * 0.000), 53.1% calc(var(--fr-edge) * 0.004), 56.2% calc(var(--fr-edge) * 0.015), 59.4% calc(var(--fr-edge) * 0.035), 62.5% calc(var(--fr-edge) * 0.061), 65.6% calc(var(--fr-edge) * 0.096), 68.8% calc(var(--fr-edge) * 0.137), 71.9% calc(var(--fr-edge) * 0.186), 75.0% calc(var(--fr-edge) * 0.242), 78.1% calc(var(--fr-edge) * 0.305), 81.2% calc(var(--fr-edge) * 0.375), 84.4% calc(var(--fr-edge) * 0.452), 87.5% calc(var(--fr-edge) * 0.536), 90.6% calc(var(--fr-edge) * 0.628), 93.8% calc(var(--fr-edge) * 0.729), 96.9% calc(var(--fr-edge) * 0.844), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
}
html body .biab-final-cta::after{
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 3;
    inset: 0 0 auto 0 !important;
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: var(--biab-line, .55);
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 3.1% calc(var(--fr-edge) * 0.844), 6.2% calc(var(--fr-edge) * 0.729), 9.4% calc(var(--fr-edge) * 0.628), 12.5% calc(var(--fr-edge) * 0.536), 15.6% calc(var(--fr-edge) * 0.452), 18.8% calc(var(--fr-edge) * 0.375), 21.9% calc(var(--fr-edge) * 0.305), 25.0% calc(var(--fr-edge) * 0.242), 28.1% calc(var(--fr-edge) * 0.186), 31.2% calc(var(--fr-edge) * 0.137), 34.4% calc(var(--fr-edge) * 0.096), 37.5% calc(var(--fr-edge) * 0.061), 40.6% calc(var(--fr-edge) * 0.035), 43.8% calc(var(--fr-edge) * 0.015), 46.9% calc(var(--fr-edge) * 0.004), 50.0% calc(var(--fr-edge) * 0.000), 53.1% calc(var(--fr-edge) * 0.004), 56.2% calc(var(--fr-edge) * 0.015), 59.4% calc(var(--fr-edge) * 0.035), 62.5% calc(var(--fr-edge) * 0.061), 65.6% calc(var(--fr-edge) * 0.096), 68.8% calc(var(--fr-edge) * 0.137), 71.9% calc(var(--fr-edge) * 0.186), 75.0% calc(var(--fr-edge) * 0.242), 78.1% calc(var(--fr-edge) * 0.305), 81.2% calc(var(--fr-edge) * 0.375), 84.4% calc(var(--fr-edge) * 0.452), 87.5% calc(var(--fr-edge) * 0.536), 90.6% calc(var(--fr-edge) * 0.628), 93.8% calc(var(--fr-edge) * 0.729), 96.9% calc(var(--fr-edge) * 0.844), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 96.9% calc(var(--fr-edge) * 0.844 + 3px), 93.8% calc(var(--fr-edge) * 0.729 + 3px), 90.6% calc(var(--fr-edge) * 0.628 + 3px), 87.5% calc(var(--fr-edge) * 0.536 + 3px), 84.4% calc(var(--fr-edge) * 0.452 + 3px), 81.2% calc(var(--fr-edge) * 0.375 + 3px), 78.1% calc(var(--fr-edge) * 0.305 + 3px), 75.0% calc(var(--fr-edge) * 0.242 + 3px), 71.9% calc(var(--fr-edge) * 0.186 + 3px), 68.8% calc(var(--fr-edge) * 0.137 + 3px), 65.6% calc(var(--fr-edge) * 0.096 + 3px), 62.5% calc(var(--fr-edge) * 0.061 + 3px), 59.4% calc(var(--fr-edge) * 0.035 + 3px), 56.2% calc(var(--fr-edge) * 0.015 + 3px), 53.1% calc(var(--fr-edge) * 0.004 + 3px), 50.0% calc(var(--fr-edge) * 0.000 + 3px), 46.9% calc(var(--fr-edge) * 0.004 + 3px), 43.8% calc(var(--fr-edge) * 0.015 + 3px), 40.6% calc(var(--fr-edge) * 0.035 + 3px), 37.5% calc(var(--fr-edge) * 0.061 + 3px), 34.4% calc(var(--fr-edge) * 0.096 + 3px), 31.2% calc(var(--fr-edge) * 0.137 + 3px), 28.1% calc(var(--fr-edge) * 0.186 + 3px), 25.0% calc(var(--fr-edge) * 0.242 + 3px), 21.9% calc(var(--fr-edge) * 0.305 + 3px), 18.8% calc(var(--fr-edge) * 0.375 + 3px), 15.6% calc(var(--fr-edge) * 0.452 + 3px), 12.5% calc(var(--fr-edge) * 0.536 + 3px), 9.4% calc(var(--fr-edge) * 0.628 + 3px), 6.2% calc(var(--fr-edge) * 0.729 + 3px), 3.1% calc(var(--fr-edge) * 0.844 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 3.1% calc(var(--fr-edge) * 0.844), 6.2% calc(var(--fr-edge) * 0.729), 9.4% calc(var(--fr-edge) * 0.628), 12.5% calc(var(--fr-edge) * 0.536), 15.6% calc(var(--fr-edge) * 0.452), 18.8% calc(var(--fr-edge) * 0.375), 21.9% calc(var(--fr-edge) * 0.305), 25.0% calc(var(--fr-edge) * 0.242), 28.1% calc(var(--fr-edge) * 0.186), 31.2% calc(var(--fr-edge) * 0.137), 34.4% calc(var(--fr-edge) * 0.096), 37.5% calc(var(--fr-edge) * 0.061), 40.6% calc(var(--fr-edge) * 0.035), 43.8% calc(var(--fr-edge) * 0.015), 46.9% calc(var(--fr-edge) * 0.004), 50.0% calc(var(--fr-edge) * 0.000), 53.1% calc(var(--fr-edge) * 0.004), 56.2% calc(var(--fr-edge) * 0.015), 59.4% calc(var(--fr-edge) * 0.035), 62.5% calc(var(--fr-edge) * 0.061), 65.6% calc(var(--fr-edge) * 0.096), 68.8% calc(var(--fr-edge) * 0.137), 71.9% calc(var(--fr-edge) * 0.186), 75.0% calc(var(--fr-edge) * 0.242), 78.1% calc(var(--fr-edge) * 0.305), 81.2% calc(var(--fr-edge) * 0.375), 84.4% calc(var(--fr-edge) * 0.452), 87.5% calc(var(--fr-edge) * 0.536), 90.6% calc(var(--fr-edge) * 0.628), 93.8% calc(var(--fr-edge) * 0.729), 96.9% calc(var(--fr-edge) * 0.844), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 96.9% calc(var(--fr-edge) * 0.844 + 3px), 93.8% calc(var(--fr-edge) * 0.729 + 3px), 90.6% calc(var(--fr-edge) * 0.628 + 3px), 87.5% calc(var(--fr-edge) * 0.536 + 3px), 84.4% calc(var(--fr-edge) * 0.452 + 3px), 81.2% calc(var(--fr-edge) * 0.375 + 3px), 78.1% calc(var(--fr-edge) * 0.305 + 3px), 75.0% calc(var(--fr-edge) * 0.242 + 3px), 71.9% calc(var(--fr-edge) * 0.186 + 3px), 68.8% calc(var(--fr-edge) * 0.137 + 3px), 65.6% calc(var(--fr-edge) * 0.096 + 3px), 62.5% calc(var(--fr-edge) * 0.061 + 3px), 59.4% calc(var(--fr-edge) * 0.035 + 3px), 56.2% calc(var(--fr-edge) * 0.015 + 3px), 53.1% calc(var(--fr-edge) * 0.004 + 3px), 50.0% calc(var(--fr-edge) * 0.000 + 3px), 46.9% calc(var(--fr-edge) * 0.004 + 3px), 43.8% calc(var(--fr-edge) * 0.015 + 3px), 40.6% calc(var(--fr-edge) * 0.035 + 3px), 37.5% calc(var(--fr-edge) * 0.061 + 3px), 34.4% calc(var(--fr-edge) * 0.096 + 3px), 31.2% calc(var(--fr-edge) * 0.137 + 3px), 28.1% calc(var(--fr-edge) * 0.186 + 3px), 25.0% calc(var(--fr-edge) * 0.242 + 3px), 21.9% calc(var(--fr-edge) * 0.305 + 3px), 18.8% calc(var(--fr-edge) * 0.375 + 3px), 15.6% calc(var(--fr-edge) * 0.452 + 3px), 12.5% calc(var(--fr-edge) * 0.536 + 3px), 9.4% calc(var(--fr-edge) * 0.628 + 3px), 6.2% calc(var(--fr-edge) * 0.729 + 3px), 3.1% calc(var(--fr-edge) * 0.844 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
}

/* ---------- 02 · CARDS: the soft "leaf" corner ---------- */
html body .biab-packages__card,
html body .biab-proposal .biab-proposal__steps .biab-proposal__card {
    border-radius: 46px 10px 46px 10px !important;
}
@media screen and (max-width: 599px) {
    html body .biab-packages__card,
    html body .biab-proposal .biab-proposal__steps .biab-proposal__card {
        border-radius: 34px 8px 34px 8px !important;
    }
}

/* swipe carousel (tablet + mobile): tighter shadow so it is not cut off by the scroller */
@media screen and (max-width: 1100px) {
    html body .biab-packages__card {
        box-shadow: 0 14px 26px -20px rgba(31, 33, 29, .38), 0 1px 0 rgba(255, 255, 255, .6) inset !important;
    }
}

@media screen and (max-width: 1100px) {
    html body .biab-stages__stage {
        box-shadow: 0 12px 22px -18px rgba(31, 33, 29, .38) !important;
    }
}

/* ---------- 03 · THE DIFFERENCE: glass circles on olive ---------- */
html body .biab-transformation {
    background-image:
        radial-gradient(52% 78% at 74% 52%, rgba(135, 148, 123, .20), rgba(135, 148, 123, 0) 70%),
        radial-gradient(40% 60% at 6% 100%, rgba(217, 183, 126, .08), rgba(217, 183, 126, 0) 70%) !important;
}
html body .biab-transformation__circle--more {
    background: linear-gradient(150deg, #DD7752 0%, #D66A43 48%, #BF5C39 100%) !important;
    border: 1px solid rgba(240, 207, 156, .55) !important;
    box-shadow: 0 26px 56px rgba(0, 0, 0, .28), 0 0 60px rgba(214, 106, 67, .16), inset 0 1px 0 rgba(255, 236, 214, .42) !important;
}
html body .biab-transformation__circle--less {
    border: 1px solid rgba(250, 247, 242, .22) !important;
    box-shadow: 0 24px 54px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(250, 247, 242, .18) !important;
}

/* END — BUSINESS-IN-A-BOX ELEVATION */

/* =========================================================
   FRAYORA — WEBSITE & DIGITAL INFRASTRUCTURE ELEVATION v1
   PASTE AT THE VERY BOTTOM OF main.css

   - No words, photos, typography or buttons are changed.
   - Sections get the same shaped edges as the homepage and
     Business-in-a-Box page, on desktop, tablet and mobile.
   - Every icon on the page now shares one style: a round
     glass badge (peach / sage) with a fine round-capped line icon.
========================================================= */

:root { --fr-edge: 64px; }
@media screen and (max-width: 1100px) { :root { --fr-edge: 52px; } }
@media screen and (max-width: 899px)  { :root { --fr-edge: 44px; } }
@media screen and (max-width: 599px)  { :root { --fr-edge: 34px; } }

/* ---------- 01 · SECTION SHAPES ---------- */

html body .digital-design__inner,
html body .digital-benefits__inner,
html body .digital-system__inner,
html body .digital-process__inner,
html body .digital-final-cta__inner {
    margin-top: var(--fr-edge) !important;
}

/* colours that let the shapes read (cream family only) */
html body .digital-system  { background-color: #FAF7F2 !important; }
html body .digital-process { background-color: #F5EDE4 !important; }

/* the process / CTA line needs a positioned parent */
html body .digital-process__inner,
html body .digital-final-cta__inner { position: relative; }

html body .digital-design{
    margin-top: calc(var(--fr-edge) * -1) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.989), 12.5% calc(var(--fr-edge) * 0.957), 18.8% calc(var(--fr-edge) * 0.908), 25.0% calc(var(--fr-edge) * 0.844), 31.2% calc(var(--fr-edge) * 0.768), 37.5% calc(var(--fr-edge) * 0.684), 43.8% calc(var(--fr-edge) * 0.593), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.407), 62.5% calc(var(--fr-edge) * 0.316), 68.8% calc(var(--fr-edge) * 0.232), 75.0% calc(var(--fr-edge) * 0.156), 81.2% calc(var(--fr-edge) * 0.092), 87.5% calc(var(--fr-edge) * 0.043), 93.8% calc(var(--fr-edge) * 0.011), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.989), 12.5% calc(var(--fr-edge) * 0.957), 18.8% calc(var(--fr-edge) * 0.908), 25.0% calc(var(--fr-edge) * 0.844), 31.2% calc(var(--fr-edge) * 0.768), 37.5% calc(var(--fr-edge) * 0.684), 43.8% calc(var(--fr-edge) * 0.593), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.407), 62.5% calc(var(--fr-edge) * 0.316), 68.8% calc(var(--fr-edge) * 0.232), 75.0% calc(var(--fr-edge) * 0.156), 81.2% calc(var(--fr-edge) * 0.092), 87.5% calc(var(--fr-edge) * 0.043), 93.8% calc(var(--fr-edge) * 0.011), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
}
html body .digital-design::before{
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 3;
    inset: 0 0 auto 0 !important;
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: var(--biab-line, .6);
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.989), 12.5% calc(var(--fr-edge) * 0.957), 18.8% calc(var(--fr-edge) * 0.908), 25.0% calc(var(--fr-edge) * 0.844), 31.2% calc(var(--fr-edge) * 0.768), 37.5% calc(var(--fr-edge) * 0.684), 43.8% calc(var(--fr-edge) * 0.593), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.407), 62.5% calc(var(--fr-edge) * 0.316), 68.8% calc(var(--fr-edge) * 0.232), 75.0% calc(var(--fr-edge) * 0.156), 81.2% calc(var(--fr-edge) * 0.092), 87.5% calc(var(--fr-edge) * 0.043), 93.8% calc(var(--fr-edge) * 0.011), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.011 + 3px), 87.5% calc(var(--fr-edge) * 0.043 + 3px), 81.2% calc(var(--fr-edge) * 0.092 + 3px), 75.0% calc(var(--fr-edge) * 0.156 + 3px), 68.8% calc(var(--fr-edge) * 0.232 + 3px), 62.5% calc(var(--fr-edge) * 0.316 + 3px), 56.2% calc(var(--fr-edge) * 0.407 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.593 + 3px), 37.5% calc(var(--fr-edge) * 0.684 + 3px), 31.2% calc(var(--fr-edge) * 0.768 + 3px), 25.0% calc(var(--fr-edge) * 0.844 + 3px), 18.8% calc(var(--fr-edge) * 0.908 + 3px), 12.5% calc(var(--fr-edge) * 0.957 + 3px), 6.2% calc(var(--fr-edge) * 0.989 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.989), 12.5% calc(var(--fr-edge) * 0.957), 18.8% calc(var(--fr-edge) * 0.908), 25.0% calc(var(--fr-edge) * 0.844), 31.2% calc(var(--fr-edge) * 0.768), 37.5% calc(var(--fr-edge) * 0.684), 43.8% calc(var(--fr-edge) * 0.593), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.407), 62.5% calc(var(--fr-edge) * 0.316), 68.8% calc(var(--fr-edge) * 0.232), 75.0% calc(var(--fr-edge) * 0.156), 81.2% calc(var(--fr-edge) * 0.092), 87.5% calc(var(--fr-edge) * 0.043), 93.8% calc(var(--fr-edge) * 0.011), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.011 + 3px), 87.5% calc(var(--fr-edge) * 0.043 + 3px), 81.2% calc(var(--fr-edge) * 0.092 + 3px), 75.0% calc(var(--fr-edge) * 0.156 + 3px), 68.8% calc(var(--fr-edge) * 0.232 + 3px), 62.5% calc(var(--fr-edge) * 0.316 + 3px), 56.2% calc(var(--fr-edge) * 0.407 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.593 + 3px), 37.5% calc(var(--fr-edge) * 0.684 + 3px), 31.2% calc(var(--fr-edge) * 0.768 + 3px), 25.0% calc(var(--fr-edge) * 0.844 + 3px), 18.8% calc(var(--fr-edge) * 0.908 + 3px), 12.5% calc(var(--fr-edge) * 0.957 + 3px), 6.2% calc(var(--fr-edge) * 0.989 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
}

html body .digital-benefits{
    margin-top: calc(var(--fr-edge) * -1) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
}
html body .digital-benefits::before{
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 3;
    inset: 0 0 auto 0 !important;
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: var(--biab-line, .6);
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 93.8% calc(var(--fr-edge) * 0.805 + 3px), 87.5% calc(var(--fr-edge) * 0.617 + 3px), 81.2% calc(var(--fr-edge) * 0.444 + 3px), 75.0% calc(var(--fr-edge) * 0.293 + 3px), 68.8% calc(var(--fr-edge) * 0.169 + 3px), 62.5% calc(var(--fr-edge) * 0.076 + 3px), 56.2% calc(var(--fr-edge) * 0.019 + 3px), 50.0% calc(var(--fr-edge) * 0.000 + 3px), 43.8% calc(var(--fr-edge) * 0.019 + 3px), 37.5% calc(var(--fr-edge) * 0.076 + 3px), 31.2% calc(var(--fr-edge) * 0.169 + 3px), 25.0% calc(var(--fr-edge) * 0.293 + 3px), 18.8% calc(var(--fr-edge) * 0.444 + 3px), 12.5% calc(var(--fr-edge) * 0.617 + 3px), 6.2% calc(var(--fr-edge) * 0.805 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 93.8% calc(var(--fr-edge) * 0.805 + 3px), 87.5% calc(var(--fr-edge) * 0.617 + 3px), 81.2% calc(var(--fr-edge) * 0.444 + 3px), 75.0% calc(var(--fr-edge) * 0.293 + 3px), 68.8% calc(var(--fr-edge) * 0.169 + 3px), 62.5% calc(var(--fr-edge) * 0.076 + 3px), 56.2% calc(var(--fr-edge) * 0.019 + 3px), 50.0% calc(var(--fr-edge) * 0.000 + 3px), 43.8% calc(var(--fr-edge) * 0.019 + 3px), 37.5% calc(var(--fr-edge) * 0.076 + 3px), 31.2% calc(var(--fr-edge) * 0.169 + 3px), 25.0% calc(var(--fr-edge) * 0.293 + 3px), 18.8% calc(var(--fr-edge) * 0.444 + 3px), 12.5% calc(var(--fr-edge) * 0.617 + 3px), 6.2% calc(var(--fr-edge) * 0.805 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
}

html body .digital-system{
    margin-top: calc(var(--fr-edge) * -1) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.011), 12.5% calc(var(--fr-edge) * 0.043), 18.8% calc(var(--fr-edge) * 0.092), 25.0% calc(var(--fr-edge) * 0.156), 31.2% calc(var(--fr-edge) * 0.232), 37.5% calc(var(--fr-edge) * 0.316), 43.8% calc(var(--fr-edge) * 0.407), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.593), 62.5% calc(var(--fr-edge) * 0.684), 68.8% calc(var(--fr-edge) * 0.768), 75.0% calc(var(--fr-edge) * 0.844), 81.2% calc(var(--fr-edge) * 0.908), 87.5% calc(var(--fr-edge) * 0.957), 93.8% calc(var(--fr-edge) * 0.989), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.011), 12.5% calc(var(--fr-edge) * 0.043), 18.8% calc(var(--fr-edge) * 0.092), 25.0% calc(var(--fr-edge) * 0.156), 31.2% calc(var(--fr-edge) * 0.232), 37.5% calc(var(--fr-edge) * 0.316), 43.8% calc(var(--fr-edge) * 0.407), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.593), 62.5% calc(var(--fr-edge) * 0.684), 68.8% calc(var(--fr-edge) * 0.768), 75.0% calc(var(--fr-edge) * 0.844), 81.2% calc(var(--fr-edge) * 0.908), 87.5% calc(var(--fr-edge) * 0.957), 93.8% calc(var(--fr-edge) * 0.989), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
}
html body .digital-system::before{
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 3;
    inset: 0 0 auto 0 !important;
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: var(--biab-line, .6);
    clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.011), 12.5% calc(var(--fr-edge) * 0.043), 18.8% calc(var(--fr-edge) * 0.092), 25.0% calc(var(--fr-edge) * 0.156), 31.2% calc(var(--fr-edge) * 0.232), 37.5% calc(var(--fr-edge) * 0.316), 43.8% calc(var(--fr-edge) * 0.407), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.593), 62.5% calc(var(--fr-edge) * 0.684), 68.8% calc(var(--fr-edge) * 0.768), 75.0% calc(var(--fr-edge) * 0.844), 81.2% calc(var(--fr-edge) * 0.908), 87.5% calc(var(--fr-edge) * 0.957), 93.8% calc(var(--fr-edge) * 0.989), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 93.8% calc(var(--fr-edge) * 0.989 + 3px), 87.5% calc(var(--fr-edge) * 0.957 + 3px), 81.2% calc(var(--fr-edge) * 0.908 + 3px), 75.0% calc(var(--fr-edge) * 0.844 + 3px), 68.8% calc(var(--fr-edge) * 0.768 + 3px), 62.5% calc(var(--fr-edge) * 0.684 + 3px), 56.2% calc(var(--fr-edge) * 0.593 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.407 + 3px), 37.5% calc(var(--fr-edge) * 0.316 + 3px), 31.2% calc(var(--fr-edge) * 0.232 + 3px), 25.0% calc(var(--fr-edge) * 0.156 + 3px), 18.8% calc(var(--fr-edge) * 0.092 + 3px), 12.5% calc(var(--fr-edge) * 0.043 + 3px), 6.2% calc(var(--fr-edge) * 0.011 + 3px), 0.0% calc(var(--fr-edge) * 0.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.011), 12.5% calc(var(--fr-edge) * 0.043), 18.8% calc(var(--fr-edge) * 0.092), 25.0% calc(var(--fr-edge) * 0.156), 31.2% calc(var(--fr-edge) * 0.232), 37.5% calc(var(--fr-edge) * 0.316), 43.8% calc(var(--fr-edge) * 0.407), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.593), 62.5% calc(var(--fr-edge) * 0.684), 68.8% calc(var(--fr-edge) * 0.768), 75.0% calc(var(--fr-edge) * 0.844), 81.2% calc(var(--fr-edge) * 0.908), 87.5% calc(var(--fr-edge) * 0.957), 93.8% calc(var(--fr-edge) * 0.989), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 93.8% calc(var(--fr-edge) * 0.989 + 3px), 87.5% calc(var(--fr-edge) * 0.957 + 3px), 81.2% calc(var(--fr-edge) * 0.908 + 3px), 75.0% calc(var(--fr-edge) * 0.844 + 3px), 68.8% calc(var(--fr-edge) * 0.768 + 3px), 62.5% calc(var(--fr-edge) * 0.684 + 3px), 56.2% calc(var(--fr-edge) * 0.593 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.407 + 3px), 37.5% calc(var(--fr-edge) * 0.316 + 3px), 31.2% calc(var(--fr-edge) * 0.232 + 3px), 25.0% calc(var(--fr-edge) * 0.156 + 3px), 18.8% calc(var(--fr-edge) * 0.092 + 3px), 12.5% calc(var(--fr-edge) * 0.043 + 3px), 6.2% calc(var(--fr-edge) * 0.011 + 3px), 0.0% calc(var(--fr-edge) * 0.000 + 3px));
}

html body .digital-process{
    margin-top: calc(var(--fr-edge) * -1) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.938), 12.5% calc(var(--fr-edge) * 0.875), 18.8% calc(var(--fr-edge) * 0.812), 25.0% calc(var(--fr-edge) * 0.750), 31.2% calc(var(--fr-edge) * 0.688), 37.5% calc(var(--fr-edge) * 0.625), 43.8% calc(var(--fr-edge) * 0.562), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.438), 62.5% calc(var(--fr-edge) * 0.375), 68.8% calc(var(--fr-edge) * 0.312), 75.0% calc(var(--fr-edge) * 0.250), 81.2% calc(var(--fr-edge) * 0.188), 87.5% calc(var(--fr-edge) * 0.125), 93.8% calc(var(--fr-edge) * 0.062), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.938), 12.5% calc(var(--fr-edge) * 0.875), 18.8% calc(var(--fr-edge) * 0.812), 25.0% calc(var(--fr-edge) * 0.750), 31.2% calc(var(--fr-edge) * 0.688), 37.5% calc(var(--fr-edge) * 0.625), 43.8% calc(var(--fr-edge) * 0.562), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.438), 62.5% calc(var(--fr-edge) * 0.375), 68.8% calc(var(--fr-edge) * 0.312), 75.0% calc(var(--fr-edge) * 0.250), 81.2% calc(var(--fr-edge) * 0.188), 87.5% calc(var(--fr-edge) * 0.125), 93.8% calc(var(--fr-edge) * 0.062), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
}
html body .digital-process__inner::after{
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 3;
    top: calc(var(--fr-edge) * -1) !important; left: 50% !important; width: 100vw !important; transform: translateX(-50%);
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: var(--biab-line, .6);
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.938), 12.5% calc(var(--fr-edge) * 0.875), 18.8% calc(var(--fr-edge) * 0.812), 25.0% calc(var(--fr-edge) * 0.750), 31.2% calc(var(--fr-edge) * 0.688), 37.5% calc(var(--fr-edge) * 0.625), 43.8% calc(var(--fr-edge) * 0.562), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.438), 62.5% calc(var(--fr-edge) * 0.375), 68.8% calc(var(--fr-edge) * 0.312), 75.0% calc(var(--fr-edge) * 0.250), 81.2% calc(var(--fr-edge) * 0.188), 87.5% calc(var(--fr-edge) * 0.125), 93.8% calc(var(--fr-edge) * 0.062), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.062 + 3px), 87.5% calc(var(--fr-edge) * 0.125 + 3px), 81.2% calc(var(--fr-edge) * 0.188 + 3px), 75.0% calc(var(--fr-edge) * 0.250 + 3px), 68.8% calc(var(--fr-edge) * 0.312 + 3px), 62.5% calc(var(--fr-edge) * 0.375 + 3px), 56.2% calc(var(--fr-edge) * 0.438 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.562 + 3px), 37.5% calc(var(--fr-edge) * 0.625 + 3px), 31.2% calc(var(--fr-edge) * 0.688 + 3px), 25.0% calc(var(--fr-edge) * 0.750 + 3px), 18.8% calc(var(--fr-edge) * 0.812 + 3px), 12.5% calc(var(--fr-edge) * 0.875 + 3px), 6.2% calc(var(--fr-edge) * 0.938 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.938), 12.5% calc(var(--fr-edge) * 0.875), 18.8% calc(var(--fr-edge) * 0.812), 25.0% calc(var(--fr-edge) * 0.750), 31.2% calc(var(--fr-edge) * 0.688), 37.5% calc(var(--fr-edge) * 0.625), 43.8% calc(var(--fr-edge) * 0.562), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.438), 62.5% calc(var(--fr-edge) * 0.375), 68.8% calc(var(--fr-edge) * 0.312), 75.0% calc(var(--fr-edge) * 0.250), 81.2% calc(var(--fr-edge) * 0.188), 87.5% calc(var(--fr-edge) * 0.125), 93.8% calc(var(--fr-edge) * 0.062), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.062 + 3px), 87.5% calc(var(--fr-edge) * 0.125 + 3px), 81.2% calc(var(--fr-edge) * 0.188 + 3px), 75.0% calc(var(--fr-edge) * 0.250 + 3px), 68.8% calc(var(--fr-edge) * 0.312 + 3px), 62.5% calc(var(--fr-edge) * 0.375 + 3px), 56.2% calc(var(--fr-edge) * 0.438 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.562 + 3px), 37.5% calc(var(--fr-edge) * 0.625 + 3px), 31.2% calc(var(--fr-edge) * 0.688 + 3px), 25.0% calc(var(--fr-edge) * 0.750 + 3px), 18.8% calc(var(--fr-edge) * 0.812 + 3px), 12.5% calc(var(--fr-edge) * 0.875 + 3px), 6.2% calc(var(--fr-edge) * 0.938 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
}

html body .digital-final-cta{
    margin-top: calc(var(--fr-edge) * -1) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 3.1% calc(var(--fr-edge) * 0.844), 6.2% calc(var(--fr-edge) * 0.729), 9.4% calc(var(--fr-edge) * 0.628), 12.5% calc(var(--fr-edge) * 0.536), 15.6% calc(var(--fr-edge) * 0.452), 18.8% calc(var(--fr-edge) * 0.375), 21.9% calc(var(--fr-edge) * 0.305), 25.0% calc(var(--fr-edge) * 0.242), 28.1% calc(var(--fr-edge) * 0.186), 31.2% calc(var(--fr-edge) * 0.137), 34.4% calc(var(--fr-edge) * 0.096), 37.5% calc(var(--fr-edge) * 0.061), 40.6% calc(var(--fr-edge) * 0.035), 43.8% calc(var(--fr-edge) * 0.015), 46.9% calc(var(--fr-edge) * 0.004), 50.0% calc(var(--fr-edge) * 0.000), 53.1% calc(var(--fr-edge) * 0.004), 56.2% calc(var(--fr-edge) * 0.015), 59.4% calc(var(--fr-edge) * 0.035), 62.5% calc(var(--fr-edge) * 0.061), 65.6% calc(var(--fr-edge) * 0.096), 68.8% calc(var(--fr-edge) * 0.137), 71.9% calc(var(--fr-edge) * 0.186), 75.0% calc(var(--fr-edge) * 0.242), 78.1% calc(var(--fr-edge) * 0.305), 81.2% calc(var(--fr-edge) * 0.375), 84.4% calc(var(--fr-edge) * 0.452), 87.5% calc(var(--fr-edge) * 0.536), 90.6% calc(var(--fr-edge) * 0.628), 93.8% calc(var(--fr-edge) * 0.729), 96.9% calc(var(--fr-edge) * 0.844), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 3.1% calc(var(--fr-edge) * 0.844), 6.2% calc(var(--fr-edge) * 0.729), 9.4% calc(var(--fr-edge) * 0.628), 12.5% calc(var(--fr-edge) * 0.536), 15.6% calc(var(--fr-edge) * 0.452), 18.8% calc(var(--fr-edge) * 0.375), 21.9% calc(var(--fr-edge) * 0.305), 25.0% calc(var(--fr-edge) * 0.242), 28.1% calc(var(--fr-edge) * 0.186), 31.2% calc(var(--fr-edge) * 0.137), 34.4% calc(var(--fr-edge) * 0.096), 37.5% calc(var(--fr-edge) * 0.061), 40.6% calc(var(--fr-edge) * 0.035), 43.8% calc(var(--fr-edge) * 0.015), 46.9% calc(var(--fr-edge) * 0.004), 50.0% calc(var(--fr-edge) * 0.000), 53.1% calc(var(--fr-edge) * 0.004), 56.2% calc(var(--fr-edge) * 0.015), 59.4% calc(var(--fr-edge) * 0.035), 62.5% calc(var(--fr-edge) * 0.061), 65.6% calc(var(--fr-edge) * 0.096), 68.8% calc(var(--fr-edge) * 0.137), 71.9% calc(var(--fr-edge) * 0.186), 75.0% calc(var(--fr-edge) * 0.242), 78.1% calc(var(--fr-edge) * 0.305), 81.2% calc(var(--fr-edge) * 0.375), 84.4% calc(var(--fr-edge) * 0.452), 87.5% calc(var(--fr-edge) * 0.536), 90.6% calc(var(--fr-edge) * 0.628), 93.8% calc(var(--fr-edge) * 0.729), 96.9% calc(var(--fr-edge) * 0.844), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
}
html body .digital-final-cta__inner::after{
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 3;
    top: calc(var(--fr-edge) * -1) !important; left: 50% !important; width: 100vw !important; transform: translateX(-50%);
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: var(--biab-line, .6);
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 3.1% calc(var(--fr-edge) * 0.844), 6.2% calc(var(--fr-edge) * 0.729), 9.4% calc(var(--fr-edge) * 0.628), 12.5% calc(var(--fr-edge) * 0.536), 15.6% calc(var(--fr-edge) * 0.452), 18.8% calc(var(--fr-edge) * 0.375), 21.9% calc(var(--fr-edge) * 0.305), 25.0% calc(var(--fr-edge) * 0.242), 28.1% calc(var(--fr-edge) * 0.186), 31.2% calc(var(--fr-edge) * 0.137), 34.4% calc(var(--fr-edge) * 0.096), 37.5% calc(var(--fr-edge) * 0.061), 40.6% calc(var(--fr-edge) * 0.035), 43.8% calc(var(--fr-edge) * 0.015), 46.9% calc(var(--fr-edge) * 0.004), 50.0% calc(var(--fr-edge) * 0.000), 53.1% calc(var(--fr-edge) * 0.004), 56.2% calc(var(--fr-edge) * 0.015), 59.4% calc(var(--fr-edge) * 0.035), 62.5% calc(var(--fr-edge) * 0.061), 65.6% calc(var(--fr-edge) * 0.096), 68.8% calc(var(--fr-edge) * 0.137), 71.9% calc(var(--fr-edge) * 0.186), 75.0% calc(var(--fr-edge) * 0.242), 78.1% calc(var(--fr-edge) * 0.305), 81.2% calc(var(--fr-edge) * 0.375), 84.4% calc(var(--fr-edge) * 0.452), 87.5% calc(var(--fr-edge) * 0.536), 90.6% calc(var(--fr-edge) * 0.628), 93.8% calc(var(--fr-edge) * 0.729), 96.9% calc(var(--fr-edge) * 0.844), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 96.9% calc(var(--fr-edge) * 0.844 + 3px), 93.8% calc(var(--fr-edge) * 0.729 + 3px), 90.6% calc(var(--fr-edge) * 0.628 + 3px), 87.5% calc(var(--fr-edge) * 0.536 + 3px), 84.4% calc(var(--fr-edge) * 0.452 + 3px), 81.2% calc(var(--fr-edge) * 0.375 + 3px), 78.1% calc(var(--fr-edge) * 0.305 + 3px), 75.0% calc(var(--fr-edge) * 0.242 + 3px), 71.9% calc(var(--fr-edge) * 0.186 + 3px), 68.8% calc(var(--fr-edge) * 0.137 + 3px), 65.6% calc(var(--fr-edge) * 0.096 + 3px), 62.5% calc(var(--fr-edge) * 0.061 + 3px), 59.4% calc(var(--fr-edge) * 0.035 + 3px), 56.2% calc(var(--fr-edge) * 0.015 + 3px), 53.1% calc(var(--fr-edge) * 0.004 + 3px), 50.0% calc(var(--fr-edge) * 0.000 + 3px), 46.9% calc(var(--fr-edge) * 0.004 + 3px), 43.8% calc(var(--fr-edge) * 0.015 + 3px), 40.6% calc(var(--fr-edge) * 0.035 + 3px), 37.5% calc(var(--fr-edge) * 0.061 + 3px), 34.4% calc(var(--fr-edge) * 0.096 + 3px), 31.2% calc(var(--fr-edge) * 0.137 + 3px), 28.1% calc(var(--fr-edge) * 0.186 + 3px), 25.0% calc(var(--fr-edge) * 0.242 + 3px), 21.9% calc(var(--fr-edge) * 0.305 + 3px), 18.8% calc(var(--fr-edge) * 0.375 + 3px), 15.6% calc(var(--fr-edge) * 0.452 + 3px), 12.5% calc(var(--fr-edge) * 0.536 + 3px), 9.4% calc(var(--fr-edge) * 0.628 + 3px), 6.2% calc(var(--fr-edge) * 0.729 + 3px), 3.1% calc(var(--fr-edge) * 0.844 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 3.1% calc(var(--fr-edge) * 0.844), 6.2% calc(var(--fr-edge) * 0.729), 9.4% calc(var(--fr-edge) * 0.628), 12.5% calc(var(--fr-edge) * 0.536), 15.6% calc(var(--fr-edge) * 0.452), 18.8% calc(var(--fr-edge) * 0.375), 21.9% calc(var(--fr-edge) * 0.305), 25.0% calc(var(--fr-edge) * 0.242), 28.1% calc(var(--fr-edge) * 0.186), 31.2% calc(var(--fr-edge) * 0.137), 34.4% calc(var(--fr-edge) * 0.096), 37.5% calc(var(--fr-edge) * 0.061), 40.6% calc(var(--fr-edge) * 0.035), 43.8% calc(var(--fr-edge) * 0.015), 46.9% calc(var(--fr-edge) * 0.004), 50.0% calc(var(--fr-edge) * 0.000), 53.1% calc(var(--fr-edge) * 0.004), 56.2% calc(var(--fr-edge) * 0.015), 59.4% calc(var(--fr-edge) * 0.035), 62.5% calc(var(--fr-edge) * 0.061), 65.6% calc(var(--fr-edge) * 0.096), 68.8% calc(var(--fr-edge) * 0.137), 71.9% calc(var(--fr-edge) * 0.186), 75.0% calc(var(--fr-edge) * 0.242), 78.1% calc(var(--fr-edge) * 0.305), 81.2% calc(var(--fr-edge) * 0.375), 84.4% calc(var(--fr-edge) * 0.452), 87.5% calc(var(--fr-edge) * 0.536), 90.6% calc(var(--fr-edge) * 0.628), 93.8% calc(var(--fr-edge) * 0.729), 96.9% calc(var(--fr-edge) * 0.844), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 96.9% calc(var(--fr-edge) * 0.844 + 3px), 93.8% calc(var(--fr-edge) * 0.729 + 3px), 90.6% calc(var(--fr-edge) * 0.628 + 3px), 87.5% calc(var(--fr-edge) * 0.536 + 3px), 84.4% calc(var(--fr-edge) * 0.452 + 3px), 81.2% calc(var(--fr-edge) * 0.375 + 3px), 78.1% calc(var(--fr-edge) * 0.305 + 3px), 75.0% calc(var(--fr-edge) * 0.242 + 3px), 71.9% calc(var(--fr-edge) * 0.186 + 3px), 68.8% calc(var(--fr-edge) * 0.137 + 3px), 65.6% calc(var(--fr-edge) * 0.096 + 3px), 62.5% calc(var(--fr-edge) * 0.061 + 3px), 59.4% calc(var(--fr-edge) * 0.035 + 3px), 56.2% calc(var(--fr-edge) * 0.015 + 3px), 53.1% calc(var(--fr-edge) * 0.004 + 3px), 50.0% calc(var(--fr-edge) * 0.000 + 3px), 46.9% calc(var(--fr-edge) * 0.004 + 3px), 43.8% calc(var(--fr-edge) * 0.015 + 3px), 40.6% calc(var(--fr-edge) * 0.035 + 3px), 37.5% calc(var(--fr-edge) * 0.061 + 3px), 34.4% calc(var(--fr-edge) * 0.096 + 3px), 31.2% calc(var(--fr-edge) * 0.137 + 3px), 28.1% calc(var(--fr-edge) * 0.186 + 3px), 25.0% calc(var(--fr-edge) * 0.242 + 3px), 21.9% calc(var(--fr-edge) * 0.305 + 3px), 18.8% calc(var(--fr-edge) * 0.375 + 3px), 15.6% calc(var(--fr-edge) * 0.452 + 3px), 12.5% calc(var(--fr-edge) * 0.536 + 3px), 9.4% calc(var(--fr-edge) * 0.628 + 3px), 6.2% calc(var(--fr-edge) * 0.729 + 3px), 3.1% calc(var(--fr-edge) * 0.844 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
}

/* ---------- 02 · ONE ICON LANGUAGE ---------- */

/* the four "impact" illustrations become the same glass badge
   + line icon used everywhere else on the page */
html body .digital-benefits__visual {
    position: relative;
    display: grid !important;
    place-items: center;
    width: 88px !important;
    height: 88px !important;
    min-height: 0 !important;
    margin: 6px 0 22px !important;
    border-radius: 50% !important;
    color: #84634E;
    background: linear-gradient(145deg, #FFF7EF 0%, #F3E2D5 60%, #EAD2C2 100%) !important;
    border: 1px solid rgba(181, 143, 119, .18) !important;
    box-shadow: 0 5px 12px rgba(75, 49, 34, .035), 0 18px 30px rgba(75, 49, 34, .075),
                inset 0 2px 2px rgba(255, 255, 255, .9), inset 0 -4px 9px rgba(136, 91, 62, .04) !important;
}
html body .digital-benefits__visual::before {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .42);
    pointer-events: none;
}
html body .digital-benefits__card:nth-child(even) .digital-benefits__visual {
    color: #566449;
    background: linear-gradient(145deg, #F7F9F2 0%, #E6EBDD 55%, #D4DFC8 100%) !important;
    border-color: rgba(111, 137, 101, .18) !important;
    box-shadow: 0 5px 12px rgba(58, 78, 51, .035), 0 18px 30px rgba(58, 78, 51, .075),
                inset 0 2px 2px rgba(255, 255, 255, .9), inset 0 -4px 9px rgba(68, 98, 59, .04) !important;
}
html body .digital-benefits__visual svg {
    width: 38px !important;
    height: 38px !important;
    max-width: none;
}

/* identical line weight, caps and joins in every icon on the page */
html body .digital-design__icon svg,
html body .digital-benefits__visual svg,
html body .digital-system__icon svg,
html body .digital-process__icon svg {
    stroke: currentColor;
    stroke-width: 1.7px;
    stroke-linecap: round;
    stroke-linejoin: round;
}
html body .digital-design__icon svg *,
html body .digital-benefits__visual svg *,
html body .digital-system__icon svg *,
html body .digital-process__icon svg * {
    vector-effect: none;
}
html body .digital-design__item:nth-child(odd) .digital-design__icon,
html body .digital-system__node .digital-system__icon,
html body .digital-process__step:nth-child(odd) .digital-process__icon { color: #84634E; }
html body .digital-design__item:nth-child(even) .digital-design__icon,
html body .digital-process__step:nth-child(even) .digital-process__icon { color: #566449; }

/* impact cards: the soft "leaf" corner used on the other pages */
html body .digital-benefits__card {
    border-radius: 40px 10px 40px 10px !important;
}
@media screen and (max-width: 599px) {
    html body .digital-benefits__card { border-radius: 32px 8px 32px 8px !important; }
}

/* END — WEBSITE & DIGITAL INFRASTRUCTURE ELEVATION */


/* =========================================================
   FRAYORA — BUSINESS KNOWLEDGE & ORGANIZATION ELEVATION v1
   PASTE AT THE VERY BOTTOM OF main.css

   - No words, photos, typography or buttons are changed.
   - Sections get the same shaped edges as the homepage,
     Business-in-a-Box and Website pages (desktop, tablet, mobile).
   - Every icon on the page is now the same size, the same
     glass badge and the same fine round line style.
========================================================= */

:root { --fr-edge: 64px; }
@media screen and (max-width: 1100px) { :root { --fr-edge: 52px; } }
@media screen and (max-width: 899px)  { :root { --fr-edge: 44px; } }
@media screen and (max-width: 599px)  { :root { --fr-edge: 34px; } }

/* ---------- 01 · SECTION SHAPES ---------- */

html body .bk-solves__inner,
html body .bk-build__inner,
html body .bk-outcome__inner,
html body .bk-process__inner,
html body .bk-final-cta__inner {
    margin-top: var(--fr-edge) !important;
}

/* alternating cream tones so every shape reads */
html body .bk-solves  { background-color: #FAF7F2 !important; --biab-line: .85; }
html body .bk-build   { background-color: #F5EDE4 !important; }
html body .bk-outcome { background-color: #FAF7F2 !important; --biab-line: .85; }
html body .bk-process { background-color: #F5EDE4 !important; }
html body .bk-final-cta__inner { position: relative; }

html body .bk-solves{
    margin-top: calc(var(--fr-edge) * -1) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.989), 12.5% calc(var(--fr-edge) * 0.957), 18.8% calc(var(--fr-edge) * 0.908), 25.0% calc(var(--fr-edge) * 0.844), 31.2% calc(var(--fr-edge) * 0.768), 37.5% calc(var(--fr-edge) * 0.684), 43.8% calc(var(--fr-edge) * 0.593), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.407), 62.5% calc(var(--fr-edge) * 0.316), 68.8% calc(var(--fr-edge) * 0.232), 75.0% calc(var(--fr-edge) * 0.156), 81.2% calc(var(--fr-edge) * 0.092), 87.5% calc(var(--fr-edge) * 0.043), 93.8% calc(var(--fr-edge) * 0.011), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.989), 12.5% calc(var(--fr-edge) * 0.957), 18.8% calc(var(--fr-edge) * 0.908), 25.0% calc(var(--fr-edge) * 0.844), 31.2% calc(var(--fr-edge) * 0.768), 37.5% calc(var(--fr-edge) * 0.684), 43.8% calc(var(--fr-edge) * 0.593), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.407), 62.5% calc(var(--fr-edge) * 0.316), 68.8% calc(var(--fr-edge) * 0.232), 75.0% calc(var(--fr-edge) * 0.156), 81.2% calc(var(--fr-edge) * 0.092), 87.5% calc(var(--fr-edge) * 0.043), 93.8% calc(var(--fr-edge) * 0.011), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
}
html body .bk-solves::before{
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 3;
    inset: 0 0 auto 0 !important;
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: var(--biab-line, .6);
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.989), 12.5% calc(var(--fr-edge) * 0.957), 18.8% calc(var(--fr-edge) * 0.908), 25.0% calc(var(--fr-edge) * 0.844), 31.2% calc(var(--fr-edge) * 0.768), 37.5% calc(var(--fr-edge) * 0.684), 43.8% calc(var(--fr-edge) * 0.593), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.407), 62.5% calc(var(--fr-edge) * 0.316), 68.8% calc(var(--fr-edge) * 0.232), 75.0% calc(var(--fr-edge) * 0.156), 81.2% calc(var(--fr-edge) * 0.092), 87.5% calc(var(--fr-edge) * 0.043), 93.8% calc(var(--fr-edge) * 0.011), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.011 + 3px), 87.5% calc(var(--fr-edge) * 0.043 + 3px), 81.2% calc(var(--fr-edge) * 0.092 + 3px), 75.0% calc(var(--fr-edge) * 0.156 + 3px), 68.8% calc(var(--fr-edge) * 0.232 + 3px), 62.5% calc(var(--fr-edge) * 0.316 + 3px), 56.2% calc(var(--fr-edge) * 0.407 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.593 + 3px), 37.5% calc(var(--fr-edge) * 0.684 + 3px), 31.2% calc(var(--fr-edge) * 0.768 + 3px), 25.0% calc(var(--fr-edge) * 0.844 + 3px), 18.8% calc(var(--fr-edge) * 0.908 + 3px), 12.5% calc(var(--fr-edge) * 0.957 + 3px), 6.2% calc(var(--fr-edge) * 0.989 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.989), 12.5% calc(var(--fr-edge) * 0.957), 18.8% calc(var(--fr-edge) * 0.908), 25.0% calc(var(--fr-edge) * 0.844), 31.2% calc(var(--fr-edge) * 0.768), 37.5% calc(var(--fr-edge) * 0.684), 43.8% calc(var(--fr-edge) * 0.593), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.407), 62.5% calc(var(--fr-edge) * 0.316), 68.8% calc(var(--fr-edge) * 0.232), 75.0% calc(var(--fr-edge) * 0.156), 81.2% calc(var(--fr-edge) * 0.092), 87.5% calc(var(--fr-edge) * 0.043), 93.8% calc(var(--fr-edge) * 0.011), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.011 + 3px), 87.5% calc(var(--fr-edge) * 0.043 + 3px), 81.2% calc(var(--fr-edge) * 0.092 + 3px), 75.0% calc(var(--fr-edge) * 0.156 + 3px), 68.8% calc(var(--fr-edge) * 0.232 + 3px), 62.5% calc(var(--fr-edge) * 0.316 + 3px), 56.2% calc(var(--fr-edge) * 0.407 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.593 + 3px), 37.5% calc(var(--fr-edge) * 0.684 + 3px), 31.2% calc(var(--fr-edge) * 0.768 + 3px), 25.0% calc(var(--fr-edge) * 0.844 + 3px), 18.8% calc(var(--fr-edge) * 0.908 + 3px), 12.5% calc(var(--fr-edge) * 0.957 + 3px), 6.2% calc(var(--fr-edge) * 0.989 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
}

html body .bk-build{
    margin-top: calc(var(--fr-edge) * -1) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
}
html body .bk-build::before{
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 3;
    inset: 0 0 auto 0 !important;
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: var(--biab-line, .6);
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 93.8% calc(var(--fr-edge) * 0.805 + 3px), 87.5% calc(var(--fr-edge) * 0.617 + 3px), 81.2% calc(var(--fr-edge) * 0.444 + 3px), 75.0% calc(var(--fr-edge) * 0.293 + 3px), 68.8% calc(var(--fr-edge) * 0.169 + 3px), 62.5% calc(var(--fr-edge) * 0.076 + 3px), 56.2% calc(var(--fr-edge) * 0.019 + 3px), 50.0% calc(var(--fr-edge) * 0.000 + 3px), 43.8% calc(var(--fr-edge) * 0.019 + 3px), 37.5% calc(var(--fr-edge) * 0.076 + 3px), 31.2% calc(var(--fr-edge) * 0.169 + 3px), 25.0% calc(var(--fr-edge) * 0.293 + 3px), 18.8% calc(var(--fr-edge) * 0.444 + 3px), 12.5% calc(var(--fr-edge) * 0.617 + 3px), 6.2% calc(var(--fr-edge) * 0.805 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 93.8% calc(var(--fr-edge) * 0.805 + 3px), 87.5% calc(var(--fr-edge) * 0.617 + 3px), 81.2% calc(var(--fr-edge) * 0.444 + 3px), 75.0% calc(var(--fr-edge) * 0.293 + 3px), 68.8% calc(var(--fr-edge) * 0.169 + 3px), 62.5% calc(var(--fr-edge) * 0.076 + 3px), 56.2% calc(var(--fr-edge) * 0.019 + 3px), 50.0% calc(var(--fr-edge) * 0.000 + 3px), 43.8% calc(var(--fr-edge) * 0.019 + 3px), 37.5% calc(var(--fr-edge) * 0.076 + 3px), 31.2% calc(var(--fr-edge) * 0.169 + 3px), 25.0% calc(var(--fr-edge) * 0.293 + 3px), 18.8% calc(var(--fr-edge) * 0.444 + 3px), 12.5% calc(var(--fr-edge) * 0.617 + 3px), 6.2% calc(var(--fr-edge) * 0.805 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
}

html body .bk-outcome{
    margin-top: calc(var(--fr-edge) * -1) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.011), 12.5% calc(var(--fr-edge) * 0.043), 18.8% calc(var(--fr-edge) * 0.092), 25.0% calc(var(--fr-edge) * 0.156), 31.2% calc(var(--fr-edge) * 0.232), 37.5% calc(var(--fr-edge) * 0.316), 43.8% calc(var(--fr-edge) * 0.407), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.593), 62.5% calc(var(--fr-edge) * 0.684), 68.8% calc(var(--fr-edge) * 0.768), 75.0% calc(var(--fr-edge) * 0.844), 81.2% calc(var(--fr-edge) * 0.908), 87.5% calc(var(--fr-edge) * 0.957), 93.8% calc(var(--fr-edge) * 0.989), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.011), 12.5% calc(var(--fr-edge) * 0.043), 18.8% calc(var(--fr-edge) * 0.092), 25.0% calc(var(--fr-edge) * 0.156), 31.2% calc(var(--fr-edge) * 0.232), 37.5% calc(var(--fr-edge) * 0.316), 43.8% calc(var(--fr-edge) * 0.407), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.593), 62.5% calc(var(--fr-edge) * 0.684), 68.8% calc(var(--fr-edge) * 0.768), 75.0% calc(var(--fr-edge) * 0.844), 81.2% calc(var(--fr-edge) * 0.908), 87.5% calc(var(--fr-edge) * 0.957), 93.8% calc(var(--fr-edge) * 0.989), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
}
html body .bk-outcome::before{
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 3;
    inset: 0 0 auto 0 !important;
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: var(--biab-line, .6);
    clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.011), 12.5% calc(var(--fr-edge) * 0.043), 18.8% calc(var(--fr-edge) * 0.092), 25.0% calc(var(--fr-edge) * 0.156), 31.2% calc(var(--fr-edge) * 0.232), 37.5% calc(var(--fr-edge) * 0.316), 43.8% calc(var(--fr-edge) * 0.407), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.593), 62.5% calc(var(--fr-edge) * 0.684), 68.8% calc(var(--fr-edge) * 0.768), 75.0% calc(var(--fr-edge) * 0.844), 81.2% calc(var(--fr-edge) * 0.908), 87.5% calc(var(--fr-edge) * 0.957), 93.8% calc(var(--fr-edge) * 0.989), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 93.8% calc(var(--fr-edge) * 0.989 + 3px), 87.5% calc(var(--fr-edge) * 0.957 + 3px), 81.2% calc(var(--fr-edge) * 0.908 + 3px), 75.0% calc(var(--fr-edge) * 0.844 + 3px), 68.8% calc(var(--fr-edge) * 0.768 + 3px), 62.5% calc(var(--fr-edge) * 0.684 + 3px), 56.2% calc(var(--fr-edge) * 0.593 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.407 + 3px), 37.5% calc(var(--fr-edge) * 0.316 + 3px), 31.2% calc(var(--fr-edge) * 0.232 + 3px), 25.0% calc(var(--fr-edge) * 0.156 + 3px), 18.8% calc(var(--fr-edge) * 0.092 + 3px), 12.5% calc(var(--fr-edge) * 0.043 + 3px), 6.2% calc(var(--fr-edge) * 0.011 + 3px), 0.0% calc(var(--fr-edge) * 0.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.011), 12.5% calc(var(--fr-edge) * 0.043), 18.8% calc(var(--fr-edge) * 0.092), 25.0% calc(var(--fr-edge) * 0.156), 31.2% calc(var(--fr-edge) * 0.232), 37.5% calc(var(--fr-edge) * 0.316), 43.8% calc(var(--fr-edge) * 0.407), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.593), 62.5% calc(var(--fr-edge) * 0.684), 68.8% calc(var(--fr-edge) * 0.768), 75.0% calc(var(--fr-edge) * 0.844), 81.2% calc(var(--fr-edge) * 0.908), 87.5% calc(var(--fr-edge) * 0.957), 93.8% calc(var(--fr-edge) * 0.989), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 93.8% calc(var(--fr-edge) * 0.989 + 3px), 87.5% calc(var(--fr-edge) * 0.957 + 3px), 81.2% calc(var(--fr-edge) * 0.908 + 3px), 75.0% calc(var(--fr-edge) * 0.844 + 3px), 68.8% calc(var(--fr-edge) * 0.768 + 3px), 62.5% calc(var(--fr-edge) * 0.684 + 3px), 56.2% calc(var(--fr-edge) * 0.593 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.407 + 3px), 37.5% calc(var(--fr-edge) * 0.316 + 3px), 31.2% calc(var(--fr-edge) * 0.232 + 3px), 25.0% calc(var(--fr-edge) * 0.156 + 3px), 18.8% calc(var(--fr-edge) * 0.092 + 3px), 12.5% calc(var(--fr-edge) * 0.043 + 3px), 6.2% calc(var(--fr-edge) * 0.011 + 3px), 0.0% calc(var(--fr-edge) * 0.000 + 3px));
}

html body .bk-process{
    margin-top: calc(var(--fr-edge) * -1) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.938), 12.5% calc(var(--fr-edge) * 0.875), 18.8% calc(var(--fr-edge) * 0.812), 25.0% calc(var(--fr-edge) * 0.750), 31.2% calc(var(--fr-edge) * 0.688), 37.5% calc(var(--fr-edge) * 0.625), 43.8% calc(var(--fr-edge) * 0.562), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.438), 62.5% calc(var(--fr-edge) * 0.375), 68.8% calc(var(--fr-edge) * 0.312), 75.0% calc(var(--fr-edge) * 0.250), 81.2% calc(var(--fr-edge) * 0.188), 87.5% calc(var(--fr-edge) * 0.125), 93.8% calc(var(--fr-edge) * 0.062), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.938), 12.5% calc(var(--fr-edge) * 0.875), 18.8% calc(var(--fr-edge) * 0.812), 25.0% calc(var(--fr-edge) * 0.750), 31.2% calc(var(--fr-edge) * 0.688), 37.5% calc(var(--fr-edge) * 0.625), 43.8% calc(var(--fr-edge) * 0.562), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.438), 62.5% calc(var(--fr-edge) * 0.375), 68.8% calc(var(--fr-edge) * 0.312), 75.0% calc(var(--fr-edge) * 0.250), 81.2% calc(var(--fr-edge) * 0.188), 87.5% calc(var(--fr-edge) * 0.125), 93.8% calc(var(--fr-edge) * 0.062), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
}
html body .bk-process::before{
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 3;
    inset: 0 0 auto 0 !important;
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: var(--biab-line, .6);
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.938), 12.5% calc(var(--fr-edge) * 0.875), 18.8% calc(var(--fr-edge) * 0.812), 25.0% calc(var(--fr-edge) * 0.750), 31.2% calc(var(--fr-edge) * 0.688), 37.5% calc(var(--fr-edge) * 0.625), 43.8% calc(var(--fr-edge) * 0.562), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.438), 62.5% calc(var(--fr-edge) * 0.375), 68.8% calc(var(--fr-edge) * 0.312), 75.0% calc(var(--fr-edge) * 0.250), 81.2% calc(var(--fr-edge) * 0.188), 87.5% calc(var(--fr-edge) * 0.125), 93.8% calc(var(--fr-edge) * 0.062), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.062 + 3px), 87.5% calc(var(--fr-edge) * 0.125 + 3px), 81.2% calc(var(--fr-edge) * 0.188 + 3px), 75.0% calc(var(--fr-edge) * 0.250 + 3px), 68.8% calc(var(--fr-edge) * 0.312 + 3px), 62.5% calc(var(--fr-edge) * 0.375 + 3px), 56.2% calc(var(--fr-edge) * 0.438 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.562 + 3px), 37.5% calc(var(--fr-edge) * 0.625 + 3px), 31.2% calc(var(--fr-edge) * 0.688 + 3px), 25.0% calc(var(--fr-edge) * 0.750 + 3px), 18.8% calc(var(--fr-edge) * 0.812 + 3px), 12.5% calc(var(--fr-edge) * 0.875 + 3px), 6.2% calc(var(--fr-edge) * 0.938 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.938), 12.5% calc(var(--fr-edge) * 0.875), 18.8% calc(var(--fr-edge) * 0.812), 25.0% calc(var(--fr-edge) * 0.750), 31.2% calc(var(--fr-edge) * 0.688), 37.5% calc(var(--fr-edge) * 0.625), 43.8% calc(var(--fr-edge) * 0.562), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.438), 62.5% calc(var(--fr-edge) * 0.375), 68.8% calc(var(--fr-edge) * 0.312), 75.0% calc(var(--fr-edge) * 0.250), 81.2% calc(var(--fr-edge) * 0.188), 87.5% calc(var(--fr-edge) * 0.125), 93.8% calc(var(--fr-edge) * 0.062), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.062 + 3px), 87.5% calc(var(--fr-edge) * 0.125 + 3px), 81.2% calc(var(--fr-edge) * 0.188 + 3px), 75.0% calc(var(--fr-edge) * 0.250 + 3px), 68.8% calc(var(--fr-edge) * 0.312 + 3px), 62.5% calc(var(--fr-edge) * 0.375 + 3px), 56.2% calc(var(--fr-edge) * 0.438 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.562 + 3px), 37.5% calc(var(--fr-edge) * 0.625 + 3px), 31.2% calc(var(--fr-edge) * 0.688 + 3px), 25.0% calc(var(--fr-edge) * 0.750 + 3px), 18.8% calc(var(--fr-edge) * 0.812 + 3px), 12.5% calc(var(--fr-edge) * 0.875 + 3px), 6.2% calc(var(--fr-edge) * 0.938 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
}

html body .bk-final-cta{
    margin-top: calc(var(--fr-edge) * -1) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 3.1% calc(var(--fr-edge) * 0.844), 6.2% calc(var(--fr-edge) * 0.729), 9.4% calc(var(--fr-edge) * 0.628), 12.5% calc(var(--fr-edge) * 0.536), 15.6% calc(var(--fr-edge) * 0.452), 18.8% calc(var(--fr-edge) * 0.375), 21.9% calc(var(--fr-edge) * 0.305), 25.0% calc(var(--fr-edge) * 0.242), 28.1% calc(var(--fr-edge) * 0.186), 31.2% calc(var(--fr-edge) * 0.137), 34.4% calc(var(--fr-edge) * 0.096), 37.5% calc(var(--fr-edge) * 0.061), 40.6% calc(var(--fr-edge) * 0.035), 43.8% calc(var(--fr-edge) * 0.015), 46.9% calc(var(--fr-edge) * 0.004), 50.0% calc(var(--fr-edge) * 0.000), 53.1% calc(var(--fr-edge) * 0.004), 56.2% calc(var(--fr-edge) * 0.015), 59.4% calc(var(--fr-edge) * 0.035), 62.5% calc(var(--fr-edge) * 0.061), 65.6% calc(var(--fr-edge) * 0.096), 68.8% calc(var(--fr-edge) * 0.137), 71.9% calc(var(--fr-edge) * 0.186), 75.0% calc(var(--fr-edge) * 0.242), 78.1% calc(var(--fr-edge) * 0.305), 81.2% calc(var(--fr-edge) * 0.375), 84.4% calc(var(--fr-edge) * 0.452), 87.5% calc(var(--fr-edge) * 0.536), 90.6% calc(var(--fr-edge) * 0.628), 93.8% calc(var(--fr-edge) * 0.729), 96.9% calc(var(--fr-edge) * 0.844), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 3.1% calc(var(--fr-edge) * 0.844), 6.2% calc(var(--fr-edge) * 0.729), 9.4% calc(var(--fr-edge) * 0.628), 12.5% calc(var(--fr-edge) * 0.536), 15.6% calc(var(--fr-edge) * 0.452), 18.8% calc(var(--fr-edge) * 0.375), 21.9% calc(var(--fr-edge) * 0.305), 25.0% calc(var(--fr-edge) * 0.242), 28.1% calc(var(--fr-edge) * 0.186), 31.2% calc(var(--fr-edge) * 0.137), 34.4% calc(var(--fr-edge) * 0.096), 37.5% calc(var(--fr-edge) * 0.061), 40.6% calc(var(--fr-edge) * 0.035), 43.8% calc(var(--fr-edge) * 0.015), 46.9% calc(var(--fr-edge) * 0.004), 50.0% calc(var(--fr-edge) * 0.000), 53.1% calc(var(--fr-edge) * 0.004), 56.2% calc(var(--fr-edge) * 0.015), 59.4% calc(var(--fr-edge) * 0.035), 62.5% calc(var(--fr-edge) * 0.061), 65.6% calc(var(--fr-edge) * 0.096), 68.8% calc(var(--fr-edge) * 0.137), 71.9% calc(var(--fr-edge) * 0.186), 75.0% calc(var(--fr-edge) * 0.242), 78.1% calc(var(--fr-edge) * 0.305), 81.2% calc(var(--fr-edge) * 0.375), 84.4% calc(var(--fr-edge) * 0.452), 87.5% calc(var(--fr-edge) * 0.536), 90.6% calc(var(--fr-edge) * 0.628), 93.8% calc(var(--fr-edge) * 0.729), 96.9% calc(var(--fr-edge) * 0.844), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
}
html body .bk-final-cta__inner::after{
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 3;
    top: calc(var(--fr-edge) * -1) !important; left: 50% !important; width: 100vw !important; transform: translateX(-50%);
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: var(--biab-line, .6);
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 3.1% calc(var(--fr-edge) * 0.844), 6.2% calc(var(--fr-edge) * 0.729), 9.4% calc(var(--fr-edge) * 0.628), 12.5% calc(var(--fr-edge) * 0.536), 15.6% calc(var(--fr-edge) * 0.452), 18.8% calc(var(--fr-edge) * 0.375), 21.9% calc(var(--fr-edge) * 0.305), 25.0% calc(var(--fr-edge) * 0.242), 28.1% calc(var(--fr-edge) * 0.186), 31.2% calc(var(--fr-edge) * 0.137), 34.4% calc(var(--fr-edge) * 0.096), 37.5% calc(var(--fr-edge) * 0.061), 40.6% calc(var(--fr-edge) * 0.035), 43.8% calc(var(--fr-edge) * 0.015), 46.9% calc(var(--fr-edge) * 0.004), 50.0% calc(var(--fr-edge) * 0.000), 53.1% calc(var(--fr-edge) * 0.004), 56.2% calc(var(--fr-edge) * 0.015), 59.4% calc(var(--fr-edge) * 0.035), 62.5% calc(var(--fr-edge) * 0.061), 65.6% calc(var(--fr-edge) * 0.096), 68.8% calc(var(--fr-edge) * 0.137), 71.9% calc(var(--fr-edge) * 0.186), 75.0% calc(var(--fr-edge) * 0.242), 78.1% calc(var(--fr-edge) * 0.305), 81.2% calc(var(--fr-edge) * 0.375), 84.4% calc(var(--fr-edge) * 0.452), 87.5% calc(var(--fr-edge) * 0.536), 90.6% calc(var(--fr-edge) * 0.628), 93.8% calc(var(--fr-edge) * 0.729), 96.9% calc(var(--fr-edge) * 0.844), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 96.9% calc(var(--fr-edge) * 0.844 + 3px), 93.8% calc(var(--fr-edge) * 0.729 + 3px), 90.6% calc(var(--fr-edge) * 0.628 + 3px), 87.5% calc(var(--fr-edge) * 0.536 + 3px), 84.4% calc(var(--fr-edge) * 0.452 + 3px), 81.2% calc(var(--fr-edge) * 0.375 + 3px), 78.1% calc(var(--fr-edge) * 0.305 + 3px), 75.0% calc(var(--fr-edge) * 0.242 + 3px), 71.9% calc(var(--fr-edge) * 0.186 + 3px), 68.8% calc(var(--fr-edge) * 0.137 + 3px), 65.6% calc(var(--fr-edge) * 0.096 + 3px), 62.5% calc(var(--fr-edge) * 0.061 + 3px), 59.4% calc(var(--fr-edge) * 0.035 + 3px), 56.2% calc(var(--fr-edge) * 0.015 + 3px), 53.1% calc(var(--fr-edge) * 0.004 + 3px), 50.0% calc(var(--fr-edge) * 0.000 + 3px), 46.9% calc(var(--fr-edge) * 0.004 + 3px), 43.8% calc(var(--fr-edge) * 0.015 + 3px), 40.6% calc(var(--fr-edge) * 0.035 + 3px), 37.5% calc(var(--fr-edge) * 0.061 + 3px), 34.4% calc(var(--fr-edge) * 0.096 + 3px), 31.2% calc(var(--fr-edge) * 0.137 + 3px), 28.1% calc(var(--fr-edge) * 0.186 + 3px), 25.0% calc(var(--fr-edge) * 0.242 + 3px), 21.9% calc(var(--fr-edge) * 0.305 + 3px), 18.8% calc(var(--fr-edge) * 0.375 + 3px), 15.6% calc(var(--fr-edge) * 0.452 + 3px), 12.5% calc(var(--fr-edge) * 0.536 + 3px), 9.4% calc(var(--fr-edge) * 0.628 + 3px), 6.2% calc(var(--fr-edge) * 0.729 + 3px), 3.1% calc(var(--fr-edge) * 0.844 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 3.1% calc(var(--fr-edge) * 0.844), 6.2% calc(var(--fr-edge) * 0.729), 9.4% calc(var(--fr-edge) * 0.628), 12.5% calc(var(--fr-edge) * 0.536), 15.6% calc(var(--fr-edge) * 0.452), 18.8% calc(var(--fr-edge) * 0.375), 21.9% calc(var(--fr-edge) * 0.305), 25.0% calc(var(--fr-edge) * 0.242), 28.1% calc(var(--fr-edge) * 0.186), 31.2% calc(var(--fr-edge) * 0.137), 34.4% calc(var(--fr-edge) * 0.096), 37.5% calc(var(--fr-edge) * 0.061), 40.6% calc(var(--fr-edge) * 0.035), 43.8% calc(var(--fr-edge) * 0.015), 46.9% calc(var(--fr-edge) * 0.004), 50.0% calc(var(--fr-edge) * 0.000), 53.1% calc(var(--fr-edge) * 0.004), 56.2% calc(var(--fr-edge) * 0.015), 59.4% calc(var(--fr-edge) * 0.035), 62.5% calc(var(--fr-edge) * 0.061), 65.6% calc(var(--fr-edge) * 0.096), 68.8% calc(var(--fr-edge) * 0.137), 71.9% calc(var(--fr-edge) * 0.186), 75.0% calc(var(--fr-edge) * 0.242), 78.1% calc(var(--fr-edge) * 0.305), 81.2% calc(var(--fr-edge) * 0.375), 84.4% calc(var(--fr-edge) * 0.452), 87.5% calc(var(--fr-edge) * 0.536), 90.6% calc(var(--fr-edge) * 0.628), 93.8% calc(var(--fr-edge) * 0.729), 96.9% calc(var(--fr-edge) * 0.844), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 96.9% calc(var(--fr-edge) * 0.844 + 3px), 93.8% calc(var(--fr-edge) * 0.729 + 3px), 90.6% calc(var(--fr-edge) * 0.628 + 3px), 87.5% calc(var(--fr-edge) * 0.536 + 3px), 84.4% calc(var(--fr-edge) * 0.452 + 3px), 81.2% calc(var(--fr-edge) * 0.375 + 3px), 78.1% calc(var(--fr-edge) * 0.305 + 3px), 75.0% calc(var(--fr-edge) * 0.242 + 3px), 71.9% calc(var(--fr-edge) * 0.186 + 3px), 68.8% calc(var(--fr-edge) * 0.137 + 3px), 65.6% calc(var(--fr-edge) * 0.096 + 3px), 62.5% calc(var(--fr-edge) * 0.061 + 3px), 59.4% calc(var(--fr-edge) * 0.035 + 3px), 56.2% calc(var(--fr-edge) * 0.015 + 3px), 53.1% calc(var(--fr-edge) * 0.004 + 3px), 50.0% calc(var(--fr-edge) * 0.000 + 3px), 46.9% calc(var(--fr-edge) * 0.004 + 3px), 43.8% calc(var(--fr-edge) * 0.015 + 3px), 40.6% calc(var(--fr-edge) * 0.035 + 3px), 37.5% calc(var(--fr-edge) * 0.061 + 3px), 34.4% calc(var(--fr-edge) * 0.096 + 3px), 31.2% calc(var(--fr-edge) * 0.137 + 3px), 28.1% calc(var(--fr-edge) * 0.186 + 3px), 25.0% calc(var(--fr-edge) * 0.242 + 3px), 21.9% calc(var(--fr-edge) * 0.305 + 3px), 18.8% calc(var(--fr-edge) * 0.375 + 3px), 15.6% calc(var(--fr-edge) * 0.452 + 3px), 12.5% calc(var(--fr-edge) * 0.536 + 3px), 9.4% calc(var(--fr-edge) * 0.628 + 3px), 6.2% calc(var(--fr-edge) * 0.729 + 3px), 3.1% calc(var(--fr-edge) * 0.844 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
}

/* ---------- 02 · ONE ICON LANGUAGE ---------- */

/* one badge size, one glass finish, one line weight */
html body .bk-solves__icon,
html body .bk-build__icon,
html body .bk-outcome__icon,
html body .bk-process__icon {
    position: relative;
    display: grid !important;
    place-items: center;
    width: 76px !important;
    height: 76px !important;
    min-width: 76px !important;
    border-radius: 50% !important;
    color: #84634E;
    background: linear-gradient(145deg, #FFF7EF 0%, #F3E2D5 60%, #EAD2C2 100%) !important;
    border: 1px solid rgba(181, 143, 119, .18) !important;
    box-shadow: 0 5px 12px rgba(75, 49, 34, .035), 0 18px 30px rgba(75, 49, 34, .075),
                inset 0 2px 2px rgba(255, 255, 255, .9), inset 0 -4px 9px rgba(136, 91, 62, .04) !important;
}
html body .bk-solves__icon::before,
html body .bk-build__icon::before,
html body .bk-outcome__icon::before,
html body .bk-process__icon::before {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .42);
    pointer-events: none;
}
/* sage variant on alternating items */
html body .bk-solves__card:nth-child(even) .bk-solves__icon,
html body .bk-build__card:nth-child(even) .bk-build__icon,
html body .bk-outcome__card:nth-child(even) .bk-outcome__icon,
html body .bk-process__step:nth-child(even) .bk-process__icon {
    color: #566449;
    background: linear-gradient(145deg, #F7F9F2 0%, #E6EBDD 55%, #D4DFC8 100%) !important;
    border-color: rgba(111, 137, 101, .18) !important;
    box-shadow: 0 5px 12px rgba(58, 78, 51, .035), 0 18px 30px rgba(58, 78, 51, .075),
                inset 0 2px 2px rgba(255, 255, 255, .9), inset 0 -4px 9px rgba(68, 98, 59, .04) !important;
}
html body .bk-solves__icon svg,
html body .bk-build__icon svg,
html body .bk-outcome__icon svg,
html body .bk-process__icon svg {
    width: 34px !important;
    height: 34px !important;
    max-width: none;
    stroke: currentColor !important;
    stroke-width: 1.7px !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}
html body .bk-solves__icon svg *,
html body .bk-build__icon svg *,
html body .bk-outcome__icon svg *,
html body .bk-process__icon svg * { stroke-width: 1.7px; }

/* ---------- 03 · CARDS: the soft "leaf" corner ---------- */

html body .bk-solves__card,
html body .bk-build__card,
html body .bk-outcome__card {
    border-radius: 40px 10px 40px 10px !important;
}

@media screen and (max-width: 1100px) {
    html body .bk-solves__icon,
    html body .bk-build__icon,
    html body .bk-outcome__icon,
    html body .bk-process__icon {
        width: 68px !important; height: 68px !important; min-width: 68px !important;
    }
    html body .bk-solves__icon svg,
    html body .bk-build__icon svg,
    html body .bk-outcome__icon svg,
    html body .bk-process__icon svg { width: 30px !important; height: 30px !important; }
}
@media screen and (max-width: 599px) {
    html body .bk-solves__card,
    html body .bk-build__card,
    html body .bk-outcome__card { border-radius: 32px 8px 32px 8px !important; }
    html body .bk-solves__icon,
    html body .bk-build__icon,
    html body .bk-outcome__icon,
    html body .bk-process__icon {
        width: 60px !important; height: 60px !important; min-width: 60px !important;
    }
    html body .bk-solves__icon svg,
    html body .bk-build__icon svg,
    html body .bk-outcome__icon svg,
    html body .bk-process__icon svg { width: 27px !important; height: 27px !important; }
}

/* tablet / mobile: the process row scrolls sideways, so keep the badge shadow inside it */
@media screen and (max-width: 1100px) {
    html body .bk-process__icon {
        box-shadow: 0 3px 8px rgba(75, 49, 34, .05), 0 7px 12px rgba(75, 49, 34, .06),
                    inset 0 2px 2px rgba(255, 255, 255, .9), inset 0 -4px 9px rgba(136, 91, 62, .04) !important;
    }
    html body .bk-process__step:nth-child(even) .bk-process__icon {
        box-shadow: 0 3px 8px rgba(58, 78, 51, .05), 0 7px 12px rgba(58, 78, 51, .06),
                    inset 0 2px 2px rgba(255, 255, 255, .9), inset 0 -4px 9px rgba(68, 98, 59, .04) !important;
    }
}

/* ---------- 04 · SPACING ---------- */

/* the curve already adds space above each section, so the old top padding is trimmed */
html body .bk-solves,
html body .bk-build,
html body .bk-outcome,
html body .bk-process { padding-top: 34px !important; }
@media screen and (max-width: 899px) {
    html body .bk-solves,
    html body .bk-build,
    html body .bk-outcome,
    html body .bk-process { padding-top: 40px !important; }
}

/* the next section's curve rises into the hero, so give the hero's content room above it */
html body .bk-hero { box-sizing: content-box !important; padding-bottom: calc(var(--fr-edge) * .85) !important; }

/* a little more room under "What This Solves" before the next curve */
html body .bk-solves { padding-bottom: calc(95px + var(--fr-edge) * .8) !important; }
@media screen and (max-width: 599px) {
    html body .bk-solves { padding-bottom: calc(88px + var(--fr-edge) * .8) !important; }
}

/* a little more room under "Our Process" before the final curve */
html body .bk-process { padding-bottom: calc(90px + var(--fr-edge) * .8) !important; }
@media screen and (max-width: 1100px) {
    html body .bk-process { padding-bottom: calc(85px + var(--fr-edge) * .8) !important; }
}
@media screen and (max-width: 599px) {
    html body .bk-process { padding-bottom: calc(75px + var(--fr-edge) * .8) !important; }
}

/* =========================================================
   FRAYORA — OPERATIONS & SOPS ELEVATION v1
   PASTE AT THE VERY BOTTOM OF main.css

   - No words, photos, typography or buttons are changed.
   - Sections get the same shaped edges as the homepage and
     the other service pages (desktop, tablet, mobile).
   - Every icon on the page is the same size, the same glass
     badge and the same fine round line style.
========================================================= */

:root { --fr-edge: 64px; }
@media screen and (max-width: 1100px) { :root { --fr-edge: 52px; } }
@media screen and (max-width: 899px)  { :root { --fr-edge: 44px; } }
@media screen and (max-width: 599px)  { :root { --fr-edge: 34px; } }

/* ---------- 01 · SECTION SHAPES ---------- */

html body .operations-sops-page .sops-solves__inner,
html body .operations-sops-page .sops-build__inner,
html body .operations-sops-page .sops-impact__inner,
html body .operations-sops-page .sops-process__inner,
html body .operations-sops-page .sops-final-cta__inner {
    margin-top: var(--fr-edge) !important;
}

/* alternating cream tones so every shape reads */
html body .operations-sops-page .sops-solves  { background-color: #FAF7F2 !important; --biab-line: .85; }
html body .operations-sops-page .sops-build   { background-color: #F5EDE4 !important; }
html body .operations-sops-page .sops-impact  { background-color: #FAF7F2 !important; --biab-line: .85; }
html body .operations-sops-page .sops-process { background-color: #F5EDE4 !important; }
html body .operations-sops-page .sops-final-cta__inner { position: relative; }

html body .operations-sops-page .sops-solves{
    margin-top: calc(var(--fr-edge) * -1) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.989), 12.5% calc(var(--fr-edge) * 0.957), 18.8% calc(var(--fr-edge) * 0.908), 25.0% calc(var(--fr-edge) * 0.844), 31.2% calc(var(--fr-edge) * 0.768), 37.5% calc(var(--fr-edge) * 0.684), 43.8% calc(var(--fr-edge) * 0.593), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.407), 62.5% calc(var(--fr-edge) * 0.316), 68.8% calc(var(--fr-edge) * 0.232), 75.0% calc(var(--fr-edge) * 0.156), 81.2% calc(var(--fr-edge) * 0.092), 87.5% calc(var(--fr-edge) * 0.043), 93.8% calc(var(--fr-edge) * 0.011), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.989), 12.5% calc(var(--fr-edge) * 0.957), 18.8% calc(var(--fr-edge) * 0.908), 25.0% calc(var(--fr-edge) * 0.844), 31.2% calc(var(--fr-edge) * 0.768), 37.5% calc(var(--fr-edge) * 0.684), 43.8% calc(var(--fr-edge) * 0.593), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.407), 62.5% calc(var(--fr-edge) * 0.316), 68.8% calc(var(--fr-edge) * 0.232), 75.0% calc(var(--fr-edge) * 0.156), 81.2% calc(var(--fr-edge) * 0.092), 87.5% calc(var(--fr-edge) * 0.043), 93.8% calc(var(--fr-edge) * 0.011), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
}
html body .operations-sops-page .sops-solves::before{
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 3;
    inset: 0 0 auto 0 !important;
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: var(--biab-line, .6);
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.989), 12.5% calc(var(--fr-edge) * 0.957), 18.8% calc(var(--fr-edge) * 0.908), 25.0% calc(var(--fr-edge) * 0.844), 31.2% calc(var(--fr-edge) * 0.768), 37.5% calc(var(--fr-edge) * 0.684), 43.8% calc(var(--fr-edge) * 0.593), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.407), 62.5% calc(var(--fr-edge) * 0.316), 68.8% calc(var(--fr-edge) * 0.232), 75.0% calc(var(--fr-edge) * 0.156), 81.2% calc(var(--fr-edge) * 0.092), 87.5% calc(var(--fr-edge) * 0.043), 93.8% calc(var(--fr-edge) * 0.011), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.011 + 3px), 87.5% calc(var(--fr-edge) * 0.043 + 3px), 81.2% calc(var(--fr-edge) * 0.092 + 3px), 75.0% calc(var(--fr-edge) * 0.156 + 3px), 68.8% calc(var(--fr-edge) * 0.232 + 3px), 62.5% calc(var(--fr-edge) * 0.316 + 3px), 56.2% calc(var(--fr-edge) * 0.407 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.593 + 3px), 37.5% calc(var(--fr-edge) * 0.684 + 3px), 31.2% calc(var(--fr-edge) * 0.768 + 3px), 25.0% calc(var(--fr-edge) * 0.844 + 3px), 18.8% calc(var(--fr-edge) * 0.908 + 3px), 12.5% calc(var(--fr-edge) * 0.957 + 3px), 6.2% calc(var(--fr-edge) * 0.989 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.989), 12.5% calc(var(--fr-edge) * 0.957), 18.8% calc(var(--fr-edge) * 0.908), 25.0% calc(var(--fr-edge) * 0.844), 31.2% calc(var(--fr-edge) * 0.768), 37.5% calc(var(--fr-edge) * 0.684), 43.8% calc(var(--fr-edge) * 0.593), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.407), 62.5% calc(var(--fr-edge) * 0.316), 68.8% calc(var(--fr-edge) * 0.232), 75.0% calc(var(--fr-edge) * 0.156), 81.2% calc(var(--fr-edge) * 0.092), 87.5% calc(var(--fr-edge) * 0.043), 93.8% calc(var(--fr-edge) * 0.011), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.011 + 3px), 87.5% calc(var(--fr-edge) * 0.043 + 3px), 81.2% calc(var(--fr-edge) * 0.092 + 3px), 75.0% calc(var(--fr-edge) * 0.156 + 3px), 68.8% calc(var(--fr-edge) * 0.232 + 3px), 62.5% calc(var(--fr-edge) * 0.316 + 3px), 56.2% calc(var(--fr-edge) * 0.407 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.593 + 3px), 37.5% calc(var(--fr-edge) * 0.684 + 3px), 31.2% calc(var(--fr-edge) * 0.768 + 3px), 25.0% calc(var(--fr-edge) * 0.844 + 3px), 18.8% calc(var(--fr-edge) * 0.908 + 3px), 12.5% calc(var(--fr-edge) * 0.957 + 3px), 6.2% calc(var(--fr-edge) * 0.989 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
}

html body .operations-sops-page .sops-build{
    margin-top: calc(var(--fr-edge) * -1) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
}
html body .operations-sops-page .sops-build__inner::after{
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 3;
    top: calc(var(--fr-edge) * -1) !important; left: 50% !important; width: 100vw !important; transform: translateX(-50%);
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: var(--biab-line, .6);
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 93.8% calc(var(--fr-edge) * 0.805 + 3px), 87.5% calc(var(--fr-edge) * 0.617 + 3px), 81.2% calc(var(--fr-edge) * 0.444 + 3px), 75.0% calc(var(--fr-edge) * 0.293 + 3px), 68.8% calc(var(--fr-edge) * 0.169 + 3px), 62.5% calc(var(--fr-edge) * 0.076 + 3px), 56.2% calc(var(--fr-edge) * 0.019 + 3px), 50.0% calc(var(--fr-edge) * 0.000 + 3px), 43.8% calc(var(--fr-edge) * 0.019 + 3px), 37.5% calc(var(--fr-edge) * 0.076 + 3px), 31.2% calc(var(--fr-edge) * 0.169 + 3px), 25.0% calc(var(--fr-edge) * 0.293 + 3px), 18.8% calc(var(--fr-edge) * 0.444 + 3px), 12.5% calc(var(--fr-edge) * 0.617 + 3px), 6.2% calc(var(--fr-edge) * 0.805 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 93.8% calc(var(--fr-edge) * 0.805 + 3px), 87.5% calc(var(--fr-edge) * 0.617 + 3px), 81.2% calc(var(--fr-edge) * 0.444 + 3px), 75.0% calc(var(--fr-edge) * 0.293 + 3px), 68.8% calc(var(--fr-edge) * 0.169 + 3px), 62.5% calc(var(--fr-edge) * 0.076 + 3px), 56.2% calc(var(--fr-edge) * 0.019 + 3px), 50.0% calc(var(--fr-edge) * 0.000 + 3px), 43.8% calc(var(--fr-edge) * 0.019 + 3px), 37.5% calc(var(--fr-edge) * 0.076 + 3px), 31.2% calc(var(--fr-edge) * 0.169 + 3px), 25.0% calc(var(--fr-edge) * 0.293 + 3px), 18.8% calc(var(--fr-edge) * 0.444 + 3px), 12.5% calc(var(--fr-edge) * 0.617 + 3px), 6.2% calc(var(--fr-edge) * 0.805 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
}

html body .operations-sops-page .sops-impact{
    margin-top: calc(var(--fr-edge) * -1) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.011), 12.5% calc(var(--fr-edge) * 0.043), 18.8% calc(var(--fr-edge) * 0.092), 25.0% calc(var(--fr-edge) * 0.156), 31.2% calc(var(--fr-edge) * 0.232), 37.5% calc(var(--fr-edge) * 0.316), 43.8% calc(var(--fr-edge) * 0.407), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.593), 62.5% calc(var(--fr-edge) * 0.684), 68.8% calc(var(--fr-edge) * 0.768), 75.0% calc(var(--fr-edge) * 0.844), 81.2% calc(var(--fr-edge) * 0.908), 87.5% calc(var(--fr-edge) * 0.957), 93.8% calc(var(--fr-edge) * 0.989), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.011), 12.5% calc(var(--fr-edge) * 0.043), 18.8% calc(var(--fr-edge) * 0.092), 25.0% calc(var(--fr-edge) * 0.156), 31.2% calc(var(--fr-edge) * 0.232), 37.5% calc(var(--fr-edge) * 0.316), 43.8% calc(var(--fr-edge) * 0.407), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.593), 62.5% calc(var(--fr-edge) * 0.684), 68.8% calc(var(--fr-edge) * 0.768), 75.0% calc(var(--fr-edge) * 0.844), 81.2% calc(var(--fr-edge) * 0.908), 87.5% calc(var(--fr-edge) * 0.957), 93.8% calc(var(--fr-edge) * 0.989), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
}
html body .operations-sops-page .sops-impact::before{
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 3;
    inset: 0 0 auto 0 !important;
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: var(--biab-line, .6);
    clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.011), 12.5% calc(var(--fr-edge) * 0.043), 18.8% calc(var(--fr-edge) * 0.092), 25.0% calc(var(--fr-edge) * 0.156), 31.2% calc(var(--fr-edge) * 0.232), 37.5% calc(var(--fr-edge) * 0.316), 43.8% calc(var(--fr-edge) * 0.407), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.593), 62.5% calc(var(--fr-edge) * 0.684), 68.8% calc(var(--fr-edge) * 0.768), 75.0% calc(var(--fr-edge) * 0.844), 81.2% calc(var(--fr-edge) * 0.908), 87.5% calc(var(--fr-edge) * 0.957), 93.8% calc(var(--fr-edge) * 0.989), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 93.8% calc(var(--fr-edge) * 0.989 + 3px), 87.5% calc(var(--fr-edge) * 0.957 + 3px), 81.2% calc(var(--fr-edge) * 0.908 + 3px), 75.0% calc(var(--fr-edge) * 0.844 + 3px), 68.8% calc(var(--fr-edge) * 0.768 + 3px), 62.5% calc(var(--fr-edge) * 0.684 + 3px), 56.2% calc(var(--fr-edge) * 0.593 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.407 + 3px), 37.5% calc(var(--fr-edge) * 0.316 + 3px), 31.2% calc(var(--fr-edge) * 0.232 + 3px), 25.0% calc(var(--fr-edge) * 0.156 + 3px), 18.8% calc(var(--fr-edge) * 0.092 + 3px), 12.5% calc(var(--fr-edge) * 0.043 + 3px), 6.2% calc(var(--fr-edge) * 0.011 + 3px), 0.0% calc(var(--fr-edge) * 0.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.011), 12.5% calc(var(--fr-edge) * 0.043), 18.8% calc(var(--fr-edge) * 0.092), 25.0% calc(var(--fr-edge) * 0.156), 31.2% calc(var(--fr-edge) * 0.232), 37.5% calc(var(--fr-edge) * 0.316), 43.8% calc(var(--fr-edge) * 0.407), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.593), 62.5% calc(var(--fr-edge) * 0.684), 68.8% calc(var(--fr-edge) * 0.768), 75.0% calc(var(--fr-edge) * 0.844), 81.2% calc(var(--fr-edge) * 0.908), 87.5% calc(var(--fr-edge) * 0.957), 93.8% calc(var(--fr-edge) * 0.989), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 93.8% calc(var(--fr-edge) * 0.989 + 3px), 87.5% calc(var(--fr-edge) * 0.957 + 3px), 81.2% calc(var(--fr-edge) * 0.908 + 3px), 75.0% calc(var(--fr-edge) * 0.844 + 3px), 68.8% calc(var(--fr-edge) * 0.768 + 3px), 62.5% calc(var(--fr-edge) * 0.684 + 3px), 56.2% calc(var(--fr-edge) * 0.593 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.407 + 3px), 37.5% calc(var(--fr-edge) * 0.316 + 3px), 31.2% calc(var(--fr-edge) * 0.232 + 3px), 25.0% calc(var(--fr-edge) * 0.156 + 3px), 18.8% calc(var(--fr-edge) * 0.092 + 3px), 12.5% calc(var(--fr-edge) * 0.043 + 3px), 6.2% calc(var(--fr-edge) * 0.011 + 3px), 0.0% calc(var(--fr-edge) * 0.000 + 3px));
}

html body .operations-sops-page .sops-process{
    margin-top: calc(var(--fr-edge) * -1) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.938), 12.5% calc(var(--fr-edge) * 0.875), 18.8% calc(var(--fr-edge) * 0.812), 25.0% calc(var(--fr-edge) * 0.750), 31.2% calc(var(--fr-edge) * 0.688), 37.5% calc(var(--fr-edge) * 0.625), 43.8% calc(var(--fr-edge) * 0.562), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.438), 62.5% calc(var(--fr-edge) * 0.375), 68.8% calc(var(--fr-edge) * 0.312), 75.0% calc(var(--fr-edge) * 0.250), 81.2% calc(var(--fr-edge) * 0.188), 87.5% calc(var(--fr-edge) * 0.125), 93.8% calc(var(--fr-edge) * 0.062), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.938), 12.5% calc(var(--fr-edge) * 0.875), 18.8% calc(var(--fr-edge) * 0.812), 25.0% calc(var(--fr-edge) * 0.750), 31.2% calc(var(--fr-edge) * 0.688), 37.5% calc(var(--fr-edge) * 0.625), 43.8% calc(var(--fr-edge) * 0.562), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.438), 62.5% calc(var(--fr-edge) * 0.375), 68.8% calc(var(--fr-edge) * 0.312), 75.0% calc(var(--fr-edge) * 0.250), 81.2% calc(var(--fr-edge) * 0.188), 87.5% calc(var(--fr-edge) * 0.125), 93.8% calc(var(--fr-edge) * 0.062), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
}
html body .operations-sops-page .sops-process::before{
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 3;
    inset: 0 0 auto 0 !important;
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: var(--biab-line, .6);
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.938), 12.5% calc(var(--fr-edge) * 0.875), 18.8% calc(var(--fr-edge) * 0.812), 25.0% calc(var(--fr-edge) * 0.750), 31.2% calc(var(--fr-edge) * 0.688), 37.5% calc(var(--fr-edge) * 0.625), 43.8% calc(var(--fr-edge) * 0.562), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.438), 62.5% calc(var(--fr-edge) * 0.375), 68.8% calc(var(--fr-edge) * 0.312), 75.0% calc(var(--fr-edge) * 0.250), 81.2% calc(var(--fr-edge) * 0.188), 87.5% calc(var(--fr-edge) * 0.125), 93.8% calc(var(--fr-edge) * 0.062), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.062 + 3px), 87.5% calc(var(--fr-edge) * 0.125 + 3px), 81.2% calc(var(--fr-edge) * 0.188 + 3px), 75.0% calc(var(--fr-edge) * 0.250 + 3px), 68.8% calc(var(--fr-edge) * 0.312 + 3px), 62.5% calc(var(--fr-edge) * 0.375 + 3px), 56.2% calc(var(--fr-edge) * 0.438 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.562 + 3px), 37.5% calc(var(--fr-edge) * 0.625 + 3px), 31.2% calc(var(--fr-edge) * 0.688 + 3px), 25.0% calc(var(--fr-edge) * 0.750 + 3px), 18.8% calc(var(--fr-edge) * 0.812 + 3px), 12.5% calc(var(--fr-edge) * 0.875 + 3px), 6.2% calc(var(--fr-edge) * 0.938 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.938), 12.5% calc(var(--fr-edge) * 0.875), 18.8% calc(var(--fr-edge) * 0.812), 25.0% calc(var(--fr-edge) * 0.750), 31.2% calc(var(--fr-edge) * 0.688), 37.5% calc(var(--fr-edge) * 0.625), 43.8% calc(var(--fr-edge) * 0.562), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.438), 62.5% calc(var(--fr-edge) * 0.375), 68.8% calc(var(--fr-edge) * 0.312), 75.0% calc(var(--fr-edge) * 0.250), 81.2% calc(var(--fr-edge) * 0.188), 87.5% calc(var(--fr-edge) * 0.125), 93.8% calc(var(--fr-edge) * 0.062), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.062 + 3px), 87.5% calc(var(--fr-edge) * 0.125 + 3px), 81.2% calc(var(--fr-edge) * 0.188 + 3px), 75.0% calc(var(--fr-edge) * 0.250 + 3px), 68.8% calc(var(--fr-edge) * 0.312 + 3px), 62.5% calc(var(--fr-edge) * 0.375 + 3px), 56.2% calc(var(--fr-edge) * 0.438 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.562 + 3px), 37.5% calc(var(--fr-edge) * 0.625 + 3px), 31.2% calc(var(--fr-edge) * 0.688 + 3px), 25.0% calc(var(--fr-edge) * 0.750 + 3px), 18.8% calc(var(--fr-edge) * 0.812 + 3px), 12.5% calc(var(--fr-edge) * 0.875 + 3px), 6.2% calc(var(--fr-edge) * 0.938 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
}

html body .operations-sops-page .sops-final-cta{
    margin-top: calc(var(--fr-edge) * -1) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 3.1% calc(var(--fr-edge) * 0.844), 6.2% calc(var(--fr-edge) * 0.729), 9.4% calc(var(--fr-edge) * 0.628), 12.5% calc(var(--fr-edge) * 0.536), 15.6% calc(var(--fr-edge) * 0.452), 18.8% calc(var(--fr-edge) * 0.375), 21.9% calc(var(--fr-edge) * 0.305), 25.0% calc(var(--fr-edge) * 0.242), 28.1% calc(var(--fr-edge) * 0.186), 31.2% calc(var(--fr-edge) * 0.137), 34.4% calc(var(--fr-edge) * 0.096), 37.5% calc(var(--fr-edge) * 0.061), 40.6% calc(var(--fr-edge) * 0.035), 43.8% calc(var(--fr-edge) * 0.015), 46.9% calc(var(--fr-edge) * 0.004), 50.0% calc(var(--fr-edge) * 0.000), 53.1% calc(var(--fr-edge) * 0.004), 56.2% calc(var(--fr-edge) * 0.015), 59.4% calc(var(--fr-edge) * 0.035), 62.5% calc(var(--fr-edge) * 0.061), 65.6% calc(var(--fr-edge) * 0.096), 68.8% calc(var(--fr-edge) * 0.137), 71.9% calc(var(--fr-edge) * 0.186), 75.0% calc(var(--fr-edge) * 0.242), 78.1% calc(var(--fr-edge) * 0.305), 81.2% calc(var(--fr-edge) * 0.375), 84.4% calc(var(--fr-edge) * 0.452), 87.5% calc(var(--fr-edge) * 0.536), 90.6% calc(var(--fr-edge) * 0.628), 93.8% calc(var(--fr-edge) * 0.729), 96.9% calc(var(--fr-edge) * 0.844), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 3.1% calc(var(--fr-edge) * 0.844), 6.2% calc(var(--fr-edge) * 0.729), 9.4% calc(var(--fr-edge) * 0.628), 12.5% calc(var(--fr-edge) * 0.536), 15.6% calc(var(--fr-edge) * 0.452), 18.8% calc(var(--fr-edge) * 0.375), 21.9% calc(var(--fr-edge) * 0.305), 25.0% calc(var(--fr-edge) * 0.242), 28.1% calc(var(--fr-edge) * 0.186), 31.2% calc(var(--fr-edge) * 0.137), 34.4% calc(var(--fr-edge) * 0.096), 37.5% calc(var(--fr-edge) * 0.061), 40.6% calc(var(--fr-edge) * 0.035), 43.8% calc(var(--fr-edge) * 0.015), 46.9% calc(var(--fr-edge) * 0.004), 50.0% calc(var(--fr-edge) * 0.000), 53.1% calc(var(--fr-edge) * 0.004), 56.2% calc(var(--fr-edge) * 0.015), 59.4% calc(var(--fr-edge) * 0.035), 62.5% calc(var(--fr-edge) * 0.061), 65.6% calc(var(--fr-edge) * 0.096), 68.8% calc(var(--fr-edge) * 0.137), 71.9% calc(var(--fr-edge) * 0.186), 75.0% calc(var(--fr-edge) * 0.242), 78.1% calc(var(--fr-edge) * 0.305), 81.2% calc(var(--fr-edge) * 0.375), 84.4% calc(var(--fr-edge) * 0.452), 87.5% calc(var(--fr-edge) * 0.536), 90.6% calc(var(--fr-edge) * 0.628), 93.8% calc(var(--fr-edge) * 0.729), 96.9% calc(var(--fr-edge) * 0.844), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
}
html body .operations-sops-page .sops-final-cta__inner::after{
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 3;
    top: calc(var(--fr-edge) * -1) !important; left: 50% !important; width: 100vw !important; transform: translateX(-50%);
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: var(--biab-line, .6);
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 3.1% calc(var(--fr-edge) * 0.844), 6.2% calc(var(--fr-edge) * 0.729), 9.4% calc(var(--fr-edge) * 0.628), 12.5% calc(var(--fr-edge) * 0.536), 15.6% calc(var(--fr-edge) * 0.452), 18.8% calc(var(--fr-edge) * 0.375), 21.9% calc(var(--fr-edge) * 0.305), 25.0% calc(var(--fr-edge) * 0.242), 28.1% calc(var(--fr-edge) * 0.186), 31.2% calc(var(--fr-edge) * 0.137), 34.4% calc(var(--fr-edge) * 0.096), 37.5% calc(var(--fr-edge) * 0.061), 40.6% calc(var(--fr-edge) * 0.035), 43.8% calc(var(--fr-edge) * 0.015), 46.9% calc(var(--fr-edge) * 0.004), 50.0% calc(var(--fr-edge) * 0.000), 53.1% calc(var(--fr-edge) * 0.004), 56.2% calc(var(--fr-edge) * 0.015), 59.4% calc(var(--fr-edge) * 0.035), 62.5% calc(var(--fr-edge) * 0.061), 65.6% calc(var(--fr-edge) * 0.096), 68.8% calc(var(--fr-edge) * 0.137), 71.9% calc(var(--fr-edge) * 0.186), 75.0% calc(var(--fr-edge) * 0.242), 78.1% calc(var(--fr-edge) * 0.305), 81.2% calc(var(--fr-edge) * 0.375), 84.4% calc(var(--fr-edge) * 0.452), 87.5% calc(var(--fr-edge) * 0.536), 90.6% calc(var(--fr-edge) * 0.628), 93.8% calc(var(--fr-edge) * 0.729), 96.9% calc(var(--fr-edge) * 0.844), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 96.9% calc(var(--fr-edge) * 0.844 + 3px), 93.8% calc(var(--fr-edge) * 0.729 + 3px), 90.6% calc(var(--fr-edge) * 0.628 + 3px), 87.5% calc(var(--fr-edge) * 0.536 + 3px), 84.4% calc(var(--fr-edge) * 0.452 + 3px), 81.2% calc(var(--fr-edge) * 0.375 + 3px), 78.1% calc(var(--fr-edge) * 0.305 + 3px), 75.0% calc(var(--fr-edge) * 0.242 + 3px), 71.9% calc(var(--fr-edge) * 0.186 + 3px), 68.8% calc(var(--fr-edge) * 0.137 + 3px), 65.6% calc(var(--fr-edge) * 0.096 + 3px), 62.5% calc(var(--fr-edge) * 0.061 + 3px), 59.4% calc(var(--fr-edge) * 0.035 + 3px), 56.2% calc(var(--fr-edge) * 0.015 + 3px), 53.1% calc(var(--fr-edge) * 0.004 + 3px), 50.0% calc(var(--fr-edge) * 0.000 + 3px), 46.9% calc(var(--fr-edge) * 0.004 + 3px), 43.8% calc(var(--fr-edge) * 0.015 + 3px), 40.6% calc(var(--fr-edge) * 0.035 + 3px), 37.5% calc(var(--fr-edge) * 0.061 + 3px), 34.4% calc(var(--fr-edge) * 0.096 + 3px), 31.2% calc(var(--fr-edge) * 0.137 + 3px), 28.1% calc(var(--fr-edge) * 0.186 + 3px), 25.0% calc(var(--fr-edge) * 0.242 + 3px), 21.9% calc(var(--fr-edge) * 0.305 + 3px), 18.8% calc(var(--fr-edge) * 0.375 + 3px), 15.6% calc(var(--fr-edge) * 0.452 + 3px), 12.5% calc(var(--fr-edge) * 0.536 + 3px), 9.4% calc(var(--fr-edge) * 0.628 + 3px), 6.2% calc(var(--fr-edge) * 0.729 + 3px), 3.1% calc(var(--fr-edge) * 0.844 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 3.1% calc(var(--fr-edge) * 0.844), 6.2% calc(var(--fr-edge) * 0.729), 9.4% calc(var(--fr-edge) * 0.628), 12.5% calc(var(--fr-edge) * 0.536), 15.6% calc(var(--fr-edge) * 0.452), 18.8% calc(var(--fr-edge) * 0.375), 21.9% calc(var(--fr-edge) * 0.305), 25.0% calc(var(--fr-edge) * 0.242), 28.1% calc(var(--fr-edge) * 0.186), 31.2% calc(var(--fr-edge) * 0.137), 34.4% calc(var(--fr-edge) * 0.096), 37.5% calc(var(--fr-edge) * 0.061), 40.6% calc(var(--fr-edge) * 0.035), 43.8% calc(var(--fr-edge) * 0.015), 46.9% calc(var(--fr-edge) * 0.004), 50.0% calc(var(--fr-edge) * 0.000), 53.1% calc(var(--fr-edge) * 0.004), 56.2% calc(var(--fr-edge) * 0.015), 59.4% calc(var(--fr-edge) * 0.035), 62.5% calc(var(--fr-edge) * 0.061), 65.6% calc(var(--fr-edge) * 0.096), 68.8% calc(var(--fr-edge) * 0.137), 71.9% calc(var(--fr-edge) * 0.186), 75.0% calc(var(--fr-edge) * 0.242), 78.1% calc(var(--fr-edge) * 0.305), 81.2% calc(var(--fr-edge) * 0.375), 84.4% calc(var(--fr-edge) * 0.452), 87.5% calc(var(--fr-edge) * 0.536), 90.6% calc(var(--fr-edge) * 0.628), 93.8% calc(var(--fr-edge) * 0.729), 96.9% calc(var(--fr-edge) * 0.844), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 96.9% calc(var(--fr-edge) * 0.844 + 3px), 93.8% calc(var(--fr-edge) * 0.729 + 3px), 90.6% calc(var(--fr-edge) * 0.628 + 3px), 87.5% calc(var(--fr-edge) * 0.536 + 3px), 84.4% calc(var(--fr-edge) * 0.452 + 3px), 81.2% calc(var(--fr-edge) * 0.375 + 3px), 78.1% calc(var(--fr-edge) * 0.305 + 3px), 75.0% calc(var(--fr-edge) * 0.242 + 3px), 71.9% calc(var(--fr-edge) * 0.186 + 3px), 68.8% calc(var(--fr-edge) * 0.137 + 3px), 65.6% calc(var(--fr-edge) * 0.096 + 3px), 62.5% calc(var(--fr-edge) * 0.061 + 3px), 59.4% calc(var(--fr-edge) * 0.035 + 3px), 56.2% calc(var(--fr-edge) * 0.015 + 3px), 53.1% calc(var(--fr-edge) * 0.004 + 3px), 50.0% calc(var(--fr-edge) * 0.000 + 3px), 46.9% calc(var(--fr-edge) * 0.004 + 3px), 43.8% calc(var(--fr-edge) * 0.015 + 3px), 40.6% calc(var(--fr-edge) * 0.035 + 3px), 37.5% calc(var(--fr-edge) * 0.061 + 3px), 34.4% calc(var(--fr-edge) * 0.096 + 3px), 31.2% calc(var(--fr-edge) * 0.137 + 3px), 28.1% calc(var(--fr-edge) * 0.186 + 3px), 25.0% calc(var(--fr-edge) * 0.242 + 3px), 21.9% calc(var(--fr-edge) * 0.305 + 3px), 18.8% calc(var(--fr-edge) * 0.375 + 3px), 15.6% calc(var(--fr-edge) * 0.452 + 3px), 12.5% calc(var(--fr-edge) * 0.536 + 3px), 9.4% calc(var(--fr-edge) * 0.628 + 3px), 6.2% calc(var(--fr-edge) * 0.729 + 3px), 3.1% calc(var(--fr-edge) * 0.844 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
}

/* ---------- 02 · ONE ICON LANGUAGE ---------- */

html body .operations-sops-page .sops-solves__icon,
html body .operations-sops-page .sops-build__icon,
html body .operations-sops-page .sops-impact__icon,
html body .operations-sops-page .sops-process__icon {
    position: relative;
    display: grid !important;
    place-items: center;
    width: 76px !important;
    height: 76px !important;
    min-width: 76px !important;
    border-radius: 50% !important;
    color: #84634E !important;
    background: linear-gradient(145deg, #FFF7EF 0%, #F3E2D5 60%, #EAD2C2 100%) !important;
    border: 1px solid rgba(181, 143, 119, .18) !important;
    box-shadow: 0 5px 12px rgba(75, 49, 34, .035), 0 18px 30px rgba(75, 49, 34, .075),
                inset 0 2px 2px rgba(255, 255, 255, .9), inset 0 -4px 9px rgba(136, 91, 62, .04) !important;
}
html body .operations-sops-page .sops-solves__icon::before,
html body .operations-sops-page .sops-build__icon::before,
html body .operations-sops-page .sops-impact__icon::before,
html body .operations-sops-page .sops-process__icon::before {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .42);
    pointer-events: none;
}
html body .operations-sops-page .sops-solves__card:nth-child(even) .sops-solves__icon,
html body .operations-sops-page .sops-build__item:nth-child(even) .sops-build__icon,
html body .operations-sops-page .sops-impact__card:nth-child(even) .sops-impact__icon,
html body .operations-sops-page .sops-process__step:nth-child(even) .sops-process__icon {
    color: #566449 !important;
    background: linear-gradient(145deg, #F7F9F2 0%, #E6EBDD 55%, #D4DFC8 100%) !important;
    border-color: rgba(111, 137, 101, .18) !important;
    box-shadow: 0 5px 12px rgba(58, 78, 51, .035), 0 18px 30px rgba(58, 78, 51, .075),
                inset 0 2px 2px rgba(255, 255, 255, .9), inset 0 -4px 9px rgba(68, 98, 59, .04) !important;
}
html body .operations-sops-page .sops-solves__icon svg,
html body .operations-sops-page .sops-build__icon svg,
html body .operations-sops-page .sops-impact__icon svg,
html body .operations-sops-page .sops-process__icon svg {
    width: 34px !important;
    height: 34px !important;
    max-width: none;
    stroke: currentColor !important;
    stroke-width: 1.7px !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}
html body .operations-sops-page .sops-solves__icon svg *,
html body .operations-sops-page .sops-build__icon svg *,
html body .operations-sops-page .sops-impact__icon svg *,
html body .operations-sops-page .sops-process__icon svg * { stroke-width: 1.7px; }

/* ---------- 03 · CARDS: the soft "leaf" corner ---------- */

html body .operations-sops-page .sops-solves__card,
html body .operations-sops-page .sops-impact__card { border-radius: 40px 10px 40px 10px !important; }
html body .operations-sops-page .sops-build__item { border-radius: 36px 10px 36px 10px !important; }

/* ---------- 04 · SPACING ---------- */

/* the curve already adds space above each section, so the old top padding is trimmed */
html body .operations-sops-page .sops-solves, html body .operations-sops-page .sops-build, html body .operations-sops-page .sops-impact, html body .operations-sops-page .sops-process { padding-top: 34px !important; }
/* and a little more room before the next curve */
html body .operations-sops-page .sops-solves, html body .operations-sops-page .sops-build, html body .operations-sops-page .sops-impact, html body .operations-sops-page .sops-process {
    padding-bottom: calc(100px + var(--fr-edge) * .6) !important;
}
/* the next section's curve rises into the hero, so give the hero's content room above it */
html body .operations-sops-page .sops-hero { box-sizing: content-box !important; padding-bottom: calc(var(--fr-edge) * .85) !important; }

@media screen and (max-width: 1100px) {
    html body .operations-sops-page .sops-solves__icon,
    html body .operations-sops-page .sops-build__icon,
    html body .operations-sops-page .sops-impact__icon,
    html body .operations-sops-page .sops-process__icon { width: 68px !important; height: 68px !important; min-width: 68px !important; }
    html body .operations-sops-page .sops-solves__icon svg,
    html body .operations-sops-page .sops-build__icon svg,
    html body .operations-sops-page .sops-impact__icon svg,
    html body .operations-sops-page .sops-process__icon svg { width: 30px !important; height: 30px !important; }
    /* the process row scrolls sideways, so keep its badge shadow inside */
    html body .operations-sops-page .sops-process__icon { box-shadow: 0 3px 8px rgba(75, 49, 34, .05), 0 7px 12px rgba(75, 49, 34, .06), inset 0 2px 2px rgba(255, 255, 255, .9), inset 0 -4px 9px rgba(136, 91, 62, .04) !important; }
    html body .operations-sops-page .sops-process__step:nth-child(even) .sops-process__icon { box-shadow: 0 3px 8px rgba(58, 78, 51, .05), 0 7px 12px rgba(58, 78, 51, .06), inset 0 2px 2px rgba(255, 255, 255, .9), inset 0 -4px 9px rgba(68, 98, 59, .04) !important; }
}
@media screen and (max-width: 899px) {
    html body .operations-sops-page .sops-solves, html body .operations-sops-page .sops-build, html body .operations-sops-page .sops-impact, html body .operations-sops-page .sops-process { padding-top: 40px !important; padding-bottom: calc(90px + var(--fr-edge) * .6) !important; }
}
@media screen and (max-width: 599px) {
    html body .operations-sops-page .sops-solves__icon,
    html body .operations-sops-page .sops-build__icon,
    html body .operations-sops-page .sops-impact__icon,
    html body .operations-sops-page .sops-process__icon { width: 60px !important; height: 60px !important; min-width: 60px !important; }
    html body .operations-sops-page .sops-solves__icon svg,
    html body .operations-sops-page .sops-build__icon svg,
    html body .operations-sops-page .sops-impact__icon svg,
    html body .operations-sops-page .sops-process__icon svg { width: 27px !important; height: 27px !important; }
    html body .operations-sops-page .sops-solves__card, html body .operations-sops-page .sops-impact__card { border-radius: 32px 8px 32px 8px !important; }
    html body .operations-sops-page .sops-build__item { border-radius: 30px 8px 30px 8px !important; }
    html body .operations-sops-page .sops-solves, html body .operations-sops-page .sops-build, html body .operations-sops-page .sops-impact, html body .operations-sops-page .sops-process { padding-bottom: calc(80px + var(--fr-edge) * .6) !important; }
}

/* the build rows were laid out for a smaller icon: widen the icon column so the number clears it */
@media screen and (min-width: 900px) {
    html body .operations-sops-page .sops-build__item { grid-template-columns: 76px 44px minmax(0, 1fr) !important; }
}
html body .operations-sops-page .sops-build__inner { position: relative; }

/* the build line sits on the inner box, which starts below the section's top padding */
html body .operations-sops-page .sops-build__inner::after { top: calc(var(--fr-edge) * -1 - 34px) !important; }
@media screen and (max-width: 899px) {
    html body .operations-sops-page .sops-build__inner::after { top: calc(var(--fr-edge) * -1 - 40px) !important; }
}

/* END — OPERATIONS & SOPS ELEVATION */

/* =========================================================
   FRAYORA — EMPLOYEE & KNOWLEDGE SYSTEMS ELEVATION v1
   PASTE AT THE VERY BOTTOM OF main.css

   - No words, photos, typography or buttons are changed.
   - Sections get the same shaped edges as the homepage and
     the other service pages (desktop, tablet, mobile).
   - Every icon on the page is the same size, the same glass
     badge and the same fine round line style.
========================================================= */

:root { --fr-edge: 64px; }
@media screen and (max-width: 1100px) { :root { --fr-edge: 52px; } }
@media screen and (max-width: 899px)  { :root { --fr-edge: 44px; } }
@media screen and (max-width: 599px)  { :root { --fr-edge: 34px; } }

/* ---------- 01 · SECTION SHAPES ---------- */

html body .employee-knowledge-page .eks-path__inner,
html body .employee-knowledge-page .eks-impact__inner,
html body .employee-knowledge-page .eks-process__inner,
html body .employee-knowledge-page .eks-final-cta__inner { margin-top: var(--fr-edge) !important; }

/* alternating cream tones so every shape reads */
html body .employee-knowledge-page .eks-path    { background-color: #FAF7F2 !important; --biab-line: .85; }
html body .employee-knowledge-page .eks-impact  { background-color: #F5EDE4 !important; }
html body .employee-knowledge-page .eks-process { background-color: #FAF7F2 !important; --biab-line: .85; }
html body .employee-knowledge-page .eks-final-cta__inner { position: relative; }

html body .employee-knowledge-page .eks-path{
    margin-top: calc(var(--fr-edge) * -1) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.989), 12.5% calc(var(--fr-edge) * 0.957), 18.8% calc(var(--fr-edge) * 0.908), 25.0% calc(var(--fr-edge) * 0.844), 31.2% calc(var(--fr-edge) * 0.768), 37.5% calc(var(--fr-edge) * 0.684), 43.8% calc(var(--fr-edge) * 0.593), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.407), 62.5% calc(var(--fr-edge) * 0.316), 68.8% calc(var(--fr-edge) * 0.232), 75.0% calc(var(--fr-edge) * 0.156), 81.2% calc(var(--fr-edge) * 0.092), 87.5% calc(var(--fr-edge) * 0.043), 93.8% calc(var(--fr-edge) * 0.011), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.989), 12.5% calc(var(--fr-edge) * 0.957), 18.8% calc(var(--fr-edge) * 0.908), 25.0% calc(var(--fr-edge) * 0.844), 31.2% calc(var(--fr-edge) * 0.768), 37.5% calc(var(--fr-edge) * 0.684), 43.8% calc(var(--fr-edge) * 0.593), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.407), 62.5% calc(var(--fr-edge) * 0.316), 68.8% calc(var(--fr-edge) * 0.232), 75.0% calc(var(--fr-edge) * 0.156), 81.2% calc(var(--fr-edge) * 0.092), 87.5% calc(var(--fr-edge) * 0.043), 93.8% calc(var(--fr-edge) * 0.011), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
}
html body .employee-knowledge-page .eks-path::before{
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 3;
    inset: 0 0 auto 0 !important;
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: var(--biab-line, .6);
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.989), 12.5% calc(var(--fr-edge) * 0.957), 18.8% calc(var(--fr-edge) * 0.908), 25.0% calc(var(--fr-edge) * 0.844), 31.2% calc(var(--fr-edge) * 0.768), 37.5% calc(var(--fr-edge) * 0.684), 43.8% calc(var(--fr-edge) * 0.593), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.407), 62.5% calc(var(--fr-edge) * 0.316), 68.8% calc(var(--fr-edge) * 0.232), 75.0% calc(var(--fr-edge) * 0.156), 81.2% calc(var(--fr-edge) * 0.092), 87.5% calc(var(--fr-edge) * 0.043), 93.8% calc(var(--fr-edge) * 0.011), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.011 + 3px), 87.5% calc(var(--fr-edge) * 0.043 + 3px), 81.2% calc(var(--fr-edge) * 0.092 + 3px), 75.0% calc(var(--fr-edge) * 0.156 + 3px), 68.8% calc(var(--fr-edge) * 0.232 + 3px), 62.5% calc(var(--fr-edge) * 0.316 + 3px), 56.2% calc(var(--fr-edge) * 0.407 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.593 + 3px), 37.5% calc(var(--fr-edge) * 0.684 + 3px), 31.2% calc(var(--fr-edge) * 0.768 + 3px), 25.0% calc(var(--fr-edge) * 0.844 + 3px), 18.8% calc(var(--fr-edge) * 0.908 + 3px), 12.5% calc(var(--fr-edge) * 0.957 + 3px), 6.2% calc(var(--fr-edge) * 0.989 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.989), 12.5% calc(var(--fr-edge) * 0.957), 18.8% calc(var(--fr-edge) * 0.908), 25.0% calc(var(--fr-edge) * 0.844), 31.2% calc(var(--fr-edge) * 0.768), 37.5% calc(var(--fr-edge) * 0.684), 43.8% calc(var(--fr-edge) * 0.593), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.407), 62.5% calc(var(--fr-edge) * 0.316), 68.8% calc(var(--fr-edge) * 0.232), 75.0% calc(var(--fr-edge) * 0.156), 81.2% calc(var(--fr-edge) * 0.092), 87.5% calc(var(--fr-edge) * 0.043), 93.8% calc(var(--fr-edge) * 0.011), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.011 + 3px), 87.5% calc(var(--fr-edge) * 0.043 + 3px), 81.2% calc(var(--fr-edge) * 0.092 + 3px), 75.0% calc(var(--fr-edge) * 0.156 + 3px), 68.8% calc(var(--fr-edge) * 0.232 + 3px), 62.5% calc(var(--fr-edge) * 0.316 + 3px), 56.2% calc(var(--fr-edge) * 0.407 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.593 + 3px), 37.5% calc(var(--fr-edge) * 0.684 + 3px), 31.2% calc(var(--fr-edge) * 0.768 + 3px), 25.0% calc(var(--fr-edge) * 0.844 + 3px), 18.8% calc(var(--fr-edge) * 0.908 + 3px), 12.5% calc(var(--fr-edge) * 0.957 + 3px), 6.2% calc(var(--fr-edge) * 0.989 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
}

html body .employee-knowledge-page .eks-impact{
    margin-top: calc(var(--fr-edge) * -1) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
}
html body .employee-knowledge-page .eks-impact::before{
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 3;
    inset: 0 0 auto 0 !important;
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: var(--biab-line, .6);
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 93.8% calc(var(--fr-edge) * 0.805 + 3px), 87.5% calc(var(--fr-edge) * 0.617 + 3px), 81.2% calc(var(--fr-edge) * 0.444 + 3px), 75.0% calc(var(--fr-edge) * 0.293 + 3px), 68.8% calc(var(--fr-edge) * 0.169 + 3px), 62.5% calc(var(--fr-edge) * 0.076 + 3px), 56.2% calc(var(--fr-edge) * 0.019 + 3px), 50.0% calc(var(--fr-edge) * 0.000 + 3px), 43.8% calc(var(--fr-edge) * 0.019 + 3px), 37.5% calc(var(--fr-edge) * 0.076 + 3px), 31.2% calc(var(--fr-edge) * 0.169 + 3px), 25.0% calc(var(--fr-edge) * 0.293 + 3px), 18.8% calc(var(--fr-edge) * 0.444 + 3px), 12.5% calc(var(--fr-edge) * 0.617 + 3px), 6.2% calc(var(--fr-edge) * 0.805 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 93.8% calc(var(--fr-edge) * 0.805 + 3px), 87.5% calc(var(--fr-edge) * 0.617 + 3px), 81.2% calc(var(--fr-edge) * 0.444 + 3px), 75.0% calc(var(--fr-edge) * 0.293 + 3px), 68.8% calc(var(--fr-edge) * 0.169 + 3px), 62.5% calc(var(--fr-edge) * 0.076 + 3px), 56.2% calc(var(--fr-edge) * 0.019 + 3px), 50.0% calc(var(--fr-edge) * 0.000 + 3px), 43.8% calc(var(--fr-edge) * 0.019 + 3px), 37.5% calc(var(--fr-edge) * 0.076 + 3px), 31.2% calc(var(--fr-edge) * 0.169 + 3px), 25.0% calc(var(--fr-edge) * 0.293 + 3px), 18.8% calc(var(--fr-edge) * 0.444 + 3px), 12.5% calc(var(--fr-edge) * 0.617 + 3px), 6.2% calc(var(--fr-edge) * 0.805 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
}

html body .employee-knowledge-page .eks-process{
    margin-top: calc(var(--fr-edge) * -1) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.011), 12.5% calc(var(--fr-edge) * 0.043), 18.8% calc(var(--fr-edge) * 0.092), 25.0% calc(var(--fr-edge) * 0.156), 31.2% calc(var(--fr-edge) * 0.232), 37.5% calc(var(--fr-edge) * 0.316), 43.8% calc(var(--fr-edge) * 0.407), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.593), 62.5% calc(var(--fr-edge) * 0.684), 68.8% calc(var(--fr-edge) * 0.768), 75.0% calc(var(--fr-edge) * 0.844), 81.2% calc(var(--fr-edge) * 0.908), 87.5% calc(var(--fr-edge) * 0.957), 93.8% calc(var(--fr-edge) * 0.989), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.011), 12.5% calc(var(--fr-edge) * 0.043), 18.8% calc(var(--fr-edge) * 0.092), 25.0% calc(var(--fr-edge) * 0.156), 31.2% calc(var(--fr-edge) * 0.232), 37.5% calc(var(--fr-edge) * 0.316), 43.8% calc(var(--fr-edge) * 0.407), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.593), 62.5% calc(var(--fr-edge) * 0.684), 68.8% calc(var(--fr-edge) * 0.768), 75.0% calc(var(--fr-edge) * 0.844), 81.2% calc(var(--fr-edge) * 0.908), 87.5% calc(var(--fr-edge) * 0.957), 93.8% calc(var(--fr-edge) * 0.989), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
}
html body .employee-knowledge-page .eks-process::before{
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 3;
    inset: 0 0 auto 0 !important;
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: var(--biab-line, .6);
    clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.011), 12.5% calc(var(--fr-edge) * 0.043), 18.8% calc(var(--fr-edge) * 0.092), 25.0% calc(var(--fr-edge) * 0.156), 31.2% calc(var(--fr-edge) * 0.232), 37.5% calc(var(--fr-edge) * 0.316), 43.8% calc(var(--fr-edge) * 0.407), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.593), 62.5% calc(var(--fr-edge) * 0.684), 68.8% calc(var(--fr-edge) * 0.768), 75.0% calc(var(--fr-edge) * 0.844), 81.2% calc(var(--fr-edge) * 0.908), 87.5% calc(var(--fr-edge) * 0.957), 93.8% calc(var(--fr-edge) * 0.989), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 93.8% calc(var(--fr-edge) * 0.989 + 3px), 87.5% calc(var(--fr-edge) * 0.957 + 3px), 81.2% calc(var(--fr-edge) * 0.908 + 3px), 75.0% calc(var(--fr-edge) * 0.844 + 3px), 68.8% calc(var(--fr-edge) * 0.768 + 3px), 62.5% calc(var(--fr-edge) * 0.684 + 3px), 56.2% calc(var(--fr-edge) * 0.593 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.407 + 3px), 37.5% calc(var(--fr-edge) * 0.316 + 3px), 31.2% calc(var(--fr-edge) * 0.232 + 3px), 25.0% calc(var(--fr-edge) * 0.156 + 3px), 18.8% calc(var(--fr-edge) * 0.092 + 3px), 12.5% calc(var(--fr-edge) * 0.043 + 3px), 6.2% calc(var(--fr-edge) * 0.011 + 3px), 0.0% calc(var(--fr-edge) * 0.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.011), 12.5% calc(var(--fr-edge) * 0.043), 18.8% calc(var(--fr-edge) * 0.092), 25.0% calc(var(--fr-edge) * 0.156), 31.2% calc(var(--fr-edge) * 0.232), 37.5% calc(var(--fr-edge) * 0.316), 43.8% calc(var(--fr-edge) * 0.407), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.593), 62.5% calc(var(--fr-edge) * 0.684), 68.8% calc(var(--fr-edge) * 0.768), 75.0% calc(var(--fr-edge) * 0.844), 81.2% calc(var(--fr-edge) * 0.908), 87.5% calc(var(--fr-edge) * 0.957), 93.8% calc(var(--fr-edge) * 0.989), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 93.8% calc(var(--fr-edge) * 0.989 + 3px), 87.5% calc(var(--fr-edge) * 0.957 + 3px), 81.2% calc(var(--fr-edge) * 0.908 + 3px), 75.0% calc(var(--fr-edge) * 0.844 + 3px), 68.8% calc(var(--fr-edge) * 0.768 + 3px), 62.5% calc(var(--fr-edge) * 0.684 + 3px), 56.2% calc(var(--fr-edge) * 0.593 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.407 + 3px), 37.5% calc(var(--fr-edge) * 0.316 + 3px), 31.2% calc(var(--fr-edge) * 0.232 + 3px), 25.0% calc(var(--fr-edge) * 0.156 + 3px), 18.8% calc(var(--fr-edge) * 0.092 + 3px), 12.5% calc(var(--fr-edge) * 0.043 + 3px), 6.2% calc(var(--fr-edge) * 0.011 + 3px), 0.0% calc(var(--fr-edge) * 0.000 + 3px));
}

html body .employee-knowledge-page .eks-final-cta{
    margin-top: calc(var(--fr-edge) * -1) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 3.1% calc(var(--fr-edge) * 0.844), 6.2% calc(var(--fr-edge) * 0.729), 9.4% calc(var(--fr-edge) * 0.628), 12.5% calc(var(--fr-edge) * 0.536), 15.6% calc(var(--fr-edge) * 0.452), 18.8% calc(var(--fr-edge) * 0.375), 21.9% calc(var(--fr-edge) * 0.305), 25.0% calc(var(--fr-edge) * 0.242), 28.1% calc(var(--fr-edge) * 0.186), 31.2% calc(var(--fr-edge) * 0.137), 34.4% calc(var(--fr-edge) * 0.096), 37.5% calc(var(--fr-edge) * 0.061), 40.6% calc(var(--fr-edge) * 0.035), 43.8% calc(var(--fr-edge) * 0.015), 46.9% calc(var(--fr-edge) * 0.004), 50.0% calc(var(--fr-edge) * 0.000), 53.1% calc(var(--fr-edge) * 0.004), 56.2% calc(var(--fr-edge) * 0.015), 59.4% calc(var(--fr-edge) * 0.035), 62.5% calc(var(--fr-edge) * 0.061), 65.6% calc(var(--fr-edge) * 0.096), 68.8% calc(var(--fr-edge) * 0.137), 71.9% calc(var(--fr-edge) * 0.186), 75.0% calc(var(--fr-edge) * 0.242), 78.1% calc(var(--fr-edge) * 0.305), 81.2% calc(var(--fr-edge) * 0.375), 84.4% calc(var(--fr-edge) * 0.452), 87.5% calc(var(--fr-edge) * 0.536), 90.6% calc(var(--fr-edge) * 0.628), 93.8% calc(var(--fr-edge) * 0.729), 96.9% calc(var(--fr-edge) * 0.844), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 3.1% calc(var(--fr-edge) * 0.844), 6.2% calc(var(--fr-edge) * 0.729), 9.4% calc(var(--fr-edge) * 0.628), 12.5% calc(var(--fr-edge) * 0.536), 15.6% calc(var(--fr-edge) * 0.452), 18.8% calc(var(--fr-edge) * 0.375), 21.9% calc(var(--fr-edge) * 0.305), 25.0% calc(var(--fr-edge) * 0.242), 28.1% calc(var(--fr-edge) * 0.186), 31.2% calc(var(--fr-edge) * 0.137), 34.4% calc(var(--fr-edge) * 0.096), 37.5% calc(var(--fr-edge) * 0.061), 40.6% calc(var(--fr-edge) * 0.035), 43.8% calc(var(--fr-edge) * 0.015), 46.9% calc(var(--fr-edge) * 0.004), 50.0% calc(var(--fr-edge) * 0.000), 53.1% calc(var(--fr-edge) * 0.004), 56.2% calc(var(--fr-edge) * 0.015), 59.4% calc(var(--fr-edge) * 0.035), 62.5% calc(var(--fr-edge) * 0.061), 65.6% calc(var(--fr-edge) * 0.096), 68.8% calc(var(--fr-edge) * 0.137), 71.9% calc(var(--fr-edge) * 0.186), 75.0% calc(var(--fr-edge) * 0.242), 78.1% calc(var(--fr-edge) * 0.305), 81.2% calc(var(--fr-edge) * 0.375), 84.4% calc(var(--fr-edge) * 0.452), 87.5% calc(var(--fr-edge) * 0.536), 90.6% calc(var(--fr-edge) * 0.628), 93.8% calc(var(--fr-edge) * 0.729), 96.9% calc(var(--fr-edge) * 0.844), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
}
html body .employee-knowledge-page .eks-final-cta__inner::after{
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 3;
    top: calc(var(--fr-edge) * -1) !important; left: 50% !important; width: 100vw !important; transform: translateX(-50%);
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: var(--biab-line, .6);
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 3.1% calc(var(--fr-edge) * 0.844), 6.2% calc(var(--fr-edge) * 0.729), 9.4% calc(var(--fr-edge) * 0.628), 12.5% calc(var(--fr-edge) * 0.536), 15.6% calc(var(--fr-edge) * 0.452), 18.8% calc(var(--fr-edge) * 0.375), 21.9% calc(var(--fr-edge) * 0.305), 25.0% calc(var(--fr-edge) * 0.242), 28.1% calc(var(--fr-edge) * 0.186), 31.2% calc(var(--fr-edge) * 0.137), 34.4% calc(var(--fr-edge) * 0.096), 37.5% calc(var(--fr-edge) * 0.061), 40.6% calc(var(--fr-edge) * 0.035), 43.8% calc(var(--fr-edge) * 0.015), 46.9% calc(var(--fr-edge) * 0.004), 50.0% calc(var(--fr-edge) * 0.000), 53.1% calc(var(--fr-edge) * 0.004), 56.2% calc(var(--fr-edge) * 0.015), 59.4% calc(var(--fr-edge) * 0.035), 62.5% calc(var(--fr-edge) * 0.061), 65.6% calc(var(--fr-edge) * 0.096), 68.8% calc(var(--fr-edge) * 0.137), 71.9% calc(var(--fr-edge) * 0.186), 75.0% calc(var(--fr-edge) * 0.242), 78.1% calc(var(--fr-edge) * 0.305), 81.2% calc(var(--fr-edge) * 0.375), 84.4% calc(var(--fr-edge) * 0.452), 87.5% calc(var(--fr-edge) * 0.536), 90.6% calc(var(--fr-edge) * 0.628), 93.8% calc(var(--fr-edge) * 0.729), 96.9% calc(var(--fr-edge) * 0.844), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 96.9% calc(var(--fr-edge) * 0.844 + 3px), 93.8% calc(var(--fr-edge) * 0.729 + 3px), 90.6% calc(var(--fr-edge) * 0.628 + 3px), 87.5% calc(var(--fr-edge) * 0.536 + 3px), 84.4% calc(var(--fr-edge) * 0.452 + 3px), 81.2% calc(var(--fr-edge) * 0.375 + 3px), 78.1% calc(var(--fr-edge) * 0.305 + 3px), 75.0% calc(var(--fr-edge) * 0.242 + 3px), 71.9% calc(var(--fr-edge) * 0.186 + 3px), 68.8% calc(var(--fr-edge) * 0.137 + 3px), 65.6% calc(var(--fr-edge) * 0.096 + 3px), 62.5% calc(var(--fr-edge) * 0.061 + 3px), 59.4% calc(var(--fr-edge) * 0.035 + 3px), 56.2% calc(var(--fr-edge) * 0.015 + 3px), 53.1% calc(var(--fr-edge) * 0.004 + 3px), 50.0% calc(var(--fr-edge) * 0.000 + 3px), 46.9% calc(var(--fr-edge) * 0.004 + 3px), 43.8% calc(var(--fr-edge) * 0.015 + 3px), 40.6% calc(var(--fr-edge) * 0.035 + 3px), 37.5% calc(var(--fr-edge) * 0.061 + 3px), 34.4% calc(var(--fr-edge) * 0.096 + 3px), 31.2% calc(var(--fr-edge) * 0.137 + 3px), 28.1% calc(var(--fr-edge) * 0.186 + 3px), 25.0% calc(var(--fr-edge) * 0.242 + 3px), 21.9% calc(var(--fr-edge) * 0.305 + 3px), 18.8% calc(var(--fr-edge) * 0.375 + 3px), 15.6% calc(var(--fr-edge) * 0.452 + 3px), 12.5% calc(var(--fr-edge) * 0.536 + 3px), 9.4% calc(var(--fr-edge) * 0.628 + 3px), 6.2% calc(var(--fr-edge) * 0.729 + 3px), 3.1% calc(var(--fr-edge) * 0.844 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 3.1% calc(var(--fr-edge) * 0.844), 6.2% calc(var(--fr-edge) * 0.729), 9.4% calc(var(--fr-edge) * 0.628), 12.5% calc(var(--fr-edge) * 0.536), 15.6% calc(var(--fr-edge) * 0.452), 18.8% calc(var(--fr-edge) * 0.375), 21.9% calc(var(--fr-edge) * 0.305), 25.0% calc(var(--fr-edge) * 0.242), 28.1% calc(var(--fr-edge) * 0.186), 31.2% calc(var(--fr-edge) * 0.137), 34.4% calc(var(--fr-edge) * 0.096), 37.5% calc(var(--fr-edge) * 0.061), 40.6% calc(var(--fr-edge) * 0.035), 43.8% calc(var(--fr-edge) * 0.015), 46.9% calc(var(--fr-edge) * 0.004), 50.0% calc(var(--fr-edge) * 0.000), 53.1% calc(var(--fr-edge) * 0.004), 56.2% calc(var(--fr-edge) * 0.015), 59.4% calc(var(--fr-edge) * 0.035), 62.5% calc(var(--fr-edge) * 0.061), 65.6% calc(var(--fr-edge) * 0.096), 68.8% calc(var(--fr-edge) * 0.137), 71.9% calc(var(--fr-edge) * 0.186), 75.0% calc(var(--fr-edge) * 0.242), 78.1% calc(var(--fr-edge) * 0.305), 81.2% calc(var(--fr-edge) * 0.375), 84.4% calc(var(--fr-edge) * 0.452), 87.5% calc(var(--fr-edge) * 0.536), 90.6% calc(var(--fr-edge) * 0.628), 93.8% calc(var(--fr-edge) * 0.729), 96.9% calc(var(--fr-edge) * 0.844), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 96.9% calc(var(--fr-edge) * 0.844 + 3px), 93.8% calc(var(--fr-edge) * 0.729 + 3px), 90.6% calc(var(--fr-edge) * 0.628 + 3px), 87.5% calc(var(--fr-edge) * 0.536 + 3px), 84.4% calc(var(--fr-edge) * 0.452 + 3px), 81.2% calc(var(--fr-edge) * 0.375 + 3px), 78.1% calc(var(--fr-edge) * 0.305 + 3px), 75.0% calc(var(--fr-edge) * 0.242 + 3px), 71.9% calc(var(--fr-edge) * 0.186 + 3px), 68.8% calc(var(--fr-edge) * 0.137 + 3px), 65.6% calc(var(--fr-edge) * 0.096 + 3px), 62.5% calc(var(--fr-edge) * 0.061 + 3px), 59.4% calc(var(--fr-edge) * 0.035 + 3px), 56.2% calc(var(--fr-edge) * 0.015 + 3px), 53.1% calc(var(--fr-edge) * 0.004 + 3px), 50.0% calc(var(--fr-edge) * 0.000 + 3px), 46.9% calc(var(--fr-edge) * 0.004 + 3px), 43.8% calc(var(--fr-edge) * 0.015 + 3px), 40.6% calc(var(--fr-edge) * 0.035 + 3px), 37.5% calc(var(--fr-edge) * 0.061 + 3px), 34.4% calc(var(--fr-edge) * 0.096 + 3px), 31.2% calc(var(--fr-edge) * 0.137 + 3px), 28.1% calc(var(--fr-edge) * 0.186 + 3px), 25.0% calc(var(--fr-edge) * 0.242 + 3px), 21.9% calc(var(--fr-edge) * 0.305 + 3px), 18.8% calc(var(--fr-edge) * 0.375 + 3px), 15.6% calc(var(--fr-edge) * 0.452 + 3px), 12.5% calc(var(--fr-edge) * 0.536 + 3px), 9.4% calc(var(--fr-edge) * 0.628 + 3px), 6.2% calc(var(--fr-edge) * 0.729 + 3px), 3.1% calc(var(--fr-edge) * 0.844 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
}

/* ---------- 02 · ONE ICON LANGUAGE ---------- */

html body .employee-knowledge-page .eks-path__icon,
html body .employee-knowledge-page .eks-impact__icon,
html body .employee-knowledge-page .eks-process__icon {
    position: relative;
    display: grid !important;
    place-items: center;
    width: 76px !important;
    height: 76px !important;
    min-width: 76px !important;
    border-radius: 50% !important;
    color: #84634E !important;
    background: linear-gradient(145deg, #FFF7EF 0%, #F3E2D5 60%, #EAD2C2 100%) !important;
    border: 1px solid rgba(181, 143, 119, .18) !important;
    box-shadow: 0 5px 12px rgba(75, 49, 34, .035), 0 18px 30px rgba(75, 49, 34, .075),
                inset 0 2px 2px rgba(255, 255, 255, .9), inset 0 -4px 9px rgba(136, 91, 62, .04) !important;
}
html body .employee-knowledge-page .eks-path__icon::before,
html body .employee-knowledge-page .eks-impact__icon::before,
html body .employee-knowledge-page .eks-process__icon::before {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .42);
    pointer-events: none;
}
html body .employee-knowledge-page .eks-path__step:nth-child(even) .eks-path__icon,
html body .employee-knowledge-page .eks-impact__card:nth-child(even) .eks-impact__icon,
html body .employee-knowledge-page .eks-process__step:nth-child(even) .eks-process__icon {
    color: #566449 !important;
    background: linear-gradient(145deg, #F7F9F2 0%, #E6EBDD 55%, #D4DFC8 100%) !important;
    border-color: rgba(111, 137, 101, .18) !important;
    box-shadow: 0 5px 12px rgba(58, 78, 51, .035), 0 18px 30px rgba(58, 78, 51, .075),
                inset 0 2px 2px rgba(255, 255, 255, .9), inset 0 -4px 9px rgba(68, 98, 59, .04) !important;
}
html body .employee-knowledge-page .eks-path__icon svg,
html body .employee-knowledge-page .eks-impact__icon svg,
html body .employee-knowledge-page .eks-process__icon svg {
    width: 34px !important;
    height: 34px !important;
    max-width: none;
    stroke: currentColor !important;
    stroke-width: 1.7px !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}
html body .employee-knowledge-page .eks-path__icon svg *,
html body .employee-knowledge-page .eks-impact__icon svg *,
html body .employee-knowledge-page .eks-process__icon svg * { stroke-width: 1.7px; }

/* ---------- 03 · CARDS: the soft "leaf" corner ---------- */

html body .employee-knowledge-page .eks-impact__card { border-radius: 40px 10px 40px 10px !important; }

/* ---------- 04 · SPACING ---------- */

/* the curve already adds space above each section, so the old top padding is trimmed */
html body .employee-knowledge-page .eks-path, html body .employee-knowledge-page .eks-impact, html body .employee-knowledge-page .eks-process {
    padding-top: 34px !important;
    padding-bottom: calc(100px + var(--fr-edge) * .6) !important;
}
/* the next section's curve rises into the hero, so give the hero's content room above it */
html body .employee-knowledge-page .eks-hero { box-sizing: content-box !important; padding-bottom: calc(var(--fr-edge) * .85) !important; }

@media screen and (max-width: 1100px) {
    html body .employee-knowledge-page .eks-path__icon,
html body .employee-knowledge-page .eks-impact__icon,
html body .employee-knowledge-page .eks-process__icon { width: 68px !important; height: 68px !important; min-width: 68px !important; }
    html body .employee-knowledge-page .eks-path__icon svg,
html body .employee-knowledge-page .eks-impact__icon svg,
html body .employee-knowledge-page .eks-process__icon svg { width: 30px !important; height: 30px !important; }
    /* rows that scroll sideways keep the badge shadow inside */
    html body .employee-knowledge-page .eks-process__icon { box-shadow: 0 3px 8px rgba(75, 49, 34, .05), 0 7px 12px rgba(75, 49, 34, .06), inset 0 2px 2px rgba(255, 255, 255, .9), inset 0 -4px 9px rgba(136, 91, 62, .04) !important; }
    html body .employee-knowledge-page .eks-process__step:nth-child(even) .eks-process__icon { box-shadow: 0 3px 8px rgba(58, 78, 51, .05), 0 7px 12px rgba(58, 78, 51, .06), inset 0 2px 2px rgba(255, 255, 255, .9), inset 0 -4px 9px rgba(68, 98, 59, .04) !important; }
}
@media screen and (max-width: 899px) {
    html body .employee-knowledge-page .eks-path, html body .employee-knowledge-page .eks-impact, html body .employee-knowledge-page .eks-process { padding-top: 40px !important; padding-bottom: calc(90px + var(--fr-edge) * .6) !important; }
}
@media screen and (max-width: 599px) {
    html body .employee-knowledge-page .eks-impact__card { border-radius: 32px 8px 32px 8px !important; }
    html body .employee-knowledge-page .eks-path__icon,
html body .employee-knowledge-page .eks-impact__icon,
html body .employee-knowledge-page .eks-process__icon { width: 60px !important; height: 60px !important; min-width: 60px !important; }
    html body .employee-knowledge-page .eks-path__icon svg,
html body .employee-knowledge-page .eks-impact__icon svg,
html body .employee-knowledge-page .eks-process__icon svg { width: 27px !important; height: 27px !important; }
    html body .employee-knowledge-page .eks-path, html body .employee-knowledge-page .eks-impact, html body .employee-knowledge-page .eks-process { padding-bottom: calc(80px + var(--fr-edge) * .6) !important; }
}

/* this section has no label above its heading, so give the heading a little more room */
html body .employee-knowledge-page .eks-path { padding-top: 56px !important; }
@media screen and (max-width: 899px) {
    html body .employee-knowledge-page .eks-path { padding-top: 50px !important; }
}

/* END — EMPLOYEE & KNOWLEDGE SYSTEMS ELEVATION */


/* =========================================================
   FRAYORA — WORKFLOWS & AUTOMATION ELEVATION v1
   PASTE AT THE VERY BOTTOM OF main.css

   - No words, photos, typography or buttons are changed.
   - Sections get the same shaped edges as the homepage and
     the other service pages (desktop, tablet, mobile).
   - Every icon on the page is the same size, the same glass
     badge and the same fine round line style.
========================================================= */

:root { --fr-edge: 64px; }
@media screen and (max-width: 1100px) { :root { --fr-edge: 52px; } }
@media screen and (max-width: 899px)  { :root { --fr-edge: 44px; } }
@media screen and (max-width: 599px)  { :root { --fr-edge: 34px; } }

/* ---------- 01 · SECTION SHAPES ---------- */

html body .workflows-page .wf-benefits__inner,
html body .workflows-page .wf-transformation__inner,
html body .workflows-page .wf-connected__inner,
html body .workflows-page .wf-final-cta__inner { margin-top: var(--fr-edge) !important; }

/* alternating cream tones so every shape reads */
html body .workflows-page .wf-benefits       { background-color: #FAF7F2 !important; --biab-line: .85; }
html body .workflows-page .wf-transformation { background-color: #F5EDE4 !important; }
html body .workflows-page .wf-connected      { background-color: #FAF7F2 !important; --biab-line: .85; }
html body .workflows-page .wf-final-cta__inner { position: relative; }

html body .workflows-page .wf-benefits{
    margin-top: calc(var(--fr-edge) * -1) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.989), 12.5% calc(var(--fr-edge) * 0.957), 18.8% calc(var(--fr-edge) * 0.908), 25.0% calc(var(--fr-edge) * 0.844), 31.2% calc(var(--fr-edge) * 0.768), 37.5% calc(var(--fr-edge) * 0.684), 43.8% calc(var(--fr-edge) * 0.593), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.407), 62.5% calc(var(--fr-edge) * 0.316), 68.8% calc(var(--fr-edge) * 0.232), 75.0% calc(var(--fr-edge) * 0.156), 81.2% calc(var(--fr-edge) * 0.092), 87.5% calc(var(--fr-edge) * 0.043), 93.8% calc(var(--fr-edge) * 0.011), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.989), 12.5% calc(var(--fr-edge) * 0.957), 18.8% calc(var(--fr-edge) * 0.908), 25.0% calc(var(--fr-edge) * 0.844), 31.2% calc(var(--fr-edge) * 0.768), 37.5% calc(var(--fr-edge) * 0.684), 43.8% calc(var(--fr-edge) * 0.593), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.407), 62.5% calc(var(--fr-edge) * 0.316), 68.8% calc(var(--fr-edge) * 0.232), 75.0% calc(var(--fr-edge) * 0.156), 81.2% calc(var(--fr-edge) * 0.092), 87.5% calc(var(--fr-edge) * 0.043), 93.8% calc(var(--fr-edge) * 0.011), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
}
html body .workflows-page .wf-benefits::before{
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 3;
    inset: 0 0 auto 0 !important;
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: var(--biab-line, .6);
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.989), 12.5% calc(var(--fr-edge) * 0.957), 18.8% calc(var(--fr-edge) * 0.908), 25.0% calc(var(--fr-edge) * 0.844), 31.2% calc(var(--fr-edge) * 0.768), 37.5% calc(var(--fr-edge) * 0.684), 43.8% calc(var(--fr-edge) * 0.593), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.407), 62.5% calc(var(--fr-edge) * 0.316), 68.8% calc(var(--fr-edge) * 0.232), 75.0% calc(var(--fr-edge) * 0.156), 81.2% calc(var(--fr-edge) * 0.092), 87.5% calc(var(--fr-edge) * 0.043), 93.8% calc(var(--fr-edge) * 0.011), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.011 + 3px), 87.5% calc(var(--fr-edge) * 0.043 + 3px), 81.2% calc(var(--fr-edge) * 0.092 + 3px), 75.0% calc(var(--fr-edge) * 0.156 + 3px), 68.8% calc(var(--fr-edge) * 0.232 + 3px), 62.5% calc(var(--fr-edge) * 0.316 + 3px), 56.2% calc(var(--fr-edge) * 0.407 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.593 + 3px), 37.5% calc(var(--fr-edge) * 0.684 + 3px), 31.2% calc(var(--fr-edge) * 0.768 + 3px), 25.0% calc(var(--fr-edge) * 0.844 + 3px), 18.8% calc(var(--fr-edge) * 0.908 + 3px), 12.5% calc(var(--fr-edge) * 0.957 + 3px), 6.2% calc(var(--fr-edge) * 0.989 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.989), 12.5% calc(var(--fr-edge) * 0.957), 18.8% calc(var(--fr-edge) * 0.908), 25.0% calc(var(--fr-edge) * 0.844), 31.2% calc(var(--fr-edge) * 0.768), 37.5% calc(var(--fr-edge) * 0.684), 43.8% calc(var(--fr-edge) * 0.593), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.407), 62.5% calc(var(--fr-edge) * 0.316), 68.8% calc(var(--fr-edge) * 0.232), 75.0% calc(var(--fr-edge) * 0.156), 81.2% calc(var(--fr-edge) * 0.092), 87.5% calc(var(--fr-edge) * 0.043), 93.8% calc(var(--fr-edge) * 0.011), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.011 + 3px), 87.5% calc(var(--fr-edge) * 0.043 + 3px), 81.2% calc(var(--fr-edge) * 0.092 + 3px), 75.0% calc(var(--fr-edge) * 0.156 + 3px), 68.8% calc(var(--fr-edge) * 0.232 + 3px), 62.5% calc(var(--fr-edge) * 0.316 + 3px), 56.2% calc(var(--fr-edge) * 0.407 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.593 + 3px), 37.5% calc(var(--fr-edge) * 0.684 + 3px), 31.2% calc(var(--fr-edge) * 0.768 + 3px), 25.0% calc(var(--fr-edge) * 0.844 + 3px), 18.8% calc(var(--fr-edge) * 0.908 + 3px), 12.5% calc(var(--fr-edge) * 0.957 + 3px), 6.2% calc(var(--fr-edge) * 0.989 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
}

html body .workflows-page .wf-transformation{
    margin-top: calc(var(--fr-edge) * -1) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
}
html body .workflows-page .wf-transformation::before{
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 3;
    inset: 0 0 auto 0 !important;
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: var(--biab-line, .6);
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 93.8% calc(var(--fr-edge) * 0.805 + 3px), 87.5% calc(var(--fr-edge) * 0.617 + 3px), 81.2% calc(var(--fr-edge) * 0.444 + 3px), 75.0% calc(var(--fr-edge) * 0.293 + 3px), 68.8% calc(var(--fr-edge) * 0.169 + 3px), 62.5% calc(var(--fr-edge) * 0.076 + 3px), 56.2% calc(var(--fr-edge) * 0.019 + 3px), 50.0% calc(var(--fr-edge) * 0.000 + 3px), 43.8% calc(var(--fr-edge) * 0.019 + 3px), 37.5% calc(var(--fr-edge) * 0.076 + 3px), 31.2% calc(var(--fr-edge) * 0.169 + 3px), 25.0% calc(var(--fr-edge) * 0.293 + 3px), 18.8% calc(var(--fr-edge) * 0.444 + 3px), 12.5% calc(var(--fr-edge) * 0.617 + 3px), 6.2% calc(var(--fr-edge) * 0.805 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 93.8% calc(var(--fr-edge) * 0.805 + 3px), 87.5% calc(var(--fr-edge) * 0.617 + 3px), 81.2% calc(var(--fr-edge) * 0.444 + 3px), 75.0% calc(var(--fr-edge) * 0.293 + 3px), 68.8% calc(var(--fr-edge) * 0.169 + 3px), 62.5% calc(var(--fr-edge) * 0.076 + 3px), 56.2% calc(var(--fr-edge) * 0.019 + 3px), 50.0% calc(var(--fr-edge) * 0.000 + 3px), 43.8% calc(var(--fr-edge) * 0.019 + 3px), 37.5% calc(var(--fr-edge) * 0.076 + 3px), 31.2% calc(var(--fr-edge) * 0.169 + 3px), 25.0% calc(var(--fr-edge) * 0.293 + 3px), 18.8% calc(var(--fr-edge) * 0.444 + 3px), 12.5% calc(var(--fr-edge) * 0.617 + 3px), 6.2% calc(var(--fr-edge) * 0.805 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
}

html body .workflows-page .wf-connected{
    margin-top: calc(var(--fr-edge) * -1) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.011), 12.5% calc(var(--fr-edge) * 0.043), 18.8% calc(var(--fr-edge) * 0.092), 25.0% calc(var(--fr-edge) * 0.156), 31.2% calc(var(--fr-edge) * 0.232), 37.5% calc(var(--fr-edge) * 0.316), 43.8% calc(var(--fr-edge) * 0.407), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.593), 62.5% calc(var(--fr-edge) * 0.684), 68.8% calc(var(--fr-edge) * 0.768), 75.0% calc(var(--fr-edge) * 0.844), 81.2% calc(var(--fr-edge) * 0.908), 87.5% calc(var(--fr-edge) * 0.957), 93.8% calc(var(--fr-edge) * 0.989), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.011), 12.5% calc(var(--fr-edge) * 0.043), 18.8% calc(var(--fr-edge) * 0.092), 25.0% calc(var(--fr-edge) * 0.156), 31.2% calc(var(--fr-edge) * 0.232), 37.5% calc(var(--fr-edge) * 0.316), 43.8% calc(var(--fr-edge) * 0.407), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.593), 62.5% calc(var(--fr-edge) * 0.684), 68.8% calc(var(--fr-edge) * 0.768), 75.0% calc(var(--fr-edge) * 0.844), 81.2% calc(var(--fr-edge) * 0.908), 87.5% calc(var(--fr-edge) * 0.957), 93.8% calc(var(--fr-edge) * 0.989), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
}
html body .workflows-page .wf-connected::before{
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 3;
    inset: 0 0 auto 0 !important;
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: var(--biab-line, .6);
    clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.011), 12.5% calc(var(--fr-edge) * 0.043), 18.8% calc(var(--fr-edge) * 0.092), 25.0% calc(var(--fr-edge) * 0.156), 31.2% calc(var(--fr-edge) * 0.232), 37.5% calc(var(--fr-edge) * 0.316), 43.8% calc(var(--fr-edge) * 0.407), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.593), 62.5% calc(var(--fr-edge) * 0.684), 68.8% calc(var(--fr-edge) * 0.768), 75.0% calc(var(--fr-edge) * 0.844), 81.2% calc(var(--fr-edge) * 0.908), 87.5% calc(var(--fr-edge) * 0.957), 93.8% calc(var(--fr-edge) * 0.989), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 93.8% calc(var(--fr-edge) * 0.989 + 3px), 87.5% calc(var(--fr-edge) * 0.957 + 3px), 81.2% calc(var(--fr-edge) * 0.908 + 3px), 75.0% calc(var(--fr-edge) * 0.844 + 3px), 68.8% calc(var(--fr-edge) * 0.768 + 3px), 62.5% calc(var(--fr-edge) * 0.684 + 3px), 56.2% calc(var(--fr-edge) * 0.593 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.407 + 3px), 37.5% calc(var(--fr-edge) * 0.316 + 3px), 31.2% calc(var(--fr-edge) * 0.232 + 3px), 25.0% calc(var(--fr-edge) * 0.156 + 3px), 18.8% calc(var(--fr-edge) * 0.092 + 3px), 12.5% calc(var(--fr-edge) * 0.043 + 3px), 6.2% calc(var(--fr-edge) * 0.011 + 3px), 0.0% calc(var(--fr-edge) * 0.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.011), 12.5% calc(var(--fr-edge) * 0.043), 18.8% calc(var(--fr-edge) * 0.092), 25.0% calc(var(--fr-edge) * 0.156), 31.2% calc(var(--fr-edge) * 0.232), 37.5% calc(var(--fr-edge) * 0.316), 43.8% calc(var(--fr-edge) * 0.407), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.593), 62.5% calc(var(--fr-edge) * 0.684), 68.8% calc(var(--fr-edge) * 0.768), 75.0% calc(var(--fr-edge) * 0.844), 81.2% calc(var(--fr-edge) * 0.908), 87.5% calc(var(--fr-edge) * 0.957), 93.8% calc(var(--fr-edge) * 0.989), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 93.8% calc(var(--fr-edge) * 0.989 + 3px), 87.5% calc(var(--fr-edge) * 0.957 + 3px), 81.2% calc(var(--fr-edge) * 0.908 + 3px), 75.0% calc(var(--fr-edge) * 0.844 + 3px), 68.8% calc(var(--fr-edge) * 0.768 + 3px), 62.5% calc(var(--fr-edge) * 0.684 + 3px), 56.2% calc(var(--fr-edge) * 0.593 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.407 + 3px), 37.5% calc(var(--fr-edge) * 0.316 + 3px), 31.2% calc(var(--fr-edge) * 0.232 + 3px), 25.0% calc(var(--fr-edge) * 0.156 + 3px), 18.8% calc(var(--fr-edge) * 0.092 + 3px), 12.5% calc(var(--fr-edge) * 0.043 + 3px), 6.2% calc(var(--fr-edge) * 0.011 + 3px), 0.0% calc(var(--fr-edge) * 0.000 + 3px));
}

html body .workflows-page .wf-final-cta{
    margin-top: calc(var(--fr-edge) * -1) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 3.1% calc(var(--fr-edge) * 0.844), 6.2% calc(var(--fr-edge) * 0.729), 9.4% calc(var(--fr-edge) * 0.628), 12.5% calc(var(--fr-edge) * 0.536), 15.6% calc(var(--fr-edge) * 0.452), 18.8% calc(var(--fr-edge) * 0.375), 21.9% calc(var(--fr-edge) * 0.305), 25.0% calc(var(--fr-edge) * 0.242), 28.1% calc(var(--fr-edge) * 0.186), 31.2% calc(var(--fr-edge) * 0.137), 34.4% calc(var(--fr-edge) * 0.096), 37.5% calc(var(--fr-edge) * 0.061), 40.6% calc(var(--fr-edge) * 0.035), 43.8% calc(var(--fr-edge) * 0.015), 46.9% calc(var(--fr-edge) * 0.004), 50.0% calc(var(--fr-edge) * 0.000), 53.1% calc(var(--fr-edge) * 0.004), 56.2% calc(var(--fr-edge) * 0.015), 59.4% calc(var(--fr-edge) * 0.035), 62.5% calc(var(--fr-edge) * 0.061), 65.6% calc(var(--fr-edge) * 0.096), 68.8% calc(var(--fr-edge) * 0.137), 71.9% calc(var(--fr-edge) * 0.186), 75.0% calc(var(--fr-edge) * 0.242), 78.1% calc(var(--fr-edge) * 0.305), 81.2% calc(var(--fr-edge) * 0.375), 84.4% calc(var(--fr-edge) * 0.452), 87.5% calc(var(--fr-edge) * 0.536), 90.6% calc(var(--fr-edge) * 0.628), 93.8% calc(var(--fr-edge) * 0.729), 96.9% calc(var(--fr-edge) * 0.844), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 3.1% calc(var(--fr-edge) * 0.844), 6.2% calc(var(--fr-edge) * 0.729), 9.4% calc(var(--fr-edge) * 0.628), 12.5% calc(var(--fr-edge) * 0.536), 15.6% calc(var(--fr-edge) * 0.452), 18.8% calc(var(--fr-edge) * 0.375), 21.9% calc(var(--fr-edge) * 0.305), 25.0% calc(var(--fr-edge) * 0.242), 28.1% calc(var(--fr-edge) * 0.186), 31.2% calc(var(--fr-edge) * 0.137), 34.4% calc(var(--fr-edge) * 0.096), 37.5% calc(var(--fr-edge) * 0.061), 40.6% calc(var(--fr-edge) * 0.035), 43.8% calc(var(--fr-edge) * 0.015), 46.9% calc(var(--fr-edge) * 0.004), 50.0% calc(var(--fr-edge) * 0.000), 53.1% calc(var(--fr-edge) * 0.004), 56.2% calc(var(--fr-edge) * 0.015), 59.4% calc(var(--fr-edge) * 0.035), 62.5% calc(var(--fr-edge) * 0.061), 65.6% calc(var(--fr-edge) * 0.096), 68.8% calc(var(--fr-edge) * 0.137), 71.9% calc(var(--fr-edge) * 0.186), 75.0% calc(var(--fr-edge) * 0.242), 78.1% calc(var(--fr-edge) * 0.305), 81.2% calc(var(--fr-edge) * 0.375), 84.4% calc(var(--fr-edge) * 0.452), 87.5% calc(var(--fr-edge) * 0.536), 90.6% calc(var(--fr-edge) * 0.628), 93.8% calc(var(--fr-edge) * 0.729), 96.9% calc(var(--fr-edge) * 0.844), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
}
html body .workflows-page .wf-final-cta__inner::after{
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 3;
    top: calc(var(--fr-edge) * -1) !important; left: 50% !important; width: 100vw !important; transform: translateX(-50%);
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: var(--biab-line, .6);
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 3.1% calc(var(--fr-edge) * 0.844), 6.2% calc(var(--fr-edge) * 0.729), 9.4% calc(var(--fr-edge) * 0.628), 12.5% calc(var(--fr-edge) * 0.536), 15.6% calc(var(--fr-edge) * 0.452), 18.8% calc(var(--fr-edge) * 0.375), 21.9% calc(var(--fr-edge) * 0.305), 25.0% calc(var(--fr-edge) * 0.242), 28.1% calc(var(--fr-edge) * 0.186), 31.2% calc(var(--fr-edge) * 0.137), 34.4% calc(var(--fr-edge) * 0.096), 37.5% calc(var(--fr-edge) * 0.061), 40.6% calc(var(--fr-edge) * 0.035), 43.8% calc(var(--fr-edge) * 0.015), 46.9% calc(var(--fr-edge) * 0.004), 50.0% calc(var(--fr-edge) * 0.000), 53.1% calc(var(--fr-edge) * 0.004), 56.2% calc(var(--fr-edge) * 0.015), 59.4% calc(var(--fr-edge) * 0.035), 62.5% calc(var(--fr-edge) * 0.061), 65.6% calc(var(--fr-edge) * 0.096), 68.8% calc(var(--fr-edge) * 0.137), 71.9% calc(var(--fr-edge) * 0.186), 75.0% calc(var(--fr-edge) * 0.242), 78.1% calc(var(--fr-edge) * 0.305), 81.2% calc(var(--fr-edge) * 0.375), 84.4% calc(var(--fr-edge) * 0.452), 87.5% calc(var(--fr-edge) * 0.536), 90.6% calc(var(--fr-edge) * 0.628), 93.8% calc(var(--fr-edge) * 0.729), 96.9% calc(var(--fr-edge) * 0.844), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 96.9% calc(var(--fr-edge) * 0.844 + 3px), 93.8% calc(var(--fr-edge) * 0.729 + 3px), 90.6% calc(var(--fr-edge) * 0.628 + 3px), 87.5% calc(var(--fr-edge) * 0.536 + 3px), 84.4% calc(var(--fr-edge) * 0.452 + 3px), 81.2% calc(var(--fr-edge) * 0.375 + 3px), 78.1% calc(var(--fr-edge) * 0.305 + 3px), 75.0% calc(var(--fr-edge) * 0.242 + 3px), 71.9% calc(var(--fr-edge) * 0.186 + 3px), 68.8% calc(var(--fr-edge) * 0.137 + 3px), 65.6% calc(var(--fr-edge) * 0.096 + 3px), 62.5% calc(var(--fr-edge) * 0.061 + 3px), 59.4% calc(var(--fr-edge) * 0.035 + 3px), 56.2% calc(var(--fr-edge) * 0.015 + 3px), 53.1% calc(var(--fr-edge) * 0.004 + 3px), 50.0% calc(var(--fr-edge) * 0.000 + 3px), 46.9% calc(var(--fr-edge) * 0.004 + 3px), 43.8% calc(var(--fr-edge) * 0.015 + 3px), 40.6% calc(var(--fr-edge) * 0.035 + 3px), 37.5% calc(var(--fr-edge) * 0.061 + 3px), 34.4% calc(var(--fr-edge) * 0.096 + 3px), 31.2% calc(var(--fr-edge) * 0.137 + 3px), 28.1% calc(var(--fr-edge) * 0.186 + 3px), 25.0% calc(var(--fr-edge) * 0.242 + 3px), 21.9% calc(var(--fr-edge) * 0.305 + 3px), 18.8% calc(var(--fr-edge) * 0.375 + 3px), 15.6% calc(var(--fr-edge) * 0.452 + 3px), 12.5% calc(var(--fr-edge) * 0.536 + 3px), 9.4% calc(var(--fr-edge) * 0.628 + 3px), 6.2% calc(var(--fr-edge) * 0.729 + 3px), 3.1% calc(var(--fr-edge) * 0.844 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 3.1% calc(var(--fr-edge) * 0.844), 6.2% calc(var(--fr-edge) * 0.729), 9.4% calc(var(--fr-edge) * 0.628), 12.5% calc(var(--fr-edge) * 0.536), 15.6% calc(var(--fr-edge) * 0.452), 18.8% calc(var(--fr-edge) * 0.375), 21.9% calc(var(--fr-edge) * 0.305), 25.0% calc(var(--fr-edge) * 0.242), 28.1% calc(var(--fr-edge) * 0.186), 31.2% calc(var(--fr-edge) * 0.137), 34.4% calc(var(--fr-edge) * 0.096), 37.5% calc(var(--fr-edge) * 0.061), 40.6% calc(var(--fr-edge) * 0.035), 43.8% calc(var(--fr-edge) * 0.015), 46.9% calc(var(--fr-edge) * 0.004), 50.0% calc(var(--fr-edge) * 0.000), 53.1% calc(var(--fr-edge) * 0.004), 56.2% calc(var(--fr-edge) * 0.015), 59.4% calc(var(--fr-edge) * 0.035), 62.5% calc(var(--fr-edge) * 0.061), 65.6% calc(var(--fr-edge) * 0.096), 68.8% calc(var(--fr-edge) * 0.137), 71.9% calc(var(--fr-edge) * 0.186), 75.0% calc(var(--fr-edge) * 0.242), 78.1% calc(var(--fr-edge) * 0.305), 81.2% calc(var(--fr-edge) * 0.375), 84.4% calc(var(--fr-edge) * 0.452), 87.5% calc(var(--fr-edge) * 0.536), 90.6% calc(var(--fr-edge) * 0.628), 93.8% calc(var(--fr-edge) * 0.729), 96.9% calc(var(--fr-edge) * 0.844), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 96.9% calc(var(--fr-edge) * 0.844 + 3px), 93.8% calc(var(--fr-edge) * 0.729 + 3px), 90.6% calc(var(--fr-edge) * 0.628 + 3px), 87.5% calc(var(--fr-edge) * 0.536 + 3px), 84.4% calc(var(--fr-edge) * 0.452 + 3px), 81.2% calc(var(--fr-edge) * 0.375 + 3px), 78.1% calc(var(--fr-edge) * 0.305 + 3px), 75.0% calc(var(--fr-edge) * 0.242 + 3px), 71.9% calc(var(--fr-edge) * 0.186 + 3px), 68.8% calc(var(--fr-edge) * 0.137 + 3px), 65.6% calc(var(--fr-edge) * 0.096 + 3px), 62.5% calc(var(--fr-edge) * 0.061 + 3px), 59.4% calc(var(--fr-edge) * 0.035 + 3px), 56.2% calc(var(--fr-edge) * 0.015 + 3px), 53.1% calc(var(--fr-edge) * 0.004 + 3px), 50.0% calc(var(--fr-edge) * 0.000 + 3px), 46.9% calc(var(--fr-edge) * 0.004 + 3px), 43.8% calc(var(--fr-edge) * 0.015 + 3px), 40.6% calc(var(--fr-edge) * 0.035 + 3px), 37.5% calc(var(--fr-edge) * 0.061 + 3px), 34.4% calc(var(--fr-edge) * 0.096 + 3px), 31.2% calc(var(--fr-edge) * 0.137 + 3px), 28.1% calc(var(--fr-edge) * 0.186 + 3px), 25.0% calc(var(--fr-edge) * 0.242 + 3px), 21.9% calc(var(--fr-edge) * 0.305 + 3px), 18.8% calc(var(--fr-edge) * 0.375 + 3px), 15.6% calc(var(--fr-edge) * 0.452 + 3px), 12.5% calc(var(--fr-edge) * 0.536 + 3px), 9.4% calc(var(--fr-edge) * 0.628 + 3px), 6.2% calc(var(--fr-edge) * 0.729 + 3px), 3.1% calc(var(--fr-edge) * 0.844 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
}

/* ---------- 02 · ONE ICON LANGUAGE ---------- */

html body .workflows-page .wf-benefits__icon,
html body .workflows-page .wf-transformation__icon,
html body .workflows-page .wf-connected__icon {
    position: relative;
    display: grid !important;
    place-items: center;
    width: 76px !important;
    height: 76px !important;
    min-width: 76px !important;
    min-height: 76px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    color: #84634E !important;
    background: linear-gradient(145deg, #FFF7EF 0%, #F3E2D5 60%, #EAD2C2 100%) !important;
    border: 1px solid rgba(181, 143, 119, .18) !important;
    box-shadow: 0 5px 12px rgba(75, 49, 34, .035), 0 18px 30px rgba(75, 49, 34, .075),
                inset 0 2px 2px rgba(255, 255, 255, .9), inset 0 -4px 9px rgba(136, 91, 62, .04) !important;
}
html body .workflows-page .wf-benefits__icon::before,
html body .workflows-page .wf-transformation__icon::before,
html body .workflows-page .wf-connected__icon::before {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .42);
    pointer-events: none;
}
html body .workflows-page .wf-benefits__card:nth-child(odd) .wf-benefits__icon,
html body .workflows-page .wf-transformation__stage:nth-child(even) .wf-transformation__icon,
html body .workflows-page .wf-connected__step:nth-child(even) .wf-connected__icon {
    color: #566449 !important;
    background: linear-gradient(145deg, #F7F9F2 0%, #E6EBDD 55%, #D4DFC8 100%) !important;
    border-color: rgba(111, 137, 101, .18) !important;
    box-shadow: 0 5px 12px rgba(58, 78, 51, .035), 0 18px 30px rgba(58, 78, 51, .075),
                inset 0 2px 2px rgba(255, 255, 255, .9), inset 0 -4px 9px rgba(68, 98, 59, .04) !important;
}
html body .workflows-page .wf-benefits__icon svg,
html body .workflows-page .wf-transformation__icon svg,
html body .workflows-page .wf-connected__icon svg {
    width: 34px !important;
    height: 34px !important;
    max-width: none;
    stroke: currentColor !important;
    stroke-width: 1.7px !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}
html body .workflows-page .wf-benefits__icon svg *,
html body .workflows-page .wf-transformation__icon svg *,
html body .workflows-page .wf-connected__icon svg * { stroke-width: 1.7px; }

/* ---------- 03 · CARDS: the soft "leaf" corner ---------- */

html body .workflows-page .wf-benefits__card,
html body .workflows-page .wf-transformation__card { border-radius: 40px 10px 40px 10px !important; }

/* ---------- 04 · SPACING ---------- */

/* the curve already adds space above each section, so the old top padding is trimmed */
html body .workflows-page .wf-benefits, html body .workflows-page .wf-transformation, html body .workflows-page .wf-connected {
    padding-top: 34px !important;
    padding-bottom: calc(100px + var(--fr-edge) * .6) !important;
}
/* the first section has no label above its heading, so give it a little more room */
html body .workflows-page .wf-benefits { padding-top: 56px !important; }
/* the next section's curve rises into the hero, so give the hero's content room above it */
html body .workflows-page .wf-hero { box-sizing: content-box !important; padding-bottom: calc(var(--fr-edge) * .85) !important; }

@media screen and (max-width: 1100px) {
    html body .workflows-page .wf-benefits__icon,
html body .workflows-page .wf-transformation__icon,
html body .workflows-page .wf-connected__icon { width: 68px !important; height: 68px !important; min-width: 68px !important; min-height: 68px !important; }
    html body .workflows-page .wf-benefits__icon svg,
html body .workflows-page .wf-transformation__icon svg,
html body .workflows-page .wf-connected__icon svg { width: 30px !important; height: 30px !important; }
    /* keep badge shadows inside rows that scroll sideways */
    html body .workflows-page .wf-benefits__icon,
html body .workflows-page .wf-transformation__icon,
html body .workflows-page .wf-connected__icon { box-shadow: 0 3px 8px rgba(75, 49, 34, .05), 0 7px 12px rgba(75, 49, 34, .06), inset 0 2px 2px rgba(255, 255, 255, .9), inset 0 -4px 9px rgba(136, 91, 62, .04) !important; }
    html body .workflows-page .wf-benefits__card:nth-child(odd) .wf-benefits__icon,
html body .workflows-page .wf-transformation__stage:nth-child(even) .wf-transformation__icon,
html body .workflows-page .wf-connected__step:nth-child(even) .wf-connected__icon { box-shadow: 0 3px 8px rgba(58, 78, 51, .05), 0 7px 12px rgba(58, 78, 51, .06), inset 0 2px 2px rgba(255, 255, 255, .9), inset 0 -4px 9px rgba(68, 98, 59, .04) !important; }
}
@media screen and (max-width: 899px) {
    html body .workflows-page .wf-benefits, html body .workflows-page .wf-transformation, html body .workflows-page .wf-connected { padding-top: 40px !important; padding-bottom: calc(90px + var(--fr-edge) * .6) !important; }
    html body .workflows-page .wf-benefits { padding-top: 50px !important; }
}
@media screen and (max-width: 599px) {
    html body .workflows-page .wf-benefits__card, html body .workflows-page .wf-transformation__card { border-radius: 32px 8px 32px 8px !important; }
    html body .workflows-page .wf-benefits__icon,
html body .workflows-page .wf-transformation__icon,
html body .workflows-page .wf-connected__icon { width: 60px !important; height: 60px !important; min-width: 60px !important; min-height: 60px !important; }
    html body .workflows-page .wf-benefits__icon svg,
html body .workflows-page .wf-transformation__icon svg,
html body .workflows-page .wf-connected__icon svg { width: 27px !important; height: 27px !important; }
    html body .workflows-page .wf-benefits, html body .workflows-page .wf-transformation, html body .workflows-page .wf-connected { padding-bottom: calc(80px + var(--fr-edge) * .6) !important; }
}

/* END — WORKFLOWS & AUTOMATION ELEVATION */


/* =========================================================
   FRAYORA — OUR WORK ELEVATION v1
   PASTE AT THE VERY BOTTOM OF main.css

   - No words, photos, typography or buttons are changed.
   - The photographic hero keeps its own curved edge.
   - Sections get the same shaped edges as the rest of the site
     (desktop, tablet, mobile).
   - The five principle icons become the same glass badge and
     fine round line style used across the site.
========================================================= */

:root { --fr-edge: 64px; }
@media screen and (max-width: 1100px) { :root { --fr-edge: 52px; } }
@media screen and (max-width: 899px)  { :root { --fr-edge: 44px; } }
@media screen and (max-width: 599px)  { :root { --fr-edge: 34px; } }

/* ---------- 01 · SECTION SHAPES ---------- */

html body .frayora-work-page .fw-principles__inner,
html body .frayora-work-page .fw-final-cta__inner { margin-top: var(--fr-edge) !important; position: relative; }

html body .frayora-work-page .fw-portfolio  { background-color: #FAF7F2 !important; }
html body .frayora-work-page .fw-principles { background-color: #F5EDE4 !important; }
html body .frayora-work-page .fw-final-cta  { background-color: #F8F3EB !important; }

html body .frayora-work-page .fw-principles{
    margin-top: calc(var(--fr-edge) * -1) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
}
html body .frayora-work-page .fw-principles__inner::after{
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 3;
    top: calc(var(--fr-edge) * -1) !important; left: 50% !important; width: 100vw !important; transform: translateX(-50%);
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: var(--biab-line, .6);
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 93.8% calc(var(--fr-edge) * 0.805 + 3px), 87.5% calc(var(--fr-edge) * 0.617 + 3px), 81.2% calc(var(--fr-edge) * 0.444 + 3px), 75.0% calc(var(--fr-edge) * 0.293 + 3px), 68.8% calc(var(--fr-edge) * 0.169 + 3px), 62.5% calc(var(--fr-edge) * 0.076 + 3px), 56.2% calc(var(--fr-edge) * 0.019 + 3px), 50.0% calc(var(--fr-edge) * 0.000 + 3px), 43.8% calc(var(--fr-edge) * 0.019 + 3px), 37.5% calc(var(--fr-edge) * 0.076 + 3px), 31.2% calc(var(--fr-edge) * 0.169 + 3px), 25.0% calc(var(--fr-edge) * 0.293 + 3px), 18.8% calc(var(--fr-edge) * 0.444 + 3px), 12.5% calc(var(--fr-edge) * 0.617 + 3px), 6.2% calc(var(--fr-edge) * 0.805 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 93.8% calc(var(--fr-edge) * 0.805 + 3px), 87.5% calc(var(--fr-edge) * 0.617 + 3px), 81.2% calc(var(--fr-edge) * 0.444 + 3px), 75.0% calc(var(--fr-edge) * 0.293 + 3px), 68.8% calc(var(--fr-edge) * 0.169 + 3px), 62.5% calc(var(--fr-edge) * 0.076 + 3px), 56.2% calc(var(--fr-edge) * 0.019 + 3px), 50.0% calc(var(--fr-edge) * 0.000 + 3px), 43.8% calc(var(--fr-edge) * 0.019 + 3px), 37.5% calc(var(--fr-edge) * 0.076 + 3px), 31.2% calc(var(--fr-edge) * 0.169 + 3px), 25.0% calc(var(--fr-edge) * 0.293 + 3px), 18.8% calc(var(--fr-edge) * 0.444 + 3px), 12.5% calc(var(--fr-edge) * 0.617 + 3px), 6.2% calc(var(--fr-edge) * 0.805 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
}

html body .frayora-work-page .fw-final-cta{
    margin-top: calc(var(--fr-edge) * -1) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 3.1% calc(var(--fr-edge) * 0.844), 6.2% calc(var(--fr-edge) * 0.729), 9.4% calc(var(--fr-edge) * 0.628), 12.5% calc(var(--fr-edge) * 0.536), 15.6% calc(var(--fr-edge) * 0.452), 18.8% calc(var(--fr-edge) * 0.375), 21.9% calc(var(--fr-edge) * 0.305), 25.0% calc(var(--fr-edge) * 0.242), 28.1% calc(var(--fr-edge) * 0.186), 31.2% calc(var(--fr-edge) * 0.137), 34.4% calc(var(--fr-edge) * 0.096), 37.5% calc(var(--fr-edge) * 0.061), 40.6% calc(var(--fr-edge) * 0.035), 43.8% calc(var(--fr-edge) * 0.015), 46.9% calc(var(--fr-edge) * 0.004), 50.0% calc(var(--fr-edge) * 0.000), 53.1% calc(var(--fr-edge) * 0.004), 56.2% calc(var(--fr-edge) * 0.015), 59.4% calc(var(--fr-edge) * 0.035), 62.5% calc(var(--fr-edge) * 0.061), 65.6% calc(var(--fr-edge) * 0.096), 68.8% calc(var(--fr-edge) * 0.137), 71.9% calc(var(--fr-edge) * 0.186), 75.0% calc(var(--fr-edge) * 0.242), 78.1% calc(var(--fr-edge) * 0.305), 81.2% calc(var(--fr-edge) * 0.375), 84.4% calc(var(--fr-edge) * 0.452), 87.5% calc(var(--fr-edge) * 0.536), 90.6% calc(var(--fr-edge) * 0.628), 93.8% calc(var(--fr-edge) * 0.729), 96.9% calc(var(--fr-edge) * 0.844), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 3.1% calc(var(--fr-edge) * 0.844), 6.2% calc(var(--fr-edge) * 0.729), 9.4% calc(var(--fr-edge) * 0.628), 12.5% calc(var(--fr-edge) * 0.536), 15.6% calc(var(--fr-edge) * 0.452), 18.8% calc(var(--fr-edge) * 0.375), 21.9% calc(var(--fr-edge) * 0.305), 25.0% calc(var(--fr-edge) * 0.242), 28.1% calc(var(--fr-edge) * 0.186), 31.2% calc(var(--fr-edge) * 0.137), 34.4% calc(var(--fr-edge) * 0.096), 37.5% calc(var(--fr-edge) * 0.061), 40.6% calc(var(--fr-edge) * 0.035), 43.8% calc(var(--fr-edge) * 0.015), 46.9% calc(var(--fr-edge) * 0.004), 50.0% calc(var(--fr-edge) * 0.000), 53.1% calc(var(--fr-edge) * 0.004), 56.2% calc(var(--fr-edge) * 0.015), 59.4% calc(var(--fr-edge) * 0.035), 62.5% calc(var(--fr-edge) * 0.061), 65.6% calc(var(--fr-edge) * 0.096), 68.8% calc(var(--fr-edge) * 0.137), 71.9% calc(var(--fr-edge) * 0.186), 75.0% calc(var(--fr-edge) * 0.242), 78.1% calc(var(--fr-edge) * 0.305), 81.2% calc(var(--fr-edge) * 0.375), 84.4% calc(var(--fr-edge) * 0.452), 87.5% calc(var(--fr-edge) * 0.536), 90.6% calc(var(--fr-edge) * 0.628), 93.8% calc(var(--fr-edge) * 0.729), 96.9% calc(var(--fr-edge) * 0.844), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
}
html body .frayora-work-page .fw-final-cta::before{
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 3;
    inset: 0 0 auto 0 !important;
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: var(--biab-line, .6);
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 3.1% calc(var(--fr-edge) * 0.844), 6.2% calc(var(--fr-edge) * 0.729), 9.4% calc(var(--fr-edge) * 0.628), 12.5% calc(var(--fr-edge) * 0.536), 15.6% calc(var(--fr-edge) * 0.452), 18.8% calc(var(--fr-edge) * 0.375), 21.9% calc(var(--fr-edge) * 0.305), 25.0% calc(var(--fr-edge) * 0.242), 28.1% calc(var(--fr-edge) * 0.186), 31.2% calc(var(--fr-edge) * 0.137), 34.4% calc(var(--fr-edge) * 0.096), 37.5% calc(var(--fr-edge) * 0.061), 40.6% calc(var(--fr-edge) * 0.035), 43.8% calc(var(--fr-edge) * 0.015), 46.9% calc(var(--fr-edge) * 0.004), 50.0% calc(var(--fr-edge) * 0.000), 53.1% calc(var(--fr-edge) * 0.004), 56.2% calc(var(--fr-edge) * 0.015), 59.4% calc(var(--fr-edge) * 0.035), 62.5% calc(var(--fr-edge) * 0.061), 65.6% calc(var(--fr-edge) * 0.096), 68.8% calc(var(--fr-edge) * 0.137), 71.9% calc(var(--fr-edge) * 0.186), 75.0% calc(var(--fr-edge) * 0.242), 78.1% calc(var(--fr-edge) * 0.305), 81.2% calc(var(--fr-edge) * 0.375), 84.4% calc(var(--fr-edge) * 0.452), 87.5% calc(var(--fr-edge) * 0.536), 90.6% calc(var(--fr-edge) * 0.628), 93.8% calc(var(--fr-edge) * 0.729), 96.9% calc(var(--fr-edge) * 0.844), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 96.9% calc(var(--fr-edge) * 0.844 + 3px), 93.8% calc(var(--fr-edge) * 0.729 + 3px), 90.6% calc(var(--fr-edge) * 0.628 + 3px), 87.5% calc(var(--fr-edge) * 0.536 + 3px), 84.4% calc(var(--fr-edge) * 0.452 + 3px), 81.2% calc(var(--fr-edge) * 0.375 + 3px), 78.1% calc(var(--fr-edge) * 0.305 + 3px), 75.0% calc(var(--fr-edge) * 0.242 + 3px), 71.9% calc(var(--fr-edge) * 0.186 + 3px), 68.8% calc(var(--fr-edge) * 0.137 + 3px), 65.6% calc(var(--fr-edge) * 0.096 + 3px), 62.5% calc(var(--fr-edge) * 0.061 + 3px), 59.4% calc(var(--fr-edge) * 0.035 + 3px), 56.2% calc(var(--fr-edge) * 0.015 + 3px), 53.1% calc(var(--fr-edge) * 0.004 + 3px), 50.0% calc(var(--fr-edge) * 0.000 + 3px), 46.9% calc(var(--fr-edge) * 0.004 + 3px), 43.8% calc(var(--fr-edge) * 0.015 + 3px), 40.6% calc(var(--fr-edge) * 0.035 + 3px), 37.5% calc(var(--fr-edge) * 0.061 + 3px), 34.4% calc(var(--fr-edge) * 0.096 + 3px), 31.2% calc(var(--fr-edge) * 0.137 + 3px), 28.1% calc(var(--fr-edge) * 0.186 + 3px), 25.0% calc(var(--fr-edge) * 0.242 + 3px), 21.9% calc(var(--fr-edge) * 0.305 + 3px), 18.8% calc(var(--fr-edge) * 0.375 + 3px), 15.6% calc(var(--fr-edge) * 0.452 + 3px), 12.5% calc(var(--fr-edge) * 0.536 + 3px), 9.4% calc(var(--fr-edge) * 0.628 + 3px), 6.2% calc(var(--fr-edge) * 0.729 + 3px), 3.1% calc(var(--fr-edge) * 0.844 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 3.1% calc(var(--fr-edge) * 0.844), 6.2% calc(var(--fr-edge) * 0.729), 9.4% calc(var(--fr-edge) * 0.628), 12.5% calc(var(--fr-edge) * 0.536), 15.6% calc(var(--fr-edge) * 0.452), 18.8% calc(var(--fr-edge) * 0.375), 21.9% calc(var(--fr-edge) * 0.305), 25.0% calc(var(--fr-edge) * 0.242), 28.1% calc(var(--fr-edge) * 0.186), 31.2% calc(var(--fr-edge) * 0.137), 34.4% calc(var(--fr-edge) * 0.096), 37.5% calc(var(--fr-edge) * 0.061), 40.6% calc(var(--fr-edge) * 0.035), 43.8% calc(var(--fr-edge) * 0.015), 46.9% calc(var(--fr-edge) * 0.004), 50.0% calc(var(--fr-edge) * 0.000), 53.1% calc(var(--fr-edge) * 0.004), 56.2% calc(var(--fr-edge) * 0.015), 59.4% calc(var(--fr-edge) * 0.035), 62.5% calc(var(--fr-edge) * 0.061), 65.6% calc(var(--fr-edge) * 0.096), 68.8% calc(var(--fr-edge) * 0.137), 71.9% calc(var(--fr-edge) * 0.186), 75.0% calc(var(--fr-edge) * 0.242), 78.1% calc(var(--fr-edge) * 0.305), 81.2% calc(var(--fr-edge) * 0.375), 84.4% calc(var(--fr-edge) * 0.452), 87.5% calc(var(--fr-edge) * 0.536), 90.6% calc(var(--fr-edge) * 0.628), 93.8% calc(var(--fr-edge) * 0.729), 96.9% calc(var(--fr-edge) * 0.844), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 96.9% calc(var(--fr-edge) * 0.844 + 3px), 93.8% calc(var(--fr-edge) * 0.729 + 3px), 90.6% calc(var(--fr-edge) * 0.628 + 3px), 87.5% calc(var(--fr-edge) * 0.536 + 3px), 84.4% calc(var(--fr-edge) * 0.452 + 3px), 81.2% calc(var(--fr-edge) * 0.375 + 3px), 78.1% calc(var(--fr-edge) * 0.305 + 3px), 75.0% calc(var(--fr-edge) * 0.242 + 3px), 71.9% calc(var(--fr-edge) * 0.186 + 3px), 68.8% calc(var(--fr-edge) * 0.137 + 3px), 65.6% calc(var(--fr-edge) * 0.096 + 3px), 62.5% calc(var(--fr-edge) * 0.061 + 3px), 59.4% calc(var(--fr-edge) * 0.035 + 3px), 56.2% calc(var(--fr-edge) * 0.015 + 3px), 53.1% calc(var(--fr-edge) * 0.004 + 3px), 50.0% calc(var(--fr-edge) * 0.000 + 3px), 46.9% calc(var(--fr-edge) * 0.004 + 3px), 43.8% calc(var(--fr-edge) * 0.015 + 3px), 40.6% calc(var(--fr-edge) * 0.035 + 3px), 37.5% calc(var(--fr-edge) * 0.061 + 3px), 34.4% calc(var(--fr-edge) * 0.096 + 3px), 31.2% calc(var(--fr-edge) * 0.137 + 3px), 28.1% calc(var(--fr-edge) * 0.186 + 3px), 25.0% calc(var(--fr-edge) * 0.242 + 3px), 21.9% calc(var(--fr-edge) * 0.305 + 3px), 18.8% calc(var(--fr-edge) * 0.375 + 3px), 15.6% calc(var(--fr-edge) * 0.452 + 3px), 12.5% calc(var(--fr-edge) * 0.536 + 3px), 9.4% calc(var(--fr-edge) * 0.628 + 3px), 6.2% calc(var(--fr-edge) * 0.729 + 3px), 3.1% calc(var(--fr-edge) * 0.844 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
}

/* ---------- 02 · ONE ICON LANGUAGE ---------- */

html body .frayora-work-page .fw-principles__icon {
    position: relative;
    display: grid !important;
    place-items: center;
    width: 76px !important;
    height: 76px !important;
    min-width: 76px !important;
    border-radius: 50% !important;
    color: #84634E !important;
    background: linear-gradient(145deg, #FFF7EF 0%, #F3E2D5 60%, #EAD2C2 100%) !important;
    border: 1px solid rgba(181, 143, 119, .18) !important;
    box-shadow: 0 5px 12px rgba(75, 49, 34, .035), 0 18px 30px rgba(75, 49, 34, .075),
                inset 0 2px 2px rgba(255, 255, 255, .9), inset 0 -4px 9px rgba(136, 91, 62, .04) !important;
}
html body .frayora-work-page .fw-principles__icon::before {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .42);
    pointer-events: none;
}
html body .frayora-work-page .fw-principles__item:nth-child(even) .fw-principles__icon {
    color: #566449 !important;
    background: linear-gradient(145deg, #F7F9F2 0%, #E6EBDD 55%, #D4DFC8 100%) !important;
    border-color: rgba(111, 137, 101, .18) !important;
    box-shadow: 0 5px 12px rgba(58, 78, 51, .035), 0 18px 30px rgba(58, 78, 51, .075),
                inset 0 2px 2px rgba(255, 255, 255, .9), inset 0 -4px 9px rgba(68, 98, 59, .04) !important;
}
html body .frayora-work-page .fw-principles__icon svg {
    width: 34px !important;
    height: 34px !important;
    max-width: none;
    stroke: currentColor !important;
    stroke-width: 1.7px !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

/* ---------- 03 · PROJECT IMAGES: the soft "leaf" corner ---------- */

html body .frayora-work-page .fw-project__media { border-radius: 36px 10px 36px 10px !important; }
html body .frayora-work-page .fw-project__media img { border-radius: inherit; }

/* ---------- 04 · SPACING ---------- */

html body .frayora-work-page .fw-principles {
    padding-top: 34px !important;
    padding-bottom: calc(100px + var(--fr-edge) * .6) !important;
}
html body .frayora-work-page .fw-portfolio { padding-bottom: calc(100px + var(--fr-edge) * .5) !important; }
html body .frayora-work-page .fw-final-cta { padding-top: 0 !important; }

@media screen and (max-width: 1100px) {
    html body .frayora-work-page .fw-principles__icon { width: 68px !important; height: 68px !important; min-width: 68px !important; }
    html body .frayora-work-page .fw-principles__icon svg { width: 30px !important; height: 30px !important; }
}
@media screen and (max-width: 899px) {
    html body .frayora-work-page .fw-principles { padding-top: 40px !important; padding-bottom: calc(90px + var(--fr-edge) * .6) !important; }
}
@media screen and (max-width: 599px) {
    html body .frayora-work-page .fw-project__media { border-radius: 30px 8px 30px 8px !important; }
    html body .frayora-work-page .fw-principles__icon { width: 60px !important; height: 60px !important; min-width: 60px !important; }
    html body .frayora-work-page .fw-principles__icon svg { width: 27px !important; height: 27px !important; }
    html body .frayora-work-page .fw-principles { padding-bottom: calc(80px + var(--fr-edge) * .6) !important; }
}

/* the old soft ellipse at the top of the principles band is replaced by the new curve */
html body .frayora-work-page .fw-principles::before { display: none !important; }

/* the principles line sits on the inner box, which starts below the section's top padding */
html body .frayora-work-page .fw-principles__inner::after { top: calc(var(--fr-edge) * -1 - 34px) !important; }
@media screen and (max-width: 899px) {
    html body .frayora-work-page .fw-principles__inner::after { top: calc(var(--fr-edge) * -1 - 40px) !important; }
}

/* END — OUR WORK ELEVATION */


/* =========================================================
   FRAYORA — OUR WORK · HERO ELEVATION
   Scoped to the Our Work page only (About keeps its own hero).
   Desktop, tablet and mobile. No text, photo or button changes.
   - The photo now ends in the same shaped edge as the rest of
     the site (the cream portfolio section rises over it, with
     the fine sage-to-sand line along the curve).
   - Soft olive depth + warm light over the photograph.
========================================================= */

html body .frayora-work-page .about-us-page .about-hero {
    border-radius: 0 !important;
    box-sizing: content-box !important;
    padding-bottom: var(--fr-edge) !important;
    background-color: #3F4A3A !important;
}

/* soft olive depth + warm light, above the photo, below the title */
html body .frayora-work-page .about-us-page .about-hero__overlay::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none;
    background:
        radial-gradient(60% 70% at 88% 6%, rgba(217,183,126,.20), rgba(217,183,126,0) 70%),
        radial-gradient(55% 75% at 6% 100%, rgba(214,106,67,.16), rgba(214,106,67,0) 72%),
        linear-gradient(180deg, rgba(63,74,58,.10) 0%, rgba(63,74,58,0) 38%, rgba(63,74,58,.34) 100%) !important;
}

html body .frayora-work-page .about-us-page .about-hero__inner { z-index: 3; }

/* the portfolio section rises over the photo with the shared shaped edge */
html body .frayora-work-page .fw-portfolio {
    margin-top: calc(var(--fr-edge) * -1) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.176), 12.5% calc(var(--fr-edge) * 0.344), 18.8% calc(var(--fr-edge) * 0.500), 25.0% calc(var(--fr-edge) * 0.636), 31.2% calc(var(--fr-edge) * 0.748), 37.5% calc(var(--fr-edge) * 0.831), 43.8% calc(var(--fr-edge) * 0.883), 50.0% calc(var(--fr-edge) * 0.900), 56.2% calc(var(--fr-edge) * 0.883), 62.5% calc(var(--fr-edge) * 0.831), 68.8% calc(var(--fr-edge) * 0.748), 75.0% calc(var(--fr-edge) * 0.636), 81.2% calc(var(--fr-edge) * 0.500), 87.5% calc(var(--fr-edge) * 0.344), 93.8% calc(var(--fr-edge) * 0.176), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.176), 12.5% calc(var(--fr-edge) * 0.344), 18.8% calc(var(--fr-edge) * 0.500), 25.0% calc(var(--fr-edge) * 0.636), 31.2% calc(var(--fr-edge) * 0.748), 37.5% calc(var(--fr-edge) * 0.831), 43.8% calc(var(--fr-edge) * 0.883), 50.0% calc(var(--fr-edge) * 0.900), 56.2% calc(var(--fr-edge) * 0.883), 62.5% calc(var(--fr-edge) * 0.831), 68.8% calc(var(--fr-edge) * 0.748), 75.0% calc(var(--fr-edge) * 0.636), 81.2% calc(var(--fr-edge) * 0.500), 87.5% calc(var(--fr-edge) * 0.344), 93.8% calc(var(--fr-edge) * 0.176), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
}
html body .frayora-work-page .fw-portfolio__inner { margin-top: var(--fr-edge) !important; }
html body .frayora-work-page .fw-portfolio::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 3;
    inset: 0 0 auto 0 !important;
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: .85;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.176), 12.5% calc(var(--fr-edge) * 0.344), 18.8% calc(var(--fr-edge) * 0.500), 25.0% calc(var(--fr-edge) * 0.636), 31.2% calc(var(--fr-edge) * 0.748), 37.5% calc(var(--fr-edge) * 0.831), 43.8% calc(var(--fr-edge) * 0.883), 50.0% calc(var(--fr-edge) * 0.900), 56.2% calc(var(--fr-edge) * 0.883), 62.5% calc(var(--fr-edge) * 0.831), 68.8% calc(var(--fr-edge) * 0.748), 75.0% calc(var(--fr-edge) * 0.636), 81.2% calc(var(--fr-edge) * 0.500), 87.5% calc(var(--fr-edge) * 0.344), 93.8% calc(var(--fr-edge) * 0.176), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.176 + 3px), 87.5% calc(var(--fr-edge) * 0.344 + 3px), 81.2% calc(var(--fr-edge) * 0.500 + 3px), 75.0% calc(var(--fr-edge) * 0.636 + 3px), 68.8% calc(var(--fr-edge) * 0.748 + 3px), 62.5% calc(var(--fr-edge) * 0.831 + 3px), 56.2% calc(var(--fr-edge) * 0.883 + 3px), 50.0% calc(var(--fr-edge) * 0.900 + 3px), 43.8% calc(var(--fr-edge) * 0.883 + 3px), 37.5% calc(var(--fr-edge) * 0.831 + 3px), 31.2% calc(var(--fr-edge) * 0.748 + 3px), 25.0% calc(var(--fr-edge) * 0.636 + 3px), 18.8% calc(var(--fr-edge) * 0.500 + 3px), 12.5% calc(var(--fr-edge) * 0.344 + 3px), 6.2% calc(var(--fr-edge) * 0.176 + 3px), 0.0% calc(var(--fr-edge) * 0.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.176), 12.5% calc(var(--fr-edge) * 0.344), 18.8% calc(var(--fr-edge) * 0.500), 25.0% calc(var(--fr-edge) * 0.636), 31.2% calc(var(--fr-edge) * 0.748), 37.5% calc(var(--fr-edge) * 0.831), 43.8% calc(var(--fr-edge) * 0.883), 50.0% calc(var(--fr-edge) * 0.900), 56.2% calc(var(--fr-edge) * 0.883), 62.5% calc(var(--fr-edge) * 0.831), 68.8% calc(var(--fr-edge) * 0.748), 75.0% calc(var(--fr-edge) * 0.636), 81.2% calc(var(--fr-edge) * 0.500), 87.5% calc(var(--fr-edge) * 0.344), 93.8% calc(var(--fr-edge) * 0.176), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.176 + 3px), 87.5% calc(var(--fr-edge) * 0.344 + 3px), 81.2% calc(var(--fr-edge) * 0.500 + 3px), 75.0% calc(var(--fr-edge) * 0.636 + 3px), 68.8% calc(var(--fr-edge) * 0.748 + 3px), 62.5% calc(var(--fr-edge) * 0.831 + 3px), 56.2% calc(var(--fr-edge) * 0.883 + 3px), 50.0% calc(var(--fr-edge) * 0.900 + 3px), 43.8% calc(var(--fr-edge) * 0.883 + 3px), 37.5% calc(var(--fr-edge) * 0.831 + 3px), 31.2% calc(var(--fr-edge) * 0.748 + 3px), 25.0% calc(var(--fr-edge) * 0.636 + 3px), 18.8% calc(var(--fr-edge) * 0.500 + 3px), 12.5% calc(var(--fr-edge) * 0.344 + 3px), 6.2% calc(var(--fr-edge) * 0.176 + 3px), 0.0% calc(var(--fr-edge) * 0.000 + 3px));
}


/* =========================================================
   FRAYORA — OUR APPROACH ELEVATION v1
   PASTE AT THE VERY BOTTOM OF main.css

   - No words, photos, typography or buttons are changed.
   - Hero and every section get the same shaped edges and the
     fine sage-to-sand line used across the site.
   - Icons (four step icons, five journey numbers, list marks)
     share one glass-badge language: peach / sage, round line.
   - Desktop, tablet and mobile.
========================================================= */

:root { --fr-edge: 64px; }
@media screen and (max-width: 1100px) { :root { --fr-edge: 52px; } }
@media screen and (max-width: 899px)  { :root { --fr-edge: 44px; } }
@media screen and (max-width: 599px)  { :root { --fr-edge: 34px; } }

/* ---------- 00 · HERO ---------- */

html body .our-approach-page .about-us-page .about-hero {
    border-radius: 0 !important;
    box-sizing: content-box !important;
    padding-bottom: var(--fr-edge) !important;
    background-color: #3F4A3A !important;
    box-shadow: none !important;
}
html body .our-approach-page .about-us-page .about-hero__overlay::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none;
    background:
        radial-gradient(60% 70% at 88% 6%, rgba(217,183,126,.20), rgba(217,183,126,0) 70%),
        radial-gradient(55% 75% at 6% 100%, rgba(214,106,67,.16), rgba(214,106,67,0) 72%),
        linear-gradient(180deg, rgba(63,74,58,.10) 0%, rgba(63,74,58,0) 38%, rgba(63,74,58,.34) 100%) !important;
}
html body .our-approach-page .about-us-page .about-hero__inner { z-index: 3; }

/* ---------- 01 · SHAPED SECTION EDGES ---------- */

html body .our-approach-page .oa-approach-cards { background-color: #FAF7F2 !important; }
html body .our-approach-page .oa-journey        { background-color: #F5EDE4 !important; }
html body .our-approach-page .oa-compare        { background-color: #FAF7F2 !important; }
html body .our-approach-page .oa-final          { background-color: #F8F3EB !important; }
html body .our-approach-page .oa-approach-cards {
    margin-top: calc(var(--fr-edge) * -1) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.176), 12.5% calc(var(--fr-edge) * 0.344), 18.8% calc(var(--fr-edge) * 0.500), 25.0% calc(var(--fr-edge) * 0.636), 31.2% calc(var(--fr-edge) * 0.748), 37.5% calc(var(--fr-edge) * 0.831), 43.8% calc(var(--fr-edge) * 0.883), 50.0% calc(var(--fr-edge) * 0.900), 56.2% calc(var(--fr-edge) * 0.883), 62.5% calc(var(--fr-edge) * 0.831), 68.8% calc(var(--fr-edge) * 0.748), 75.0% calc(var(--fr-edge) * 0.636), 81.2% calc(var(--fr-edge) * 0.500), 87.5% calc(var(--fr-edge) * 0.344), 93.8% calc(var(--fr-edge) * 0.176), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.176), 12.5% calc(var(--fr-edge) * 0.344), 18.8% calc(var(--fr-edge) * 0.500), 25.0% calc(var(--fr-edge) * 0.636), 31.2% calc(var(--fr-edge) * 0.748), 37.5% calc(var(--fr-edge) * 0.831), 43.8% calc(var(--fr-edge) * 0.883), 50.0% calc(var(--fr-edge) * 0.900), 56.2% calc(var(--fr-edge) * 0.883), 62.5% calc(var(--fr-edge) * 0.831), 68.8% calc(var(--fr-edge) * 0.748), 75.0% calc(var(--fr-edge) * 0.636), 81.2% calc(var(--fr-edge) * 0.500), 87.5% calc(var(--fr-edge) * 0.344), 93.8% calc(var(--fr-edge) * 0.176), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
    padding-top: var(--fr-edge) !important;
}
html body .our-approach-page .oa-approach-cards__inner { position: relative; }
html body .our-approach-page .oa-approach-cards::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 4;
    inset: 0 0 auto 0 !important;
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: .85;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.176), 12.5% calc(var(--fr-edge) * 0.344), 18.8% calc(var(--fr-edge) * 0.500), 25.0% calc(var(--fr-edge) * 0.636), 31.2% calc(var(--fr-edge) * 0.748), 37.5% calc(var(--fr-edge) * 0.831), 43.8% calc(var(--fr-edge) * 0.883), 50.0% calc(var(--fr-edge) * 0.900), 56.2% calc(var(--fr-edge) * 0.883), 62.5% calc(var(--fr-edge) * 0.831), 68.8% calc(var(--fr-edge) * 0.748), 75.0% calc(var(--fr-edge) * 0.636), 81.2% calc(var(--fr-edge) * 0.500), 87.5% calc(var(--fr-edge) * 0.344), 93.8% calc(var(--fr-edge) * 0.176), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.176 + 3px), 87.5% calc(var(--fr-edge) * 0.344 + 3px), 81.2% calc(var(--fr-edge) * 0.500 + 3px), 75.0% calc(var(--fr-edge) * 0.636 + 3px), 68.8% calc(var(--fr-edge) * 0.748 + 3px), 62.5% calc(var(--fr-edge) * 0.831 + 3px), 56.2% calc(var(--fr-edge) * 0.883 + 3px), 50.0% calc(var(--fr-edge) * 0.900 + 3px), 43.8% calc(var(--fr-edge) * 0.883 + 3px), 37.5% calc(var(--fr-edge) * 0.831 + 3px), 31.2% calc(var(--fr-edge) * 0.748 + 3px), 25.0% calc(var(--fr-edge) * 0.636 + 3px), 18.8% calc(var(--fr-edge) * 0.500 + 3px), 12.5% calc(var(--fr-edge) * 0.344 + 3px), 6.2% calc(var(--fr-edge) * 0.176 + 3px), 0.0% calc(var(--fr-edge) * 0.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.176), 12.5% calc(var(--fr-edge) * 0.344), 18.8% calc(var(--fr-edge) * 0.500), 25.0% calc(var(--fr-edge) * 0.636), 31.2% calc(var(--fr-edge) * 0.748), 37.5% calc(var(--fr-edge) * 0.831), 43.8% calc(var(--fr-edge) * 0.883), 50.0% calc(var(--fr-edge) * 0.900), 56.2% calc(var(--fr-edge) * 0.883), 62.5% calc(var(--fr-edge) * 0.831), 68.8% calc(var(--fr-edge) * 0.748), 75.0% calc(var(--fr-edge) * 0.636), 81.2% calc(var(--fr-edge) * 0.500), 87.5% calc(var(--fr-edge) * 0.344), 93.8% calc(var(--fr-edge) * 0.176), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.176 + 3px), 87.5% calc(var(--fr-edge) * 0.344 + 3px), 81.2% calc(var(--fr-edge) * 0.500 + 3px), 75.0% calc(var(--fr-edge) * 0.636 + 3px), 68.8% calc(var(--fr-edge) * 0.748 + 3px), 62.5% calc(var(--fr-edge) * 0.831 + 3px), 56.2% calc(var(--fr-edge) * 0.883 + 3px), 50.0% calc(var(--fr-edge) * 0.900 + 3px), 43.8% calc(var(--fr-edge) * 0.883 + 3px), 37.5% calc(var(--fr-edge) * 0.831 + 3px), 31.2% calc(var(--fr-edge) * 0.748 + 3px), 25.0% calc(var(--fr-edge) * 0.636 + 3px), 18.8% calc(var(--fr-edge) * 0.500 + 3px), 12.5% calc(var(--fr-edge) * 0.344 + 3px), 6.2% calc(var(--fr-edge) * 0.176 + 3px), 0.0% calc(var(--fr-edge) * 0.000 + 3px));
}
html body .our-approach-page .oa-journey {
    margin-top: calc(var(--fr-edge) * -1) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.989), 12.5% calc(var(--fr-edge) * 0.957), 18.8% calc(var(--fr-edge) * 0.908), 25.0% calc(var(--fr-edge) * 0.844), 31.2% calc(var(--fr-edge) * 0.768), 37.5% calc(var(--fr-edge) * 0.684), 43.8% calc(var(--fr-edge) * 0.593), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.407), 62.5% calc(var(--fr-edge) * 0.316), 68.8% calc(var(--fr-edge) * 0.232), 75.0% calc(var(--fr-edge) * 0.156), 81.2% calc(var(--fr-edge) * 0.092), 87.5% calc(var(--fr-edge) * 0.043), 93.8% calc(var(--fr-edge) * 0.011), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.989), 12.5% calc(var(--fr-edge) * 0.957), 18.8% calc(var(--fr-edge) * 0.908), 25.0% calc(var(--fr-edge) * 0.844), 31.2% calc(var(--fr-edge) * 0.768), 37.5% calc(var(--fr-edge) * 0.684), 43.8% calc(var(--fr-edge) * 0.593), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.407), 62.5% calc(var(--fr-edge) * 0.316), 68.8% calc(var(--fr-edge) * 0.232), 75.0% calc(var(--fr-edge) * 0.156), 81.2% calc(var(--fr-edge) * 0.092), 87.5% calc(var(--fr-edge) * 0.043), 93.8% calc(var(--fr-edge) * 0.011), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
    padding-top: var(--fr-edge) !important;
}
html body .our-approach-page .oa-journey__inner { position: relative; }
html body .our-approach-page .oa-journey::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 4;
    inset: 0 0 auto 0 !important;
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: .85;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.989), 12.5% calc(var(--fr-edge) * 0.957), 18.8% calc(var(--fr-edge) * 0.908), 25.0% calc(var(--fr-edge) * 0.844), 31.2% calc(var(--fr-edge) * 0.768), 37.5% calc(var(--fr-edge) * 0.684), 43.8% calc(var(--fr-edge) * 0.593), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.407), 62.5% calc(var(--fr-edge) * 0.316), 68.8% calc(var(--fr-edge) * 0.232), 75.0% calc(var(--fr-edge) * 0.156), 81.2% calc(var(--fr-edge) * 0.092), 87.5% calc(var(--fr-edge) * 0.043), 93.8% calc(var(--fr-edge) * 0.011), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.011 + 3px), 87.5% calc(var(--fr-edge) * 0.043 + 3px), 81.2% calc(var(--fr-edge) * 0.092 + 3px), 75.0% calc(var(--fr-edge) * 0.156 + 3px), 68.8% calc(var(--fr-edge) * 0.232 + 3px), 62.5% calc(var(--fr-edge) * 0.316 + 3px), 56.2% calc(var(--fr-edge) * 0.407 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.593 + 3px), 37.5% calc(var(--fr-edge) * 0.684 + 3px), 31.2% calc(var(--fr-edge) * 0.768 + 3px), 25.0% calc(var(--fr-edge) * 0.844 + 3px), 18.8% calc(var(--fr-edge) * 0.908 + 3px), 12.5% calc(var(--fr-edge) * 0.957 + 3px), 6.2% calc(var(--fr-edge) * 0.989 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.989), 12.5% calc(var(--fr-edge) * 0.957), 18.8% calc(var(--fr-edge) * 0.908), 25.0% calc(var(--fr-edge) * 0.844), 31.2% calc(var(--fr-edge) * 0.768), 37.5% calc(var(--fr-edge) * 0.684), 43.8% calc(var(--fr-edge) * 0.593), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.407), 62.5% calc(var(--fr-edge) * 0.316), 68.8% calc(var(--fr-edge) * 0.232), 75.0% calc(var(--fr-edge) * 0.156), 81.2% calc(var(--fr-edge) * 0.092), 87.5% calc(var(--fr-edge) * 0.043), 93.8% calc(var(--fr-edge) * 0.011), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.011 + 3px), 87.5% calc(var(--fr-edge) * 0.043 + 3px), 81.2% calc(var(--fr-edge) * 0.092 + 3px), 75.0% calc(var(--fr-edge) * 0.156 + 3px), 68.8% calc(var(--fr-edge) * 0.232 + 3px), 62.5% calc(var(--fr-edge) * 0.316 + 3px), 56.2% calc(var(--fr-edge) * 0.407 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.593 + 3px), 37.5% calc(var(--fr-edge) * 0.684 + 3px), 31.2% calc(var(--fr-edge) * 0.768 + 3px), 25.0% calc(var(--fr-edge) * 0.844 + 3px), 18.8% calc(var(--fr-edge) * 0.908 + 3px), 12.5% calc(var(--fr-edge) * 0.957 + 3px), 6.2% calc(var(--fr-edge) * 0.989 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
}
html body .our-approach-page .oa-compare {
    margin-top: calc(var(--fr-edge) * -1) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
    padding-top: var(--fr-edge) !important;
}
html body .our-approach-page .oa-compare__inner { position: relative; }
html body .our-approach-page .oa-compare::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 4;
    inset: 0 0 auto 0 !important;
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: .85;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 93.8% calc(var(--fr-edge) * 0.805 + 3px), 87.5% calc(var(--fr-edge) * 0.617 + 3px), 81.2% calc(var(--fr-edge) * 0.444 + 3px), 75.0% calc(var(--fr-edge) * 0.293 + 3px), 68.8% calc(var(--fr-edge) * 0.169 + 3px), 62.5% calc(var(--fr-edge) * 0.076 + 3px), 56.2% calc(var(--fr-edge) * 0.019 + 3px), 50.0% calc(var(--fr-edge) * 0.000 + 3px), 43.8% calc(var(--fr-edge) * 0.019 + 3px), 37.5% calc(var(--fr-edge) * 0.076 + 3px), 31.2% calc(var(--fr-edge) * 0.169 + 3px), 25.0% calc(var(--fr-edge) * 0.293 + 3px), 18.8% calc(var(--fr-edge) * 0.444 + 3px), 12.5% calc(var(--fr-edge) * 0.617 + 3px), 6.2% calc(var(--fr-edge) * 0.805 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 93.8% calc(var(--fr-edge) * 0.805 + 3px), 87.5% calc(var(--fr-edge) * 0.617 + 3px), 81.2% calc(var(--fr-edge) * 0.444 + 3px), 75.0% calc(var(--fr-edge) * 0.293 + 3px), 68.8% calc(var(--fr-edge) * 0.169 + 3px), 62.5% calc(var(--fr-edge) * 0.076 + 3px), 56.2% calc(var(--fr-edge) * 0.019 + 3px), 50.0% calc(var(--fr-edge) * 0.000 + 3px), 43.8% calc(var(--fr-edge) * 0.019 + 3px), 37.5% calc(var(--fr-edge) * 0.076 + 3px), 31.2% calc(var(--fr-edge) * 0.169 + 3px), 25.0% calc(var(--fr-edge) * 0.293 + 3px), 18.8% calc(var(--fr-edge) * 0.444 + 3px), 12.5% calc(var(--fr-edge) * 0.617 + 3px), 6.2% calc(var(--fr-edge) * 0.805 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
}
html body .our-approach-page .oa-final {
    margin-top: calc(var(--fr-edge) * -1) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 3.1% calc(var(--fr-edge) * 0.844), 6.2% calc(var(--fr-edge) * 0.729), 9.4% calc(var(--fr-edge) * 0.628), 12.5% calc(var(--fr-edge) * 0.536), 15.6% calc(var(--fr-edge) * 0.452), 18.8% calc(var(--fr-edge) * 0.375), 21.9% calc(var(--fr-edge) * 0.305), 25.0% calc(var(--fr-edge) * 0.242), 28.1% calc(var(--fr-edge) * 0.186), 31.2% calc(var(--fr-edge) * 0.137), 34.4% calc(var(--fr-edge) * 0.096), 37.5% calc(var(--fr-edge) * 0.061), 40.6% calc(var(--fr-edge) * 0.035), 43.8% calc(var(--fr-edge) * 0.015), 46.9% calc(var(--fr-edge) * 0.004), 50.0% calc(var(--fr-edge) * 0.000), 53.1% calc(var(--fr-edge) * 0.004), 56.2% calc(var(--fr-edge) * 0.015), 59.4% calc(var(--fr-edge) * 0.035), 62.5% calc(var(--fr-edge) * 0.061), 65.6% calc(var(--fr-edge) * 0.096), 68.8% calc(var(--fr-edge) * 0.137), 71.9% calc(var(--fr-edge) * 0.186), 75.0% calc(var(--fr-edge) * 0.242), 78.1% calc(var(--fr-edge) * 0.305), 81.2% calc(var(--fr-edge) * 0.375), 84.4% calc(var(--fr-edge) * 0.452), 87.5% calc(var(--fr-edge) * 0.536), 90.6% calc(var(--fr-edge) * 0.628), 93.8% calc(var(--fr-edge) * 0.729), 96.9% calc(var(--fr-edge) * 0.844), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 3.1% calc(var(--fr-edge) * 0.844), 6.2% calc(var(--fr-edge) * 0.729), 9.4% calc(var(--fr-edge) * 0.628), 12.5% calc(var(--fr-edge) * 0.536), 15.6% calc(var(--fr-edge) * 0.452), 18.8% calc(var(--fr-edge) * 0.375), 21.9% calc(var(--fr-edge) * 0.305), 25.0% calc(var(--fr-edge) * 0.242), 28.1% calc(var(--fr-edge) * 0.186), 31.2% calc(var(--fr-edge) * 0.137), 34.4% calc(var(--fr-edge) * 0.096), 37.5% calc(var(--fr-edge) * 0.061), 40.6% calc(var(--fr-edge) * 0.035), 43.8% calc(var(--fr-edge) * 0.015), 46.9% calc(var(--fr-edge) * 0.004), 50.0% calc(var(--fr-edge) * 0.000), 53.1% calc(var(--fr-edge) * 0.004), 56.2% calc(var(--fr-edge) * 0.015), 59.4% calc(var(--fr-edge) * 0.035), 62.5% calc(var(--fr-edge) * 0.061), 65.6% calc(var(--fr-edge) * 0.096), 68.8% calc(var(--fr-edge) * 0.137), 71.9% calc(var(--fr-edge) * 0.186), 75.0% calc(var(--fr-edge) * 0.242), 78.1% calc(var(--fr-edge) * 0.305), 81.2% calc(var(--fr-edge) * 0.375), 84.4% calc(var(--fr-edge) * 0.452), 87.5% calc(var(--fr-edge) * 0.536), 90.6% calc(var(--fr-edge) * 0.628), 93.8% calc(var(--fr-edge) * 0.729), 96.9% calc(var(--fr-edge) * 0.844), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
    padding-top: var(--fr-edge) !important;
}
html body .our-approach-page .oa-final__inner { position: relative; }
html body .our-approach-page .oa-final::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 4;
    inset: 0 0 auto 0 !important;
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: .85;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 3.1% calc(var(--fr-edge) * 0.844), 6.2% calc(var(--fr-edge) * 0.729), 9.4% calc(var(--fr-edge) * 0.628), 12.5% calc(var(--fr-edge) * 0.536), 15.6% calc(var(--fr-edge) * 0.452), 18.8% calc(var(--fr-edge) * 0.375), 21.9% calc(var(--fr-edge) * 0.305), 25.0% calc(var(--fr-edge) * 0.242), 28.1% calc(var(--fr-edge) * 0.186), 31.2% calc(var(--fr-edge) * 0.137), 34.4% calc(var(--fr-edge) * 0.096), 37.5% calc(var(--fr-edge) * 0.061), 40.6% calc(var(--fr-edge) * 0.035), 43.8% calc(var(--fr-edge) * 0.015), 46.9% calc(var(--fr-edge) * 0.004), 50.0% calc(var(--fr-edge) * 0.000), 53.1% calc(var(--fr-edge) * 0.004), 56.2% calc(var(--fr-edge) * 0.015), 59.4% calc(var(--fr-edge) * 0.035), 62.5% calc(var(--fr-edge) * 0.061), 65.6% calc(var(--fr-edge) * 0.096), 68.8% calc(var(--fr-edge) * 0.137), 71.9% calc(var(--fr-edge) * 0.186), 75.0% calc(var(--fr-edge) * 0.242), 78.1% calc(var(--fr-edge) * 0.305), 81.2% calc(var(--fr-edge) * 0.375), 84.4% calc(var(--fr-edge) * 0.452), 87.5% calc(var(--fr-edge) * 0.536), 90.6% calc(var(--fr-edge) * 0.628), 93.8% calc(var(--fr-edge) * 0.729), 96.9% calc(var(--fr-edge) * 0.844), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 96.9% calc(var(--fr-edge) * 0.844 + 3px), 93.8% calc(var(--fr-edge) * 0.729 + 3px), 90.6% calc(var(--fr-edge) * 0.628 + 3px), 87.5% calc(var(--fr-edge) * 0.536 + 3px), 84.4% calc(var(--fr-edge) * 0.452 + 3px), 81.2% calc(var(--fr-edge) * 0.375 + 3px), 78.1% calc(var(--fr-edge) * 0.305 + 3px), 75.0% calc(var(--fr-edge) * 0.242 + 3px), 71.9% calc(var(--fr-edge) * 0.186 + 3px), 68.8% calc(var(--fr-edge) * 0.137 + 3px), 65.6% calc(var(--fr-edge) * 0.096 + 3px), 62.5% calc(var(--fr-edge) * 0.061 + 3px), 59.4% calc(var(--fr-edge) * 0.035 + 3px), 56.2% calc(var(--fr-edge) * 0.015 + 3px), 53.1% calc(var(--fr-edge) * 0.004 + 3px), 50.0% calc(var(--fr-edge) * 0.000 + 3px), 46.9% calc(var(--fr-edge) * 0.004 + 3px), 43.8% calc(var(--fr-edge) * 0.015 + 3px), 40.6% calc(var(--fr-edge) * 0.035 + 3px), 37.5% calc(var(--fr-edge) * 0.061 + 3px), 34.4% calc(var(--fr-edge) * 0.096 + 3px), 31.2% calc(var(--fr-edge) * 0.137 + 3px), 28.1% calc(var(--fr-edge) * 0.186 + 3px), 25.0% calc(var(--fr-edge) * 0.242 + 3px), 21.9% calc(var(--fr-edge) * 0.305 + 3px), 18.8% calc(var(--fr-edge) * 0.375 + 3px), 15.6% calc(var(--fr-edge) * 0.452 + 3px), 12.5% calc(var(--fr-edge) * 0.536 + 3px), 9.4% calc(var(--fr-edge) * 0.628 + 3px), 6.2% calc(var(--fr-edge) * 0.729 + 3px), 3.1% calc(var(--fr-edge) * 0.844 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 3.1% calc(var(--fr-edge) * 0.844), 6.2% calc(var(--fr-edge) * 0.729), 9.4% calc(var(--fr-edge) * 0.628), 12.5% calc(var(--fr-edge) * 0.536), 15.6% calc(var(--fr-edge) * 0.452), 18.8% calc(var(--fr-edge) * 0.375), 21.9% calc(var(--fr-edge) * 0.305), 25.0% calc(var(--fr-edge) * 0.242), 28.1% calc(var(--fr-edge) * 0.186), 31.2% calc(var(--fr-edge) * 0.137), 34.4% calc(var(--fr-edge) * 0.096), 37.5% calc(var(--fr-edge) * 0.061), 40.6% calc(var(--fr-edge) * 0.035), 43.8% calc(var(--fr-edge) * 0.015), 46.9% calc(var(--fr-edge) * 0.004), 50.0% calc(var(--fr-edge) * 0.000), 53.1% calc(var(--fr-edge) * 0.004), 56.2% calc(var(--fr-edge) * 0.015), 59.4% calc(var(--fr-edge) * 0.035), 62.5% calc(var(--fr-edge) * 0.061), 65.6% calc(var(--fr-edge) * 0.096), 68.8% calc(var(--fr-edge) * 0.137), 71.9% calc(var(--fr-edge) * 0.186), 75.0% calc(var(--fr-edge) * 0.242), 78.1% calc(var(--fr-edge) * 0.305), 81.2% calc(var(--fr-edge) * 0.375), 84.4% calc(var(--fr-edge) * 0.452), 87.5% calc(var(--fr-edge) * 0.536), 90.6% calc(var(--fr-edge) * 0.628), 93.8% calc(var(--fr-edge) * 0.729), 96.9% calc(var(--fr-edge) * 0.844), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 96.9% calc(var(--fr-edge) * 0.844 + 3px), 93.8% calc(var(--fr-edge) * 0.729 + 3px), 90.6% calc(var(--fr-edge) * 0.628 + 3px), 87.5% calc(var(--fr-edge) * 0.536 + 3px), 84.4% calc(var(--fr-edge) * 0.452 + 3px), 81.2% calc(var(--fr-edge) * 0.375 + 3px), 78.1% calc(var(--fr-edge) * 0.305 + 3px), 75.0% calc(var(--fr-edge) * 0.242 + 3px), 71.9% calc(var(--fr-edge) * 0.186 + 3px), 68.8% calc(var(--fr-edge) * 0.137 + 3px), 65.6% calc(var(--fr-edge) * 0.096 + 3px), 62.5% calc(var(--fr-edge) * 0.061 + 3px), 59.4% calc(var(--fr-edge) * 0.035 + 3px), 56.2% calc(var(--fr-edge) * 0.015 + 3px), 53.1% calc(var(--fr-edge) * 0.004 + 3px), 50.0% calc(var(--fr-edge) * 0.000 + 3px), 46.9% calc(var(--fr-edge) * 0.004 + 3px), 43.8% calc(var(--fr-edge) * 0.015 + 3px), 40.6% calc(var(--fr-edge) * 0.035 + 3px), 37.5% calc(var(--fr-edge) * 0.061 + 3px), 34.4% calc(var(--fr-edge) * 0.096 + 3px), 31.2% calc(var(--fr-edge) * 0.137 + 3px), 28.1% calc(var(--fr-edge) * 0.186 + 3px), 25.0% calc(var(--fr-edge) * 0.242 + 3px), 21.9% calc(var(--fr-edge) * 0.305 + 3px), 18.8% calc(var(--fr-edge) * 0.375 + 3px), 15.6% calc(var(--fr-edge) * 0.452 + 3px), 12.5% calc(var(--fr-edge) * 0.536 + 3px), 9.4% calc(var(--fr-edge) * 0.628 + 3px), 6.2% calc(var(--fr-edge) * 0.729 + 3px), 3.1% calc(var(--fr-edge) * 0.844 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
}

/* ---------- 02 · SPACING ---------- */
html body .our-approach-page .oa-approach-cards__inner { padding-top: 44px !important; padding-bottom: calc(84px + var(--fr-edge) * .6) !important; }
html body .our-approach-page .oa-journey__inner        { padding-top: 40px !important; padding-bottom: calc(84px + var(--fr-edge) * .6) !important; }
html body .our-approach-page .oa-compare__inner        { padding-top: 40px !important; padding-bottom: calc(84px + var(--fr-edge) * .6) !important; }
html body .our-approach-page .oa-final__inner          { padding-top: 56px !important; }
@media screen and (max-width: 899px) {
    html body .our-approach-page .oa-approach-cards__inner { padding-top: 40px !important; padding-bottom: calc(72px + var(--fr-edge) * .6) !important; }
    html body .our-approach-page .oa-journey__inner,
    html body .our-approach-page .oa-compare__inner { padding-top: 36px !important; padding-bottom: calc(72px + var(--fr-edge) * .6) !important; }
}
@media screen and (max-width: 599px) {
    html body .our-approach-page .oa-final__inner { padding-top: 44px !important; }
}

/* ---------- 03 · STEP CARDS ---------- */
html body .our-approach-page .oa-approach-cards__card {
    border-radius: 40px 10px 40px 10px !important;
    background: linear-gradient(160deg, rgba(255,255,255,.96), rgba(255,250,244,.80)) !important;
    border: 1px solid rgba(217,183,126,.30) !important;
    box-shadow: 0 18px 38px -20px rgba(79,91,73,.30), inset 0 1px 0 #fff !important;
}
@media screen and (max-width: 1100px) {
    html body .our-approach-page .oa-approach-cards__card { box-shadow: 0 8px 16px -10px rgba(79,91,73,.28), inset 0 1px 0 #fff !important; }
}
@media screen and (max-width: 599px) {
    html body .our-approach-page .oa-approach-cards__card { border-radius: 32px 8px 32px 8px !important; }
}

/* unified glass badge */
html body .our-approach-page .oa-approach-cards__icon,
html body .our-approach-page .oa-journey__marker {
    position: relative;
    display: grid !important;
    place-items: center !important;
    justify-content: center !important;
    align-items: center !important;
    width: 76px !important;
    height: 76px !important;
    border-radius: 50% !important;
    background: linear-gradient(145deg,#FFF7EF,#F3E2D5 60%,#EAD2C2) !important;
    color: #84634E !important;
    border: 0 !important;
    box-shadow: 0 12px 22px -12px rgba(132,99,78,.5), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -3px 6px rgba(132,99,78,.10) !important;
}
html body .our-approach-page .oa-approach-cards__card:nth-child(even) .oa-approach-cards__icon,
html body .our-approach-page .oa-journey__step:nth-of-type(even) .oa-journey__marker {
    background: linear-gradient(145deg,#F7F9F2,#E6EBDD 60%,#D4DFC8) !important;
    color: #566449 !important;
    box-shadow: 0 12px 22px -12px rgba(86,100,73,.5), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -3px 6px rgba(86,100,73,.10) !important;
}
html body .our-approach-page .oa-approach-cards__icon::before,
html body .our-approach-page .oa-journey__marker::before {
    content: "" !important;
    position: absolute !important;
    inset: 6px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,.75) !important;
    pointer-events: none;
}
html body .our-approach-page .oa-approach-cards__icon svg {
    width: 34px !important; height: 34px !important;
    stroke-width: 1.7 !important; stroke-linecap: round; stroke-linejoin: round;
    margin: 0 !important; position: static !important;
}
html body .our-approach-page .oa-journey__number { color: inherit !important; position: relative; }
@media screen and (max-width: 1100px) {
    html body .our-approach-page .oa-approach-cards__icon,
    html body .our-approach-page .oa-journey__marker { width: 68px !important; height: 68px !important; }
    html body .our-approach-page .oa-approach-cards__icon svg { width: 30px !important; height: 30px !important; }
}
@media screen and (max-width: 599px) {
    html body .our-approach-page .oa-approach-cards__icon,
    html body .our-approach-page .oa-journey__marker { width: 60px !important; height: 60px !important; }
    html body .our-approach-page .oa-approach-cards__icon svg { width: 27px !important; height: 27px !important; }
}

/* ---------- 04 · COMPARISON PANELS ---------- */
html body .our-approach-page .oa-compare__panel-body::before { display: none !important; }
html body .our-approach-page .oa-compare__panel-body {
    border-radius: 0 40px 12px 40px !important;
    border: 1px solid rgba(217,183,126,.30) !important;
    box-shadow: 0 22px 40px -22px rgba(79,91,73,.38), inset 0 1px 0 rgba(255,255,255,.55) !important;
}
html body .our-approach-page .oa-compare__panel--usual .oa-compare__panel-body {
    background: linear-gradient(150deg,#F9EFE5,#F1E2D4) !important;
}
html body .our-approach-page .oa-compare__panel--frayora .oa-compare__panel-body {
    background: linear-gradient(150deg,#5E6B57,#4F5B49 55%,#46513F) !important;
    border-color: rgba(228,201,143,.35) !important;
    box-shadow: 0 22px 40px -22px rgba(40,50,36,.6), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
html body .our-approach-page .oa-compare__panel--frayora .oa-compare__tab { background: #5E6B57 !important; }
html body .our-approach-page .oa-compare__panel--usual .oa-compare__list-icon {
    background: linear-gradient(145deg,#FFF7EF,#F3E2D5 60%,#EAD2C2) !important;
    box-shadow: 0 6px 12px -6px rgba(132,99,78,.5), inset 0 1px 0 rgba(255,255,255,.9) !important;
}
html body .our-approach-page .oa-compare__panel--frayora .oa-compare__list-icon {
    background: rgba(247,240,230,.14) !important;
    border: 1px solid rgba(228,201,143,.55) !important;
    box-shadow: 0 6px 12px -6px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.22) !important;
}
@media screen and (max-width: 599px) {
    html body .our-approach-page .oa-compare__panel-body { border-radius: 0 32px 10px 32px !important; }
}

/* ---------- 05 · TABLET BREATHING ROOM ---------- */
@media screen and (min-width: 600px) and (max-width: 899px) {
    html body .our-approach-page .oa-journey__closing { margin-top: 44px !important; }
}

/* ---------- 06 · CLOSING STATEMENT SPACING (matches section 2) ---------- */
html body .our-approach-page .oa-journey .oa-journey__closing .oa-journey__statement { line-height: 1.5 !important; }
html body .our-approach-page .oa-journey .oa-journey__closing .oa-journey__statement em { margin-top: 6px !important; }
html body .our-approach-page .oa-journey .oa-journey__closing .oa-journey__fineprint {
    margin-top: 0 !important;
    padding-top: 26px !important;
}
@media screen and (max-width: 899px) {
    html body .our-approach-page .oa-journey .oa-journey__closing .oa-journey__fineprint { padding-top: 22px !important; }
}
@media screen and (max-width: 599px) {
    html body .our-approach-page .oa-journey .oa-journey__closing .oa-journey__fineprint { padding-top: 18px !important; }
}



/* =========================================================
   FRAYORA — ABOUT US ELEVATION v1
   PASTE AT THE VERY BOTTOM OF main.css

   - No words, photos, typography or buttons are changed.
   - Hero and every section share the same shaped edges and the
     fine sage-to-sand line used across the site.
   - Every icon family (principles, steps, values, comparison
     marks) uses one glass-badge language: peach / sage on light
     sections, gold line on the dark section.
   - Desktop, tablet and mobile.
========================================================= */

:root { --fr-edge: 64px; }
@media screen and (max-width: 1100px) { :root { --fr-edge: 52px; } }
@media screen and (max-width: 899px)  { :root { --fr-edge: 44px; } }
@media screen and (max-width: 599px)  { :root { --fr-edge: 34px; } }

html body main.about-us-page { --ab-pt: 44px; --ab-pb: 80px; }
@media screen and (max-width: 899px) { html body main.about-us-page { --ab-pt: 40px; --ab-pb: 68px; } }
@media screen and (max-width: 599px) { html body main.about-us-page { --ab-pt: 36px; --ab-pb: 60px; } }

/* ---------- 00 · HERO ---------- */

html body main.about-us-page .about-hero {
    border-radius: 0 !important;
    box-sizing: content-box !important;
    padding-bottom: var(--fr-edge) !important;
    background-color: #3F4A3A !important;
    box-shadow: none !important;
}
html body main.about-us-page .about-hero__overlay::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none;
    background:
        radial-gradient(60% 70% at 88% 6%, rgba(217,183,126,.18), rgba(217,183,126,0) 70%),
        radial-gradient(55% 75% at 6% 100%, rgba(214,106,67,.14), rgba(214,106,67,0) 72%),
        linear-gradient(180deg, rgba(63,74,58,.08) 0%, rgba(63,74,58,0) 38%, rgba(63,74,58,.30) 100%) !important;
}
html body main.about-us-page .about-hero__inner { z-index: 3; }

/* ---------- 01b · SECTION COLOURS + SPACING ---------- */

html body main.about-us-page .about-summary { background-color: #FAF7F2 !important; padding-bottom: 0 !important; }
html body main.about-us-page .about-why     { background-color: #F5EDE4 !important; }
html body main.about-us-page .about-founder { background-color: #FAF7F2 !important; }
html body main.about-us-page .about-layer   { background-color: #F5EDE4 !important; }
html body main.about-us-page .about-method  { background-color: #FAF7F2 !important; }
html body main.about-us-page .about-final-cta { background-color: #F8F3EB !important; }
html body main.about-us-page .about-values-mission {
    background: radial-gradient(60% 80% at 8% 100%, rgba(214,106,67,.10), rgba(214,106,67,0) 70%), linear-gradient(160deg,#3A473C,#303B32 55%,#2B352D) !important;
}

html body main.about-us-page .about-summary { padding-top: calc(var(--fr-edge) + 14px) !important; }
html body main.about-us-page .about-summary__inner { padding-top: 30px !important; padding-bottom: calc(60px + var(--fr-edge) * .6) !important; }
html body main.about-us-page .about-why,
html body main.about-us-page .about-founder,
html body main.about-us-page .about-layer,
html body main.about-us-page .about-method,
html body main.about-us-page .about-values-mission { padding-bottom: calc(var(--ab-pb) + var(--fr-edge) * .6) !important; }
html body main.about-us-page .about-founder__inner { padding-top: 0 !important; padding-bottom: 0 !important; }
html body main.about-us-page .about-final-cta { padding-bottom: calc(var(--ab-pb) + 10px) !important; }


/* ---------- 01 · SHAPED SECTION EDGES ---------- */
html body main.about-us-page .about-summary {
    margin-top: calc(var(--fr-edge) * -1) !important;
    padding-top: calc(var(--ab-pt) + var(--fr-edge)) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.176), 12.5% calc(var(--fr-edge) * 0.344), 18.8% calc(var(--fr-edge) * 0.500), 25.0% calc(var(--fr-edge) * 0.636), 31.2% calc(var(--fr-edge) * 0.748), 37.5% calc(var(--fr-edge) * 0.831), 43.8% calc(var(--fr-edge) * 0.883), 50.0% calc(var(--fr-edge) * 0.900), 56.2% calc(var(--fr-edge) * 0.883), 62.5% calc(var(--fr-edge) * 0.831), 68.8% calc(var(--fr-edge) * 0.748), 75.0% calc(var(--fr-edge) * 0.636), 81.2% calc(var(--fr-edge) * 0.500), 87.5% calc(var(--fr-edge) * 0.344), 93.8% calc(var(--fr-edge) * 0.176), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.176), 12.5% calc(var(--fr-edge) * 0.344), 18.8% calc(var(--fr-edge) * 0.500), 25.0% calc(var(--fr-edge) * 0.636), 31.2% calc(var(--fr-edge) * 0.748), 37.5% calc(var(--fr-edge) * 0.831), 43.8% calc(var(--fr-edge) * 0.883), 50.0% calc(var(--fr-edge) * 0.900), 56.2% calc(var(--fr-edge) * 0.883), 62.5% calc(var(--fr-edge) * 0.831), 68.8% calc(var(--fr-edge) * 0.748), 75.0% calc(var(--fr-edge) * 0.636), 81.2% calc(var(--fr-edge) * 0.500), 87.5% calc(var(--fr-edge) * 0.344), 93.8% calc(var(--fr-edge) * 0.176), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
}
html body main.about-us-page .about-summary__inner { position: relative; }
html body main.about-us-page .about-summary::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 4;
    inset: 0 0 auto 0 !important;
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: .85;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.176), 12.5% calc(var(--fr-edge) * 0.344), 18.8% calc(var(--fr-edge) * 0.500), 25.0% calc(var(--fr-edge) * 0.636), 31.2% calc(var(--fr-edge) * 0.748), 37.5% calc(var(--fr-edge) * 0.831), 43.8% calc(var(--fr-edge) * 0.883), 50.0% calc(var(--fr-edge) * 0.900), 56.2% calc(var(--fr-edge) * 0.883), 62.5% calc(var(--fr-edge) * 0.831), 68.8% calc(var(--fr-edge) * 0.748), 75.0% calc(var(--fr-edge) * 0.636), 81.2% calc(var(--fr-edge) * 0.500), 87.5% calc(var(--fr-edge) * 0.344), 93.8% calc(var(--fr-edge) * 0.176), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.176 + 3px), 87.5% calc(var(--fr-edge) * 0.344 + 3px), 81.2% calc(var(--fr-edge) * 0.500 + 3px), 75.0% calc(var(--fr-edge) * 0.636 + 3px), 68.8% calc(var(--fr-edge) * 0.748 + 3px), 62.5% calc(var(--fr-edge) * 0.831 + 3px), 56.2% calc(var(--fr-edge) * 0.883 + 3px), 50.0% calc(var(--fr-edge) * 0.900 + 3px), 43.8% calc(var(--fr-edge) * 0.883 + 3px), 37.5% calc(var(--fr-edge) * 0.831 + 3px), 31.2% calc(var(--fr-edge) * 0.748 + 3px), 25.0% calc(var(--fr-edge) * 0.636 + 3px), 18.8% calc(var(--fr-edge) * 0.500 + 3px), 12.5% calc(var(--fr-edge) * 0.344 + 3px), 6.2% calc(var(--fr-edge) * 0.176 + 3px), 0.0% calc(var(--fr-edge) * 0.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.176), 12.5% calc(var(--fr-edge) * 0.344), 18.8% calc(var(--fr-edge) * 0.500), 25.0% calc(var(--fr-edge) * 0.636), 31.2% calc(var(--fr-edge) * 0.748), 37.5% calc(var(--fr-edge) * 0.831), 43.8% calc(var(--fr-edge) * 0.883), 50.0% calc(var(--fr-edge) * 0.900), 56.2% calc(var(--fr-edge) * 0.883), 62.5% calc(var(--fr-edge) * 0.831), 68.8% calc(var(--fr-edge) * 0.748), 75.0% calc(var(--fr-edge) * 0.636), 81.2% calc(var(--fr-edge) * 0.500), 87.5% calc(var(--fr-edge) * 0.344), 93.8% calc(var(--fr-edge) * 0.176), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.176 + 3px), 87.5% calc(var(--fr-edge) * 0.344 + 3px), 81.2% calc(var(--fr-edge) * 0.500 + 3px), 75.0% calc(var(--fr-edge) * 0.636 + 3px), 68.8% calc(var(--fr-edge) * 0.748 + 3px), 62.5% calc(var(--fr-edge) * 0.831 + 3px), 56.2% calc(var(--fr-edge) * 0.883 + 3px), 50.0% calc(var(--fr-edge) * 0.900 + 3px), 43.8% calc(var(--fr-edge) * 0.883 + 3px), 37.5% calc(var(--fr-edge) * 0.831 + 3px), 31.2% calc(var(--fr-edge) * 0.748 + 3px), 25.0% calc(var(--fr-edge) * 0.636 + 3px), 18.8% calc(var(--fr-edge) * 0.500 + 3px), 12.5% calc(var(--fr-edge) * 0.344 + 3px), 6.2% calc(var(--fr-edge) * 0.176 + 3px), 0.0% calc(var(--fr-edge) * 0.000 + 3px));
}
html body main.about-us-page .about-why {
    margin-top: calc(var(--fr-edge) * -1) !important;
    padding-top: calc(var(--ab-pt) + var(--fr-edge)) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.989), 12.5% calc(var(--fr-edge) * 0.957), 18.8% calc(var(--fr-edge) * 0.908), 25.0% calc(var(--fr-edge) * 0.844), 31.2% calc(var(--fr-edge) * 0.768), 37.5% calc(var(--fr-edge) * 0.684), 43.8% calc(var(--fr-edge) * 0.593), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.407), 62.5% calc(var(--fr-edge) * 0.316), 68.8% calc(var(--fr-edge) * 0.232), 75.0% calc(var(--fr-edge) * 0.156), 81.2% calc(var(--fr-edge) * 0.092), 87.5% calc(var(--fr-edge) * 0.043), 93.8% calc(var(--fr-edge) * 0.011), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.989), 12.5% calc(var(--fr-edge) * 0.957), 18.8% calc(var(--fr-edge) * 0.908), 25.0% calc(var(--fr-edge) * 0.844), 31.2% calc(var(--fr-edge) * 0.768), 37.5% calc(var(--fr-edge) * 0.684), 43.8% calc(var(--fr-edge) * 0.593), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.407), 62.5% calc(var(--fr-edge) * 0.316), 68.8% calc(var(--fr-edge) * 0.232), 75.0% calc(var(--fr-edge) * 0.156), 81.2% calc(var(--fr-edge) * 0.092), 87.5% calc(var(--fr-edge) * 0.043), 93.8% calc(var(--fr-edge) * 0.011), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
}
html body main.about-us-page .about-why__inner { position: relative; }
html body main.about-us-page .about-why::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 4;
    inset: 0 0 auto 0 !important;
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: .85;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.989), 12.5% calc(var(--fr-edge) * 0.957), 18.8% calc(var(--fr-edge) * 0.908), 25.0% calc(var(--fr-edge) * 0.844), 31.2% calc(var(--fr-edge) * 0.768), 37.5% calc(var(--fr-edge) * 0.684), 43.8% calc(var(--fr-edge) * 0.593), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.407), 62.5% calc(var(--fr-edge) * 0.316), 68.8% calc(var(--fr-edge) * 0.232), 75.0% calc(var(--fr-edge) * 0.156), 81.2% calc(var(--fr-edge) * 0.092), 87.5% calc(var(--fr-edge) * 0.043), 93.8% calc(var(--fr-edge) * 0.011), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.011 + 3px), 87.5% calc(var(--fr-edge) * 0.043 + 3px), 81.2% calc(var(--fr-edge) * 0.092 + 3px), 75.0% calc(var(--fr-edge) * 0.156 + 3px), 68.8% calc(var(--fr-edge) * 0.232 + 3px), 62.5% calc(var(--fr-edge) * 0.316 + 3px), 56.2% calc(var(--fr-edge) * 0.407 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.593 + 3px), 37.5% calc(var(--fr-edge) * 0.684 + 3px), 31.2% calc(var(--fr-edge) * 0.768 + 3px), 25.0% calc(var(--fr-edge) * 0.844 + 3px), 18.8% calc(var(--fr-edge) * 0.908 + 3px), 12.5% calc(var(--fr-edge) * 0.957 + 3px), 6.2% calc(var(--fr-edge) * 0.989 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.989), 12.5% calc(var(--fr-edge) * 0.957), 18.8% calc(var(--fr-edge) * 0.908), 25.0% calc(var(--fr-edge) * 0.844), 31.2% calc(var(--fr-edge) * 0.768), 37.5% calc(var(--fr-edge) * 0.684), 43.8% calc(var(--fr-edge) * 0.593), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.407), 62.5% calc(var(--fr-edge) * 0.316), 68.8% calc(var(--fr-edge) * 0.232), 75.0% calc(var(--fr-edge) * 0.156), 81.2% calc(var(--fr-edge) * 0.092), 87.5% calc(var(--fr-edge) * 0.043), 93.8% calc(var(--fr-edge) * 0.011), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.011 + 3px), 87.5% calc(var(--fr-edge) * 0.043 + 3px), 81.2% calc(var(--fr-edge) * 0.092 + 3px), 75.0% calc(var(--fr-edge) * 0.156 + 3px), 68.8% calc(var(--fr-edge) * 0.232 + 3px), 62.5% calc(var(--fr-edge) * 0.316 + 3px), 56.2% calc(var(--fr-edge) * 0.407 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.593 + 3px), 37.5% calc(var(--fr-edge) * 0.684 + 3px), 31.2% calc(var(--fr-edge) * 0.768 + 3px), 25.0% calc(var(--fr-edge) * 0.844 + 3px), 18.8% calc(var(--fr-edge) * 0.908 + 3px), 12.5% calc(var(--fr-edge) * 0.957 + 3px), 6.2% calc(var(--fr-edge) * 0.989 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
}
html body main.about-us-page .about-founder {
    margin-top: calc(var(--fr-edge) * -1) !important;
    padding-top: calc(var(--ab-pt) + var(--fr-edge)) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
}
html body main.about-us-page .about-founder__inner { position: relative; }
html body main.about-us-page .about-founder::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 4;
    inset: 0 0 auto 0 !important;
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: .85;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 93.8% calc(var(--fr-edge) * 0.805 + 3px), 87.5% calc(var(--fr-edge) * 0.617 + 3px), 81.2% calc(var(--fr-edge) * 0.444 + 3px), 75.0% calc(var(--fr-edge) * 0.293 + 3px), 68.8% calc(var(--fr-edge) * 0.169 + 3px), 62.5% calc(var(--fr-edge) * 0.076 + 3px), 56.2% calc(var(--fr-edge) * 0.019 + 3px), 50.0% calc(var(--fr-edge) * 0.000 + 3px), 43.8% calc(var(--fr-edge) * 0.019 + 3px), 37.5% calc(var(--fr-edge) * 0.076 + 3px), 31.2% calc(var(--fr-edge) * 0.169 + 3px), 25.0% calc(var(--fr-edge) * 0.293 + 3px), 18.8% calc(var(--fr-edge) * 0.444 + 3px), 12.5% calc(var(--fr-edge) * 0.617 + 3px), 6.2% calc(var(--fr-edge) * 0.805 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 93.8% calc(var(--fr-edge) * 0.805 + 3px), 87.5% calc(var(--fr-edge) * 0.617 + 3px), 81.2% calc(var(--fr-edge) * 0.444 + 3px), 75.0% calc(var(--fr-edge) * 0.293 + 3px), 68.8% calc(var(--fr-edge) * 0.169 + 3px), 62.5% calc(var(--fr-edge) * 0.076 + 3px), 56.2% calc(var(--fr-edge) * 0.019 + 3px), 50.0% calc(var(--fr-edge) * 0.000 + 3px), 43.8% calc(var(--fr-edge) * 0.019 + 3px), 37.5% calc(var(--fr-edge) * 0.076 + 3px), 31.2% calc(var(--fr-edge) * 0.169 + 3px), 25.0% calc(var(--fr-edge) * 0.293 + 3px), 18.8% calc(var(--fr-edge) * 0.444 + 3px), 12.5% calc(var(--fr-edge) * 0.617 + 3px), 6.2% calc(var(--fr-edge) * 0.805 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
}
html body main.about-us-page .about-layer {
    margin-top: calc(var(--fr-edge) * -1) !important;
    padding-top: calc(var(--ab-pt) + var(--fr-edge)) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.011), 12.5% calc(var(--fr-edge) * 0.043), 18.8% calc(var(--fr-edge) * 0.092), 25.0% calc(var(--fr-edge) * 0.156), 31.2% calc(var(--fr-edge) * 0.232), 37.5% calc(var(--fr-edge) * 0.316), 43.8% calc(var(--fr-edge) * 0.407), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.593), 62.5% calc(var(--fr-edge) * 0.684), 68.8% calc(var(--fr-edge) * 0.768), 75.0% calc(var(--fr-edge) * 0.844), 81.2% calc(var(--fr-edge) * 0.908), 87.5% calc(var(--fr-edge) * 0.957), 93.8% calc(var(--fr-edge) * 0.989), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.011), 12.5% calc(var(--fr-edge) * 0.043), 18.8% calc(var(--fr-edge) * 0.092), 25.0% calc(var(--fr-edge) * 0.156), 31.2% calc(var(--fr-edge) * 0.232), 37.5% calc(var(--fr-edge) * 0.316), 43.8% calc(var(--fr-edge) * 0.407), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.593), 62.5% calc(var(--fr-edge) * 0.684), 68.8% calc(var(--fr-edge) * 0.768), 75.0% calc(var(--fr-edge) * 0.844), 81.2% calc(var(--fr-edge) * 0.908), 87.5% calc(var(--fr-edge) * 0.957), 93.8% calc(var(--fr-edge) * 0.989), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
}
html body main.about-us-page .about-layer__inner { position: relative; }
html body main.about-us-page .about-layer::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 4;
    inset: 0 0 auto 0 !important;
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: .85;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.011), 12.5% calc(var(--fr-edge) * 0.043), 18.8% calc(var(--fr-edge) * 0.092), 25.0% calc(var(--fr-edge) * 0.156), 31.2% calc(var(--fr-edge) * 0.232), 37.5% calc(var(--fr-edge) * 0.316), 43.8% calc(var(--fr-edge) * 0.407), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.593), 62.5% calc(var(--fr-edge) * 0.684), 68.8% calc(var(--fr-edge) * 0.768), 75.0% calc(var(--fr-edge) * 0.844), 81.2% calc(var(--fr-edge) * 0.908), 87.5% calc(var(--fr-edge) * 0.957), 93.8% calc(var(--fr-edge) * 0.989), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 93.8% calc(var(--fr-edge) * 0.989 + 3px), 87.5% calc(var(--fr-edge) * 0.957 + 3px), 81.2% calc(var(--fr-edge) * 0.908 + 3px), 75.0% calc(var(--fr-edge) * 0.844 + 3px), 68.8% calc(var(--fr-edge) * 0.768 + 3px), 62.5% calc(var(--fr-edge) * 0.684 + 3px), 56.2% calc(var(--fr-edge) * 0.593 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.407 + 3px), 37.5% calc(var(--fr-edge) * 0.316 + 3px), 31.2% calc(var(--fr-edge) * 0.232 + 3px), 25.0% calc(var(--fr-edge) * 0.156 + 3px), 18.8% calc(var(--fr-edge) * 0.092 + 3px), 12.5% calc(var(--fr-edge) * 0.043 + 3px), 6.2% calc(var(--fr-edge) * 0.011 + 3px), 0.0% calc(var(--fr-edge) * 0.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.011), 12.5% calc(var(--fr-edge) * 0.043), 18.8% calc(var(--fr-edge) * 0.092), 25.0% calc(var(--fr-edge) * 0.156), 31.2% calc(var(--fr-edge) * 0.232), 37.5% calc(var(--fr-edge) * 0.316), 43.8% calc(var(--fr-edge) * 0.407), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.593), 62.5% calc(var(--fr-edge) * 0.684), 68.8% calc(var(--fr-edge) * 0.768), 75.0% calc(var(--fr-edge) * 0.844), 81.2% calc(var(--fr-edge) * 0.908), 87.5% calc(var(--fr-edge) * 0.957), 93.8% calc(var(--fr-edge) * 0.989), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 93.8% calc(var(--fr-edge) * 0.989 + 3px), 87.5% calc(var(--fr-edge) * 0.957 + 3px), 81.2% calc(var(--fr-edge) * 0.908 + 3px), 75.0% calc(var(--fr-edge) * 0.844 + 3px), 68.8% calc(var(--fr-edge) * 0.768 + 3px), 62.5% calc(var(--fr-edge) * 0.684 + 3px), 56.2% calc(var(--fr-edge) * 0.593 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.407 + 3px), 37.5% calc(var(--fr-edge) * 0.316 + 3px), 31.2% calc(var(--fr-edge) * 0.232 + 3px), 25.0% calc(var(--fr-edge) * 0.156 + 3px), 18.8% calc(var(--fr-edge) * 0.092 + 3px), 12.5% calc(var(--fr-edge) * 0.043 + 3px), 6.2% calc(var(--fr-edge) * 0.011 + 3px), 0.0% calc(var(--fr-edge) * 0.000 + 3px));
}
html body main.about-us-page .about-method {
    margin-top: calc(var(--fr-edge) * -1) !important;
    padding-top: calc(var(--ab-pt) + var(--fr-edge)) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.062), 12.5% calc(var(--fr-edge) * 0.125), 18.8% calc(var(--fr-edge) * 0.188), 25.0% calc(var(--fr-edge) * 0.250), 31.2% calc(var(--fr-edge) * 0.312), 37.5% calc(var(--fr-edge) * 0.375), 43.8% calc(var(--fr-edge) * 0.438), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.562), 62.5% calc(var(--fr-edge) * 0.625), 68.8% calc(var(--fr-edge) * 0.688), 75.0% calc(var(--fr-edge) * 0.750), 81.2% calc(var(--fr-edge) * 0.812), 87.5% calc(var(--fr-edge) * 0.875), 93.8% calc(var(--fr-edge) * 0.938), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.062), 12.5% calc(var(--fr-edge) * 0.125), 18.8% calc(var(--fr-edge) * 0.188), 25.0% calc(var(--fr-edge) * 0.250), 31.2% calc(var(--fr-edge) * 0.312), 37.5% calc(var(--fr-edge) * 0.375), 43.8% calc(var(--fr-edge) * 0.438), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.562), 62.5% calc(var(--fr-edge) * 0.625), 68.8% calc(var(--fr-edge) * 0.688), 75.0% calc(var(--fr-edge) * 0.750), 81.2% calc(var(--fr-edge) * 0.812), 87.5% calc(var(--fr-edge) * 0.875), 93.8% calc(var(--fr-edge) * 0.938), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
}
html body main.about-us-page .about-method__inner { position: relative; }
html body main.about-us-page .about-method::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 4;
    inset: 0 0 auto 0 !important;
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: .85;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.062), 12.5% calc(var(--fr-edge) * 0.125), 18.8% calc(var(--fr-edge) * 0.188), 25.0% calc(var(--fr-edge) * 0.250), 31.2% calc(var(--fr-edge) * 0.312), 37.5% calc(var(--fr-edge) * 0.375), 43.8% calc(var(--fr-edge) * 0.438), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.562), 62.5% calc(var(--fr-edge) * 0.625), 68.8% calc(var(--fr-edge) * 0.688), 75.0% calc(var(--fr-edge) * 0.750), 81.2% calc(var(--fr-edge) * 0.812), 87.5% calc(var(--fr-edge) * 0.875), 93.8% calc(var(--fr-edge) * 0.938), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 93.8% calc(var(--fr-edge) * 0.938 + 3px), 87.5% calc(var(--fr-edge) * 0.875 + 3px), 81.2% calc(var(--fr-edge) * 0.812 + 3px), 75.0% calc(var(--fr-edge) * 0.750 + 3px), 68.8% calc(var(--fr-edge) * 0.688 + 3px), 62.5% calc(var(--fr-edge) * 0.625 + 3px), 56.2% calc(var(--fr-edge) * 0.562 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.438 + 3px), 37.5% calc(var(--fr-edge) * 0.375 + 3px), 31.2% calc(var(--fr-edge) * 0.312 + 3px), 25.0% calc(var(--fr-edge) * 0.250 + 3px), 18.8% calc(var(--fr-edge) * 0.188 + 3px), 12.5% calc(var(--fr-edge) * 0.125 + 3px), 6.2% calc(var(--fr-edge) * 0.062 + 3px), 0.0% calc(var(--fr-edge) * 0.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.062), 12.5% calc(var(--fr-edge) * 0.125), 18.8% calc(var(--fr-edge) * 0.188), 25.0% calc(var(--fr-edge) * 0.250), 31.2% calc(var(--fr-edge) * 0.312), 37.5% calc(var(--fr-edge) * 0.375), 43.8% calc(var(--fr-edge) * 0.438), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.562), 62.5% calc(var(--fr-edge) * 0.625), 68.8% calc(var(--fr-edge) * 0.688), 75.0% calc(var(--fr-edge) * 0.750), 81.2% calc(var(--fr-edge) * 0.812), 87.5% calc(var(--fr-edge) * 0.875), 93.8% calc(var(--fr-edge) * 0.938), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 93.8% calc(var(--fr-edge) * 0.938 + 3px), 87.5% calc(var(--fr-edge) * 0.875 + 3px), 81.2% calc(var(--fr-edge) * 0.812 + 3px), 75.0% calc(var(--fr-edge) * 0.750 + 3px), 68.8% calc(var(--fr-edge) * 0.688 + 3px), 62.5% calc(var(--fr-edge) * 0.625 + 3px), 56.2% calc(var(--fr-edge) * 0.562 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.438 + 3px), 37.5% calc(var(--fr-edge) * 0.375 + 3px), 31.2% calc(var(--fr-edge) * 0.312 + 3px), 25.0% calc(var(--fr-edge) * 0.250 + 3px), 18.8% calc(var(--fr-edge) * 0.188 + 3px), 12.5% calc(var(--fr-edge) * 0.125 + 3px), 6.2% calc(var(--fr-edge) * 0.062 + 3px), 0.0% calc(var(--fr-edge) * 0.000 + 3px));
}
html body main.about-us-page .about-values-mission {
    margin-top: calc(var(--fr-edge) * -1) !important;
    padding-top: calc(var(--ab-pt) + var(--fr-edge)) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 3.1% calc(var(--fr-edge) * 0.844), 6.2% calc(var(--fr-edge) * 0.729), 9.4% calc(var(--fr-edge) * 0.628), 12.5% calc(var(--fr-edge) * 0.536), 15.6% calc(var(--fr-edge) * 0.452), 18.8% calc(var(--fr-edge) * 0.375), 21.9% calc(var(--fr-edge) * 0.305), 25.0% calc(var(--fr-edge) * 0.242), 28.1% calc(var(--fr-edge) * 0.186), 31.2% calc(var(--fr-edge) * 0.137), 34.4% calc(var(--fr-edge) * 0.096), 37.5% calc(var(--fr-edge) * 0.061), 40.6% calc(var(--fr-edge) * 0.035), 43.8% calc(var(--fr-edge) * 0.015), 46.9% calc(var(--fr-edge) * 0.004), 50.0% calc(var(--fr-edge) * 0.000), 53.1% calc(var(--fr-edge) * 0.004), 56.2% calc(var(--fr-edge) * 0.015), 59.4% calc(var(--fr-edge) * 0.035), 62.5% calc(var(--fr-edge) * 0.061), 65.6% calc(var(--fr-edge) * 0.096), 68.8% calc(var(--fr-edge) * 0.137), 71.9% calc(var(--fr-edge) * 0.186), 75.0% calc(var(--fr-edge) * 0.242), 78.1% calc(var(--fr-edge) * 0.305), 81.2% calc(var(--fr-edge) * 0.375), 84.4% calc(var(--fr-edge) * 0.452), 87.5% calc(var(--fr-edge) * 0.536), 90.6% calc(var(--fr-edge) * 0.628), 93.8% calc(var(--fr-edge) * 0.729), 96.9% calc(var(--fr-edge) * 0.844), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 3.1% calc(var(--fr-edge) * 0.844), 6.2% calc(var(--fr-edge) * 0.729), 9.4% calc(var(--fr-edge) * 0.628), 12.5% calc(var(--fr-edge) * 0.536), 15.6% calc(var(--fr-edge) * 0.452), 18.8% calc(var(--fr-edge) * 0.375), 21.9% calc(var(--fr-edge) * 0.305), 25.0% calc(var(--fr-edge) * 0.242), 28.1% calc(var(--fr-edge) * 0.186), 31.2% calc(var(--fr-edge) * 0.137), 34.4% calc(var(--fr-edge) * 0.096), 37.5% calc(var(--fr-edge) * 0.061), 40.6% calc(var(--fr-edge) * 0.035), 43.8% calc(var(--fr-edge) * 0.015), 46.9% calc(var(--fr-edge) * 0.004), 50.0% calc(var(--fr-edge) * 0.000), 53.1% calc(var(--fr-edge) * 0.004), 56.2% calc(var(--fr-edge) * 0.015), 59.4% calc(var(--fr-edge) * 0.035), 62.5% calc(var(--fr-edge) * 0.061), 65.6% calc(var(--fr-edge) * 0.096), 68.8% calc(var(--fr-edge) * 0.137), 71.9% calc(var(--fr-edge) * 0.186), 75.0% calc(var(--fr-edge) * 0.242), 78.1% calc(var(--fr-edge) * 0.305), 81.2% calc(var(--fr-edge) * 0.375), 84.4% calc(var(--fr-edge) * 0.452), 87.5% calc(var(--fr-edge) * 0.536), 90.6% calc(var(--fr-edge) * 0.628), 93.8% calc(var(--fr-edge) * 0.729), 96.9% calc(var(--fr-edge) * 0.844), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
}
html body main.about-us-page .about-values-mission__inner { position: relative; }
html body main.about-us-page .about-values-mission::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 4;
    inset: 0 0 auto 0 !important;
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: .85;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 3.1% calc(var(--fr-edge) * 0.844), 6.2% calc(var(--fr-edge) * 0.729), 9.4% calc(var(--fr-edge) * 0.628), 12.5% calc(var(--fr-edge) * 0.536), 15.6% calc(var(--fr-edge) * 0.452), 18.8% calc(var(--fr-edge) * 0.375), 21.9% calc(var(--fr-edge) * 0.305), 25.0% calc(var(--fr-edge) * 0.242), 28.1% calc(var(--fr-edge) * 0.186), 31.2% calc(var(--fr-edge) * 0.137), 34.4% calc(var(--fr-edge) * 0.096), 37.5% calc(var(--fr-edge) * 0.061), 40.6% calc(var(--fr-edge) * 0.035), 43.8% calc(var(--fr-edge) * 0.015), 46.9% calc(var(--fr-edge) * 0.004), 50.0% calc(var(--fr-edge) * 0.000), 53.1% calc(var(--fr-edge) * 0.004), 56.2% calc(var(--fr-edge) * 0.015), 59.4% calc(var(--fr-edge) * 0.035), 62.5% calc(var(--fr-edge) * 0.061), 65.6% calc(var(--fr-edge) * 0.096), 68.8% calc(var(--fr-edge) * 0.137), 71.9% calc(var(--fr-edge) * 0.186), 75.0% calc(var(--fr-edge) * 0.242), 78.1% calc(var(--fr-edge) * 0.305), 81.2% calc(var(--fr-edge) * 0.375), 84.4% calc(var(--fr-edge) * 0.452), 87.5% calc(var(--fr-edge) * 0.536), 90.6% calc(var(--fr-edge) * 0.628), 93.8% calc(var(--fr-edge) * 0.729), 96.9% calc(var(--fr-edge) * 0.844), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 96.9% calc(var(--fr-edge) * 0.844 + 3px), 93.8% calc(var(--fr-edge) * 0.729 + 3px), 90.6% calc(var(--fr-edge) * 0.628 + 3px), 87.5% calc(var(--fr-edge) * 0.536 + 3px), 84.4% calc(var(--fr-edge) * 0.452 + 3px), 81.2% calc(var(--fr-edge) * 0.375 + 3px), 78.1% calc(var(--fr-edge) * 0.305 + 3px), 75.0% calc(var(--fr-edge) * 0.242 + 3px), 71.9% calc(var(--fr-edge) * 0.186 + 3px), 68.8% calc(var(--fr-edge) * 0.137 + 3px), 65.6% calc(var(--fr-edge) * 0.096 + 3px), 62.5% calc(var(--fr-edge) * 0.061 + 3px), 59.4% calc(var(--fr-edge) * 0.035 + 3px), 56.2% calc(var(--fr-edge) * 0.015 + 3px), 53.1% calc(var(--fr-edge) * 0.004 + 3px), 50.0% calc(var(--fr-edge) * 0.000 + 3px), 46.9% calc(var(--fr-edge) * 0.004 + 3px), 43.8% calc(var(--fr-edge) * 0.015 + 3px), 40.6% calc(var(--fr-edge) * 0.035 + 3px), 37.5% calc(var(--fr-edge) * 0.061 + 3px), 34.4% calc(var(--fr-edge) * 0.096 + 3px), 31.2% calc(var(--fr-edge) * 0.137 + 3px), 28.1% calc(var(--fr-edge) * 0.186 + 3px), 25.0% calc(var(--fr-edge) * 0.242 + 3px), 21.9% calc(var(--fr-edge) * 0.305 + 3px), 18.8% calc(var(--fr-edge) * 0.375 + 3px), 15.6% calc(var(--fr-edge) * 0.452 + 3px), 12.5% calc(var(--fr-edge) * 0.536 + 3px), 9.4% calc(var(--fr-edge) * 0.628 + 3px), 6.2% calc(var(--fr-edge) * 0.729 + 3px), 3.1% calc(var(--fr-edge) * 0.844 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 3.1% calc(var(--fr-edge) * 0.844), 6.2% calc(var(--fr-edge) * 0.729), 9.4% calc(var(--fr-edge) * 0.628), 12.5% calc(var(--fr-edge) * 0.536), 15.6% calc(var(--fr-edge) * 0.452), 18.8% calc(var(--fr-edge) * 0.375), 21.9% calc(var(--fr-edge) * 0.305), 25.0% calc(var(--fr-edge) * 0.242), 28.1% calc(var(--fr-edge) * 0.186), 31.2% calc(var(--fr-edge) * 0.137), 34.4% calc(var(--fr-edge) * 0.096), 37.5% calc(var(--fr-edge) * 0.061), 40.6% calc(var(--fr-edge) * 0.035), 43.8% calc(var(--fr-edge) * 0.015), 46.9% calc(var(--fr-edge) * 0.004), 50.0% calc(var(--fr-edge) * 0.000), 53.1% calc(var(--fr-edge) * 0.004), 56.2% calc(var(--fr-edge) * 0.015), 59.4% calc(var(--fr-edge) * 0.035), 62.5% calc(var(--fr-edge) * 0.061), 65.6% calc(var(--fr-edge) * 0.096), 68.8% calc(var(--fr-edge) * 0.137), 71.9% calc(var(--fr-edge) * 0.186), 75.0% calc(var(--fr-edge) * 0.242), 78.1% calc(var(--fr-edge) * 0.305), 81.2% calc(var(--fr-edge) * 0.375), 84.4% calc(var(--fr-edge) * 0.452), 87.5% calc(var(--fr-edge) * 0.536), 90.6% calc(var(--fr-edge) * 0.628), 93.8% calc(var(--fr-edge) * 0.729), 96.9% calc(var(--fr-edge) * 0.844), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 96.9% calc(var(--fr-edge) * 0.844 + 3px), 93.8% calc(var(--fr-edge) * 0.729 + 3px), 90.6% calc(var(--fr-edge) * 0.628 + 3px), 87.5% calc(var(--fr-edge) * 0.536 + 3px), 84.4% calc(var(--fr-edge) * 0.452 + 3px), 81.2% calc(var(--fr-edge) * 0.375 + 3px), 78.1% calc(var(--fr-edge) * 0.305 + 3px), 75.0% calc(var(--fr-edge) * 0.242 + 3px), 71.9% calc(var(--fr-edge) * 0.186 + 3px), 68.8% calc(var(--fr-edge) * 0.137 + 3px), 65.6% calc(var(--fr-edge) * 0.096 + 3px), 62.5% calc(var(--fr-edge) * 0.061 + 3px), 59.4% calc(var(--fr-edge) * 0.035 + 3px), 56.2% calc(var(--fr-edge) * 0.015 + 3px), 53.1% calc(var(--fr-edge) * 0.004 + 3px), 50.0% calc(var(--fr-edge) * 0.000 + 3px), 46.9% calc(var(--fr-edge) * 0.004 + 3px), 43.8% calc(var(--fr-edge) * 0.015 + 3px), 40.6% calc(var(--fr-edge) * 0.035 + 3px), 37.5% calc(var(--fr-edge) * 0.061 + 3px), 34.4% calc(var(--fr-edge) * 0.096 + 3px), 31.2% calc(var(--fr-edge) * 0.137 + 3px), 28.1% calc(var(--fr-edge) * 0.186 + 3px), 25.0% calc(var(--fr-edge) * 0.242 + 3px), 21.9% calc(var(--fr-edge) * 0.305 + 3px), 18.8% calc(var(--fr-edge) * 0.375 + 3px), 15.6% calc(var(--fr-edge) * 0.452 + 3px), 12.5% calc(var(--fr-edge) * 0.536 + 3px), 9.4% calc(var(--fr-edge) * 0.628 + 3px), 6.2% calc(var(--fr-edge) * 0.729 + 3px), 3.1% calc(var(--fr-edge) * 0.844 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
}
html body main.about-us-page .about-final-cta {
    margin-top: calc(var(--fr-edge) * -1) !important;
    padding-top: calc(var(--ab-pt) + var(--fr-edge)) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
}
html body main.about-us-page .about-final-cta__inner { position: relative; }
html body main.about-us-page .about-final-cta__inner::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 4;
    top: calc((var(--ab-pt) + var(--fr-edge)) * -1) !important; left: 50% !important; width: 100vw !important; transform: translateX(-50%);
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: .85;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 93.8% calc(var(--fr-edge) * 0.805 + 3px), 87.5% calc(var(--fr-edge) * 0.617 + 3px), 81.2% calc(var(--fr-edge) * 0.444 + 3px), 75.0% calc(var(--fr-edge) * 0.293 + 3px), 68.8% calc(var(--fr-edge) * 0.169 + 3px), 62.5% calc(var(--fr-edge) * 0.076 + 3px), 56.2% calc(var(--fr-edge) * 0.019 + 3px), 50.0% calc(var(--fr-edge) * 0.000 + 3px), 43.8% calc(var(--fr-edge) * 0.019 + 3px), 37.5% calc(var(--fr-edge) * 0.076 + 3px), 31.2% calc(var(--fr-edge) * 0.169 + 3px), 25.0% calc(var(--fr-edge) * 0.293 + 3px), 18.8% calc(var(--fr-edge) * 0.444 + 3px), 12.5% calc(var(--fr-edge) * 0.617 + 3px), 6.2% calc(var(--fr-edge) * 0.805 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 93.8% calc(var(--fr-edge) * 0.805 + 3px), 87.5% calc(var(--fr-edge) * 0.617 + 3px), 81.2% calc(var(--fr-edge) * 0.444 + 3px), 75.0% calc(var(--fr-edge) * 0.293 + 3px), 68.8% calc(var(--fr-edge) * 0.169 + 3px), 62.5% calc(var(--fr-edge) * 0.076 + 3px), 56.2% calc(var(--fr-edge) * 0.019 + 3px), 50.0% calc(var(--fr-edge) * 0.000 + 3px), 43.8% calc(var(--fr-edge) * 0.019 + 3px), 37.5% calc(var(--fr-edge) * 0.076 + 3px), 31.2% calc(var(--fr-edge) * 0.169 + 3px), 25.0% calc(var(--fr-edge) * 0.293 + 3px), 18.8% calc(var(--fr-edge) * 0.444 + 3px), 12.5% calc(var(--fr-edge) * 0.617 + 3px), 6.2% calc(var(--fr-edge) * 0.805 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
}

/* ---------- 02 · WHY WE EXIST ---------- */
html body main.about-us-page .about-why__card {
    border: 1px solid rgba(217,183,126,.30) !important;
    border-radius: 40px 10px 40px 10px !important;
    background: linear-gradient(160deg, rgba(255,255,255,.92), rgba(255,250,244,.62)) !important;
    box-shadow: 0 18px 38px -22px rgba(79,91,73,.30), inset 0 1px 0 #fff !important;
    padding: 30px 28px 32px !important;
}
html body main.about-us-page .about-why__card::before,
html body main.about-us-page .about-why__card::after { display: none !important; }

/* unified glass badge */
html body main.about-us-page .about-why__icon,
html body main.about-us-page .about-method__number {
    position: relative;
    display: grid !important;
    place-items: center !important;
    justify-content: center !important;
    align-items: center !important;
    width: 76px !important;
    height: 76px !important;
    border-radius: 50% !important;
    background: linear-gradient(145deg,#FFF7EF,#F3E2D5 60%,#EAD2C2) !important;
    color: #84634E !important;
    border: 0 !important;
    box-shadow: 0 12px 22px -12px rgba(132,99,78,.5), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -3px 6px rgba(132,99,78,.10) !important;
}
html body main.about-us-page .about-why__card:nth-child(even) .about-why__icon,
html body main.about-us-page .about-method__step:nth-child(even) .about-method__number {
    background: linear-gradient(145deg,#F7F9F2,#E6EBDD 60%,#D4DFC8) !important;
    color: #566449 !important;
    box-shadow: 0 12px 22px -12px rgba(86,100,73,.5), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -3px 6px rgba(86,100,73,.10) !important;
}
html body main.about-us-page .about-why__icon::before,
html body main.about-us-page .about-method__number::before {
    content: "" !important;
    position: absolute !important;
    inset: 6px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,.75) !important;
    pointer-events: none;
}
html body main.about-us-page .about-why__icon svg {
    width: 34px !important; height: 34px !important;
    stroke-width: 1.7 !important; stroke-linecap: round; stroke-linejoin: round;
    margin: 0 !important; position: static !important;
}
html body main.about-us-page .about-method__number span { position: relative; color: inherit !important; }

html body main.about-us-page .about-why__grid { gap: 22px !important; }
@media screen and (max-width: 1100px) { html body main.about-us-page .about-why__grid { gap: 14px !important; } }

/* ---------- 03 · FOUNDER ---------- */
html body main.about-us-page .about-founder__image-wrap {
    border-radius: 64px 14px 64px 14px !important;
    border: 1px solid rgba(217,183,126,.45) !important;
    box-shadow: 0 34px 60px -30px rgba(79,91,73,.45), inset 0 1px 0 rgba(255,255,255,.6) !important;
}
html body main.about-us-page .about-founder__image { border-radius: inherit !important; }
html body main.about-us-page .about-founder__visual::before {
    content: "" !important;
    position: absolute !important;
    z-index: 0;
    inset: 22px -22px -22px 22px;
    border-radius: 64px 14px 64px 14px;
    background: linear-gradient(145deg,#E6EBDD,#D4DFC8);
    opacity: .75;
    pointer-events: none;
}
html body main.about-us-page .about-founder__image-wrap { position: relative; z-index: 1; }

/* ---------- 04 · THE MISSING LAYER ---------- */
html body main.about-us-page .about-layer__visual { border-left: 0 !important; }
html body main.about-us-page .about-layer__panel {
    border: 1px solid rgba(217,183,126,.30) !important;
    border-radius: 36px 10px 36px 10px !important;
    box-shadow: 0 18px 36px -22px rgba(79,91,73,.32), inset 0 1px 0 #fff !important;
}
html body main.about-us-page .about-layer__panel--old { background: linear-gradient(160deg,#F9F4EE,#F1E8DD) !important; }
html body main.about-us-page .about-layer__panel--new { background: linear-gradient(160deg,#FFFFFF,#FFF8F0) !important; }
html body main.about-us-page .about-layer__symbol--app {
    border-radius: 12px !important;
    background: linear-gradient(145deg,#FFFFFF,#F3EBE1) !important;
    box-shadow: 0 6px 12px -6px rgba(79,91,73,.35), inset 0 1px 0 #fff !important;
    border: 1px solid rgba(217,183,126,.28) !important;
}
html body main.about-us-page .about-layer__symbol--approach {
    background: linear-gradient(145deg,#FFF7EF,#F3E2D5 60%,#EAD2C2) !important;
    color: #84634E !important;
    border: 0 !important;
    box-shadow: 0 8px 14px -8px rgba(132,99,78,.5), inset 0 1px 0 rgba(255,255,255,.95) !important;
}
html body main.about-us-page .about-layer__symbol--approach:nth-child(even) {
    background: linear-gradient(145deg,#F7F9F2,#E6EBDD 60%,#D4DFC8) !important;
    color: #566449 !important;
    box-shadow: 0 8px 14px -8px rgba(86,100,73,.5), inset 0 1px 0 rgba(255,255,255,.95) !important;
}

/* ---------- 05 · METHOD ---------- */
html body main.about-us-page .about-method__step {
    border: 1px solid rgba(217,183,126,.30) !important;
    border-radius: 40px 10px 40px 10px !important;
    background: linear-gradient(160deg, rgba(255,255,255,.95), rgba(255,250,244,.70)) !important;
    box-shadow: 0 18px 38px -22px rgba(79,91,73,.30), inset 0 1px 0 #fff !important;
}
html body main.about-us-page .about-method__step { padding: 30px 28px 32px !important; }
html body main.about-us-page .about-method__rule { display: none !important; }

/* ---------- 06 · VALUES + MISSION (dark) ---------- */
html body main.about-us-page .about-values-mission__icon {
    position: relative;
    display: grid !important;
    place-items: center !important;
    width: 76px !important;
    height: 76px !important;
    border-radius: 50% !important;
    color: #E4C98F !important;
    background: linear-gradient(145deg, rgba(247,240,230,.16), rgba(247,240,230,.04)) !important;
    border: 1px solid rgba(228,201,143,.42) !important;
    box-shadow: 0 14px 26px -14px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.20) !important;
}
html body main.about-us-page .about-values-mission__icon::before {
    content: "" !important;
    position: absolute !important;
    inset: 6px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(247,240,230,.14) !important;
    pointer-events: none;
}
html body main.about-us-page .about-values-mission__icon svg {
    width: 34px !important; height: 34px !important;
    stroke-width: 1.7 !important; stroke-linecap: round; stroke-linejoin: round;
}
html body main.about-us-page .about-values-mission__value { grid-template-columns: 76px 1fr !important; column-gap: 20px !important; }
html body main.about-us-page .about-values-mission__mission {
    border: 1px solid rgba(228,201,143,.28) !important;
    border-radius: 56px 12px 56px 12px !important;
    background: linear-gradient(155deg, rgba(247,240,230,.09), rgba(247,240,230,.03)) !important;
    box-shadow: 0 30px 50px -30px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.14) !important;
    padding: 44px 40px !important;
}
html body main.about-us-page .about-values-mission__mission::before { display: none !important; }
html body main.about-us-page .about-values-mission__mission { box-sizing: border-box !important; max-width: 100% !important; }

/* ---------- 07 · RESPONSIVE ---------- */
@media screen and (max-width: 1100px) {
    html body main.about-us-page .about-why__icon,
    html body main.about-us-page .about-method__number,
    html body main.about-us-page .about-values-mission__icon { width: 68px !important; height: 68px !important; }
    html body main.about-us-page .about-why__icon svg,
    html body main.about-us-page .about-values-mission__icon svg { width: 30px !important; height: 30px !important; }
    html body main.about-us-page .about-values-mission__value { grid-template-columns: 68px 1fr !important; }
}
@media screen and (max-width: 1100px) {
    html body main.about-us-page .about-why__card { box-shadow: 0 8px 16px -10px rgba(79,91,73,.28), inset 0 1px 0 #fff !important; }
    html body main.about-us-page .about-values-mission__mission { padding: 36px 30px !important; }
}
@media screen and (max-width: 599px) {
    html body main.about-us-page .about-why__icon,
    html body main.about-us-page .about-method__number,
    html body main.about-us-page .about-values-mission__icon { width: 60px !important; height: 60px !important; }
    html body main.about-us-page .about-why__icon svg,
    html body main.about-us-page .about-values-mission__icon svg { width: 27px !important; height: 27px !important; }
    html body main.about-us-page .about-values-mission__value { grid-template-columns: 60px 1fr !important; column-gap: 16px !important; }
    html body main.about-us-page .about-why__card,
    html body main.about-us-page .about-method__step,
    html body main.about-us-page .about-layer__panel { border-radius: 32px 8px 32px 8px !important; }
    html body main.about-us-page .about-founder__image-wrap,
    html body main.about-us-page .about-founder__visual::before { border-radius: 48px 10px 48px 10px !important; }
    html body main.about-us-page .about-values-mission__mission { border-radius: 44px 10px 44px 10px !important; padding: 32px 24px !important; }
    html body main.about-us-page .about-founder__visual::before { inset: 14px -12px -14px 12px; }
}

@media screen and (max-width: 599px) {
    html body main.about-us-page .about-method__step { padding: 26px 22px 28px !important; column-gap: 18px !important; }
    html body main.about-us-page .about-method__step { gap: 18px !important; }
}

html body main.about-us-page .about-method__step { grid-template-columns: auto minmax(0, 1fr) !important; column-gap: 20px !important; align-items: start !important; }
html body main.about-us-page .about-method__steps { align-items: stretch !important; }
html body main.about-us-page .about-method__step { align-self: stretch !important; }

/* =========================================================
   FRAYORA — RESOURCES ELEVATION v1
   PASTE AT THE VERY BOTTOM OF main.css

   - No words, photos, typography or links are changed.
   - Hero and every section share the shaped edges and the fine
     sage-to-sand line used across the site.
   - The six topic icons become the same glass badges (peach /
     sage, fine round line) used on every other page.
   - Featured cards get leaf corners; the oversized
     "View All Resources" button is refined to a calm glass pill.
   - Desktop, tablet and mobile.
========================================================= */

:root { --fr-edge: 64px; }
@media screen and (max-width: 1100px) { :root { --fr-edge: 52px; } }
@media screen and (max-width: 899px)  { :root { --fr-edge: 44px; } }
@media screen and (max-width: 599px)  { :root { --fr-edge: 34px; } }

html body main.frayora-resources-page { --rs-pt: 44px; --rs-pb: 80px; }
@media screen and (max-width: 899px) { html body main.frayora-resources-page { --rs-pt: 40px; --rs-pb: 68px; } }
@media screen and (max-width: 599px) { html body main.frayora-resources-page { --rs-pt: 36px; --rs-pb: 60px; } }

/* ---------- 00 · HERO ---------- */

html body main.frayora-resources-page .about-us-page .about-hero {
    border-radius: 0 !important;
    box-sizing: content-box !important;
    padding-bottom: var(--fr-edge) !important;
    background-color: #3F4A3A !important;
    box-shadow: none !important;
}
html body main.frayora-resources-page .about-us-page .about-hero__overlay::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none;
    background:
        radial-gradient(60% 70% at 88% 6%, rgba(217,183,126,.18), rgba(217,183,126,0) 70%),
        radial-gradient(55% 75% at 6% 100%, rgba(214,106,67,.14), rgba(214,106,67,0) 72%),
        linear-gradient(180deg, rgba(63,74,58,.08) 0%, rgba(63,74,58,0) 38%, rgba(63,74,58,.30) 100%) !important;
}
html body main.frayora-resources-page .about-us-page .about-hero__inner { z-index: 3; }

/* ---------- 01b · COLOURS + SPACING ---------- */

html body main.frayora-resources-page .fr-resources-topics { background-color: #FAF7F2 !important; position: relative; }
html body main.frayora-resources-page .fr-featured { background-color: #F5EDE4 !important; position: relative; }
html body main.frayora-resources-page .fr-resources-cta { background-color: #F8F3EB !important; }
html body main.frayora-resources-page .fr-resources-topics,
html body main.frayora-resources-page .fr-featured { padding-bottom: calc(var(--rs-pb) + var(--fr-edge) * .6) !important; }

/* the old angular decor shapes behind the featured cards are retired */
html body main.frayora-resources-page .fr-featured::after,
html body main.frayora-resources-page .fr-featured__inner::before,
html body main.frayora-resources-page .fr-featured__inner::after { display: none !important; }


/* ---------- 01 · SHAPED SECTION EDGES ---------- */
html body main.frayora-resources-page .fr-resources-topics {
    margin-top: calc(var(--fr-edge) * -1) !important;
    padding-top: calc(var(--rs-pt) + var(--fr-edge)) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.176), 12.5% calc(var(--fr-edge) * 0.344), 18.8% calc(var(--fr-edge) * 0.500), 25.0% calc(var(--fr-edge) * 0.636), 31.2% calc(var(--fr-edge) * 0.748), 37.5% calc(var(--fr-edge) * 0.831), 43.8% calc(var(--fr-edge) * 0.883), 50.0% calc(var(--fr-edge) * 0.900), 56.2% calc(var(--fr-edge) * 0.883), 62.5% calc(var(--fr-edge) * 0.831), 68.8% calc(var(--fr-edge) * 0.748), 75.0% calc(var(--fr-edge) * 0.636), 81.2% calc(var(--fr-edge) * 0.500), 87.5% calc(var(--fr-edge) * 0.344), 93.8% calc(var(--fr-edge) * 0.176), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.176), 12.5% calc(var(--fr-edge) * 0.344), 18.8% calc(var(--fr-edge) * 0.500), 25.0% calc(var(--fr-edge) * 0.636), 31.2% calc(var(--fr-edge) * 0.748), 37.5% calc(var(--fr-edge) * 0.831), 43.8% calc(var(--fr-edge) * 0.883), 50.0% calc(var(--fr-edge) * 0.900), 56.2% calc(var(--fr-edge) * 0.883), 62.5% calc(var(--fr-edge) * 0.831), 68.8% calc(var(--fr-edge) * 0.748), 75.0% calc(var(--fr-edge) * 0.636), 81.2% calc(var(--fr-edge) * 0.500), 87.5% calc(var(--fr-edge) * 0.344), 93.8% calc(var(--fr-edge) * 0.176), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
}
html body main.frayora-resources-page .fr-resources-topics::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 4;
    inset: 0 0 auto 0 !important;
    width: auto !important;
    transform: none !important;
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: .85;
    border-radius: 0 !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.176), 12.5% calc(var(--fr-edge) * 0.344), 18.8% calc(var(--fr-edge) * 0.500), 25.0% calc(var(--fr-edge) * 0.636), 31.2% calc(var(--fr-edge) * 0.748), 37.5% calc(var(--fr-edge) * 0.831), 43.8% calc(var(--fr-edge) * 0.883), 50.0% calc(var(--fr-edge) * 0.900), 56.2% calc(var(--fr-edge) * 0.883), 62.5% calc(var(--fr-edge) * 0.831), 68.8% calc(var(--fr-edge) * 0.748), 75.0% calc(var(--fr-edge) * 0.636), 81.2% calc(var(--fr-edge) * 0.500), 87.5% calc(var(--fr-edge) * 0.344), 93.8% calc(var(--fr-edge) * 0.176), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.176 + 3px), 87.5% calc(var(--fr-edge) * 0.344 + 3px), 81.2% calc(var(--fr-edge) * 0.500 + 3px), 75.0% calc(var(--fr-edge) * 0.636 + 3px), 68.8% calc(var(--fr-edge) * 0.748 + 3px), 62.5% calc(var(--fr-edge) * 0.831 + 3px), 56.2% calc(var(--fr-edge) * 0.883 + 3px), 50.0% calc(var(--fr-edge) * 0.900 + 3px), 43.8% calc(var(--fr-edge) * 0.883 + 3px), 37.5% calc(var(--fr-edge) * 0.831 + 3px), 31.2% calc(var(--fr-edge) * 0.748 + 3px), 25.0% calc(var(--fr-edge) * 0.636 + 3px), 18.8% calc(var(--fr-edge) * 0.500 + 3px), 12.5% calc(var(--fr-edge) * 0.344 + 3px), 6.2% calc(var(--fr-edge) * 0.176 + 3px), 0.0% calc(var(--fr-edge) * 0.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.176), 12.5% calc(var(--fr-edge) * 0.344), 18.8% calc(var(--fr-edge) * 0.500), 25.0% calc(var(--fr-edge) * 0.636), 31.2% calc(var(--fr-edge) * 0.748), 37.5% calc(var(--fr-edge) * 0.831), 43.8% calc(var(--fr-edge) * 0.883), 50.0% calc(var(--fr-edge) * 0.900), 56.2% calc(var(--fr-edge) * 0.883), 62.5% calc(var(--fr-edge) * 0.831), 68.8% calc(var(--fr-edge) * 0.748), 75.0% calc(var(--fr-edge) * 0.636), 81.2% calc(var(--fr-edge) * 0.500), 87.5% calc(var(--fr-edge) * 0.344), 93.8% calc(var(--fr-edge) * 0.176), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.176 + 3px), 87.5% calc(var(--fr-edge) * 0.344 + 3px), 81.2% calc(var(--fr-edge) * 0.500 + 3px), 75.0% calc(var(--fr-edge) * 0.636 + 3px), 68.8% calc(var(--fr-edge) * 0.748 + 3px), 62.5% calc(var(--fr-edge) * 0.831 + 3px), 56.2% calc(var(--fr-edge) * 0.883 + 3px), 50.0% calc(var(--fr-edge) * 0.900 + 3px), 43.8% calc(var(--fr-edge) * 0.883 + 3px), 37.5% calc(var(--fr-edge) * 0.831 + 3px), 31.2% calc(var(--fr-edge) * 0.748 + 3px), 25.0% calc(var(--fr-edge) * 0.636 + 3px), 18.8% calc(var(--fr-edge) * 0.500 + 3px), 12.5% calc(var(--fr-edge) * 0.344 + 3px), 6.2% calc(var(--fr-edge) * 0.176 + 3px), 0.0% calc(var(--fr-edge) * 0.000 + 3px));
}
html body main.frayora-resources-page .fr-featured {
    margin-top: calc(var(--fr-edge) * -1) !important;
    padding-top: calc(var(--rs-pt) + var(--fr-edge)) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.989), 12.5% calc(var(--fr-edge) * 0.957), 18.8% calc(var(--fr-edge) * 0.908), 25.0% calc(var(--fr-edge) * 0.844), 31.2% calc(var(--fr-edge) * 0.768), 37.5% calc(var(--fr-edge) * 0.684), 43.8% calc(var(--fr-edge) * 0.593), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.407), 62.5% calc(var(--fr-edge) * 0.316), 68.8% calc(var(--fr-edge) * 0.232), 75.0% calc(var(--fr-edge) * 0.156), 81.2% calc(var(--fr-edge) * 0.092), 87.5% calc(var(--fr-edge) * 0.043), 93.8% calc(var(--fr-edge) * 0.011), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.989), 12.5% calc(var(--fr-edge) * 0.957), 18.8% calc(var(--fr-edge) * 0.908), 25.0% calc(var(--fr-edge) * 0.844), 31.2% calc(var(--fr-edge) * 0.768), 37.5% calc(var(--fr-edge) * 0.684), 43.8% calc(var(--fr-edge) * 0.593), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.407), 62.5% calc(var(--fr-edge) * 0.316), 68.8% calc(var(--fr-edge) * 0.232), 75.0% calc(var(--fr-edge) * 0.156), 81.2% calc(var(--fr-edge) * 0.092), 87.5% calc(var(--fr-edge) * 0.043), 93.8% calc(var(--fr-edge) * 0.011), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
}
html body main.frayora-resources-page .fr-featured::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 4;
    inset: 0 0 auto 0 !important;
    width: auto !important;
    transform: none !important;
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: .85;
    border-radius: 0 !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.989), 12.5% calc(var(--fr-edge) * 0.957), 18.8% calc(var(--fr-edge) * 0.908), 25.0% calc(var(--fr-edge) * 0.844), 31.2% calc(var(--fr-edge) * 0.768), 37.5% calc(var(--fr-edge) * 0.684), 43.8% calc(var(--fr-edge) * 0.593), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.407), 62.5% calc(var(--fr-edge) * 0.316), 68.8% calc(var(--fr-edge) * 0.232), 75.0% calc(var(--fr-edge) * 0.156), 81.2% calc(var(--fr-edge) * 0.092), 87.5% calc(var(--fr-edge) * 0.043), 93.8% calc(var(--fr-edge) * 0.011), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.011 + 3px), 87.5% calc(var(--fr-edge) * 0.043 + 3px), 81.2% calc(var(--fr-edge) * 0.092 + 3px), 75.0% calc(var(--fr-edge) * 0.156 + 3px), 68.8% calc(var(--fr-edge) * 0.232 + 3px), 62.5% calc(var(--fr-edge) * 0.316 + 3px), 56.2% calc(var(--fr-edge) * 0.407 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.593 + 3px), 37.5% calc(var(--fr-edge) * 0.684 + 3px), 31.2% calc(var(--fr-edge) * 0.768 + 3px), 25.0% calc(var(--fr-edge) * 0.844 + 3px), 18.8% calc(var(--fr-edge) * 0.908 + 3px), 12.5% calc(var(--fr-edge) * 0.957 + 3px), 6.2% calc(var(--fr-edge) * 0.989 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.989), 12.5% calc(var(--fr-edge) * 0.957), 18.8% calc(var(--fr-edge) * 0.908), 25.0% calc(var(--fr-edge) * 0.844), 31.2% calc(var(--fr-edge) * 0.768), 37.5% calc(var(--fr-edge) * 0.684), 43.8% calc(var(--fr-edge) * 0.593), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.407), 62.5% calc(var(--fr-edge) * 0.316), 68.8% calc(var(--fr-edge) * 0.232), 75.0% calc(var(--fr-edge) * 0.156), 81.2% calc(var(--fr-edge) * 0.092), 87.5% calc(var(--fr-edge) * 0.043), 93.8% calc(var(--fr-edge) * 0.011), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.011 + 3px), 87.5% calc(var(--fr-edge) * 0.043 + 3px), 81.2% calc(var(--fr-edge) * 0.092 + 3px), 75.0% calc(var(--fr-edge) * 0.156 + 3px), 68.8% calc(var(--fr-edge) * 0.232 + 3px), 62.5% calc(var(--fr-edge) * 0.316 + 3px), 56.2% calc(var(--fr-edge) * 0.407 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.593 + 3px), 37.5% calc(var(--fr-edge) * 0.684 + 3px), 31.2% calc(var(--fr-edge) * 0.768 + 3px), 25.0% calc(var(--fr-edge) * 0.844 + 3px), 18.8% calc(var(--fr-edge) * 0.908 + 3px), 12.5% calc(var(--fr-edge) * 0.957 + 3px), 6.2% calc(var(--fr-edge) * 0.989 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
}
html body main.frayora-resources-page .fr-resources-cta {
    margin-top: calc(var(--fr-edge) * -1) !important;
    padding-top: calc(var(--rs-pt) + var(--fr-edge)) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
}
html body main.frayora-resources-page .fr-resources-cta::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 4;
    inset: 0 0 auto 0 !important;
    width: auto !important;
    transform: none !important;
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: .85;
    border-radius: 0 !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 93.8% calc(var(--fr-edge) * 0.805 + 3px), 87.5% calc(var(--fr-edge) * 0.617 + 3px), 81.2% calc(var(--fr-edge) * 0.444 + 3px), 75.0% calc(var(--fr-edge) * 0.293 + 3px), 68.8% calc(var(--fr-edge) * 0.169 + 3px), 62.5% calc(var(--fr-edge) * 0.076 + 3px), 56.2% calc(var(--fr-edge) * 0.019 + 3px), 50.0% calc(var(--fr-edge) * 0.000 + 3px), 43.8% calc(var(--fr-edge) * 0.019 + 3px), 37.5% calc(var(--fr-edge) * 0.076 + 3px), 31.2% calc(var(--fr-edge) * 0.169 + 3px), 25.0% calc(var(--fr-edge) * 0.293 + 3px), 18.8% calc(var(--fr-edge) * 0.444 + 3px), 12.5% calc(var(--fr-edge) * 0.617 + 3px), 6.2% calc(var(--fr-edge) * 0.805 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 93.8% calc(var(--fr-edge) * 0.805 + 3px), 87.5% calc(var(--fr-edge) * 0.617 + 3px), 81.2% calc(var(--fr-edge) * 0.444 + 3px), 75.0% calc(var(--fr-edge) * 0.293 + 3px), 68.8% calc(var(--fr-edge) * 0.169 + 3px), 62.5% calc(var(--fr-edge) * 0.076 + 3px), 56.2% calc(var(--fr-edge) * 0.019 + 3px), 50.0% calc(var(--fr-edge) * 0.000 + 3px), 43.8% calc(var(--fr-edge) * 0.019 + 3px), 37.5% calc(var(--fr-edge) * 0.076 + 3px), 31.2% calc(var(--fr-edge) * 0.169 + 3px), 25.0% calc(var(--fr-edge) * 0.293 + 3px), 18.8% calc(var(--fr-edge) * 0.444 + 3px), 12.5% calc(var(--fr-edge) * 0.617 + 3px), 6.2% calc(var(--fr-edge) * 0.805 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
}

/* ---------- 02 · TOPIC CARDS + BADGES ---------- */
html body main.frayora-resources-page .fr-resources-topics__card {
    border: 1px solid rgba(217,183,126,.30) !important;
    border-radius: 40px 10px 40px 10px !important;
    background: linear-gradient(160deg, rgba(255,255,255,.96), rgba(255,250,244,.72)) !important;
    box-shadow: 0 18px 38px -22px rgba(79,91,73,.30), inset 0 1px 0 #fff !important;
}
html body main.frayora-resources-page .fr-resources-topics__icon {
    position: relative;
    flex: 0 0 auto !important;
    aspect-ratio: 1 / 1;
    display: grid !important;
    place-items: center !important;
    justify-content: center !important;
    align-items: center !important;
    width: 76px !important;
    height: 76px !important;
    border-radius: 50% !important;
    background: linear-gradient(145deg,#FFF7EF,#F3E2D5 60%,#EAD2C2) !important;
    color: #84634E !important;
    border: 0 !important;
    box-shadow: 0 12px 22px -12px rgba(132,99,78,.5), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -3px 6px rgba(132,99,78,.10) !important;
}
html body main.frayora-resources-page .fr-resources-topics__card:nth-child(even) .fr-resources-topics__icon {
    background: linear-gradient(145deg,#F7F9F2,#E6EBDD 60%,#D4DFC8) !important;
    color: #566449 !important;
    box-shadow: 0 12px 22px -12px rgba(86,100,73,.5), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -3px 6px rgba(86,100,73,.10) !important;
}
html body main.frayora-resources-page .fr-resources-topics__icon::before {
    content: "" !important;
    position: absolute !important;
    inset: 6px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,.75) !important;
    pointer-events: none;
}
html body main.frayora-resources-page .fr-resources-topics__icon svg {
    width: 34px !important; height: 34px !important;
    stroke-width: 1.7 !important; stroke-linecap: round; stroke-linejoin: round;
    margin: 0 !important; position: static !important;
}

/* ---------- 03 · FEATURED ---------- */
html body main.frayora-resources-page .fr-featured__card {
    border: 1px solid rgba(217,183,126,.34) !important;
    border-radius: 44px 10px 44px 10px !important;
    box-shadow: 0 24px 44px -26px rgba(79,91,73,.36), inset 0 1px 0 #fff !important;
}
html body main.frayora-resources-page .fr-featured__header { align-items: flex-end !important; }
html body main.frayora-resources-page .fr-featured a.fr-featured__all {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: auto !important;
    height: 46px !important;
    min-height: 0 !important;
    padding: 0 24px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    letter-spacing: .01em !important;
    color: #B85A36 !important;
    border: 1px solid rgba(201,103,67,.45) !important;
    border-radius: 999px !important;
    background: linear-gradient(160deg, rgba(255,255,255,.75), rgba(255,247,239,.45)) !important;
    box-shadow: 0 10px 20px -12px rgba(201,103,67,.40), inset 0 1px 0 rgba(255,255,255,.9) !important;
    white-space: nowrap;
}
html body main.frayora-resources-page .fr-featured a.fr-featured__all span { font-size: inherit !important; line-height: 1 !important; color: inherit !important; }
html body main.frayora-resources-page .fr-featured a.fr-featured__all svg { width: 17px !important; height: 17px !important; }

/* ---------- 04 · RESPONSIVE ---------- */
@media screen and (max-width: 1100px) {
    html body main.frayora-resources-page .fr-resources-topics__icon { width: 68px !important; height: 68px !important; }
    html body main.frayora-resources-page .fr-resources-topics__icon svg { width: 30px !important; height: 30px !important; }
    html body main.frayora-resources-page .fr-resources-topics__card,
    html body main.frayora-resources-page .fr-featured__card { box-shadow: 0 8px 16px -10px rgba(79,91,73,.28), inset 0 1px 0 #fff !important; }
}
@media screen and (max-width: 599px) {
    html body main.frayora-resources-page .fr-resources-topics__icon { width: 60px !important; height: 60px !important; }
    html body main.frayora-resources-page .fr-resources-topics__icon svg { width: 27px !important; height: 27px !important; }
    html body main.frayora-resources-page .fr-resources-topics__card { border-radius: 32px 8px 32px 8px !important; }
    html body main.frayora-resources-page .fr-featured__card { border-radius: 34px 8px 34px 8px !important; }
    html body main.frayora-resources-page .fr-featured a.fr-featured__all { height: 42px !important; padding: 0 20px !important; font-size: 13px !important; }
}


/* =========================================================
   FRAYORA — CONTACT US ELEVATION v1
   PASTE AT THE VERY BOTTOM OF main.css

   - No words, photos, form fields, buttons or links are changed.
   - Hero and every section share the shaped edges and the fine
     sage-to-sand line used across the site.
   - The three contact icons become the same glass badges
     (peach / sage, fine round line) used on every other page.
   - Cards, the form panel and the booking calendar get the
     same leaf corners and soft glass.
   - Desktop, tablet and mobile.
========================================================= */

:root { --fr-edge: 64px; }
@media screen and (max-width: 1100px) { :root { --fr-edge: 52px; } }
@media screen and (max-width: 899px)  { :root { --fr-edge: 44px; } }
@media screen and (max-width: 599px)  { :root { --fr-edge: 34px; } }

html body main.frayora-contact-page { --ct-pt: 44px; --ct-pb: 80px; }
@media screen and (max-width: 899px) { html body main.frayora-contact-page { --ct-pt: 40px; --ct-pb: 68px; } }
@media screen and (max-width: 599px) { html body main.frayora-contact-page { --ct-pt: 36px; --ct-pb: 60px; } }

/* ---------- 00 · HERO ---------- */

html body main.frayora-contact-page .about-hero {
    border-radius: 0 !important;
    box-sizing: content-box !important;
    padding-bottom: var(--fr-edge) !important;
    background-color: #3F4A3A !important;
    box-shadow: none !important;
}
html body main.frayora-contact-page .about-hero__overlay::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none;
    background:
        radial-gradient(60% 70% at 88% 6%, rgba(217,183,126,.18), rgba(217,183,126,0) 70%),
        radial-gradient(55% 75% at 6% 100%, rgba(214,106,67,.14), rgba(214,106,67,0) 72%),
        linear-gradient(180deg, rgba(63,74,58,.08) 0%, rgba(63,74,58,0) 38%, rgba(63,74,58,.30) 100%) !important;
}
html body main.frayora-contact-page .about-hero__inner { z-index: 3; }

/* ---------- 01b · COLOURS + SPACING ---------- */

html body main.frayora-contact-page .fc-options { background-color: #FAF7F2 !important; }
html body main.frayora-contact-page .fc-inquiry { background-color: #F5EDE4 !important; overflow: hidden !important; }
html body main.frayora-contact-page .fc-booking { background-color: #FAF7F2 !important; }
html body main.frayora-contact-page .fc-options,
html body main.frayora-contact-page .fc-inquiry,
html body main.frayora-contact-page .fc-booking { padding-bottom: calc(var(--ct-pb) + var(--fr-edge) * .5) !important; }
/* the old decorative rings are retired */
html body main.frayora-contact-page .fc-inquiry::after { display: none !important; }


/* ---------- 01 · SHAPED SECTION EDGES ---------- */
html body main.frayora-contact-page .fc-options {
    margin-top: calc(var(--fr-edge) * -1) !important;
    padding-top: calc(var(--ct-pt) + var(--fr-edge)) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.176), 12.5% calc(var(--fr-edge) * 0.344), 18.8% calc(var(--fr-edge) * 0.500), 25.0% calc(var(--fr-edge) * 0.636), 31.2% calc(var(--fr-edge) * 0.748), 37.5% calc(var(--fr-edge) * 0.831), 43.8% calc(var(--fr-edge) * 0.883), 50.0% calc(var(--fr-edge) * 0.900), 56.2% calc(var(--fr-edge) * 0.883), 62.5% calc(var(--fr-edge) * 0.831), 68.8% calc(var(--fr-edge) * 0.748), 75.0% calc(var(--fr-edge) * 0.636), 81.2% calc(var(--fr-edge) * 0.500), 87.5% calc(var(--fr-edge) * 0.344), 93.8% calc(var(--fr-edge) * 0.176), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.176), 12.5% calc(var(--fr-edge) * 0.344), 18.8% calc(var(--fr-edge) * 0.500), 25.0% calc(var(--fr-edge) * 0.636), 31.2% calc(var(--fr-edge) * 0.748), 37.5% calc(var(--fr-edge) * 0.831), 43.8% calc(var(--fr-edge) * 0.883), 50.0% calc(var(--fr-edge) * 0.900), 56.2% calc(var(--fr-edge) * 0.883), 62.5% calc(var(--fr-edge) * 0.831), 68.8% calc(var(--fr-edge) * 0.748), 75.0% calc(var(--fr-edge) * 0.636), 81.2% calc(var(--fr-edge) * 0.500), 87.5% calc(var(--fr-edge) * 0.344), 93.8% calc(var(--fr-edge) * 0.176), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
}
html body main.frayora-contact-page .fc-options::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 4;
    inset: 0 0 auto 0 !important;
    width: auto !important;
    transform: none !important;
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: .85;
    border-radius: 0 !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.176), 12.5% calc(var(--fr-edge) * 0.344), 18.8% calc(var(--fr-edge) * 0.500), 25.0% calc(var(--fr-edge) * 0.636), 31.2% calc(var(--fr-edge) * 0.748), 37.5% calc(var(--fr-edge) * 0.831), 43.8% calc(var(--fr-edge) * 0.883), 50.0% calc(var(--fr-edge) * 0.900), 56.2% calc(var(--fr-edge) * 0.883), 62.5% calc(var(--fr-edge) * 0.831), 68.8% calc(var(--fr-edge) * 0.748), 75.0% calc(var(--fr-edge) * 0.636), 81.2% calc(var(--fr-edge) * 0.500), 87.5% calc(var(--fr-edge) * 0.344), 93.8% calc(var(--fr-edge) * 0.176), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.176 + 3px), 87.5% calc(var(--fr-edge) * 0.344 + 3px), 81.2% calc(var(--fr-edge) * 0.500 + 3px), 75.0% calc(var(--fr-edge) * 0.636 + 3px), 68.8% calc(var(--fr-edge) * 0.748 + 3px), 62.5% calc(var(--fr-edge) * 0.831 + 3px), 56.2% calc(var(--fr-edge) * 0.883 + 3px), 50.0% calc(var(--fr-edge) * 0.900 + 3px), 43.8% calc(var(--fr-edge) * 0.883 + 3px), 37.5% calc(var(--fr-edge) * 0.831 + 3px), 31.2% calc(var(--fr-edge) * 0.748 + 3px), 25.0% calc(var(--fr-edge) * 0.636 + 3px), 18.8% calc(var(--fr-edge) * 0.500 + 3px), 12.5% calc(var(--fr-edge) * 0.344 + 3px), 6.2% calc(var(--fr-edge) * 0.176 + 3px), 0.0% calc(var(--fr-edge) * 0.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.176), 12.5% calc(var(--fr-edge) * 0.344), 18.8% calc(var(--fr-edge) * 0.500), 25.0% calc(var(--fr-edge) * 0.636), 31.2% calc(var(--fr-edge) * 0.748), 37.5% calc(var(--fr-edge) * 0.831), 43.8% calc(var(--fr-edge) * 0.883), 50.0% calc(var(--fr-edge) * 0.900), 56.2% calc(var(--fr-edge) * 0.883), 62.5% calc(var(--fr-edge) * 0.831), 68.8% calc(var(--fr-edge) * 0.748), 75.0% calc(var(--fr-edge) * 0.636), 81.2% calc(var(--fr-edge) * 0.500), 87.5% calc(var(--fr-edge) * 0.344), 93.8% calc(var(--fr-edge) * 0.176), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.176 + 3px), 87.5% calc(var(--fr-edge) * 0.344 + 3px), 81.2% calc(var(--fr-edge) * 0.500 + 3px), 75.0% calc(var(--fr-edge) * 0.636 + 3px), 68.8% calc(var(--fr-edge) * 0.748 + 3px), 62.5% calc(var(--fr-edge) * 0.831 + 3px), 56.2% calc(var(--fr-edge) * 0.883 + 3px), 50.0% calc(var(--fr-edge) * 0.900 + 3px), 43.8% calc(var(--fr-edge) * 0.883 + 3px), 37.5% calc(var(--fr-edge) * 0.831 + 3px), 31.2% calc(var(--fr-edge) * 0.748 + 3px), 25.0% calc(var(--fr-edge) * 0.636 + 3px), 18.8% calc(var(--fr-edge) * 0.500 + 3px), 12.5% calc(var(--fr-edge) * 0.344 + 3px), 6.2% calc(var(--fr-edge) * 0.176 + 3px), 0.0% calc(var(--fr-edge) * 0.000 + 3px));
}
html body main.frayora-contact-page .fc-inquiry {
    margin-top: calc(var(--fr-edge) * -1) !important;
    padding-top: calc(var(--ct-pt) + var(--fr-edge)) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.989), 12.5% calc(var(--fr-edge) * 0.957), 18.8% calc(var(--fr-edge) * 0.908), 25.0% calc(var(--fr-edge) * 0.844), 31.2% calc(var(--fr-edge) * 0.768), 37.5% calc(var(--fr-edge) * 0.684), 43.8% calc(var(--fr-edge) * 0.593), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.407), 62.5% calc(var(--fr-edge) * 0.316), 68.8% calc(var(--fr-edge) * 0.232), 75.0% calc(var(--fr-edge) * 0.156), 81.2% calc(var(--fr-edge) * 0.092), 87.5% calc(var(--fr-edge) * 0.043), 93.8% calc(var(--fr-edge) * 0.011), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.989), 12.5% calc(var(--fr-edge) * 0.957), 18.8% calc(var(--fr-edge) * 0.908), 25.0% calc(var(--fr-edge) * 0.844), 31.2% calc(var(--fr-edge) * 0.768), 37.5% calc(var(--fr-edge) * 0.684), 43.8% calc(var(--fr-edge) * 0.593), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.407), 62.5% calc(var(--fr-edge) * 0.316), 68.8% calc(var(--fr-edge) * 0.232), 75.0% calc(var(--fr-edge) * 0.156), 81.2% calc(var(--fr-edge) * 0.092), 87.5% calc(var(--fr-edge) * 0.043), 93.8% calc(var(--fr-edge) * 0.011), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
}
html body main.frayora-contact-page .fc-inquiry::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 4;
    inset: 0 0 auto 0 !important;
    width: auto !important;
    transform: none !important;
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: .85;
    border-radius: 0 !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.989), 12.5% calc(var(--fr-edge) * 0.957), 18.8% calc(var(--fr-edge) * 0.908), 25.0% calc(var(--fr-edge) * 0.844), 31.2% calc(var(--fr-edge) * 0.768), 37.5% calc(var(--fr-edge) * 0.684), 43.8% calc(var(--fr-edge) * 0.593), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.407), 62.5% calc(var(--fr-edge) * 0.316), 68.8% calc(var(--fr-edge) * 0.232), 75.0% calc(var(--fr-edge) * 0.156), 81.2% calc(var(--fr-edge) * 0.092), 87.5% calc(var(--fr-edge) * 0.043), 93.8% calc(var(--fr-edge) * 0.011), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.011 + 3px), 87.5% calc(var(--fr-edge) * 0.043 + 3px), 81.2% calc(var(--fr-edge) * 0.092 + 3px), 75.0% calc(var(--fr-edge) * 0.156 + 3px), 68.8% calc(var(--fr-edge) * 0.232 + 3px), 62.5% calc(var(--fr-edge) * 0.316 + 3px), 56.2% calc(var(--fr-edge) * 0.407 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.593 + 3px), 37.5% calc(var(--fr-edge) * 0.684 + 3px), 31.2% calc(var(--fr-edge) * 0.768 + 3px), 25.0% calc(var(--fr-edge) * 0.844 + 3px), 18.8% calc(var(--fr-edge) * 0.908 + 3px), 12.5% calc(var(--fr-edge) * 0.957 + 3px), 6.2% calc(var(--fr-edge) * 0.989 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.989), 12.5% calc(var(--fr-edge) * 0.957), 18.8% calc(var(--fr-edge) * 0.908), 25.0% calc(var(--fr-edge) * 0.844), 31.2% calc(var(--fr-edge) * 0.768), 37.5% calc(var(--fr-edge) * 0.684), 43.8% calc(var(--fr-edge) * 0.593), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.407), 62.5% calc(var(--fr-edge) * 0.316), 68.8% calc(var(--fr-edge) * 0.232), 75.0% calc(var(--fr-edge) * 0.156), 81.2% calc(var(--fr-edge) * 0.092), 87.5% calc(var(--fr-edge) * 0.043), 93.8% calc(var(--fr-edge) * 0.011), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.011 + 3px), 87.5% calc(var(--fr-edge) * 0.043 + 3px), 81.2% calc(var(--fr-edge) * 0.092 + 3px), 75.0% calc(var(--fr-edge) * 0.156 + 3px), 68.8% calc(var(--fr-edge) * 0.232 + 3px), 62.5% calc(var(--fr-edge) * 0.316 + 3px), 56.2% calc(var(--fr-edge) * 0.407 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.593 + 3px), 37.5% calc(var(--fr-edge) * 0.684 + 3px), 31.2% calc(var(--fr-edge) * 0.768 + 3px), 25.0% calc(var(--fr-edge) * 0.844 + 3px), 18.8% calc(var(--fr-edge) * 0.908 + 3px), 12.5% calc(var(--fr-edge) * 0.957 + 3px), 6.2% calc(var(--fr-edge) * 0.989 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
}
html body main.frayora-contact-page .fc-booking {
    margin-top: calc(var(--fr-edge) * -1) !important;
    padding-top: calc(var(--ct-pt) + var(--fr-edge)) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
}
html body main.frayora-contact-page .fc-booking::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 4;
    inset: 0 0 auto 0 !important;
    width: auto !important;
    transform: none !important;
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: .85;
    border-radius: 0 !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 93.8% calc(var(--fr-edge) * 0.805 + 3px), 87.5% calc(var(--fr-edge) * 0.617 + 3px), 81.2% calc(var(--fr-edge) * 0.444 + 3px), 75.0% calc(var(--fr-edge) * 0.293 + 3px), 68.8% calc(var(--fr-edge) * 0.169 + 3px), 62.5% calc(var(--fr-edge) * 0.076 + 3px), 56.2% calc(var(--fr-edge) * 0.019 + 3px), 50.0% calc(var(--fr-edge) * 0.000 + 3px), 43.8% calc(var(--fr-edge) * 0.019 + 3px), 37.5% calc(var(--fr-edge) * 0.076 + 3px), 31.2% calc(var(--fr-edge) * 0.169 + 3px), 25.0% calc(var(--fr-edge) * 0.293 + 3px), 18.8% calc(var(--fr-edge) * 0.444 + 3px), 12.5% calc(var(--fr-edge) * 0.617 + 3px), 6.2% calc(var(--fr-edge) * 0.805 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 93.8% calc(var(--fr-edge) * 0.805 + 3px), 87.5% calc(var(--fr-edge) * 0.617 + 3px), 81.2% calc(var(--fr-edge) * 0.444 + 3px), 75.0% calc(var(--fr-edge) * 0.293 + 3px), 68.8% calc(var(--fr-edge) * 0.169 + 3px), 62.5% calc(var(--fr-edge) * 0.076 + 3px), 56.2% calc(var(--fr-edge) * 0.019 + 3px), 50.0% calc(var(--fr-edge) * 0.000 + 3px), 43.8% calc(var(--fr-edge) * 0.019 + 3px), 37.5% calc(var(--fr-edge) * 0.076 + 3px), 31.2% calc(var(--fr-edge) * 0.169 + 3px), 25.0% calc(var(--fr-edge) * 0.293 + 3px), 18.8% calc(var(--fr-edge) * 0.444 + 3px), 12.5% calc(var(--fr-edge) * 0.617 + 3px), 6.2% calc(var(--fr-edge) * 0.805 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
}

/* ---------- 02 · CONTACT OPTION CARDS ---------- */
html body main.frayora-contact-page .fc-options__card {
    border: 1px solid rgba(217,183,126,.30) !important;
    border-radius: 44px 12px 44px 12px !important;
    background: linear-gradient(160deg, rgba(255,255,255,.96), rgba(255,250,244,.72)) !important;
    box-shadow: 0 18px 38px -22px rgba(79,91,73,.30), inset 0 1px 0 #fff !important;
}
html body main.frayora-contact-page .fc-options__card::before { display: none !important; }

html body main.frayora-contact-page .fc-options__icon {
    position: relative;
    flex: 0 0 auto !important;
    aspect-ratio: 1 / 1;
    display: grid !important;
    place-items: center !important;
    justify-content: center !important;
    align-items: center !important;
    width: 76px !important;
    height: 76px !important;
    border-radius: 50% !important;
    background: linear-gradient(145deg,#FFF7EF,#F3E2D5 60%,#EAD2C2) !important;
    color: #84634E !important;
    border: 0 !important;
    box-shadow: 0 12px 22px -12px rgba(132,99,78,.5), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -3px 6px rgba(132,99,78,.10) !important;
}
html body main.frayora-contact-page .fc-options__card:nth-child(even) .fc-options__icon {
    background: linear-gradient(145deg,#F7F9F2,#E6EBDD 60%,#D4DFC8) !important;
    color: #566449 !important;
    box-shadow: 0 12px 22px -12px rgba(86,100,73,.5), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -3px 6px rgba(86,100,73,.10) !important;
}
html body main.frayora-contact-page .fc-options__icon::before { display: none !important; }
html body main.frayora-contact-page .fc-options__icon::after {
    content: "" !important;
    position: absolute !important;
    inset: 6px !important;
    width: auto !important; height: auto !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,.75) !important;
    pointer-events: none;
}
html body main.frayora-contact-page .fc-options__icon svg {
    width: 34px !important; height: 34px !important;
    stroke-width: 1.7 !important; stroke-linecap: round; stroke-linejoin: round;
    margin: 0 !important; position: static !important;
}

/* ---------- 03 · FORM PANEL ---------- */
html body main.frayora-contact-page .fc-inquiry__form-shell {
    border: 1px solid rgba(217,183,126,.34) !important;
    border-radius: 56px 14px 56px 14px !important;
    box-shadow: 0 34px 60px -32px rgba(79,91,73,.42), inset 0 1px 0 #fff !important;
}
html body main.frayora-contact-page .fc-inquiry__form-shell::before { display: none !important; }

/* ---------- 04 · BOOKING PANEL ---------- */
html body main.frayora-contact-page .fc-booking__panel {
    border: 1px solid rgba(217,183,126,.34) !important;
    border-radius: 56px 14px 56px 14px !important;
    box-shadow: 0 34px 60px -32px rgba(79,91,73,.42), inset 0 1px 0 #fff !important;
}
html body main.frayora-contact-page .fc-booking__panel::before { display: none !important; }

/* ---------- 05 · RESPONSIVE ---------- */
@media screen and (max-width: 1100px) {
    html body main.frayora-contact-page .fc-options__icon { width: 68px !important; height: 68px !important; }
    html body main.frayora-contact-page .fc-options__icon svg { width: 30px !important; height: 30px !important; }
    html body main.frayora-contact-page .fc-options__card { box-shadow: 0 8px 16px -10px rgba(79,91,73,.28), inset 0 1px 0 #fff !important; }
    html body main.frayora-contact-page .fc-inquiry__form-shell,
    html body main.frayora-contact-page .fc-booking__panel { border-radius: 44px 12px 44px 12px !important; }
}
@media screen and (max-width: 599px) {
    html body main.frayora-contact-page .fc-options__icon { width: 60px !important; height: 60px !important; }
    html body main.frayora-contact-page .fc-options__icon svg { width: 27px !important; height: 27px !important; }
    html body main.frayora-contact-page .fc-options__card { border-radius: 34px 10px 34px 10px !important; }
    html body main.frayora-contact-page .fc-inquiry__form-shell,
    html body main.frayora-contact-page .fc-booking__panel { border-radius: 34px 10px 34px 10px !important; }
}

/* =========================================================
   FRAYORA — RESOURCES ELEVATION v1
   PASTE AT THE VERY BOTTOM OF main.css

   - No words, photos, typography or links are changed.
   - Hero and every section share the shaped edges and the fine
     sage-to-sand line used across the site.
   - The six topic icons become the same glass badges (peach /
     sage, fine round line) used on every other page.
   - Featured cards get leaf corners; the oversized
     "View All Resources" button is refined to a calm glass pill.
   - Desktop, tablet and mobile.
========================================================= */

:root { --fr-edge: 64px; }
@media screen and (max-width: 1100px) { :root { --fr-edge: 52px; } }
@media screen and (max-width: 899px)  { :root { --fr-edge: 44px; } }
@media screen and (max-width: 599px)  { :root { --fr-edge: 34px; } }

html body main.frayora-resources-page { --rs-pt: 44px; --rs-pb: 80px; }
@media screen and (max-width: 899px) { html body main.frayora-resources-page { --rs-pt: 40px; --rs-pb: 68px; } }
@media screen and (max-width: 599px) { html body main.frayora-resources-page { --rs-pt: 36px; --rs-pb: 60px; } }

/* ---------- 00 · HERO ---------- */

html body main.frayora-resources-page .about-us-page .about-hero {
    border-radius: 0 !important;
    box-sizing: content-box !important;
    padding-bottom: var(--fr-edge) !important;
    background-color: #3F4A3A !important;
    box-shadow: none !important;
}
html body main.frayora-resources-page .about-us-page .about-hero__overlay::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none;
    background:
        radial-gradient(60% 70% at 88% 6%, rgba(217,183,126,.18), rgba(217,183,126,0) 70%),
        radial-gradient(55% 75% at 6% 100%, rgba(214,106,67,.14), rgba(214,106,67,0) 72%),
        linear-gradient(180deg, rgba(63,74,58,.08) 0%, rgba(63,74,58,0) 38%, rgba(63,74,58,.30) 100%) !important;
}
html body main.frayora-resources-page .about-us-page .about-hero__inner { z-index: 3; }

/* ---------- 01b · COLOURS + SPACING ---------- */

html body main.frayora-resources-page .fr-resources-topics { background-color: #FAF7F2 !important; position: relative; }
html body main.frayora-resources-page .fr-featured { background-color: #F5EDE4 !important; position: relative; }
html body main.frayora-resources-page .fr-resources-cta { background-color: #F8F3EB !important; }
html body main.frayora-resources-page .fr-resources-topics,
html body main.frayora-resources-page .fr-featured { padding-bottom: calc(var(--rs-pb) + var(--fr-edge) * .6) !important; }

/* the old angular decor shapes behind the featured cards are retired */
html body main.frayora-resources-page .fr-featured::after,
html body main.frayora-resources-page .fr-featured__inner::before,
html body main.frayora-resources-page .fr-featured__inner::after { display: none !important; }


/* ---------- 01 · SHAPED SECTION EDGES ---------- */
html body main.frayora-resources-page .fr-resources-topics {
    margin-top: calc(var(--fr-edge) * -1) !important;
    padding-top: calc(var(--rs-pt) + var(--fr-edge)) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.176), 12.5% calc(var(--fr-edge) * 0.344), 18.8% calc(var(--fr-edge) * 0.500), 25.0% calc(var(--fr-edge) * 0.636), 31.2% calc(var(--fr-edge) * 0.748), 37.5% calc(var(--fr-edge) * 0.831), 43.8% calc(var(--fr-edge) * 0.883), 50.0% calc(var(--fr-edge) * 0.900), 56.2% calc(var(--fr-edge) * 0.883), 62.5% calc(var(--fr-edge) * 0.831), 68.8% calc(var(--fr-edge) * 0.748), 75.0% calc(var(--fr-edge) * 0.636), 81.2% calc(var(--fr-edge) * 0.500), 87.5% calc(var(--fr-edge) * 0.344), 93.8% calc(var(--fr-edge) * 0.176), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.176), 12.5% calc(var(--fr-edge) * 0.344), 18.8% calc(var(--fr-edge) * 0.500), 25.0% calc(var(--fr-edge) * 0.636), 31.2% calc(var(--fr-edge) * 0.748), 37.5% calc(var(--fr-edge) * 0.831), 43.8% calc(var(--fr-edge) * 0.883), 50.0% calc(var(--fr-edge) * 0.900), 56.2% calc(var(--fr-edge) * 0.883), 62.5% calc(var(--fr-edge) * 0.831), 68.8% calc(var(--fr-edge) * 0.748), 75.0% calc(var(--fr-edge) * 0.636), 81.2% calc(var(--fr-edge) * 0.500), 87.5% calc(var(--fr-edge) * 0.344), 93.8% calc(var(--fr-edge) * 0.176), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
}
html body main.frayora-resources-page .fr-resources-topics::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 4;
    inset: 0 0 auto 0 !important;
    width: auto !important;
    transform: none !important;
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: .85;
    border-radius: 0 !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.176), 12.5% calc(var(--fr-edge) * 0.344), 18.8% calc(var(--fr-edge) * 0.500), 25.0% calc(var(--fr-edge) * 0.636), 31.2% calc(var(--fr-edge) * 0.748), 37.5% calc(var(--fr-edge) * 0.831), 43.8% calc(var(--fr-edge) * 0.883), 50.0% calc(var(--fr-edge) * 0.900), 56.2% calc(var(--fr-edge) * 0.883), 62.5% calc(var(--fr-edge) * 0.831), 68.8% calc(var(--fr-edge) * 0.748), 75.0% calc(var(--fr-edge) * 0.636), 81.2% calc(var(--fr-edge) * 0.500), 87.5% calc(var(--fr-edge) * 0.344), 93.8% calc(var(--fr-edge) * 0.176), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.176 + 3px), 87.5% calc(var(--fr-edge) * 0.344 + 3px), 81.2% calc(var(--fr-edge) * 0.500 + 3px), 75.0% calc(var(--fr-edge) * 0.636 + 3px), 68.8% calc(var(--fr-edge) * 0.748 + 3px), 62.5% calc(var(--fr-edge) * 0.831 + 3px), 56.2% calc(var(--fr-edge) * 0.883 + 3px), 50.0% calc(var(--fr-edge) * 0.900 + 3px), 43.8% calc(var(--fr-edge) * 0.883 + 3px), 37.5% calc(var(--fr-edge) * 0.831 + 3px), 31.2% calc(var(--fr-edge) * 0.748 + 3px), 25.0% calc(var(--fr-edge) * 0.636 + 3px), 18.8% calc(var(--fr-edge) * 0.500 + 3px), 12.5% calc(var(--fr-edge) * 0.344 + 3px), 6.2% calc(var(--fr-edge) * 0.176 + 3px), 0.0% calc(var(--fr-edge) * 0.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.176), 12.5% calc(var(--fr-edge) * 0.344), 18.8% calc(var(--fr-edge) * 0.500), 25.0% calc(var(--fr-edge) * 0.636), 31.2% calc(var(--fr-edge) * 0.748), 37.5% calc(var(--fr-edge) * 0.831), 43.8% calc(var(--fr-edge) * 0.883), 50.0% calc(var(--fr-edge) * 0.900), 56.2% calc(var(--fr-edge) * 0.883), 62.5% calc(var(--fr-edge) * 0.831), 68.8% calc(var(--fr-edge) * 0.748), 75.0% calc(var(--fr-edge) * 0.636), 81.2% calc(var(--fr-edge) * 0.500), 87.5% calc(var(--fr-edge) * 0.344), 93.8% calc(var(--fr-edge) * 0.176), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.176 + 3px), 87.5% calc(var(--fr-edge) * 0.344 + 3px), 81.2% calc(var(--fr-edge) * 0.500 + 3px), 75.0% calc(var(--fr-edge) * 0.636 + 3px), 68.8% calc(var(--fr-edge) * 0.748 + 3px), 62.5% calc(var(--fr-edge) * 0.831 + 3px), 56.2% calc(var(--fr-edge) * 0.883 + 3px), 50.0% calc(var(--fr-edge) * 0.900 + 3px), 43.8% calc(var(--fr-edge) * 0.883 + 3px), 37.5% calc(var(--fr-edge) * 0.831 + 3px), 31.2% calc(var(--fr-edge) * 0.748 + 3px), 25.0% calc(var(--fr-edge) * 0.636 + 3px), 18.8% calc(var(--fr-edge) * 0.500 + 3px), 12.5% calc(var(--fr-edge) * 0.344 + 3px), 6.2% calc(var(--fr-edge) * 0.176 + 3px), 0.0% calc(var(--fr-edge) * 0.000 + 3px));
}
html body main.frayora-resources-page .fr-featured {
    margin-top: calc(var(--fr-edge) * -1) !important;
    padding-top: calc(var(--rs-pt) + var(--fr-edge)) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.989), 12.5% calc(var(--fr-edge) * 0.957), 18.8% calc(var(--fr-edge) * 0.908), 25.0% calc(var(--fr-edge) * 0.844), 31.2% calc(var(--fr-edge) * 0.768), 37.5% calc(var(--fr-edge) * 0.684), 43.8% calc(var(--fr-edge) * 0.593), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.407), 62.5% calc(var(--fr-edge) * 0.316), 68.8% calc(var(--fr-edge) * 0.232), 75.0% calc(var(--fr-edge) * 0.156), 81.2% calc(var(--fr-edge) * 0.092), 87.5% calc(var(--fr-edge) * 0.043), 93.8% calc(var(--fr-edge) * 0.011), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.989), 12.5% calc(var(--fr-edge) * 0.957), 18.8% calc(var(--fr-edge) * 0.908), 25.0% calc(var(--fr-edge) * 0.844), 31.2% calc(var(--fr-edge) * 0.768), 37.5% calc(var(--fr-edge) * 0.684), 43.8% calc(var(--fr-edge) * 0.593), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.407), 62.5% calc(var(--fr-edge) * 0.316), 68.8% calc(var(--fr-edge) * 0.232), 75.0% calc(var(--fr-edge) * 0.156), 81.2% calc(var(--fr-edge) * 0.092), 87.5% calc(var(--fr-edge) * 0.043), 93.8% calc(var(--fr-edge) * 0.011), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
}
html body main.frayora-resources-page .fr-featured::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 4;
    inset: 0 0 auto 0 !important;
    width: auto !important;
    transform: none !important;
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: .85;
    border-radius: 0 !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.989), 12.5% calc(var(--fr-edge) * 0.957), 18.8% calc(var(--fr-edge) * 0.908), 25.0% calc(var(--fr-edge) * 0.844), 31.2% calc(var(--fr-edge) * 0.768), 37.5% calc(var(--fr-edge) * 0.684), 43.8% calc(var(--fr-edge) * 0.593), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.407), 62.5% calc(var(--fr-edge) * 0.316), 68.8% calc(var(--fr-edge) * 0.232), 75.0% calc(var(--fr-edge) * 0.156), 81.2% calc(var(--fr-edge) * 0.092), 87.5% calc(var(--fr-edge) * 0.043), 93.8% calc(var(--fr-edge) * 0.011), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.011 + 3px), 87.5% calc(var(--fr-edge) * 0.043 + 3px), 81.2% calc(var(--fr-edge) * 0.092 + 3px), 75.0% calc(var(--fr-edge) * 0.156 + 3px), 68.8% calc(var(--fr-edge) * 0.232 + 3px), 62.5% calc(var(--fr-edge) * 0.316 + 3px), 56.2% calc(var(--fr-edge) * 0.407 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.593 + 3px), 37.5% calc(var(--fr-edge) * 0.684 + 3px), 31.2% calc(var(--fr-edge) * 0.768 + 3px), 25.0% calc(var(--fr-edge) * 0.844 + 3px), 18.8% calc(var(--fr-edge) * 0.908 + 3px), 12.5% calc(var(--fr-edge) * 0.957 + 3px), 6.2% calc(var(--fr-edge) * 0.989 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.989), 12.5% calc(var(--fr-edge) * 0.957), 18.8% calc(var(--fr-edge) * 0.908), 25.0% calc(var(--fr-edge) * 0.844), 31.2% calc(var(--fr-edge) * 0.768), 37.5% calc(var(--fr-edge) * 0.684), 43.8% calc(var(--fr-edge) * 0.593), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.407), 62.5% calc(var(--fr-edge) * 0.316), 68.8% calc(var(--fr-edge) * 0.232), 75.0% calc(var(--fr-edge) * 0.156), 81.2% calc(var(--fr-edge) * 0.092), 87.5% calc(var(--fr-edge) * 0.043), 93.8% calc(var(--fr-edge) * 0.011), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.011 + 3px), 87.5% calc(var(--fr-edge) * 0.043 + 3px), 81.2% calc(var(--fr-edge) * 0.092 + 3px), 75.0% calc(var(--fr-edge) * 0.156 + 3px), 68.8% calc(var(--fr-edge) * 0.232 + 3px), 62.5% calc(var(--fr-edge) * 0.316 + 3px), 56.2% calc(var(--fr-edge) * 0.407 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.593 + 3px), 37.5% calc(var(--fr-edge) * 0.684 + 3px), 31.2% calc(var(--fr-edge) * 0.768 + 3px), 25.0% calc(var(--fr-edge) * 0.844 + 3px), 18.8% calc(var(--fr-edge) * 0.908 + 3px), 12.5% calc(var(--fr-edge) * 0.957 + 3px), 6.2% calc(var(--fr-edge) * 0.989 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
}
html body main.frayora-resources-page .fr-resources-cta {
    margin-top: calc(var(--fr-edge) * -1) !important;
    padding-top: calc(var(--rs-pt) + var(--fr-edge)) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
}
html body main.frayora-resources-page .fr-resources-cta::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 4;
    inset: 0 0 auto 0 !important;
    width: auto !important;
    transform: none !important;
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: .85;
    border-radius: 0 !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 93.8% calc(var(--fr-edge) * 0.805 + 3px), 87.5% calc(var(--fr-edge) * 0.617 + 3px), 81.2% calc(var(--fr-edge) * 0.444 + 3px), 75.0% calc(var(--fr-edge) * 0.293 + 3px), 68.8% calc(var(--fr-edge) * 0.169 + 3px), 62.5% calc(var(--fr-edge) * 0.076 + 3px), 56.2% calc(var(--fr-edge) * 0.019 + 3px), 50.0% calc(var(--fr-edge) * 0.000 + 3px), 43.8% calc(var(--fr-edge) * 0.019 + 3px), 37.5% calc(var(--fr-edge) * 0.076 + 3px), 31.2% calc(var(--fr-edge) * 0.169 + 3px), 25.0% calc(var(--fr-edge) * 0.293 + 3px), 18.8% calc(var(--fr-edge) * 0.444 + 3px), 12.5% calc(var(--fr-edge) * 0.617 + 3px), 6.2% calc(var(--fr-edge) * 0.805 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 93.8% calc(var(--fr-edge) * 0.805 + 3px), 87.5% calc(var(--fr-edge) * 0.617 + 3px), 81.2% calc(var(--fr-edge) * 0.444 + 3px), 75.0% calc(var(--fr-edge) * 0.293 + 3px), 68.8% calc(var(--fr-edge) * 0.169 + 3px), 62.5% calc(var(--fr-edge) * 0.076 + 3px), 56.2% calc(var(--fr-edge) * 0.019 + 3px), 50.0% calc(var(--fr-edge) * 0.000 + 3px), 43.8% calc(var(--fr-edge) * 0.019 + 3px), 37.5% calc(var(--fr-edge) * 0.076 + 3px), 31.2% calc(var(--fr-edge) * 0.169 + 3px), 25.0% calc(var(--fr-edge) * 0.293 + 3px), 18.8% calc(var(--fr-edge) * 0.444 + 3px), 12.5% calc(var(--fr-edge) * 0.617 + 3px), 6.2% calc(var(--fr-edge) * 0.805 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
}

/* ---------- 02 · TOPIC CARDS + BADGES ---------- */
html body main.frayora-resources-page .fr-resources-topics__card {
    border: 1px solid rgba(217,183,126,.30) !important;
    border-radius: 40px 10px 40px 10px !important;
    background: linear-gradient(160deg, rgba(255,255,255,.96), rgba(255,250,244,.72)) !important;
    box-shadow: 0 18px 38px -22px rgba(79,91,73,.30), inset 0 1px 0 #fff !important;
}
html body main.frayora-resources-page .fr-resources-topics__icon {
    position: relative;
    flex: 0 0 auto !important;
    aspect-ratio: 1 / 1;
    display: grid !important;
    place-items: center !important;
    justify-content: center !important;
    align-items: center !important;
    width: 76px !important;
    height: 76px !important;
    border-radius: 50% !important;
    background: linear-gradient(145deg,#FFF7EF,#F3E2D5 60%,#EAD2C2) !important;
    color: #84634E !important;
    border: 0 !important;
    box-shadow: 0 12px 22px -12px rgba(132,99,78,.5), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -3px 6px rgba(132,99,78,.10) !important;
}
html body main.frayora-resources-page .fr-resources-topics__card:nth-child(even) .fr-resources-topics__icon {
    background: linear-gradient(145deg,#F7F9F2,#E6EBDD 60%,#D4DFC8) !important;
    color: #566449 !important;
    box-shadow: 0 12px 22px -12px rgba(86,100,73,.5), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -3px 6px rgba(86,100,73,.10) !important;
}
html body main.frayora-resources-page .fr-resources-topics__icon::before {
    content: "" !important;
    position: absolute !important;
    inset: 6px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,.75) !important;
    pointer-events: none;
}
html body main.frayora-resources-page .fr-resources-topics__icon svg {
    width: 34px !important; height: 34px !important;
    stroke-width: 1.7 !important; stroke-linecap: round; stroke-linejoin: round;
    margin: 0 !important; position: static !important;
}

/* ---------- 03 · FEATURED ---------- */
html body main.frayora-resources-page .fr-featured__card {
    border: 1px solid rgba(217,183,126,.34) !important;
    border-radius: 44px 10px 44px 10px !important;
    box-shadow: 0 24px 44px -26px rgba(79,91,73,.36), inset 0 1px 0 #fff !important;
}
html body main.frayora-resources-page .fr-featured__header { align-items: flex-end !important; }
html body main.frayora-resources-page .fr-featured .fr-featured__header a.fr-featured__all {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: auto !important;
    height: 46px !important;
    min-height: 0 !important;
    padding: 0 24px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    letter-spacing: .01em !important;
    color: #B85A36 !important;
    border: 1px solid rgba(201,103,67,.45) !important;
    border-radius: 999px !important;
    background: linear-gradient(160deg, rgba(255,255,255,.75), rgba(255,247,239,.45)) !important;
    box-shadow: 0 10px 20px -12px rgba(201,103,67,.40), inset 0 1px 0 rgba(255,255,255,.9) !important;
    white-space: nowrap;
}
html body main.frayora-resources-page .fr-featured .fr-featured__header a.fr-featured__all span { font-size: inherit !important; line-height: 1 !important; color: inherit !important; }
html body main.frayora-resources-page .fr-featured .fr-featured__header a.fr-featured__all svg { width: 17px !important; height: 17px !important; }

/* View All Resources: one consistent state colour for text AND arrow */
html body main.frayora-resources-page .fr-featured .fr-featured__header a.fr-featured__all,
html body main.frayora-resources-page .fr-featured .fr-featured__header a.fr-featured__all span,
html body main.frayora-resources-page .fr-featured .fr-featured__header a.fr-featured__all svg { color: #A75135 !important; stroke: currentColor !important; transition: color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease; }
html body main.frayora-resources-page .fr-featured .fr-featured__header a.fr-featured__all:hover,
html body main.frayora-resources-page .fr-featured .fr-featured__header a.fr-featured__all:focus-visible,
html body main.frayora-resources-page .fr-featured .fr-featured__header a.fr-featured__all:active {
    background: #C96743 !important;
    border-color: #C96743 !important;
    transform: translateY(-1px);
    box-shadow: 0 14px 26px -12px rgba(201,103,67,.55), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
html body main.frayora-resources-page .fr-featured .fr-featured__header a.fr-featured__all:hover,
html body main.frayora-resources-page .fr-featured .fr-featured__header a.fr-featured__all:hover span,
html body main.frayora-resources-page .fr-featured .fr-featured__header a.fr-featured__all:hover svg,
html body main.frayora-resources-page .fr-featured .fr-featured__header a.fr-featured__all:focus-visible,
html body main.frayora-resources-page .fr-featured .fr-featured__header a.fr-featured__all:focus-visible span,
html body main.frayora-resources-page .fr-featured .fr-featured__header a.fr-featured__all:focus-visible svg,
html body main.frayora-resources-page .fr-featured .fr-featured__header a.fr-featured__all:active,
html body main.frayora-resources-page .fr-featured .fr-featured__header a.fr-featured__all:active span,
html body main.frayora-resources-page .fr-featured .fr-featured__header a.fr-featured__all:active svg { color: #FFFFFF !important; stroke: #FFFFFF !important; }
html body main.frayora-resources-page .fr-featured .fr-featured__header a.fr-featured__all:hover span { transform: none !important; }

/* tablet + mobile: left aligned under the intro text */
@media screen and (max-width: 1100px) {
    html body main.frayora-resources-page .fr-featured .fr-featured__header { flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 22px !important; }
    html body main.frayora-resources-page .fr-featured .fr-featured__header a.fr-featured__all { align-self: flex-start !important; margin-left: 0 !important; margin-right: auto !important; }
}

/* ---------- 04 · RESPONSIVE ---------- */
@media screen and (max-width: 1100px) {
    html body main.frayora-resources-page .fr-resources-topics__icon { width: 68px !important; height: 68px !important; }
    html body main.frayora-resources-page .fr-resources-topics__icon svg { width: 30px !important; height: 30px !important; }
    html body main.frayora-resources-page .fr-resources-topics__card,
    html body main.frayora-resources-page .fr-featured__card { box-shadow: 0 8px 16px -10px rgba(79,91,73,.28), inset 0 1px 0 #fff !important; }
}
@media screen and (max-width: 599px) {
    html body main.frayora-resources-page .fr-resources-topics__icon { width: 60px !important; height: 60px !important; }
    html body main.frayora-resources-page .fr-resources-topics__icon svg { width: 27px !important; height: 27px !important; }
    html body main.frayora-resources-page .fr-resources-topics__card { border-radius: 32px 8px 32px 8px !important; }
    html body main.frayora-resources-page .fr-featured__card { border-radius: 34px 8px 34px 8px !important; }
    html body main.frayora-resources-page .fr-featured .fr-featured__header a.fr-featured__all { height: 42px !important; padding: 0 20px !important; font-size: 13px !important; }
}


/* =========================================================
   FRAYORA — CONTACT US ELEVATION v1
   PASTE AT THE VERY BOTTOM OF main.css

   - No words, photos, form fields, buttons or links are changed.
   - Hero and every section share the shaped edges and the fine
     sage-to-sand line used across the site.
   - The three contact icons become the same glass badges
     (peach / sage, fine round line) used on every other page.
   - Cards, the form panel and the booking calendar get the
     same leaf corners and soft glass.
   - Desktop, tablet and mobile.
========================================================= */

:root { --fr-edge: 64px; }
@media screen and (max-width: 1100px) { :root { --fr-edge: 52px; } }
@media screen and (max-width: 899px)  { :root { --fr-edge: 44px; } }
@media screen and (max-width: 599px)  { :root { --fr-edge: 34px; } }

html body main.frayora-contact-page { --ct-pt: 44px; --ct-pb: 80px; }
@media screen and (max-width: 899px) { html body main.frayora-contact-page { --ct-pt: 40px; --ct-pb: 68px; } }
@media screen and (max-width: 599px) { html body main.frayora-contact-page { --ct-pt: 36px; --ct-pb: 60px; } }

/* ---------- 00 · HERO ---------- */

html body main.frayora-contact-page .about-hero {
    border-radius: 0 !important;
    box-sizing: content-box !important;
    padding-bottom: var(--fr-edge) !important;
    background-color: #3F4A3A !important;
    box-shadow: none !important;
}
html body main.frayora-contact-page .about-hero__overlay::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none;
    background:
        radial-gradient(60% 70% at 88% 6%, rgba(217,183,126,.18), rgba(217,183,126,0) 70%),
        radial-gradient(55% 75% at 6% 100%, rgba(214,106,67,.14), rgba(214,106,67,0) 72%),
        linear-gradient(180deg, rgba(63,74,58,.08) 0%, rgba(63,74,58,0) 38%, rgba(63,74,58,.30) 100%) !important;
}
html body main.frayora-contact-page .about-hero__inner { z-index: 3; }

/* ---------- 01b · COLOURS + SPACING ---------- */

html body main.frayora-contact-page .fc-options { background-color: #FAF7F2 !important; }
html body main.frayora-contact-page .fc-inquiry { background-color: #F5EDE4 !important; overflow: hidden !important; }
html body main.frayora-contact-page .fc-booking { background-color: #FAF7F2 !important; }
html body main.frayora-contact-page .fc-options,
html body main.frayora-contact-page .fc-inquiry,
html body main.frayora-contact-page .fc-booking { padding-bottom: calc(var(--ct-pb) + var(--fr-edge) * .5) !important; }
/* the old decorative rings are retired */
html body main.frayora-contact-page .fc-inquiry::after { display: none !important; }


/* ---------- 01 · SHAPED SECTION EDGES ---------- */
html body main.frayora-contact-page .fc-options {
    margin-top: calc(var(--fr-edge) * -1) !important;
    padding-top: calc(var(--ct-pt) + var(--fr-edge)) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.176), 12.5% calc(var(--fr-edge) * 0.344), 18.8% calc(var(--fr-edge) * 0.500), 25.0% calc(var(--fr-edge) * 0.636), 31.2% calc(var(--fr-edge) * 0.748), 37.5% calc(var(--fr-edge) * 0.831), 43.8% calc(var(--fr-edge) * 0.883), 50.0% calc(var(--fr-edge) * 0.900), 56.2% calc(var(--fr-edge) * 0.883), 62.5% calc(var(--fr-edge) * 0.831), 68.8% calc(var(--fr-edge) * 0.748), 75.0% calc(var(--fr-edge) * 0.636), 81.2% calc(var(--fr-edge) * 0.500), 87.5% calc(var(--fr-edge) * 0.344), 93.8% calc(var(--fr-edge) * 0.176), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.176), 12.5% calc(var(--fr-edge) * 0.344), 18.8% calc(var(--fr-edge) * 0.500), 25.0% calc(var(--fr-edge) * 0.636), 31.2% calc(var(--fr-edge) * 0.748), 37.5% calc(var(--fr-edge) * 0.831), 43.8% calc(var(--fr-edge) * 0.883), 50.0% calc(var(--fr-edge) * 0.900), 56.2% calc(var(--fr-edge) * 0.883), 62.5% calc(var(--fr-edge) * 0.831), 68.8% calc(var(--fr-edge) * 0.748), 75.0% calc(var(--fr-edge) * 0.636), 81.2% calc(var(--fr-edge) * 0.500), 87.5% calc(var(--fr-edge) * 0.344), 93.8% calc(var(--fr-edge) * 0.176), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
}
html body main.frayora-contact-page .fc-options::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 4;
    inset: 0 0 auto 0 !important;
    width: auto !important;
    transform: none !important;
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: .85;
    border-radius: 0 !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.176), 12.5% calc(var(--fr-edge) * 0.344), 18.8% calc(var(--fr-edge) * 0.500), 25.0% calc(var(--fr-edge) * 0.636), 31.2% calc(var(--fr-edge) * 0.748), 37.5% calc(var(--fr-edge) * 0.831), 43.8% calc(var(--fr-edge) * 0.883), 50.0% calc(var(--fr-edge) * 0.900), 56.2% calc(var(--fr-edge) * 0.883), 62.5% calc(var(--fr-edge) * 0.831), 68.8% calc(var(--fr-edge) * 0.748), 75.0% calc(var(--fr-edge) * 0.636), 81.2% calc(var(--fr-edge) * 0.500), 87.5% calc(var(--fr-edge) * 0.344), 93.8% calc(var(--fr-edge) * 0.176), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.176 + 3px), 87.5% calc(var(--fr-edge) * 0.344 + 3px), 81.2% calc(var(--fr-edge) * 0.500 + 3px), 75.0% calc(var(--fr-edge) * 0.636 + 3px), 68.8% calc(var(--fr-edge) * 0.748 + 3px), 62.5% calc(var(--fr-edge) * 0.831 + 3px), 56.2% calc(var(--fr-edge) * 0.883 + 3px), 50.0% calc(var(--fr-edge) * 0.900 + 3px), 43.8% calc(var(--fr-edge) * 0.883 + 3px), 37.5% calc(var(--fr-edge) * 0.831 + 3px), 31.2% calc(var(--fr-edge) * 0.748 + 3px), 25.0% calc(var(--fr-edge) * 0.636 + 3px), 18.8% calc(var(--fr-edge) * 0.500 + 3px), 12.5% calc(var(--fr-edge) * 0.344 + 3px), 6.2% calc(var(--fr-edge) * 0.176 + 3px), 0.0% calc(var(--fr-edge) * 0.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.176), 12.5% calc(var(--fr-edge) * 0.344), 18.8% calc(var(--fr-edge) * 0.500), 25.0% calc(var(--fr-edge) * 0.636), 31.2% calc(var(--fr-edge) * 0.748), 37.5% calc(var(--fr-edge) * 0.831), 43.8% calc(var(--fr-edge) * 0.883), 50.0% calc(var(--fr-edge) * 0.900), 56.2% calc(var(--fr-edge) * 0.883), 62.5% calc(var(--fr-edge) * 0.831), 68.8% calc(var(--fr-edge) * 0.748), 75.0% calc(var(--fr-edge) * 0.636), 81.2% calc(var(--fr-edge) * 0.500), 87.5% calc(var(--fr-edge) * 0.344), 93.8% calc(var(--fr-edge) * 0.176), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.176 + 3px), 87.5% calc(var(--fr-edge) * 0.344 + 3px), 81.2% calc(var(--fr-edge) * 0.500 + 3px), 75.0% calc(var(--fr-edge) * 0.636 + 3px), 68.8% calc(var(--fr-edge) * 0.748 + 3px), 62.5% calc(var(--fr-edge) * 0.831 + 3px), 56.2% calc(var(--fr-edge) * 0.883 + 3px), 50.0% calc(var(--fr-edge) * 0.900 + 3px), 43.8% calc(var(--fr-edge) * 0.883 + 3px), 37.5% calc(var(--fr-edge) * 0.831 + 3px), 31.2% calc(var(--fr-edge) * 0.748 + 3px), 25.0% calc(var(--fr-edge) * 0.636 + 3px), 18.8% calc(var(--fr-edge) * 0.500 + 3px), 12.5% calc(var(--fr-edge) * 0.344 + 3px), 6.2% calc(var(--fr-edge) * 0.176 + 3px), 0.0% calc(var(--fr-edge) * 0.000 + 3px));
}
html body main.frayora-contact-page .fc-inquiry {
    margin-top: calc(var(--fr-edge) * -1) !important;
    padding-top: calc(var(--ct-pt) + var(--fr-edge)) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.989), 12.5% calc(var(--fr-edge) * 0.957), 18.8% calc(var(--fr-edge) * 0.908), 25.0% calc(var(--fr-edge) * 0.844), 31.2% calc(var(--fr-edge) * 0.768), 37.5% calc(var(--fr-edge) * 0.684), 43.8% calc(var(--fr-edge) * 0.593), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.407), 62.5% calc(var(--fr-edge) * 0.316), 68.8% calc(var(--fr-edge) * 0.232), 75.0% calc(var(--fr-edge) * 0.156), 81.2% calc(var(--fr-edge) * 0.092), 87.5% calc(var(--fr-edge) * 0.043), 93.8% calc(var(--fr-edge) * 0.011), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.989), 12.5% calc(var(--fr-edge) * 0.957), 18.8% calc(var(--fr-edge) * 0.908), 25.0% calc(var(--fr-edge) * 0.844), 31.2% calc(var(--fr-edge) * 0.768), 37.5% calc(var(--fr-edge) * 0.684), 43.8% calc(var(--fr-edge) * 0.593), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.407), 62.5% calc(var(--fr-edge) * 0.316), 68.8% calc(var(--fr-edge) * 0.232), 75.0% calc(var(--fr-edge) * 0.156), 81.2% calc(var(--fr-edge) * 0.092), 87.5% calc(var(--fr-edge) * 0.043), 93.8% calc(var(--fr-edge) * 0.011), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
}
html body main.frayora-contact-page .fc-inquiry::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 4;
    inset: 0 0 auto 0 !important;
    width: auto !important;
    transform: none !important;
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: .85;
    border-radius: 0 !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.989), 12.5% calc(var(--fr-edge) * 0.957), 18.8% calc(var(--fr-edge) * 0.908), 25.0% calc(var(--fr-edge) * 0.844), 31.2% calc(var(--fr-edge) * 0.768), 37.5% calc(var(--fr-edge) * 0.684), 43.8% calc(var(--fr-edge) * 0.593), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.407), 62.5% calc(var(--fr-edge) * 0.316), 68.8% calc(var(--fr-edge) * 0.232), 75.0% calc(var(--fr-edge) * 0.156), 81.2% calc(var(--fr-edge) * 0.092), 87.5% calc(var(--fr-edge) * 0.043), 93.8% calc(var(--fr-edge) * 0.011), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.011 + 3px), 87.5% calc(var(--fr-edge) * 0.043 + 3px), 81.2% calc(var(--fr-edge) * 0.092 + 3px), 75.0% calc(var(--fr-edge) * 0.156 + 3px), 68.8% calc(var(--fr-edge) * 0.232 + 3px), 62.5% calc(var(--fr-edge) * 0.316 + 3px), 56.2% calc(var(--fr-edge) * 0.407 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.593 + 3px), 37.5% calc(var(--fr-edge) * 0.684 + 3px), 31.2% calc(var(--fr-edge) * 0.768 + 3px), 25.0% calc(var(--fr-edge) * 0.844 + 3px), 18.8% calc(var(--fr-edge) * 0.908 + 3px), 12.5% calc(var(--fr-edge) * 0.957 + 3px), 6.2% calc(var(--fr-edge) * 0.989 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.989), 12.5% calc(var(--fr-edge) * 0.957), 18.8% calc(var(--fr-edge) * 0.908), 25.0% calc(var(--fr-edge) * 0.844), 31.2% calc(var(--fr-edge) * 0.768), 37.5% calc(var(--fr-edge) * 0.684), 43.8% calc(var(--fr-edge) * 0.593), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.407), 62.5% calc(var(--fr-edge) * 0.316), 68.8% calc(var(--fr-edge) * 0.232), 75.0% calc(var(--fr-edge) * 0.156), 81.2% calc(var(--fr-edge) * 0.092), 87.5% calc(var(--fr-edge) * 0.043), 93.8% calc(var(--fr-edge) * 0.011), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.011 + 3px), 87.5% calc(var(--fr-edge) * 0.043 + 3px), 81.2% calc(var(--fr-edge) * 0.092 + 3px), 75.0% calc(var(--fr-edge) * 0.156 + 3px), 68.8% calc(var(--fr-edge) * 0.232 + 3px), 62.5% calc(var(--fr-edge) * 0.316 + 3px), 56.2% calc(var(--fr-edge) * 0.407 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.593 + 3px), 37.5% calc(var(--fr-edge) * 0.684 + 3px), 31.2% calc(var(--fr-edge) * 0.768 + 3px), 25.0% calc(var(--fr-edge) * 0.844 + 3px), 18.8% calc(var(--fr-edge) * 0.908 + 3px), 12.5% calc(var(--fr-edge) * 0.957 + 3px), 6.2% calc(var(--fr-edge) * 0.989 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
}
html body main.frayora-contact-page .fc-booking {
    margin-top: calc(var(--fr-edge) * -1) !important;
    padding-top: calc(var(--ct-pt) + var(--fr-edge)) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100% 100%, 0 100%);
}
html body main.frayora-contact-page .fc-booking::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 4;
    inset: 0 0 auto 0 !important;
    width: auto !important;
    transform: none !important;
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: .85;
    border-radius: 0 !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 93.8% calc(var(--fr-edge) * 0.805 + 3px), 87.5% calc(var(--fr-edge) * 0.617 + 3px), 81.2% calc(var(--fr-edge) * 0.444 + 3px), 75.0% calc(var(--fr-edge) * 0.293 + 3px), 68.8% calc(var(--fr-edge) * 0.169 + 3px), 62.5% calc(var(--fr-edge) * 0.076 + 3px), 56.2% calc(var(--fr-edge) * 0.019 + 3px), 50.0% calc(var(--fr-edge) * 0.000 + 3px), 43.8% calc(var(--fr-edge) * 0.019 + 3px), 37.5% calc(var(--fr-edge) * 0.076 + 3px), 31.2% calc(var(--fr-edge) * 0.169 + 3px), 25.0% calc(var(--fr-edge) * 0.293 + 3px), 18.8% calc(var(--fr-edge) * 0.444 + 3px), 12.5% calc(var(--fr-edge) * 0.617 + 3px), 6.2% calc(var(--fr-edge) * 0.805 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.805), 12.5% calc(var(--fr-edge) * 0.617), 18.8% calc(var(--fr-edge) * 0.444), 25.0% calc(var(--fr-edge) * 0.293), 31.2% calc(var(--fr-edge) * 0.169), 37.5% calc(var(--fr-edge) * 0.076), 43.8% calc(var(--fr-edge) * 0.019), 50.0% calc(var(--fr-edge) * 0.000), 56.2% calc(var(--fr-edge) * 0.019), 62.5% calc(var(--fr-edge) * 0.076), 68.8% calc(var(--fr-edge) * 0.169), 75.0% calc(var(--fr-edge) * 0.293), 81.2% calc(var(--fr-edge) * 0.444), 87.5% calc(var(--fr-edge) * 0.617), 93.8% calc(var(--fr-edge) * 0.805), 100.0% calc(var(--fr-edge) * 1.000), 100.0% calc(var(--fr-edge) * 1.000 + 3px), 93.8% calc(var(--fr-edge) * 0.805 + 3px), 87.5% calc(var(--fr-edge) * 0.617 + 3px), 81.2% calc(var(--fr-edge) * 0.444 + 3px), 75.0% calc(var(--fr-edge) * 0.293 + 3px), 68.8% calc(var(--fr-edge) * 0.169 + 3px), 62.5% calc(var(--fr-edge) * 0.076 + 3px), 56.2% calc(var(--fr-edge) * 0.019 + 3px), 50.0% calc(var(--fr-edge) * 0.000 + 3px), 43.8% calc(var(--fr-edge) * 0.019 + 3px), 37.5% calc(var(--fr-edge) * 0.076 + 3px), 31.2% calc(var(--fr-edge) * 0.169 + 3px), 25.0% calc(var(--fr-edge) * 0.293 + 3px), 18.8% calc(var(--fr-edge) * 0.444 + 3px), 12.5% calc(var(--fr-edge) * 0.617 + 3px), 6.2% calc(var(--fr-edge) * 0.805 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
}

/* ---------- 02 · CONTACT OPTION CARDS ---------- */
html body main.frayora-contact-page .fc-options__card {
    border: 1px solid rgba(217,183,126,.30) !important;
    border-radius: 44px 12px 44px 12px !important;
    background: linear-gradient(160deg, rgba(255,255,255,.96), rgba(255,250,244,.72)) !important;
    box-shadow: 0 18px 38px -22px rgba(79,91,73,.30), inset 0 1px 0 #fff !important;
}
html body main.frayora-contact-page .fc-options__card::before { display: none !important; }

html body main.frayora-contact-page .fc-options__icon {
    position: relative;
    flex: 0 0 auto !important;
    aspect-ratio: 1 / 1;
    display: grid !important;
    place-items: center !important;
    justify-content: center !important;
    align-items: center !important;
    width: 76px !important;
    height: 76px !important;
    border-radius: 50% !important;
    background: linear-gradient(145deg,#FFF7EF,#F3E2D5 60%,#EAD2C2) !important;
    color: #84634E !important;
    border: 0 !important;
    box-shadow: 0 12px 22px -12px rgba(132,99,78,.5), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -3px 6px rgba(132,99,78,.10) !important;
}
html body main.frayora-contact-page .fc-options__card:nth-child(even) .fc-options__icon {
    background: linear-gradient(145deg,#F7F9F2,#E6EBDD 60%,#D4DFC8) !important;
    color: #566449 !important;
    box-shadow: 0 12px 22px -12px rgba(86,100,73,.5), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -3px 6px rgba(86,100,73,.10) !important;
}
html body main.frayora-contact-page .fc-options__icon::before { display: none !important; }
html body main.frayora-contact-page .fc-options__icon::after {
    content: "" !important;
    position: absolute !important;
    inset: 6px !important;
    width: auto !important; height: auto !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,.75) !important;
    pointer-events: none;
}
html body main.frayora-contact-page .fc-options__icon svg {
    width: 34px !important; height: 34px !important;
    stroke-width: 1.7 !important; stroke-linecap: round; stroke-linejoin: round;
    margin: 0 !important; position: static !important;
}

/* ---------- 03 · FORM PANEL ---------- */
html body main.frayora-contact-page .fc-inquiry__form-shell {
    border: 1px solid rgba(217,183,126,.34) !important;
    border-radius: 56px 14px 56px 14px !important;
    box-shadow: 0 34px 60px -32px rgba(79,91,73,.42), inset 0 1px 0 #fff !important;
}
html body main.frayora-contact-page .fc-inquiry__form-shell::before { display: none !important; }

/* ---------- 04 · BOOKING PANEL ---------- */
html body main.frayora-contact-page .fc-booking__panel {
    border: 1px solid rgba(217,183,126,.34) !important;
    border-radius: 56px 14px 56px 14px !important;
    box-shadow: 0 34px 60px -32px rgba(79,91,73,.42), inset 0 1px 0 #fff !important;
}
html body main.frayora-contact-page .fc-booking__panel::before { display: none !important; }

/* ---------- 05 · RESPONSIVE ---------- */
@media screen and (max-width: 1100px) {
    html body main.frayora-contact-page .fc-options__icon { width: 68px !important; height: 68px !important; }
    html body main.frayora-contact-page .fc-options__icon svg { width: 30px !important; height: 30px !important; }
    html body main.frayora-contact-page .fc-options__card { box-shadow: 0 8px 16px -10px rgba(79,91,73,.28), inset 0 1px 0 #fff !important; }
    html body main.frayora-contact-page .fc-inquiry__form-shell,
    html body main.frayora-contact-page .fc-booking__panel { border-radius: 44px 12px 44px 12px !important; }
}
@media screen and (max-width: 599px) {
    html body main.frayora-contact-page .fc-options__icon { width: 60px !important; height: 60px !important; }
    html body main.frayora-contact-page .fc-options__icon svg { width: 27px !important; height: 27px !important; }
    html body main.frayora-contact-page .fc-options__card { border-radius: 34px 10px 34px 10px !important; }
    html body main.frayora-contact-page .fc-inquiry__form-shell,
    html body main.frayora-contact-page .fc-booking__panel { border-radius: 34px 10px 34px 10px !important; }
}

/* ---------- 06 · CALENDLY FIT (never clipped) ---------- */
html body main.frayora-contact-page .fc-booking .calendly-inline-widget,
html body main.frayora-contact-page .fc-booking__widget { min-width: 0 !important; width: 100% !important; max-width: 100% !important; }
html body main.frayora-contact-page .fc-booking__widget iframe { width: 100% !important; max-width: 100% !important; }
html body main.frayora-contact-page .fc-booking__inner,
html body main.frayora-contact-page .fc-booking__panel { min-width: 0 !important; }
@media screen and (max-width: 599px) {
    html body main.frayora-contact-page .fc-booking__panel {
        margin-left: -14px !important;
        margin-right: -14px !important;
        width: auto !important;
        border-radius: 30px 10px 30px 10px !important;
    }
    html body main.frayora-contact-page .fc-booking__calendar { padding: 0 !important; }
}

/* =========================================================
   FRAYORA — POLICY PAGES ELEVATION v1
   Privacy Policy · Terms & Conditions · Cookie Policy
   (+ Refunds, Accessibility — they share the same template)
   PASTE AT THE VERY BOTTOM OF main.css

   - No words, photos or links are changed.
   - The hero artwork stays; its bottom edge becomes the shaped
     curve with the fine sage-to-sand line used on every page.
   - "On this page" becomes a glass leaf card with pill links.
   - The document card gets leaf corners; bullets, heading rules
     and dividers share one consistent leaf / hairline language.
   - Desktop, tablet and mobile.
========================================================= */

:root { --fr-edge: 64px; }
@media screen and (max-width: 1100px) { :root { --fr-edge: 52px; } }
@media screen and (max-width: 899px)  { :root { --fr-edge: 44px; } }
@media screen and (max-width: 599px)  { :root { --fr-edge: 34px; } }

html body main.fr-policy-page { --pl-pt: 56px; --pl-pb: 110px; }
@media screen and (max-width: 899px) { html body main.fr-policy-page { --pl-pt: 44px; --pl-pb: 84px; } }
@media screen and (max-width: 599px) { html body main.fr-policy-page { --pl-pt: 34px; --pl-pb: 64px; } }

/* ---------- 00 · HERO ---------- */

html body main.fr-policy-page .fr-policy-hero {
    border-radius: 0 !important;
    box-shadow: none !important;
}
html body main.fr-policy-page .fr-policy-hero__inner {
    padding-bottom: calc(70px + var(--fr-edge)) !important;
}
@media screen and (max-width: 599px) {
    html body main.fr-policy-page .fr-policy-hero__inner {
        padding-bottom: calc(45px + var(--fr-edge)) !important;
    }
}

/* ---------- 01 · SHAPED DOCUMENT EDGE ---------- */

html body main.fr-policy-page .fr-policy-document {
    margin-top: calc(var(--fr-edge) * -1) !important;
    padding-top: calc(var(--pl-pt) + var(--fr-edge)) !important;
    padding-bottom: var(--pl-pb) !important;
    background-color: #FAF7F2 !important;
    background-image:
        radial-gradient(ellipse 60% 26% at 96% 8%, rgba(217,183,126,.16), transparent 100%),
        radial-gradient(ellipse 55% 30% at 2% 60%, rgba(135,148,123,.12), transparent 100%),
        radial-gradient(ellipse 60% 24% at 90% 96%, rgba(214,106,67,.07), transparent 100%) !important;
clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.176), 12.5% calc(var(--fr-edge) * 0.344), 18.8% calc(var(--fr-edge) * 0.500), 25.0% calc(var(--fr-edge) * 0.636), 31.2% calc(var(--fr-edge) * 0.748), 37.5% calc(var(--fr-edge) * 0.831), 43.8% calc(var(--fr-edge) * 0.883), 50.0% calc(var(--fr-edge) * 0.900), 56.2% calc(var(--fr-edge) * 0.883), 62.5% calc(var(--fr-edge) * 0.831), 68.8% calc(var(--fr-edge) * 0.748), 75.0% calc(var(--fr-edge) * 0.636), 81.2% calc(var(--fr-edge) * 0.500), 87.5% calc(var(--fr-edge) * 0.344), 93.8% calc(var(--fr-edge) * 0.176), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.176), 12.5% calc(var(--fr-edge) * 0.344), 18.8% calc(var(--fr-edge) * 0.500), 25.0% calc(var(--fr-edge) * 0.636), 31.2% calc(var(--fr-edge) * 0.748), 37.5% calc(var(--fr-edge) * 0.831), 43.8% calc(var(--fr-edge) * 0.883), 50.0% calc(var(--fr-edge) * 0.900), 56.2% calc(var(--fr-edge) * 0.883), 62.5% calc(var(--fr-edge) * 0.831), 68.8% calc(var(--fr-edge) * 0.748), 75.0% calc(var(--fr-edge) * 0.636), 81.2% calc(var(--fr-edge) * 0.500), 87.5% calc(var(--fr-edge) * 0.344), 93.8% calc(var(--fr-edge) * 0.176), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
}
html body main.fr-policy-page .fr-policy-document::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 4;
    inset: 0 0 auto 0 !important;
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: .85;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.176), 12.5% calc(var(--fr-edge) * 0.344), 18.8% calc(var(--fr-edge) * 0.500), 25.0% calc(var(--fr-edge) * 0.636), 31.2% calc(var(--fr-edge) * 0.748), 37.5% calc(var(--fr-edge) * 0.831), 43.8% calc(var(--fr-edge) * 0.883), 50.0% calc(var(--fr-edge) * 0.900), 56.2% calc(var(--fr-edge) * 0.883), 62.5% calc(var(--fr-edge) * 0.831), 68.8% calc(var(--fr-edge) * 0.748), 75.0% calc(var(--fr-edge) * 0.636), 81.2% calc(var(--fr-edge) * 0.500), 87.5% calc(var(--fr-edge) * 0.344), 93.8% calc(var(--fr-edge) * 0.176), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.176 + 3px), 87.5% calc(var(--fr-edge) * 0.344 + 3px), 81.2% calc(var(--fr-edge) * 0.500 + 3px), 75.0% calc(var(--fr-edge) * 0.636 + 3px), 68.8% calc(var(--fr-edge) * 0.748 + 3px), 62.5% calc(var(--fr-edge) * 0.831 + 3px), 56.2% calc(var(--fr-edge) * 0.883 + 3px), 50.0% calc(var(--fr-edge) * 0.900 + 3px), 43.8% calc(var(--fr-edge) * 0.883 + 3px), 37.5% calc(var(--fr-edge) * 0.831 + 3px), 31.2% calc(var(--fr-edge) * 0.748 + 3px), 25.0% calc(var(--fr-edge) * 0.636 + 3px), 18.8% calc(var(--fr-edge) * 0.500 + 3px), 12.5% calc(var(--fr-edge) * 0.344 + 3px), 6.2% calc(var(--fr-edge) * 0.176 + 3px), 0.0% calc(var(--fr-edge) * 0.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.176), 12.5% calc(var(--fr-edge) * 0.344), 18.8% calc(var(--fr-edge) * 0.500), 25.0% calc(var(--fr-edge) * 0.636), 31.2% calc(var(--fr-edge) * 0.748), 37.5% calc(var(--fr-edge) * 0.831), 43.8% calc(var(--fr-edge) * 0.883), 50.0% calc(var(--fr-edge) * 0.900), 56.2% calc(var(--fr-edge) * 0.883), 62.5% calc(var(--fr-edge) * 0.831), 68.8% calc(var(--fr-edge) * 0.748), 75.0% calc(var(--fr-edge) * 0.636), 81.2% calc(var(--fr-edge) * 0.500), 87.5% calc(var(--fr-edge) * 0.344), 93.8% calc(var(--fr-edge) * 0.176), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.176 + 3px), 87.5% calc(var(--fr-edge) * 0.344 + 3px), 81.2% calc(var(--fr-edge) * 0.500 + 3px), 75.0% calc(var(--fr-edge) * 0.636 + 3px), 68.8% calc(var(--fr-edge) * 0.748 + 3px), 62.5% calc(var(--fr-edge) * 0.831 + 3px), 56.2% calc(var(--fr-edge) * 0.883 + 3px), 50.0% calc(var(--fr-edge) * 0.900 + 3px), 43.8% calc(var(--fr-edge) * 0.883 + 3px), 37.5% calc(var(--fr-edge) * 0.831 + 3px), 31.2% calc(var(--fr-edge) * 0.748 + 3px), 25.0% calc(var(--fr-edge) * 0.636 + 3px), 18.8% calc(var(--fr-edge) * 0.500 + 3px), 12.5% calc(var(--fr-edge) * 0.344 + 3px), 6.2% calc(var(--fr-edge) * 0.176 + 3px), 0.0% calc(var(--fr-edge) * 0.000 + 3px));
}

/* ---------- 02 · ON THIS PAGE (glass leaf card) ---------- */

html body main.fr-policy-page .fr-policy-document__nav {
    padding: 30px 20px 24px 22px !important;
    border: 1px solid rgba(217,183,126,.34) !important;
    border-radius: 40px 10px 40px 10px !important;
    background: linear-gradient(160deg, rgba(255,255,255,.96), rgba(255,250,244,.72)) !important;
    box-shadow: 0 18px 38px -22px rgba(79,91,73,.30), inset 0 1px 0 #fff !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(135,148,123,.55) transparent;
}
html body main.fr-policy-page .fr-policy-document__nav::-webkit-scrollbar { width: 6px; }
html body main.fr-policy-page .fr-policy-document__nav::-webkit-scrollbar-thumb { background: rgba(135,148,123,.5); border-radius: 6px; }
html body main.fr-policy-page .fr-policy-document__nav::-webkit-scrollbar-track { background: transparent; margin: 18px 0; }

html body main.fr-policy-page .fr-policy-document__nav-label {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px !important;
    color: #D66A43 !important;
}
html body main.fr-policy-page .fr-policy-document__nav-label::before {
    content: "";
    flex: none;
    width: 22px;
    height: 8px;
    background: #D66A43;
    clip-path: polygon(30% 0, 100% 0, 70% 100%, 0 100%);
    -webkit-clip-path: polygon(30% 0, 100% 0, 70% 100%, 0 100%);
}

html body main.fr-policy-page .fr-policy-document__nav-link {
    border: 0 !important;
    border-radius: 14px 6px 14px 6px !important;
    padding: 10px 12px !important;
    color: #5E675A !important;
    background: transparent !important;
    transition: color .25s ease, background .25s ease, box-shadow .25s ease !important;
}
html body main.fr-policy-page .fr-policy-document__nav-link--sub { padding-left: 24px !important; }
html body main.fr-policy-page .fr-policy-document__nav-link:hover {
    color: #A75135 !important;
    background: rgba(217,183,126,.14) !important;
}
html body main.fr-policy-page .fr-policy-document__nav-link.is-active {
    color: #A75135 !important;
    font-weight: 600;
    background: linear-gradient(100deg, rgba(214,106,67,.14), rgba(217,183,126,.14)) !important;
    box-shadow: inset 0 0 0 1px rgba(214,106,67,.20), inset 0 1px 0 rgba(255,255,255,.7) !important;
}

/* ---------- 03 · DOCUMENT CARD ---------- */

html body main.fr-policy-page .fr-policy-document__card {
    border: 1px solid rgba(217,183,126,.32) !important;
    border-radius: 56px 14px 56px 14px !important;
    background: linear-gradient(160deg, rgba(255,255,255,.98), rgba(255,250,244,.80)) !important;
    box-shadow: 0 26px 52px -30px rgba(79,91,73,.34), inset 0 1px 0 #fff !important;
}

/* headings: fine sage-to-sand rule instead of a flat line */
html body main.fr-policy-page .fr-policy-document__content h2 {
    border-bottom: 0 !important;
    padding-bottom: 16px !important;
    background: linear-gradient(90deg, rgba(135,148,123,.75), rgba(217,183,126,.65) 55%, rgba(217,183,126,0)) left bottom / 100% 1px no-repeat !important;
}
html body main.fr-policy-page .fr-policy-document__content hr {
    height: 1px !important;
    margin: 34px 0 !important;
    border: 0 !important;
    background: linear-gradient(90deg, rgba(135,148,123,.55), rgba(217,183,126,.55) 55%, rgba(217,183,126,0)) !important;
}

/* bullets: one small leaf, same on every list */
html body main.fr-policy-page .fr-policy-document__content ul {
    list-style: none !important;
    padding-left: 4px !important;
}
html body main.fr-policy-page .fr-policy-document__content ul > li {
    position: relative;
    padding-left: 26px !important;
}
html body main.fr-policy-page .fr-policy-document__content ul > li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: .72em;
    width: 9px;
    height: 9px;
    border-radius: 50% 0 50% 0;
    background: linear-gradient(135deg, #E58A66, #D66A43);
    box-shadow: 0 2px 4px -1px rgba(214,106,67,.45);
}
html body main.fr-policy-page .fr-policy-document__content ul ul > li::before {
    background: linear-gradient(135deg, #A6B39A, #87947B);
    box-shadow: 0 2px 4px -1px rgba(135,148,123,.5);
}
html body main.fr-policy-page .fr-policy-document__content ol > li::marker { color: #D66A43; font-weight: 600; }

/* ---------- 04 · TABLET ---------- */
@media screen and (max-width: 1100px) {
    html body main.fr-policy-page .fr-policy-document__nav {
        padding: 24px 12px 20px 14px !important;
        border-radius: 32px 9px 32px 9px !important;
        box-shadow: 0 12px 26px -18px rgba(79,91,73,.30), inset 0 1px 0 #fff !important;
    }
    html body main.fr-policy-page .fr-policy-document__nav-link { padding: 9px 9px !important; }
    html body main.fr-policy-page .fr-policy-document__nav-link--sub { padding-left: 17px !important; }
    html body main.fr-policy-page .fr-policy-document__card {
        border-radius: 44px 12px 44px 12px !important;
        box-shadow: 0 18px 38px -26px rgba(79,91,73,.32), inset 0 1px 0 #fff !important;
    }
}

/* ---------- 05 · MOBILE ---------- */
@media screen and (max-width: 599px) {
    html body main.fr-policy-page .fr-policy-document__card {
        border-radius: 32px 8px 32px 8px !important;
        box-shadow: 0 14px 30px -22px rgba(79,91,73,.32), inset 0 1px 0 #fff !important;
    }
    html body main.fr-policy-page .fr-policy-document__content ul > li { padding-left: 24px !important; }
}


/* =========================================================
   FRAYORA — FOOTER ELEVATION v1
   PASTE AT THE VERY BOTTOM OF main.css

   - No words, links, buttons or logos are changed.
   - The footer rises into the page with the same shaped curve and
     fine sage-to-sand line used on every section of the site.
   - Services / Company / Resources become glass leaf panels.
   - The two social icons become the same dark-section glass
     badges (fine gold line) used elsewhere.
   - Desktop, tablet and mobile.
========================================================= */

:root { --fr-edge: 64px; }
@media screen and (max-width: 1100px) { :root { --fr-edge: 52px; } }
@media screen and (max-width: 899px)  { :root { --fr-edge: 44px; } }
@media screen and (max-width: 599px)  { :root { --fr-edge: 34px; } }

/* ---------- 01 · SHAPED TOP EDGE + BACKGROUND ---------- */

html body .site-footer {
    isolation: isolate;
    margin-top: calc(var(--fr-edge) * -1) !important;
    padding-top: var(--fr-edge) !important;
    background-color: #2B352D !important;
    background-image:
        radial-gradient(60% 50% at 92% 4%, rgba(135,148,123,.20), rgba(135,148,123,0) 70%),
        radial-gradient(55% 60% at 4% 96%, rgba(214,106,67,.05), rgba(214,106,67,0) 72%),
        linear-gradient(160deg, #3A473C, #303B32 55%, #2B352D) !important;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.176), 12.5% calc(var(--fr-edge) * 0.344), 18.8% calc(var(--fr-edge) * 0.500), 25.0% calc(var(--fr-edge) * 0.636), 31.2% calc(var(--fr-edge) * 0.748), 37.5% calc(var(--fr-edge) * 0.831), 43.8% calc(var(--fr-edge) * 0.883), 50.0% calc(var(--fr-edge) * 0.900), 56.2% calc(var(--fr-edge) * 0.883), 62.5% calc(var(--fr-edge) * 0.831), 68.8% calc(var(--fr-edge) * 0.748), 75.0% calc(var(--fr-edge) * 0.636), 81.2% calc(var(--fr-edge) * 0.500), 87.5% calc(var(--fr-edge) * 0.344), 93.8% calc(var(--fr-edge) * 0.176), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.176), 12.5% calc(var(--fr-edge) * 0.344), 18.8% calc(var(--fr-edge) * 0.500), 25.0% calc(var(--fr-edge) * 0.636), 31.2% calc(var(--fr-edge) * 0.748), 37.5% calc(var(--fr-edge) * 0.831), 43.8% calc(var(--fr-edge) * 0.883), 50.0% calc(var(--fr-edge) * 0.900), 56.2% calc(var(--fr-edge) * 0.883), 62.5% calc(var(--fr-edge) * 0.831), 68.8% calc(var(--fr-edge) * 0.748), 75.0% calc(var(--fr-edge) * 0.636), 81.2% calc(var(--fr-edge) * 0.500), 87.5% calc(var(--fr-edge) * 0.344), 93.8% calc(var(--fr-edge) * 0.176), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
}
html body .site-footer::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 4;
    inset: 0 0 auto 0 !important;
    height: calc(var(--fr-edge) + 6px) !important;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135,148,123,0), #87947B 18%, #D9B77E 62%, rgba(217,183,126,0)) !important;
    opacity: .85;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.176), 12.5% calc(var(--fr-edge) * 0.344), 18.8% calc(var(--fr-edge) * 0.500), 25.0% calc(var(--fr-edge) * 0.636), 31.2% calc(var(--fr-edge) * 0.748), 37.5% calc(var(--fr-edge) * 0.831), 43.8% calc(var(--fr-edge) * 0.883), 50.0% calc(var(--fr-edge) * 0.900), 56.2% calc(var(--fr-edge) * 0.883), 62.5% calc(var(--fr-edge) * 0.831), 68.8% calc(var(--fr-edge) * 0.748), 75.0% calc(var(--fr-edge) * 0.636), 81.2% calc(var(--fr-edge) * 0.500), 87.5% calc(var(--fr-edge) * 0.344), 93.8% calc(var(--fr-edge) * 0.176), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.176 + 3px), 87.5% calc(var(--fr-edge) * 0.344 + 3px), 81.2% calc(var(--fr-edge) * 0.500 + 3px), 75.0% calc(var(--fr-edge) * 0.636 + 3px), 68.8% calc(var(--fr-edge) * 0.748 + 3px), 62.5% calc(var(--fr-edge) * 0.831 + 3px), 56.2% calc(var(--fr-edge) * 0.883 + 3px), 50.0% calc(var(--fr-edge) * 0.900 + 3px), 43.8% calc(var(--fr-edge) * 0.883 + 3px), 37.5% calc(var(--fr-edge) * 0.831 + 3px), 31.2% calc(var(--fr-edge) * 0.748 + 3px), 25.0% calc(var(--fr-edge) * 0.636 + 3px), 18.8% calc(var(--fr-edge) * 0.500 + 3px), 12.5% calc(var(--fr-edge) * 0.344 + 3px), 6.2% calc(var(--fr-edge) * 0.176 + 3px), 0.0% calc(var(--fr-edge) * 0.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 0.000), 6.2% calc(var(--fr-edge) * 0.176), 12.5% calc(var(--fr-edge) * 0.344), 18.8% calc(var(--fr-edge) * 0.500), 25.0% calc(var(--fr-edge) * 0.636), 31.2% calc(var(--fr-edge) * 0.748), 37.5% calc(var(--fr-edge) * 0.831), 43.8% calc(var(--fr-edge) * 0.883), 50.0% calc(var(--fr-edge) * 0.900), 56.2% calc(var(--fr-edge) * 0.883), 62.5% calc(var(--fr-edge) * 0.831), 68.8% calc(var(--fr-edge) * 0.748), 75.0% calc(var(--fr-edge) * 0.636), 81.2% calc(var(--fr-edge) * 0.500), 87.5% calc(var(--fr-edge) * 0.344), 93.8% calc(var(--fr-edge) * 0.176), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.176 + 3px), 87.5% calc(var(--fr-edge) * 0.344 + 3px), 81.2% calc(var(--fr-edge) * 0.500 + 3px), 75.0% calc(var(--fr-edge) * 0.636 + 3px), 68.8% calc(var(--fr-edge) * 0.748 + 3px), 62.5% calc(var(--fr-edge) * 0.831 + 3px), 56.2% calc(var(--fr-edge) * 0.883 + 3px), 50.0% calc(var(--fr-edge) * 0.900 + 3px), 43.8% calc(var(--fr-edge) * 0.883 + 3px), 37.5% calc(var(--fr-edge) * 0.831 + 3px), 31.2% calc(var(--fr-edge) * 0.748 + 3px), 25.0% calc(var(--fr-edge) * 0.636 + 3px), 18.8% calc(var(--fr-edge) * 0.500 + 3px), 12.5% calc(var(--fr-edge) * 0.344 + 3px), 6.2% calc(var(--fr-edge) * 0.176 + 3px), 0.0% calc(var(--fr-edge) * 0.000 + 3px));
}
html body .site-footer__main { position: relative; z-index: 2; padding-top: 56px !important; }
html body .site-footer__bottom { position: relative; z-index: 2; }

/* ---------- 02 · LINK COLUMNS (open, with 3D dividers) ---------- */

html body .site-footer .site-footer__column {
    position: relative;
    align-self: stretch;
    box-sizing: border-box;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
html body .site-footer .site-footer__column h3 {
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: auto !important;
    color: #E07B55 !important;
}
html body .site-footer .site-footer__column h3::before {
    content: "";
    flex: none;
    width: 20px;
    height: 7px;
    background: #D66A43;
    clip-path: polygon(30% 0, 100% 0, 70% 100%, 0 100%);
    -webkit-clip-path: polygon(30% 0, 100% 0, 70% 100%, 0 100%);
}
html body .site-footer .site-footer__column a {
    transition: color .25s ease, transform .25s ease;
}
html body .site-footer .site-footer__column a:hover,
html body .site-footer .site-footer__column a:focus-visible {
    color: #E4C98F !important;
    transform: translateX(4px);
}

/* small 3D divider: a carved groove (dark edge + light edge) that fades at both ends, */
html body .site-footer .site-footer__services::before,
html body .site-footer .site-footer__company::before,
html body .site-footer .site-footer__resources::before,
html body .site-footer .site-footer__intro::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    pointer-events: none;
    width: 3px;
    top: 0;
    bottom: 0;
    left: -29px;
    right: auto;
    height: auto;
    box-sizing: border-box;
    border-left: 1px solid rgba(12,18,13,.60);
    border-right: 1px solid rgba(255,248,236,.16);
    background: none;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
    transform: none;
}
html body .site-footer .site-footer__intro { position: relative; }
html body .site-footer .site-footer__intro::after { display: none !important; }

/* ---------- 03 · SOCIAL BADGES ---------- */

html body .site-footer__socials a {
    position: relative;
    background: linear-gradient(145deg, rgba(247,240,230,.16), rgba(247,240,230,.05)) !important;
    border: 1px solid rgba(228,201,143,.45) !important;
    color: #E4C98F !important;
    box-shadow: 0 14px 26px -14px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.18) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background .25s ease, color .25s ease, transform .25s ease !important;
}
html body .site-footer__socials a svg { color: #E4C98F !important; width: 22px; height: 22px; }
html body .site-footer__socials a::after {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.14);
    pointer-events: none;
}
html body .site-footer__socials a:hover,
html body .site-footer__socials a:focus-visible {
    background: linear-gradient(145deg, #E07B55, #D66A43) !important;
    color: #FFF8F0 !important;
    transform: translateY(-2px);
}
html body .site-footer__socials a:hover svg,
html body .site-footer__socials a:focus-visible svg { color: #FFF8F0 !important; }

/* ---------- 04 · BOTTOM BAR ---------- */

html body .site-footer__bottom {
    border-top: 0 !important;
    background: linear-gradient(90deg, rgba(135,148,123,0), rgba(217,183,126,.55) 50%, rgba(135,148,123,0)) top / calc(100% - 64px) 1px no-repeat;
    background-position: center top;
}
html body .site-footer__legal a { transition: color .25s ease; }
html body .site-footer__legal a:hover,
html body .site-footer__legal a:focus-visible { color: #E4C98F !important; }

/* ---------- 05 · TABLET ---------- */
@media screen and (max-width: 1100px) {
    html body .site-footer__main { padding-top: 48px !important; }
    /* no divider before the first column; a flat one under the intro */
    html body .site-footer .site-footer__services::before { display: none !important; }
    html body .site-footer .site-footer__company::before,
    html body .site-footer .site-footer__resources::before { left: -17px; }
    html body .site-footer .site-footer__intro::after {
        display: block !important;
        top: auto; bottom: -30px; left: 0; right: 0;
        width: auto; height: 3px;
        border-left: 0; border-right: 0;
        border-top: 1px solid rgba(12,18,13,.60);
        border-bottom: 1px solid rgba(255,248,236,.16);
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
    }
}

/* ---------- 06 · MOBILE ---------- */
@media screen and (max-width: 599px) {
    html body .site-footer__main {
        padding-top: 40px !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 44px !important;
    }
    html body .site-footer .site-footer__intro,
    html body .site-footer .site-footer__column { grid-column: 1 / -1 !important; grid-row: auto !important; }
    html body .site-footer .site-footer__intro { margin-bottom: 0 !important; }
    html body .site-footer .site-footer__intro::after { display: none !important; }
    /* horizontal carved dividers between every stacked section */
    html body .site-footer .site-footer__services::before,
    html body .site-footer .site-footer__company::before,
    html body .site-footer .site-footer__resources::before {
        display: block !important;
        top: -23px; bottom: auto; left: 0; right: 0;
        width: auto; height: 3px;
        border-left: 0; border-right: 0;
        border-top: 1px solid rgba(12,18,13,.60);
        border-bottom: 1px solid rgba(255,248,236,.16);
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
    }
    html body .site-footer__bottom { background-size: calc(100% - 44px) 1px; }
}


/* Veyron card — image fills the frame, cropped to the card shape */
html body .frayora-work-page .fw-project--veyron .fw-project__media {
    background: transparent !important;
    overflow: hidden !important;
}
html body .frayora-work-page .fw-project--veyron .fw-project__image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}


/* =========================================================
   FRAYORA — SITE CONSISTENCY v1
   PASTE AT THE VERY BOTTOM OF main.css

   - Every page and the footer share the same 1200px container
     (content edge = header edge) on desktop, tablet and mobile.
   - Section eyebrows, section headings, intro paragraphs and
     buttons use one size scale. Hero headings use one scale.
   - Nothing visual is redesigned; only sizes / alignment are unified.
========================================================= */

/* ---------- 01 · EYEBROWS (all 12px / 600 / .11em) ---------- */
html body .digital-process__eyebrow { letter-spacing: .11em !important; font-size: 12px !important; }
html body main.fr-policy-page .fr-policy-hero__eyebrow {
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: .11em !important;
}

/* ---------- 02 · SECTION HEADINGS (42 / 36 / 31) ---------- */
html body .digital-process .digital-process__title,
html body .eks-path .eks-path__title,
html body .oa-approach-cards .oa-approach-cards__title,
html body .oi-cover .oi-cover__title {
    font-size: 42px !important;
    line-height: 1.16 !important;
    letter-spacing: -.046em !important;
    font-weight: 600 !important;
}
@media screen and (max-width: 1100px) {
    html body .digital-process .digital-process__title,
    html body .eks-path .eks-path__title,
    html body .oa-approach-cards .oa-approach-cards__title,
    html body .oi-cover .oi-cover__title { font-size: 36px !important; }
}
@media screen and (max-width: 599px) {
    html body .digital-process .digital-process__title,
    html body .eks-path .eks-path__title,
    html body .oa-approach-cards .oa-approach-cards__title,
    html body .oi-cover .oi-cover__title { font-size: 31px !important; }
}

/* ---------- 03 · SECTION INTRO PARAGRAPHS (15 / 15 / 14) ---------- */
html body .fw-portfolio .fw-portfolio__description,
html body .fr-resources-topics .fr-resources-topics__intro-description,
html body .oi-cover .oi-cover__body,
html body .oi-partner .oi-partner__body,
html body .oi-pricing .oi-pricing__body {
    font-size: 15px !important;
    line-height: 1.75 !important;
}
@media screen and (max-width: 599px) {
    html body .fw-portfolio .fw-portfolio__description,
    html body .fr-resources-topics .fr-resources-topics__intro-description,
    html body .oi-cover .oi-cover__body,
    html body .oi-partner .oi-partner__body,
    html body .oi-pricing .oi-pricing__body { font-size: 14px !important; }
}

/* ---------- 04 · BUTTONS ---------- */
/* main buttons: 14px / 600, 52px tall (48 tablet, 46 mobile) */
html body .about-final-cta__button.about-final-cta__button.about-final-cta__button.about-final-cta__button,
html body .biab-final-cta__button.biab-final-cta__button.biab-final-cta__button.biab-final-cta__button,
html body .biab-hero__button.biab-hero__button.biab-hero__button.biab-hero__button,
html body .bk-final-cta__button.bk-final-cta__button.bk-final-cta__button.bk-final-cta__button,
html body .bk-hero__button.bk-hero__button.bk-hero__button.bk-hero__button,
html body .digital-final-cta__button.digital-final-cta__button.digital-final-cta__button.digital-final-cta__button,
html body .digital-hero__button.digital-hero__button.digital-hero__button.digital-hero__button,
html body .eks-final-cta__button.eks-final-cta__button.eks-final-cta__button.eks-final-cta__button,
html body .eks-hero__button.eks-hero__button.eks-hero__button.eks-hero__button,
html body .fc-booking__button.fc-booking__button.fc-booking__button.fc-booking__button,
html body .fc-inquiry__submit.fc-inquiry__submit.fc-inquiry__submit.fc-inquiry__submit,
html body .fc-options__button.fc-options__button.fc-options__button.fc-options__button,
html body .fr-resources-cta__button.fr-resources-cta__button.fr-resources-cta__button.fr-resources-cta__button,
html body .fw-final-cta__button.fw-final-cta__button.fw-final-cta__button.fw-final-cta__button,
html body .fw-portfolio__more-button.fw-portfolio__more-button.fw-portfolio__more-button.fw-portfolio__more-button,
html body .oa-final__button.oa-final__button.oa-final__button.oa-final__button,
html body .oi-final__button.oi-final__button.oi-final__button.oi-final__button,
html body .oi-hero__button.oi-hero__button.oi-hero__button.oi-hero__button,
html body .site-footer__book.site-footer__book.site-footer__book.site-footer__book,
html body .sops-final-cta__button.sops-final-cta__button.sops-final-cta__button.sops-final-cta__button,
html body .sops-hero__button.sops-hero__button.sops-hero__button.sops-hero__button,
html body .wf-final-cta__button.wf-final-cta__button.wf-final-cta__button.wf-final-cta__button,
html body .wf-hero__button.wf-hero__button.wf-hero__button.wf-hero__button {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
}
@media screen and (max-width: 1100px) {
    html body .about-final-cta__button.about-final-cta__button.about-final-cta__button.about-final-cta__button,
    html body .biab-final-cta__button.biab-final-cta__button.biab-final-cta__button.biab-final-cta__button,
    html body .biab-hero__button.biab-hero__button.biab-hero__button.biab-hero__button,
    html body .bk-final-cta__button.bk-final-cta__button.bk-final-cta__button.bk-final-cta__button,
    html body .bk-hero__button.bk-hero__button.bk-hero__button.bk-hero__button,
    html body .digital-final-cta__button.digital-final-cta__button.digital-final-cta__button.digital-final-cta__button,
    html body .digital-hero__button.digital-hero__button.digital-hero__button.digital-hero__button,
    html body .eks-final-cta__button.eks-final-cta__button.eks-final-cta__button.eks-final-cta__button,
    html body .eks-hero__button.eks-hero__button.eks-hero__button.eks-hero__button,
    html body .fc-booking__button.fc-booking__button.fc-booking__button.fc-booking__button,
    html body .fc-inquiry__submit.fc-inquiry__submit.fc-inquiry__submit.fc-inquiry__submit,
    html body .fc-options__button.fc-options__button.fc-options__button.fc-options__button,
    html body .fr-resources-cta__button.fr-resources-cta__button.fr-resources-cta__button.fr-resources-cta__button,
    html body .fw-final-cta__button.fw-final-cta__button.fw-final-cta__button.fw-final-cta__button,
    html body .fw-portfolio__more-button.fw-portfolio__more-button.fw-portfolio__more-button.fw-portfolio__more-button,
    html body .oa-final__button.oa-final__button.oa-final__button.oa-final__button,
    html body .oi-final__button.oi-final__button.oi-final__button.oi-final__button,
    html body .oi-hero__button.oi-hero__button.oi-hero__button.oi-hero__button,
    html body .site-footer__book.site-footer__book.site-footer__book.site-footer__book,
    html body .sops-final-cta__button.sops-final-cta__button.sops-final-cta__button.sops-final-cta__button,
    html body .sops-hero__button.sops-hero__button.sops-hero__button.sops-hero__button,
    html body .wf-final-cta__button.wf-final-cta__button.wf-final-cta__button.wf-final-cta__button,
    html body .wf-hero__button.wf-hero__button.wf-hero__button.wf-hero__button { height: 48px !important; min-height: 48px !important; max-height: 48px !important; }
}
@media screen and (max-width: 599px) {
    html body .about-final-cta__button.about-final-cta__button.about-final-cta__button.about-final-cta__button,
    html body .biab-final-cta__button.biab-final-cta__button.biab-final-cta__button.biab-final-cta__button,
    html body .biab-hero__button.biab-hero__button.biab-hero__button.biab-hero__button,
    html body .bk-final-cta__button.bk-final-cta__button.bk-final-cta__button.bk-final-cta__button,
    html body .bk-hero__button.bk-hero__button.bk-hero__button.bk-hero__button,
    html body .digital-final-cta__button.digital-final-cta__button.digital-final-cta__button.digital-final-cta__button,
    html body .digital-hero__button.digital-hero__button.digital-hero__button.digital-hero__button,
    html body .eks-final-cta__button.eks-final-cta__button.eks-final-cta__button.eks-final-cta__button,
    html body .eks-hero__button.eks-hero__button.eks-hero__button.eks-hero__button,
    html body .fc-booking__button.fc-booking__button.fc-booking__button.fc-booking__button,
    html body .fc-inquiry__submit.fc-inquiry__submit.fc-inquiry__submit.fc-inquiry__submit,
    html body .fc-options__button.fc-options__button.fc-options__button.fc-options__button,
    html body .fr-resources-cta__button.fr-resources-cta__button.fr-resources-cta__button.fr-resources-cta__button,
    html body .fw-final-cta__button.fw-final-cta__button.fw-final-cta__button.fw-final-cta__button,
    html body .fw-portfolio__more-button.fw-portfolio__more-button.fw-portfolio__more-button.fw-portfolio__more-button,
    html body .oa-final__button.oa-final__button.oa-final__button.oa-final__button,
    html body .oi-final__button.oi-final__button.oi-final__button.oi-final__button,
    html body .oi-hero__button.oi-hero__button.oi-hero__button.oi-hero__button,
    html body .site-footer__book.site-footer__book.site-footer__book.site-footer__book,
    html body .sops-final-cta__button.sops-final-cta__button.sops-final-cta__button.sops-final-cta__button,
    html body .sops-hero__button.sops-hero__button.sops-hero__button.sops-hero__button,
    html body .wf-final-cta__button.wf-final-cta__button.wf-final-cta__button.wf-final-cta__button,
    html body .wf-hero__button.wf-hero__button.wf-hero__button.wf-hero__button { height: 46px !important; min-height: 46px !important; max-height: 46px !important; font-size: 13px !important; }
}
/* card-level buttons: 13px / 600 (12 on mobile) */
html body .biab-packages__button.biab-packages__button.biab-packages__button.biab-packages__button,
html body .oi-pricing__plan-button.oi-pricing__plan-button.oi-pricing__plan-button.oi-pricing__plan-button,
html body .oi-pricing__consultation-button.oi-pricing__consultation-button.oi-pricing__consultation-button.oi-pricing__consultation-button {
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}
@media screen and (max-width: 599px) {
    html body .biab-packages__button.biab-packages__button.biab-packages__button.biab-packages__button,
    html body .oi-pricing__plan-button.oi-pricing__plan-button.oi-pricing__plan-button.oi-pricing__plan-button,
    html body .oi-pricing__consultation-button.oi-pricing__consultation-button.oi-pricing__consultation-button.oi-pricing__consultation-button { font-size: 12px !important; }
}

/* ---------- 05 · ONE 1200px CONTAINER FOR EVERY PAGE ---------- */
/* policy pages: content edge now matches the header (1136px + 32px padding) */
html body main.fr-policy-page .fr-policy-document__inner { max-width: 1136px !important; }
@media screen and (max-width: 599px) {
    html body main.fr-policy-page .fr-policy-document { padding-left: 22px !important; padding-right: 22px !important; }
    html body .about-founder .about-founder__inner,
    html body .about-method .about-method__inner,
    html body .fw-final-cta .fw-final-cta__inner,
    html body .oa-final .oa-final__inner { padding-left: 22px !important; padding-right: 22px !important; }
}

/* ---------- 06 · POLICY HERO = SAME SIZE / TYPE AS THE OTHER HEROES ---------- */
html body main.fr-policy-page .fr-policy-hero {
    height: calc(600px + var(--fr-edge)) !important;
    min-height: calc(600px + var(--fr-edge)) !important;
}
@media screen and (max-width: 1100px) {
    html body main.fr-policy-page .fr-policy-hero {
        height: calc(580px + var(--fr-edge)) !important;
        min-height: calc(580px + var(--fr-edge)) !important;
    }
}
@media screen and (max-width: 599px) {
    html body main.fr-policy-page .fr-policy-hero {
        height: calc(370px + var(--fr-edge)) !important;
        min-height: calc(370px + var(--fr-edge)) !important;
    }
}
html body main.fr-policy-page .fr-policy-hero__title {
    line-height: 1.08 !important;
    letter-spacing: -.052em !important;
}

/* policy hero: title sits where the other hero titles sit */
html body main.fr-policy-page .fr-policy-hero__inner { padding-top: 35px !important; }
@media screen and (max-width: 599px) {
    html body main.fr-policy-page .fr-policy-hero__inner { padding-top: 13px !important; }
}

/* =========================================================
   FRAYORA — HOMEPAGE SECTION 05
   FEATURED PROJECTS CAROUSEL — one image per project
   Desktop / Tablet / Mobile

   PASTE AT THE VERY BOTTOM OF main.css
   (delete any earlier "showcase" block first)
========================================================= */

body .fr-featured--v3 .fr-showcase {
    --sc-cut: 76px;
    --sc-h: 600px;
    --sc-hang: 0px;

    position: relative;
    width: 100%;
}

/* ---------- top bar: project pills + arrows ---------- */
body .fr-featured--v3 .fr-showcase__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 30px;
}

body .fr-featured--v3 .fr-showcase__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
}

body .fr-featured--v3 .fr-showcase__pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 20px 0 8px;
    border: 1px solid rgba(31, 33, 29, .14);
    border-radius: 999px;
    background: rgba(255, 255, 255, .55);
    color: #1F211D;
    font-family: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}

body .fr-featured--v3 .fr-showcase__pill-no {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(31, 33, 29, .08);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    transition: background-color .3s ease, color .3s ease;
}

body .fr-featured--v3 .fr-showcase__pill.is-active {
    background: #3B4736;
    border-color: #3B4736;
    color: #F8F3EB;
}

body .fr-featured--v3 .fr-showcase__pill.is-active .fr-showcase__pill-no {
    background: var(--fr-terracotta, #D66A43);
    color: #fff;
}

body .fr-featured--v3 .fr-showcase__arrows { display: none; gap: 10px; flex: none; }
body .fr-featured--v3 .fr-showcase.is-ready .fr-showcase__arrows { display: flex; }

body .fr-featured--v3 .fr-showcase__arrow {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid rgba(31, 33, 29, .16);
    border-radius: 50%;
    background: rgba(255, 255, 255, .7);
    color: #1F211D;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}

@media (hover: hover) and (pointer: fine) {
    body .fr-featured--v3 .fr-showcase__pill:not(.is-active):hover {
        background: #fff;
        border-color: rgba(214, 106, 67, .55);
        transform: translateY(-2px);
    }
    body .fr-featured--v3 .fr-showcase__arrow:hover {
        background: var(--fr-terracotta, #D66A43);
        border-color: var(--fr-terracotta, #D66A43);
        color: #fff;
        transform: translateY(-2px);
    }
}

body .fr-featured--v3 .fr-showcase__pill:focus-visible,
body .fr-featured--v3 .fr-showcase__arrow:focus-visible,
body .fr-featured--v3 .fr-showcase__live:focus-visible {
    outline: 3px solid var(--fr-terracotta, #D66A43);
    outline-offset: 3px;
}

/* ---------- one project at a time ---------- */
body .fr-featured--v3 .fr-showcase.is-ready .fr-showcase__stack { display: grid; }

body .fr-featured--v3 .fr-showcase.is-ready .fr-showcase__slide {
    grid-area: 1 / 1;
    transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .6s;
}

body .fr-featured--v3 .fr-showcase.is-ready .fr-showcase__slide:not(.is-active) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(36px);
}

body .fr-featured--v3 .fr-showcase.is-ready .fr-showcase__slide.is-before:not(.is-active) { transform: translateX(-36px); }

body .fr-featured--v3 .fr-showcase.is-ready .fr-showcase__slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .6s ease .1s, transform .7s cubic-bezier(.2, .7, .2, 1) .1s, visibility 0s;
}

body .fr-featured--v3 .fr-showcase:not(.is-ready) .fr-showcase__slide + .fr-showcase__slide { margin-top: 56px; }

/* ---------- a slide ---------- */
body .fr-featured--v3 .fr-showcase__slide {
    /* colours (each project overrides these) */
    --sc-ink: #F8F3EB;
    --sc-soft: rgba(248, 243, 235, .84);
    --sc-accent: #D9B77E;
    --sc-count: #F8F3EB;

    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 36%) minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(28px, 4vw, 64px);
    min-height: var(--sc-h);
    padding: 0 clamp(36px, 4.4vw, 64px);
    margin: 0;
}

/* shaped background */
body .fr-featured--v3 .fr-showcase__stage {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    background: #16202A;
    clip-path: polygon(0 0, calc(100% - var(--sc-cut)) 0, 100% var(--sc-cut), 100% 100%, var(--sc-cut) 100%, 0 calc(100% - var(--sc-cut)));
    -webkit-clip-path: polygon(0 0, calc(100% - var(--sc-cut)) 0, 100% var(--sc-cut), 100% 100%, var(--sc-cut) 100%, 0 calc(100% - var(--sc-cut)));
}

/* floor shadow + terracotta edge on the cut corner */
body .fr-featured--v3 .fr-showcase__slide::before {
    content: "";
    position: absolute;
    inset: 18px 14px 40px 14px;
    z-index: -2;
    background: rgba(24, 36, 28, .30);
    filter: blur(34px);
    opacity: .55;
}

body .fr-featured--v3 .fr-showcase__slide::after {
    content: "";
    position: absolute;
    top: calc(var(--sc-cut) / 2 - 1px);
    right: calc(var(--sc-cut) / -2 + 3px);
    width: calc(var(--sc-cut) * 1.414);
    height: 2px;
    z-index: 1;
    background: linear-gradient(90deg, transparent, var(--fr-terracotta, #D66A43) 25%, var(--fr-terracotta, #D66A43) 75%, transparent);
    transform: rotate(45deg);
    pointer-events: none;
}

body .fr-featured--v3 .fr-showcase__light,
body .fr-featured--v3 .fr-showcase__lines { position: absolute; inset: 0; pointer-events: none; }

body .fr-featured--v3 .fr-showcase__lines {
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: linear-gradient(115deg, transparent 25%, #000 80%);
    mask-image: linear-gradient(115deg, transparent 25%, #000 80%);
}

/* ---------- per-project looks ---------- */
body .fr-featured--v3 .fr-showcase__slide--veyron .fr-showcase__stage {
    background: linear-gradient(150deg, #1E2A36 0%, #141C25 55%, #0E141B 100%);
}
body .fr-featured--v3 .fr-showcase__slide--veyron .fr-showcase__light {
    background:
        radial-gradient(46% 60% at 82% 12%, rgba(242, 106, 27, .30), transparent 66%),
        radial-gradient(40% 50% at 4% 100%, rgba(242, 106, 27, .12), transparent 70%);
}

body .fr-featured--v3 .fr-showcase__slide--bubbatia {
    --sc-ink: #2B1448;
    --sc-soft: #5C4778;
    --sc-accent: #C25A35;
    --sc-count: #2B1448;
}
body .fr-featured--v3 .fr-showcase__slide--bubbatia .fr-showcase__stage {
    background: linear-gradient(145deg, #EFE5F8 0%, #D9C7F0 46%, #B596DA 100%);
}
body .fr-featured--v3 .fr-showcase__slide--bubbatia .fr-showcase__light {
    background:
        radial-gradient(50% 66% at 82% 10%, rgba(255, 255, 255, .70), transparent 62%),
        radial-gradient(44% 56% at 6% 100%, rgba(238, 124, 91, .26), transparent 68%);
}
body .fr-featured--v3 .fr-showcase__slide--bubbatia .fr-showcase__lines { opacity: 0; }
body .fr-featured--v3 .fr-showcase__slide--bubbatia .fr-showcase__stage::after {
    content: "";
    position: absolute;
    right: -8%;
    top: -26%;
    width: 58%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .6);
    background: radial-gradient(circle at 30% 28%, rgba(255, 255, 255, .5), rgba(255, 255, 255, .05) 62%);
}

body .fr-featured--v3 .fr-showcase__slide--findexa {
    --sc-accent: #9FB3C8;
    --sc-count: #E8EDF2;
}
body .fr-featured--v3 .fr-showcase__slide--findexa .fr-showcase__stage {
    background: linear-gradient(150deg, #181C22 0%, #0F1216 55%, #0A0C0F 100%);
}
body .fr-featured--v3 .fr-showcase__slide--findexa .fr-showcase__light {
    background:
        radial-gradient(46% 60% at 80% 8%, rgba(143, 163, 184, .28), transparent 66%),
        radial-gradient(40% 50% at 4% 100%, rgba(214, 106, 67, .10), transparent 70%);
}

/* ---------- text ---------- */
body .fr-featured--v3 .fr-showcase__copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: center;
    padding: 56px 0 28px;
}

body .fr-featured--v3 .fr-showcase__count {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin: 0 0 30px;
    color: var(--sc-count);
    font-family: "Manrope", sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .12em;
}

body .fr-featured--v3 .fr-showcase__count i { font-style: normal; font-weight: 500; opacity: .6; }

body .fr-featured--v3 .fr-showcase__category {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    color: var(--sc-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    line-height: 1.4;
    text-transform: uppercase;
}

body .fr-featured--v3 .fr-showcase__category::before { content: ""; width: 28px; height: 1px; background: currentColor; }

body .fr-featured--v3 .fr-showcase__title {
    margin: 0;
    color: var(--sc-ink);
    font-family: inherit;
    font-size: clamp(34px, 3.4vw, 50px);
    font-weight: inherit;
    line-height: 1.06;
    letter-spacing: -.048em;
}

body .fr-featured--v3 .fr-showcase__text {
    max-width: 400px;
    margin: 16px 0 30px;
    color: var(--sc-soft);
    font-size: 16px;
    line-height: 1.7;
}

body .fr-featured--v3 .fr-showcase__live {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 54px;
    padding: 0 28px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: var(--fr-terracotta, #D66A43);
    color: #fff;
    font-family: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 12px 26px rgba(0, 0, 0, .26);
    transition: transform 260ms ease, background-color 260ms ease;
}

body .fr-featured--v3 .fr-showcase__live span { display: inline-block; font-size: 20px; line-height: 1; transition: transform 260ms ease; }

@media (hover: hover) and (pointer: fine) {
    body .fr-featured--v3 .fr-showcase__live:hover { background: var(--fr-terracotta-deep, #C25A35); transform: translateY(-2px); }
    body .fr-featured--v3 .fr-showcase__live:hover span { transform: translateX(5px); }
}

/* ---------- the one image: sits INSIDE the card, flush to its bottom-right corner ---------- */
body .fr-featured--v3 .fr-showcase__preview {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    display: block;
    width: 55%;
    max-height: 88%;
    margin: 0;
    overflow: hidden;
    border-radius: 18px 0 0 0;
    box-shadow: 0 -10px 60px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .10);
    transition: translate 600ms cubic-bezier(.2, .7, .2, 1), box-shadow 600ms ease;
}

body .fr-featured--v3 .fr-showcase__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left top;
}

body .fr-featured--v3 .fr-showcase__slide--bubbatia .fr-showcase__preview {
    box-shadow: 0 -10px 60px rgba(43, 20, 72, .30), 0 0 0 1px rgba(255, 255, 255, .55);
}

@media (hover: hover) and (pointer: fine) {
    body .fr-featured--v3 .fr-showcase__preview:hover { translate: -6px -8px; }
}

/* ---------- dots ---------- */
body .fr-featured--v3 .fr-showcase__dots { display: none; justify-content: center; gap: 10px; margin: 22px 0 0; }
body .fr-featured--v3 .fr-showcase.is-ready .fr-showcase__dots { display: flex; }

body .fr-featured--v3 .fr-showcase__dot {
    width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px;
    background: rgba(31, 33, 29, .22); cursor: pointer;
    transition: width .35s ease, background-color .35s ease;
}
body .fr-featured--v3 .fr-showcase__dot.is-active { width: 30px; background: var(--fr-terracotta, #D66A43); }

/* =========================================================
   TABLET (up to 1100px): text on top, image below
========================================================= */
@media (max-width: 1100px) {

    body .fr-featured--v3 .fr-showcase { --sc-cut: 60px; }

    body .fr-featured--v3 .fr-showcase__slide {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 8px;
        min-height: 0;
        padding: 0 40px;
    }

    body .fr-featured--v3 .fr-showcase__copy { padding: 52px 0 12px; }
    body .fr-featured--v3 .fr-showcase__count { margin-bottom: 22px; }
    body .fr-featured--v3 .fr-showcase__text { max-width: 560px; }

    body .fr-featured--v3 .fr-showcase__preview {
        position: relative;
        right: auto;
        bottom: auto;
        width: auto;
        max-height: none;
        margin: 16px -40px 0 24px;      /* touches the card's right edge and bottom */
    }

    body .fr-featured--v3 .fr-showcase__image { height: auto; }
}

/* =========================================================
   MOBILE (up to 699px)
========================================================= */
@media (max-width: 699px) {

    body .fr-featured--v3 .fr-showcase { --sc-cut: 34px; margin-left: -22px; margin-right: -22px; width: auto; }

    body .fr-featured--v3 .fr-showcase__bar { padding: 0 22px; margin-bottom: 22px; }
    body .fr-featured--v3 .fr-showcase.is-ready .fr-showcase__arrows { display: none; }

    body .fr-featured--v3 .fr-showcase__nav {
        flex: 1;
        min-width: 0;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 2px 4px 6px;
        scrollbar-width: none;
    }
    body .fr-featured--v3 .fr-showcase__nav::-webkit-scrollbar { display: none; }
    body .fr-featured--v3 .fr-showcase__pill { flex: none; min-height: 42px; padding: 0 14px 0 6px; gap: 8px; font-size: 13px; }
    body .fr-featured--v3 .fr-showcase__pill-no { width: 28px; height: 28px; }

    body .fr-featured--v3 .fr-showcase__slide { padding: 0 22px; }
    body .fr-featured--v3 .fr-showcase__copy { padding: 42px 0 8px; }
    body .fr-featured--v3 .fr-showcase__count { font-size: 13px; margin-bottom: 18px; }
    body .fr-featured--v3 .fr-showcase__title { font-size: 34px; }
    body .fr-featured--v3 .fr-showcase__text { font-size: 15px; margin-bottom: 24px; }
    body .fr-featured--v3 .fr-showcase__live { width: 100%; min-height: 52px; }
    body .fr-featured--v3 .fr-showcase__preview { margin: 26px -22px 0 14px; border-radius: 14px 0 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    body .fr-featured--v3 .fr-showcase__slide { transition: none !important; }
}


/* =========================================================
   BIG BACKGROUND PHOTO (optional, per project)
========================================================= */
body .fr-featured--v3 .fr-showcase__photo {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

body .fr-featured--v3 .fr-showcase__shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(10, 14, 20, .78) 0%, rgba(10, 14, 20, .52) 34%, rgba(10, 14, 20, .08) 66%, rgba(10, 14, 20, 0) 100%),
        linear-gradient(0deg, rgba(10, 14, 20, .30) 0%, rgba(10, 14, 20, 0) 44%);
}

/* photo cards always use light text */
body .fr-featured--v3 .fr-showcase__slide.has-photo {
    --sc-ink: #F8F3EB;
    --sc-soft: rgba(248, 243, 235, .88);
    --sc-accent: #E3C28A;
    --sc-count: #F8F3EB;
}

body .fr-featured--v3 .fr-showcase__slide--bubbatia.has-photo .fr-showcase__shade {
    background:
        linear-gradient(90deg, rgba(43, 20, 72, .80) 0%, rgba(43, 20, 72, .54) 34%, rgba(43, 20, 72, .10) 66%, rgba(43, 20, 72, 0) 100%),
        linear-gradient(0deg, rgba(43, 20, 72, .30) 0%, rgba(43, 20, 72, 0) 44%);
}

/* the glow / grid / glass circle are only for cards without a photo */
body .fr-featured--v3 .fr-showcase__slide.has-photo .fr-showcase__light,
body .fr-featured--v3 .fr-showcase__slide.has-photo .fr-showcase__lines,
body .fr-featured--v3 .fr-showcase__slide.has-photo .fr-showcase__stage::after { display: none; }

body .fr-featured--v3 .fr-showcase__slide--bubbatia.has-photo .fr-showcase__preview {
    box-shadow: 0 -10px 60px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .22);
}

/* tablet / phone: text sits over the top of the photo, so shade from the top */
@media (max-width: 1100px) {
    body .fr-featured--v3 .fr-showcase__shade {
        background:
            linear-gradient(180deg, rgba(10, 14, 20, .74) 0%, rgba(10, 14, 20, .56) 55%, rgba(10, 14, 20, .30) 100%);
    }
    body .fr-featured--v3 .fr-showcase__slide--bubbatia.has-photo .fr-showcase__shade {
        background:
            linear-gradient(180deg, rgba(43, 20, 72, .76) 0%, rgba(43, 20, 72, .58) 55%, rgba(43, 20, 72, .32) 100%);
    }
}

/* =========================================================
   FRAYORA — HOMEPAGE ELEVATION (design polish only)
   PASTE AT THE VERY BOTTOM OF main.css

   No wording, links, images or section order change.
   What this adds:
     · soft glass surfaces + hover lift on the service steps
     · a colour story for Mess → Clarity → Freedom
     · a centre-stage "Growth" card, glass icon badges
     · a calmer featured carousel with an auto-play progress line
     · an editorial text column and floating glass visual
     · a framed, glowing final call-to-action
     · tidy scroll reveals (JS adds them; with no JS everything just shows)
   Desktop, tablet and mobile are all covered.
========================================================= */

:root {
    --fre-ease: cubic-bezier(.22, 1, .36, 1);
    --fre-terra: #C96743;
    --fre-terra-deep: #B15733;
    --fre-sand: #D9B77E;
    --fre-sage: #87947B;
    --fre-olive: #536742;
    --fre-ink: #1F211D;
}

::selection { background: rgba(201, 103, 67, .22); color: inherit; }

/* one clear keyboard focus ring across the homepage */
body main a:focus-visible,
body main button:focus-visible {
    outline: 2px solid var(--fre-terra);
    outline-offset: 4px;
    border-radius: 8px;
}

/* ---------------------------------------------------------
   SCROLL REVEAL (added by a tiny script; no JS = always visible)
--------------------------------------------------------- */
html.fre-js .fre-rv {
    opacity: 0;
    translate: 0 26px;
    transition: opacity .9s var(--fre-ease), translate .9s var(--fre-ease);
    transition-delay: calc(var(--fre-i, 0) * 90ms);
}
html.fre-js .fre-rv.is-in { opacity: 1; translate: 0 0; }

@keyframes freFloat   { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@keyframes freNudge   { 0%, 100% { translate: 0 0; } 50% { translate: 5px 0; } }
@keyframes freDraw    { from { stroke-dashoffset: 1400; } to { stroke-dashoffset: 0; } }
@keyframes freSheen   { from { translate: -140% 0; } to { translate: 140% 0; } }
@keyframes frePulse   { 0% { box-shadow: 0 0 0 0 rgba(201, 103, 67, .38); } 70%, 100% { box-shadow: 0 0 0 16px rgba(201, 103, 67, 0); } }
@keyframes freProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* =========================================================
   01 · HERO — button polish
========================================================= */
body .frayora-home-hero__button {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
body .frayora-home-hero__button--primary::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .34) 50%, transparent 70%);
    translate: -140% 0;
}
body .frayora-home-hero__button--primary:hover::before { animation: freSheen .9s var(--fre-ease); }
body .frayora-home-hero__button--secondary {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
body .frayora-home-hero__arrow { transition: translate .35s var(--fre-ease); }
body .frayora-home-hero__button:hover .frayora-home-hero__arrow { translate: 5px 0; }

/* =========================================================
   02 · CONNECTED INFRASTRUCTURE — glass steps
========================================================= */
body .frayora-connected-v3__wave path {
    stroke-dasharray: 1400;
}
html.fre-js .frayora-connected-v3__wave path { stroke-dashoffset: 1400; }
html.fre-js .frayora-connected-v3__network.is-in .frayora-connected-v3__wave path {
    animation: freDraw 2.2s .15s var(--fre-ease) forwards;
}

body .frayora-connected-v3__icon {
    outline: 1px solid rgba(217, 183, 126, .55);
    outline-offset: 7px;
    transition:
        transform .45s var(--fre-ease),
        box-shadow .45s var(--fre-ease),
        translate .45s var(--fre-ease),
        outline-color .35s ease,
        outline-offset .45s var(--fre-ease);
}

@media screen and (min-width: 1281px) {
    body .frayora-connected-v3__service {
        position: relative;
        isolation: isolate;
    }
    body .frayora-connected-v3__service:hover .frayora-connected-v3__icon,
    body .frayora-connected-v3__service:focus-within .frayora-connected-v3__icon {
        translate: 0 -6px;
        outline-color: rgba(201, 103, 67, .6);
        outline-offset: 10px;
    }

    /* fine dividers between steps */
    body .frayora-connected-v3__service + .frayora-connected-v3__service::after {
        content: "";
        position: absolute;
        left: -9px;
        top: 118px;
        bottom: 6px;
        width: 1px;
        background: linear-gradient(180deg, rgba(135, 148, 123, .34), rgba(135, 148, 123, 0));
        pointer-events: none;
    }
}

body .frayora-connected-v3__number {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    letter-spacing: .08em;
}
body .frayora-connected-v3__number::after {
    content: "";
    width: 18px;
    height: 1px;
    background: linear-gradient(90deg, var(--fre-terra), rgba(201, 103, 67, 0));
    transition: width .45s var(--fre-ease);
}
body .frayora-connected-v3__service:hover .frayora-connected-v3__number::after { width: 34px; }

body .frayora-connected-v3__link span { display: inline-block; transition: translate .35s var(--fre-ease); }
body .frayora-connected-v3__service:hover .frayora-connected-v3__link span { translate: 5px 0; }

/* =========================================================
   03 · OUR APPROACH — Mess → Clarity → Freedom colour story
========================================================= */
body .home-approach__visual img {
    filter: drop-shadow(0 20px 22px rgba(70, 52, 34, .20));
    animation: freFloat 8s ease-in-out infinite;
    transition: scale .6s var(--fre-ease), filter .6s var(--fre-ease);
}
body .home-approach__stage:nth-of-type(2) .home-approach__visual img { animation-delay: -2.6s; }
body .home-approach__stage:nth-of-type(3) .home-approach__visual img { animation-delay: -5.2s; }
body .home-approach__stage:hover .home-approach__visual img {
    scale: 1.06;
    filter: drop-shadow(0 26px 28px rgba(70, 52, 34, .26));
}

body .home-approach__stage h3 { position: relative; padding-bottom: 14px; }
body .home-approach__stage h3::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 30px;
    height: 3px;
    margin-left: -15px;
    border-radius: 3px;
    background: var(--fre-terra);
    transition: width .5s var(--fre-ease), margin-left .5s var(--fre-ease);
}
body .home-approach__journey > .home-approach__stage:nth-child(3) h3::after { background: var(--fre-sage); }
body .home-approach__journey > .home-approach__stage:nth-child(5) h3::after { background: var(--fre-sand); }
body .home-approach__stage:hover h3::after { width: 54px; margin-left: -27px; }

body .home-approach__arrow { animation: freNudge 2.4s ease-in-out infinite; }

/* soft light behind the dark panel text */
body .home-approach__intro { position: relative; }
body .home-approach__intro::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -70px -90px -70px -110px;
    background:
        radial-gradient(52% 58% at 30% 36%, rgba(135, 148, 123, .26), rgba(135, 148, 123, 0) 72%),
        radial-gradient(40% 46% at 78% 86%, rgba(217, 183, 126, .12), rgba(217, 183, 126, 0) 70%);
    pointer-events: none;
}

body .home-approach__button { position: relative; overflow: hidden; isolation: isolate; }
body .home-approach__button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .30) 50%, transparent 70%);
    translate: -140% 0;
}
body .home-approach__button:hover::before { animation: freSheen .9s var(--fre-ease); }
body .home-approach__button span { display: inline-block; transition: translate .35s var(--fre-ease); }
body .home-approach__button:hover span { translate: 5px 0; }

/* =========================================================
   04 · BUSINESS IN A BOX — glass badges + centre-stage card
========================================================= */
body .frayora-biab-v4__icon {
    width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .62);
    box-shadow: 0 10px 22px -12px rgba(60, 52, 36, .35), inset 0 0 0 1px rgba(217, 183, 126, .55);
    transition: transform .45s var(--fre-ease), box-shadow .45s var(--fre-ease);
}
body .frayora-biab-v4__icon svg { width: 27px; height: 27px; }
body .frayora-biab-v4__card--growth .frayora-biab-v4__icon,
body .frayora-biab-v4__card--enterprise .frayora-biab-v4__icon {
    background: rgba(255, 255, 255, .14);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
body .frayora-biab-v4__card:hover .frayora-biab-v4__icon { transform: translateY(-3px) rotate(-4deg); }

body .frayora-biab-v4__card::after { pointer-events: none; }

body .frayora-biab-v4__learn { transition: transform .3s var(--fre-ease), background-color .3s, box-shadow .3s; }
body .frayora-biab-v4__learn span { display: inline-block; transition: translate .35s var(--fre-ease); }
body .frayora-biab-v4__learn:hover span { translate: 5px 0; }
body .frayora-biab-v4__compare span,
body .fr-featured__all span { display: inline-block; transition: translate .35s var(--fre-ease); }
body .frayora-biab-v4__compare:hover span,
body .fr-featured__all:hover span { translate: 5px 0; }

@media screen and (min-width: 1101px) {
    /* the middle package is the centre of attention */
    body .frayora-biab-v4__card--growth {
        translate: 0 -14px;
        box-shadow:
            0 34px 60px -26px rgba(52, 64, 44, .55),
            0 14px 26px -16px rgba(52, 64, 44, .35),
            inset 0 1px 0 rgba(255, 255, 255, .38);
    }
    body .frayora-biab-v4__packages { padding-top: 14px; }
}

/* =========================================================
   05 · FEATURED PROJECTS — calmer carousel, auto-play line
========================================================= */
body .fr-featured--v3 .fr-showcase__pill { position: relative; overflow: hidden; }
body .fr-featured--v3 .fr-showcase__pill.is-active::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 5px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--fre-terra), var(--fre-sand));
    transform-origin: left center;
    transform: scaleX(0);
}
body .fr-featured--v3 .fr-showcase.is-playing .fr-showcase__pill.is-active::after {
    animation: freProgress var(--fre-play, 8s) linear forwards;
}
body .fr-featured--v3 .fr-showcase.is-paused .fr-showcase__pill.is-active::after { animation-play-state: paused; }

/* a little more weight on the left so the words sit clear of the photo's own lettering */
body .fr-featured--v3 .fr-showcase__shade {
    background:
        linear-gradient(90deg, rgba(10, 14, 20, .86) 0%, rgba(10, 14, 20, .64) 38%, rgba(10, 14, 20, .12) 70%, rgba(10, 14, 20, 0) 100%),
        linear-gradient(0deg, rgba(10, 14, 20, .34) 0%, rgba(10, 14, 20, 0) 46%);
}
body .fr-featured--v3 .fr-showcase__slide--bubbatia.has-photo .fr-showcase__shade {
    background:
        linear-gradient(90deg, rgba(43, 20, 72, .86) 0%, rgba(43, 20, 72, .62) 38%, rgba(43, 20, 72, .12) 70%, rgba(43, 20, 72, 0) 100%),
        linear-gradient(0deg, rgba(43, 20, 72, .34) 0%, rgba(43, 20, 72, 0) 46%);
}
@media (max-width: 1100px) {
    body .fr-featured--v3 .fr-showcase__shade {
        background: linear-gradient(180deg, rgba(10, 14, 20, .80) 0%, rgba(10, 14, 20, .62) 55%, rgba(10, 14, 20, .34) 100%);
    }
    body .fr-featured--v3 .fr-showcase__slide--bubbatia.has-photo .fr-showcase__shade {
        background: linear-gradient(180deg, rgba(43, 20, 72, .80) 0%, rgba(43, 20, 72, .64) 55%, rgba(43, 20, 72, .36) 100%);
    }
}

/* website preview: gently lifts on hover */
body .fr-featured--v3 .fr-showcase__preview {
    transition: translate .6s var(--fre-ease), box-shadow .6s var(--fre-ease);
}
body .fr-featured--v3 .fr-showcase__slide:hover .fr-showcase__preview { translate: 0 -6px; }

body .fr-featured--v3 .fr-showcase__live span { display: inline-block; transition: translate .35s var(--fre-ease); }
body .fr-featured--v3 .fr-showcase__live:hover span { translate: 5px 0; }

/* ---------------------------------------------------------
   the small website window hangs off the corner of the big card
   (it is no longer inside the photo)
--------------------------------------------------------- */
body .fr-featured--v3 .fr-showcase { --sc-ox: 88px; --sc-oy: 80px; }
/* a card without a window keeps its normal size */
body .fr-featured--v3 .fr-showcase__slide:not(:has(.fr-showcase__preview)) { --sc-ox: 0px; --sc-oy: 0px; }

@media (min-width: 1101px) {
    body .fr-featured--v3 .fr-showcase__slide {
        min-height: calc(var(--sc-h) + var(--sc-oy));
        padding-right: calc(clamp(36px, 4.4vw, 64px) + var(--sc-ox));
        padding-bottom: var(--sc-oy);
        grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
    }
    body .fr-featured--v3 .fr-showcase__stage {
        inset: 0 var(--sc-ox) var(--sc-oy) 0;
    }
    body .fr-featured--v3 .fr-showcase__slide::before {
        inset: 18px calc(14px + var(--sc-ox)) calc(40px + var(--sc-oy)) 14px;
    }
    body .fr-featured--v3 .fr-showcase__slide::after {
        right: calc(var(--sc-cut) / -2 + 3px + var(--sc-ox));
    }
    body .fr-featured--v3 .fr-showcase__preview {
        right: 0;
        bottom: 0;
        width: 54%;
        max-height: calc(100% - 96px);
        border-radius: 16px;
        box-shadow:
            0 40px 70px -28px rgba(10, 14, 20, .55),
            0 14px 30px -14px rgba(10, 14, 20, .35),
            0 0 0 1px rgba(255, 255, 255, .55);
    }
    body .fr-featured--v3 .fr-showcase__slide--bubbatia .fr-showcase__preview {
        box-shadow:
            0 40px 70px -28px rgba(43, 20, 72, .55),
            0 14px 30px -14px rgba(43, 20, 72, .32),
            0 0 0 1px rgba(255, 255, 255, .6);
    }
}

@media (max-width: 1100px) {
    body .fr-featured--v3 .fr-showcase { --sc-ox: 0px; --sc-oy: 56px; }
    body .fr-featured--v3 .fr-showcase__stage { inset: 0 0 var(--sc-oy) 0; }
    body .fr-featured--v3 .fr-showcase__slide::before { inset: 18px 14px calc(40px + var(--sc-oy)) 14px; }
    body .fr-featured--v3 .fr-showcase__preview {
        margin: 16px 0 0 24px;
        border-radius: 14px;
        box-shadow:
            0 30px 54px -26px rgba(10, 14, 20, .55),
            0 0 0 1px rgba(255, 255, 255, .55);
    }
    /* the window overlaps the bottom edge of the card */
    body .fr-featured--v3 .fr-showcase__slide { padding-bottom: 0; }
}
@media (max-width: 699px) {
    body .fr-featured--v3 .fr-showcase { --sc-oy: 40px; }
    body .fr-featured--v3 .fr-showcase__preview { margin: 24px 0 0 0; border-radius: 12px; }
}


/* phone: all three project tabs fit on one line.
   The open project shows its name; the other two show just their number. */
@media (max-width: 699px) {
    body .fr-featured--v3 .fr-showcase__nav {
        overflow: visible;
        flex-wrap: nowrap;
        gap: 8px;
        padding: 2px 0 6px;
    }
    body .fr-featured--v3 .fr-showcase__pill:not(.is-active) {
        font-size: 0;
        gap: 0;
        padding: 0 6px;
    }
    body .fr-featured--v3 .fr-showcase__pill:not(.is-active) .fr-showcase__pill-no { font-size: 11px; }
    body .fr-featured--v3 .fr-showcase__pill.is-active { padding: 0 16px 0 6px; }
}

/* =========================================================
   06 · A CLEARER WAY FORWARD — editorial column, floating glass
========================================================= */
body .frayora-why-v3__copy { position: relative; padding-left: 26px; }
body .frayora-why-v3__copy::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    bottom: 5px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--fre-terra) 0%, var(--fre-sand) 60%, rgba(217, 183, 126, 0) 100%);
}
body .frayora-why-v3__lead strong { letter-spacing: -.005em; }

body .frayora-why-v3__visual { animation: freFloat 10s ease-in-out infinite; }
body .frayora-why-v3__links path { stroke-dasharray: 1400; }
html.fre-js .frayora-why-v3__links path { stroke-dashoffset: 1400; }
html.fre-js .frayora-why-v3__stage.is-in .frayora-why-v3__links path { animation: freDraw 2.4s .2s var(--fre-ease) forwards; }
body .frayora-why-v3__links path.l3 { stroke-dasharray: none; stroke-dashoffset: 0 !important; animation: none !important; }

/* =========================================================
   07 · FINAL CTA — open, glowing, no box
========================================================= */
body .home-cta .home-cta__inner { isolation: isolate; }
body .home-cta .home-cta__inner::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    z-index: -1;
    inset: 0 -12%;
    pointer-events: none;
    background:
        radial-gradient(34% 58% at 50% 54%, rgba(255, 255, 255, .78), rgba(255, 255, 255, 0) 72%),
        radial-gradient(30% 56% at 12% 22%, rgba(135, 148, 123, .20), rgba(135, 148, 123, 0) 72%),
        radial-gradient(30% 56% at 90% 92%, rgba(201, 103, 67, .14), rgba(201, 103, 67, 0) 74%),
        radial-gradient(circle farthest-side at 50% 50%,
            rgba(0, 0, 0, 0) 0 36%,
            rgba(217, 183, 126, .38) 36% 36.25%, rgba(0, 0, 0, 0) 36.25% 50%,
            rgba(217, 183, 126, .28) 50% 50.25%, rgba(0, 0, 0, 0) 50.25% 64%,
            rgba(217, 183, 126, .20) 64% 64.25%, rgba(0, 0, 0, 0) 64.25% 78%,
            rgba(217, 183, 126, .13) 78% 78.25%, rgba(0, 0, 0, 0) 78.25%);
    -webkit-mask-image: radial-gradient(ellipse 62% 78% at 50% 50%, #000 40%, rgba(0, 0, 0, 0) 100%);
    mask-image: radial-gradient(ellipse 62% 78% at 50% 50%, #000 40%, rgba(0, 0, 0, 0) 100%);
}
/* the brand marker, centred above the heading */
body .home-cta .home-cta__inner::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 66px;
    width: 34px;
    height: 11px;
    margin-left: -17px;
    background: var(--fre-terra);
    clip-path: polygon(0 0, 70% 0, 100% 100%, 30% 100%);
    -webkit-clip-path: polygon(0 0, 70% 0, 100% 100%, 30% 100%);
}

body .home-cta__button { position: relative; overflow: hidden; isolation: isolate; animation: frePulse 3.2s 1.2s ease-out infinite; }
body .home-cta__button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .34) 50%, transparent 70%);
    translate: -140% 0;
}
body .home-cta__button:hover { animation-play-state: paused; }
body .home-cta__button:hover::before { animation: freSheen .9s var(--fre-ease); }
body .home-cta__button-arrow { display: inline-block; transition: translate .35s var(--fre-ease); }
body .home-cta__button:hover .home-cta__button-arrow { translate: 6px 0; }

/* =========================================================
   TABLET + MOBILE
========================================================= */
@media screen and (max-width: 1100px) {
    body .frayora-why-v3__copy { padding-left: 22px; }
    body .home-cta .home-cta__inner::after { top: 54px; }
}
@media screen and (max-width: 599px) {
    body .frayora-why-v3__copy { padding-left: 0; }
    body .frayora-why-v3__copy::before { display: none; }
    body .home-cta .home-cta__inner::before { inset: 0 -30%; }
    body .home-cta .home-cta__inner::after { top: 42px; }
    body .frayora-biab-v4__icon { width: 52px; height: 52px; }
}

/* mobile: the packages stack (nothing to scroll), so no scrollbar */
@media screen and (max-width: 699px) {
    body .frayora-biab-v4__packages {
        overflow: visible !important;
        scrollbar-width: none;
    }
    body .frayora-biab-v4__packages::-webkit-scrollbar { display: none; }
}

/* =========================================================
   RESPECT "REDUCE MOTION"
========================================================= */
@media (prefers-reduced-motion: reduce) {
    html.fre-js .fre-rv { opacity: 1; translate: 0 0; transition: none; }
    html.fre-js .frayora-connected-v3__wave path,
    html.fre-js .frayora-why-v3__links path { stroke-dashoffset: 0; animation: none !important; }
    body .home-approach__visual img,
    body .home-approach__arrow,
    body .frayora-why-v3__visual,
    body .home-cta__button,
}


/* END — HOMEPAGE ELEVATION */



/* =========================================================
   FRAYORA — HOMEPAGE ELEVATION (design polish only)
   PASTE AT THE VERY BOTTOM OF main.css

   No wording, links, images or section order change.
   What this adds:
     · soft glass surfaces + hover lift on the service steps
     · a colour story for Mess → Clarity → Freedom
     · a centre-stage "Growth" card, glass icon badges
     · a calmer featured carousel with an auto-play progress line
     · an editorial text column and floating glass visual
     · a framed, glowing final call-to-action
     · tidy scroll reveals (JS adds them; with no JS everything just shows)
   Desktop, tablet and mobile are all covered.
========================================================= */

:root {
    --fre-ease: cubic-bezier(.22, 1, .36, 1);
    --fre-terra: #C96743;
    --fre-terra-deep: #B15733;
    --fre-sand: #D9B77E;
    --fre-sage: #87947B;
    --fre-olive: #536742;
    --fre-ink: #1F211D;
}

::selection { background: rgba(201, 103, 67, .22); color: inherit; }

/* one clear keyboard focus ring across the homepage */
body main a:focus-visible,
body main button:focus-visible {
    outline: 2px solid var(--fre-terra);
    outline-offset: 4px;
    border-radius: 8px;
}

/* ---------------------------------------------------------
   SCROLL REVEAL (added by a tiny script; no JS = always visible)
--------------------------------------------------------- */
html.fre-js .fre-rv {
    opacity: 0;
    translate: 0 26px;
    transition: opacity .9s var(--fre-ease), translate .9s var(--fre-ease);
    transition-delay: calc(var(--fre-i, 0) * 90ms);
}
html.fre-js .fre-rv.is-in { opacity: 1; translate: 0 0; }

@keyframes freFloat   { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@keyframes freNudge   { 0%, 100% { translate: 0 0; } 50% { translate: 5px 0; } }
@keyframes freDraw    { from { stroke-dashoffset: 1400; } to { stroke-dashoffset: 0; } }
@keyframes freSheen   { from { translate: -140% 0; } to { translate: 140% 0; } }
@keyframes frePulse   { 0% { box-shadow: 0 0 0 0 rgba(201, 103, 67, .38); } 70%, 100% { box-shadow: 0 0 0 16px rgba(201, 103, 67, 0); } }
@keyframes freProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* =========================================================
   01 · HERO — button polish
========================================================= */
body .frayora-home-hero__button {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
body .frayora-home-hero__button--primary::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .34) 50%, transparent 70%);
    translate: -140% 0;
}
body .frayora-home-hero__button--primary:hover::before { animation: freSheen .9s var(--fre-ease); }
body .frayora-home-hero__button--secondary {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
body .frayora-home-hero__arrow { transition: translate .35s var(--fre-ease); }
body .frayora-home-hero__button:hover .frayora-home-hero__arrow { translate: 5px 0; }

/* =========================================================
   02 · CONNECTED INFRASTRUCTURE — glass steps
========================================================= */
body .frayora-connected-v3__wave path {
    stroke-dasharray: 1400;
}
html.fre-js .frayora-connected-v3__wave path { stroke-dashoffset: 1400; }
html.fre-js .frayora-connected-v3__network.is-in .frayora-connected-v3__wave path {
    animation: freDraw 2.2s .15s var(--fre-ease) forwards;
}

body .frayora-connected-v3__icon {
    outline: 1px solid rgba(217, 183, 126, .55);
    outline-offset: 7px;
    transition:
        transform .45s var(--fre-ease),
        box-shadow .45s var(--fre-ease),
        translate .45s var(--fre-ease),
        outline-color .35s ease,
        outline-offset .45s var(--fre-ease);
}

@media screen and (min-width: 1281px) {
    body .frayora-connected-v3__service {
        position: relative;
        isolation: isolate;
    }
    body .frayora-connected-v3__service:hover .frayora-connected-v3__icon,
    body .frayora-connected-v3__service:focus-within .frayora-connected-v3__icon {
        translate: 0 -6px;
        outline-color: rgba(201, 103, 67, .6);
        outline-offset: 10px;
    }

    /* fine dividers between steps */
    body .frayora-connected-v3__service + .frayora-connected-v3__service::after {
        content: "";
        position: absolute;
        left: -9px;
        top: 118px;
        bottom: 6px;
        width: 1px;
        background: linear-gradient(180deg, rgba(135, 148, 123, .34), rgba(135, 148, 123, 0));
        pointer-events: none;
    }
}

body .frayora-connected-v3__number {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    letter-spacing: .08em;
}
body .frayora-connected-v3__number::after {
    content: "";
    width: 18px;
    height: 1px;
    background: linear-gradient(90deg, var(--fre-terra), rgba(201, 103, 67, 0));
    transition: width .45s var(--fre-ease);
}
body .frayora-connected-v3__service:hover .frayora-connected-v3__number::after { width: 34px; }

body .frayora-connected-v3__link span { display: inline-block; transition: translate .35s var(--fre-ease); }
body .frayora-connected-v3__service:hover .frayora-connected-v3__link span { translate: 5px 0; }

/* =========================================================
   03 · OUR APPROACH — Mess → Clarity → Freedom colour story
========================================================= */
body .home-approach__visual img {
    filter: drop-shadow(0 20px 22px rgba(70, 52, 34, .20));
    animation: freFloat 8s ease-in-out infinite;
    transition: scale .6s var(--fre-ease), filter .6s var(--fre-ease);
}
body .home-approach__stage:nth-of-type(2) .home-approach__visual img { animation-delay: -2.6s; }
body .home-approach__stage:nth-of-type(3) .home-approach__visual img { animation-delay: -5.2s; }
body .home-approach__stage:hover .home-approach__visual img {
    scale: 1.06;
    filter: drop-shadow(0 26px 28px rgba(70, 52, 34, .26));
}

body .home-approach__stage h3 { position: relative; padding-bottom: 14px; }
body .home-approach__stage h3::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 30px;
    height: 3px;
    margin-left: -15px;
    border-radius: 3px;
    background: var(--fre-terra);
    transition: width .5s var(--fre-ease), margin-left .5s var(--fre-ease);
}
body .home-approach__journey > .home-approach__stage:nth-child(3) h3::after { background: var(--fre-sage); }
body .home-approach__journey > .home-approach__stage:nth-child(5) h3::after { background: var(--fre-sand); }
body .home-approach__stage:hover h3::after { width: 54px; margin-left: -27px; }

body .home-approach__arrow { animation: freNudge 2.4s ease-in-out infinite; }

/* soft light behind the dark panel text */
body .home-approach__intro { position: relative; }
body .home-approach__intro::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -70px -90px -70px -110px;
    background:
        radial-gradient(52% 58% at 30% 36%, rgba(135, 148, 123, .26), rgba(135, 148, 123, 0) 72%),
        radial-gradient(40% 46% at 78% 86%, rgba(217, 183, 126, .12), rgba(217, 183, 126, 0) 70%);
    pointer-events: none;
}

body .home-approach__button { position: relative; overflow: hidden; isolation: isolate; }
body .home-approach__button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .30) 50%, transparent 70%);
    translate: -140% 0;
}
body .home-approach__button:hover::before { animation: freSheen .9s var(--fre-ease); }
body .home-approach__button span { display: inline-block; transition: translate .35s var(--fre-ease); }
body .home-approach__button:hover span { translate: 5px 0; }

/* =========================================================
   04 · BUSINESS IN A BOX — glass badges + centre-stage card
========================================================= */
body .frayora-biab-v4__icon {
    width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .62);
    box-shadow: 0 10px 22px -12px rgba(60, 52, 36, .35), inset 0 0 0 1px rgba(217, 183, 126, .55);
    transition: transform .45s var(--fre-ease), box-shadow .45s var(--fre-ease);
}
body .frayora-biab-v4__icon svg { width: 27px; height: 27px; }
body .frayora-biab-v4__card--growth .frayora-biab-v4__icon,
body .frayora-biab-v4__card--enterprise .frayora-biab-v4__icon {
    background: rgba(255, 255, 255, .14);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
body .frayora-biab-v4__card:hover .frayora-biab-v4__icon { transform: translateY(-3px) rotate(-4deg); }

body .frayora-biab-v4__card::after { pointer-events: none; }

body .frayora-biab-v4__learn { transition: transform .3s var(--fre-ease), background-color .3s, box-shadow .3s; }
body .frayora-biab-v4__learn span { display: inline-block; transition: translate .35s var(--fre-ease); }
body .frayora-biab-v4__learn:hover span { translate: 5px 0; }
body .frayora-biab-v4__compare span,
body .fr-featured__all span { display: inline-block; transition: translate .35s var(--fre-ease); }
body .frayora-biab-v4__compare:hover span,
body .fr-featured__all:hover span { translate: 5px 0; }

@media screen and (min-width: 1101px) {
    /* the middle package is the centre of attention */
    body .frayora-biab-v4__card--growth {
        translate: 0 -14px;
        box-shadow:
            0 34px 60px -26px rgba(52, 64, 44, .55),
            0 14px 26px -16px rgba(52, 64, 44, .35),
            inset 0 1px 0 rgba(255, 255, 255, .38);
    }
    body .frayora-biab-v4__packages { padding-top: 14px; }
}

/* =========================================================
   05 · FEATURED PROJECTS — calmer carousel, auto-play line
========================================================= */
body .fr-featured--v3 .fr-showcase__pill { position: relative; overflow: hidden; }
body .fr-featured--v3 .fr-showcase__pill.is-active::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 5px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--fre-terra), var(--fre-sand));
    transform-origin: left center;
    transform: scaleX(0);
}
body .fr-featured--v3 .fr-showcase.is-playing .fr-showcase__pill.is-active::after {
    animation: freProgress var(--fre-play, 8s) linear forwards;
}
body .fr-featured--v3 .fr-showcase.is-paused .fr-showcase__pill.is-active::after { animation-play-state: paused; }

/* a little more weight on the left so the words sit clear of the photo's own lettering */
body .fr-featured--v3 .fr-showcase__shade {
    background:
        linear-gradient(90deg, rgba(10, 14, 20, .86) 0%, rgba(10, 14, 20, .64) 38%, rgba(10, 14, 20, .12) 70%, rgba(10, 14, 20, 0) 100%),
        linear-gradient(0deg, rgba(10, 14, 20, .34) 0%, rgba(10, 14, 20, 0) 46%);
}
body .fr-featured--v3 .fr-showcase__slide--bubbatia.has-photo .fr-showcase__shade {
    background:
        linear-gradient(90deg, rgba(43, 20, 72, .86) 0%, rgba(43, 20, 72, .62) 38%, rgba(43, 20, 72, .12) 70%, rgba(43, 20, 72, 0) 100%),
        linear-gradient(0deg, rgba(43, 20, 72, .34) 0%, rgba(43, 20, 72, 0) 46%);
}
@media (max-width: 1100px) {
    body .fr-featured--v3 .fr-showcase__shade {
        background: linear-gradient(180deg, rgba(10, 14, 20, .80) 0%, rgba(10, 14, 20, .62) 55%, rgba(10, 14, 20, .34) 100%);
    }
    body .fr-featured--v3 .fr-showcase__slide--bubbatia.has-photo .fr-showcase__shade {
        background: linear-gradient(180deg, rgba(43, 20, 72, .80) 0%, rgba(43, 20, 72, .64) 55%, rgba(43, 20, 72, .36) 100%);
    }
}

/* website preview: gently lifts on hover */
body .fr-featured--v3 .fr-showcase__preview {
    transition: translate .6s var(--fre-ease), box-shadow .6s var(--fre-ease);
}
body .fr-featured--v3 .fr-showcase__slide:hover .fr-showcase__preview { translate: 0 -6px; }

body .fr-featured--v3 .fr-showcase__live span { display: inline-block; transition: translate .35s var(--fre-ease); }
body .fr-featured--v3 .fr-showcase__live:hover span { translate: 5px 0; }

/* ---------------------------------------------------------
   the small website window hangs off the corner of the big card
   (it is no longer inside the photo)
--------------------------------------------------------- */
body .fr-featured--v3 .fr-showcase { --sc-ox: 88px; --sc-oy: 80px; }
/* a card without a window keeps its normal size */
body .fr-featured--v3 .fr-showcase__slide:not(:has(.fr-showcase__preview)) { --sc-ox: 0px; --sc-oy: 0px; }

@media (min-width: 1101px) {
    body .fr-featured--v3 .fr-showcase__slide {
        min-height: calc(var(--sc-h) + var(--sc-oy));
        padding-right: calc(clamp(36px, 4.4vw, 64px) + var(--sc-ox));
        padding-bottom: var(--sc-oy);
        grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
    }
    body .fr-featured--v3 .fr-showcase__stage {
        inset: 0 var(--sc-ox) var(--sc-oy) 0;
    }
    body .fr-featured--v3 .fr-showcase__slide::before {
        inset: 18px calc(14px + var(--sc-ox)) calc(40px + var(--sc-oy)) 14px;
    }
    body .fr-featured--v3 .fr-showcase__slide::after {
        right: calc(var(--sc-cut) / -2 + 3px + var(--sc-ox));
    }
    body .fr-featured--v3 .fr-showcase__preview {
        right: 0;
        bottom: 0;
        width: 54%;
        max-height: calc(100% - 96px);
        border-radius: 16px;
        box-shadow:
            0 40px 70px -28px rgba(10, 14, 20, .55),
            0 14px 30px -14px rgba(10, 14, 20, .35),
            0 0 0 1px rgba(255, 255, 255, .55);
    }
    body .fr-featured--v3 .fr-showcase__slide--bubbatia .fr-showcase__preview {
        box-shadow:
            0 40px 70px -28px rgba(43, 20, 72, .55),
            0 14px 30px -14px rgba(43, 20, 72, .32),
            0 0 0 1px rgba(255, 255, 255, .6);
    }
}

@media (max-width: 1100px) {
    body .fr-featured--v3 .fr-showcase { --sc-ox: 0px; --sc-oy: 56px; }
    body .fr-featured--v3 .fr-showcase__stage { inset: 0 0 var(--sc-oy) 0; }
    body .fr-featured--v3 .fr-showcase__slide::before { inset: 18px 14px calc(40px + var(--sc-oy)) 14px; }
    body .fr-featured--v3 .fr-showcase__preview {
        margin: 16px 0 0 24px;
        border-radius: 14px;
        box-shadow:
            0 30px 54px -26px rgba(10, 14, 20, .55),
            0 0 0 1px rgba(255, 255, 255, .55);
    }
    /* the window overlaps the bottom edge of the card */
    body .fr-featured--v3 .fr-showcase__slide { padding-bottom: 0; }
}
@media (max-width: 699px) {
    body .fr-featured--v3 .fr-showcase { --sc-oy: 40px; }
    body .fr-featured--v3 .fr-showcase__preview { margin: 24px 0 0 0; border-radius: 12px; }
}


/* phone: all three project tabs fit on one line.
   The open project shows its name; the other two show just their number. */
@media (max-width: 699px) {
    body .fr-featured--v3 .fr-showcase__nav {
        overflow: visible;
        flex-wrap: nowrap;
        gap: 8px;
        padding: 2px 0 6px;
    }
    body .fr-featured--v3 .fr-showcase__pill:not(.is-active) {
        font-size: 0;
        gap: 0;
        padding: 0 6px;
    }
    body .fr-featured--v3 .fr-showcase__pill:not(.is-active) .fr-showcase__pill-no { font-size: 11px; }
    body .fr-featured--v3 .fr-showcase__pill.is-active { padding: 0 16px 0 6px; }
}

/* =========================================================
   06 · A CLEARER WAY FORWARD — editorial column, floating glass
========================================================= */
body .frayora-why-v3__copy { position: relative; padding-left: 26px; }
body .frayora-why-v3__copy::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    bottom: 5px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--fre-terra) 0%, var(--fre-sand) 60%, rgba(217, 183, 126, 0) 100%);
}
body .frayora-why-v3__lead strong { letter-spacing: -.005em; }

body .frayora-why-v3__visual { animation: freFloat 10s ease-in-out infinite; }
body .frayora-why-v3__links path { stroke-dasharray: 1400; }
html.fre-js .frayora-why-v3__links path { stroke-dashoffset: 1400; }
html.fre-js .frayora-why-v3__stage.is-in .frayora-why-v3__links path { animation: freDraw 2.4s .2s var(--fre-ease) forwards; }
body .frayora-why-v3__links path.l3 { stroke-dasharray: none; stroke-dashoffset: 0 !important; animation: none !important; }

/* =========================================================
   07 · FINAL CTA — open, glowing, no box
========================================================= */
body .home-cta .home-cta__inner { isolation: isolate; }
body .home-cta .home-cta__inner::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    z-index: -1;
    inset: 0 -12%;
    pointer-events: none;
    background:
        radial-gradient(34% 58% at 50% 54%, rgba(255, 255, 255, .78), rgba(255, 255, 255, 0) 72%),
        radial-gradient(30% 56% at 12% 22%, rgba(135, 148, 123, .20), rgba(135, 148, 123, 0) 72%),
        radial-gradient(30% 56% at 90% 92%, rgba(201, 103, 67, .14), rgba(201, 103, 67, 0) 74%),
        radial-gradient(circle farthest-side at 50% 50%,
            rgba(0, 0, 0, 0) 0 36%,
            rgba(217, 183, 126, .38) 36% 36.25%, rgba(0, 0, 0, 0) 36.25% 50%,
            rgba(217, 183, 126, .28) 50% 50.25%, rgba(0, 0, 0, 0) 50.25% 64%,
            rgba(217, 183, 126, .20) 64% 64.25%, rgba(0, 0, 0, 0) 64.25% 78%,
            rgba(217, 183, 126, .13) 78% 78.25%, rgba(0, 0, 0, 0) 78.25%);
    -webkit-mask-image: radial-gradient(ellipse 62% 78% at 50% 50%, #000 40%, rgba(0, 0, 0, 0) 100%);
    mask-image: radial-gradient(ellipse 62% 78% at 50% 50%, #000 40%, rgba(0, 0, 0, 0) 100%);
}
/* the brand marker, centred above the heading */
body .home-cta .home-cta__inner::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 66px;
    width: 34px;
    height: 11px;
    margin-left: -17px;
    background: var(--fre-terra);
    clip-path: polygon(0 0, 70% 0, 100% 100%, 30% 100%);
    -webkit-clip-path: polygon(0 0, 70% 0, 100% 100%, 30% 100%);
}

body .home-cta__button { position: relative; overflow: hidden; isolation: isolate; animation: frePulse 3.2s 1.2s ease-out infinite; }
body .home-cta__button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .34) 50%, transparent 70%);
    translate: -140% 0;
}
body .home-cta__button:hover { animation-play-state: paused; }
body .home-cta__button:hover::before { animation: freSheen .9s var(--fre-ease); }
body .home-cta__button-arrow { display: inline-block; transition: translate .35s var(--fre-ease); }
body .home-cta__button:hover .home-cta__button-arrow { translate: 6px 0; }

/* =========================================================
   08 · HEADER — full-width frosted glass (all pages, all sizes)
   Same layout as before. The bar gets Bubba Tia's soft glass:
   warm translucent colour, strong blur, a bright edge and a
   gentle shadow. Nav text gets a bolder, greener finish.
   On the homepage it is still transparent at the very top.
========================================================= */

html body .site-header {
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}

/* the glass layer */
html body .site-header::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: -1 !important;
    inset: 0 !important;
    width: auto !important;
    pointer-events: none;
    opacity: 1 !important;
    background:
        radial-gradient(60% 180% at 8% 0%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%),
        linear-gradient(100deg, rgba(252, 249, 244, .84) 0%, rgba(250, 244, 235, .76) 55%, rgba(243, 228, 206, .82) 100%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.8);
    backdrop-filter: blur(24px) saturate(1.8);
    border-bottom: 1px solid rgba(255, 255, 255, .72);
    box-shadow:
        0 22px 40px -28px rgba(52, 44, 30, .50),
        inset 0 -1px 0 rgba(217, 183, 126, .26) !important;
    transition: background .35s ease, box-shadow .35s ease, opacity .35s ease;
}

/* the old thin terracotta line goes away */
html body .site-header::after { display: none !important; }

/* ---------- desktop nav text ---------- */
@media screen and (min-width: 1101px) {
    html body .site-header .site-nav > a,
    html body .site-header .nav-dropdown__trigger {
        font-family: "Manrope", "Inter", sans-serif !important;
        font-size: 15.5px !important;
        font-weight: 600 !important;
        letter-spacing: -.012em;
        color: #344532 !important;
    }
    html body .site-header .site-nav > a:hover,
    html body .site-header .site-nav > a:focus-visible,
    html body .site-header .nav-dropdown__trigger:hover,
    html body .site-header .nav-dropdown__trigger:focus-visible,
    html body .site-header .site-nav > a.is-current,
    html body .site-header .nav-dropdown__trigger.is-current { color: #B95B39 !important; }

    html body .site-header .nav-dropdown__trigger span { font-size: 12px; opacity: .7; }

    /* the call-to-action: richer green, soft lift */
    html body .site-header .header-cta {
        font-family: "Manrope", "Inter", sans-serif;
        font-weight: 600;
        background: linear-gradient(135deg, #46573F 0%, #2F3E2D 100%) !important;
        box-shadow: 0 14px 26px -14px rgba(36, 50, 34, .7), inset 0 1px 0 rgba(255, 255, 255, .16) !important;
        transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease, background-color .3s ease, color .3s ease, border-color .3s ease;
    }
    html body .site-header .header-cta:hover {
        transform: translateY(-1px);
        background: linear-gradient(135deg, #D2704A 0%, #B95B39 100%) !important;
        box-shadow: 0 16px 28px -14px rgba(150, 70, 40, .7), inset 0 1px 0 rgba(255, 255, 255, .22) !important;
    }

    /* services dropdown: same glass, rounded */
    html body .site-header .nav-dropdown__menu {
        border-radius: 22px !important;
        padding: 10px !important;
        background: rgba(252, 249, 244, .97) !important;
        border: 1px solid rgba(255, 255, 255, .85) !important;
        box-shadow: 0 30px 60px -28px rgba(52, 44, 30, .5), 0 0 0 1px rgba(217, 183, 126, .22) !important;
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
    }
    html body .site-header .nav-dropdown__menu a {
        border-radius: 14px;
        transition: background-color .25s ease, color .25s ease;
    }
    html body .site-header .nav-dropdown__menu a:hover,
    html body .site-header .nav-dropdown__menu a:focus-visible { background: rgba(201, 103, 67, .09); }
}

/* the homepage at the very top keeps its transparent look (dark veil, no glass) */
html.fr-hdr-js body.home .site-header:not(.is-scrolled)::before {
    bottom: -46px !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: linear-gradient(180deg, rgba(18, 28, 20, .58) 0%, rgba(18, 28, 20, .26) 55%, rgba(18, 28, 20, 0) 100%) !important;
}

@media (prefers-reduced-motion: reduce) {
    html body .site-header::before { transition: none; }
}

/* =========================================================
   TABLET + MOBILE
========================================================= */
@media screen and (max-width: 1100px) {
    body .frayora-why-v3__copy { padding-left: 22px; }
    body .home-cta .home-cta__inner::after { top: 54px; }
}
@media screen and (max-width: 599px) {
    body .frayora-why-v3__copy { padding-left: 0; }
    body .frayora-why-v3__copy::before { display: none; }
    body .home-cta .home-cta__inner::before { inset: 0 -30%; }
    body .home-cta .home-cta__inner::after { top: 42px; }
    body .frayora-biab-v4__icon { width: 52px; height: 52px; }
}

/* mobile: the packages stack (nothing to scroll), so no scrollbar */
@media screen and (max-width: 699px) {
    body .frayora-biab-v4__packages {
        overflow: visible !important;
        scrollbar-width: none;
    }
    body .frayora-biab-v4__packages::-webkit-scrollbar { display: none; }
}

/* =========================================================
   RESPECT "REDUCE MOTION"
========================================================= */
@media (prefers-reduced-motion: reduce) {
    html.fre-js .fre-rv { opacity: 1; translate: 0 0; transition: none; }
    html.fre-js .frayora-connected-v3__wave path,
    html.fre-js .frayora-why-v3__links path { stroke-dashoffset: 0; animation: none !important; }
    body .home-approach__visual img,
    body .home-approach__arrow,
    body .frayora-why-v3__visual,
    body .home-cta__button { animation: none !important; }
}

/* END — HOMEPAGE ELEVATION */


/* =========================================================
   FRAYORA — BUSINESS-IN-A-BOX ELEVATION v2
   PASTE AT THE VERY BOTTOM OF main.css (after everything else)

   - No wording is changed. No new images are needed.
   - The hero picture background is replaced with a coded one:
     layered gradients, glass discs, slowly turning orbit rings
     and a fine dot grid (same family as the Bubba Tia hero).
   - Every section below gets a more finished, consistent look.
   - Desktop, tablet and mobile are all handled in this block.
========================================================= */

:root {
    --biz-ink:        #1F211D;
    --biz-deep:       #1B271F;
    --biz-olive:      #536742;
    --biz-sage:       #87947B;
    --biz-sand:       #D9B77E;
    --biz-terra:      #C96743;
    --biz-terra-2:    #D66A43;
    --biz-cream:      #FAF7F2;
    --biz-ease:       cubic-bezier(.22, .8, .24, 1);
}

@keyframes bizSpin   { to { rotate: 360deg; } }
@keyframes bizSpinR  { to { rotate: -360deg; } }
@keyframes bizDrift  { 0%,100% { translate: 0 0; } 50% { translate: 0 -16px; } }
@keyframes bizPulse  { 0% { scale: .96; opacity: .55; } 70%,100% { scale: 1.22; opacity: 0; } }
@keyframes bizSheen  { 0%,60% { translate: -130% 0; } 100% { translate: 130% 0; } }
@keyframes bizNudge  { 0%,100% { translate: 0 0; } 50% { translate: 4px 0; } }

/* ---------------------------------------------------------
   01 · HERO — coded background (replaces the picture)
--------------------------------------------------------- */

html body #biab-hero.biab-hero {
    --orb-x: 69%;
    --orb-y: 312px;
    --orb-d: 1080px;
    isolation: isolate;
    background-color: #1F2C23 !important;
    background-image:
        radial-gradient(46% 72% at var(--orb-x) 52%, rgba(217,183,126,.30) 0%, rgba(201,103,67,.11) 44%, rgba(201,103,67,0) 74%),
        radial-gradient(42% 62% at 3% 0%, rgba(135,148,123,.36) 0%, rgba(135,148,123,0) 70%),
        radial-gradient(38% 52% at 30% 112%, rgba(201,103,67,.18) 0%, rgba(201,103,67,0) 70%),
        linear-gradient(162deg, #1A261E 0%, #26332A 48%, #34442F 100%) !important;
    background-size: auto !important;
    background-position: 0 0 !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
}

/* orbit rings — thin concentric arcs with a few small "planets" */
html body #biab-hero.biab-hero::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 0 !important;
    top: calc(var(--orb-y) - var(--orb-d) / 2) !important;
    left: calc(var(--orb-x) - var(--orb-d) / 2) !important;
    right: auto !important;
    bottom: auto !important;
    width: var(--orb-d) !important;
    height: var(--orb-d) !important;
    pointer-events: none !important;
    opacity: 1 !important;
    transform: none !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' fill='none' stroke-width='1.6'%3E%3Ccircle cx='500' cy='500' r='150' stroke='rgb(232,216,192)' stroke-opacity='.20'/%3E%3Ccircle cx='500' cy='500' r='236' stroke='rgb(217,183,126)' stroke-opacity='.42' stroke-dasharray='2 9' stroke-linecap='round'/%3E%3Ccircle cx='500' cy='500' r='330' stroke='rgb(232,216,192)' stroke-opacity='.17'/%3E%3Ccircle cx='500' cy='500' r='432' stroke='rgb(135,148,123)' stroke-opacity='.34'/%3E%3Ccircle cx='736' cy='500' r='8' fill='rgb(214,106,67)' stroke='none'/%3E%3Ccircle cx='500' cy='170' r='5.5' fill='rgb(217,183,126)' stroke='none'/%3E%3Ccircle cx='215' cy='665' r='5' fill='rgb(232,216,192)' stroke='none' fill-opacity='.8'/%3E%3Ccircle cx='500' cy='932' r='6' fill='rgb(135,148,123)' stroke='none'/%3E%3C/svg%3E") center / 100% 100% no-repeat !important;
    -webkit-mask-image: radial-gradient(closest-side, #000 62%, rgba(0,0,0,0) 100%);
            mask-image: radial-gradient(closest-side, #000 62%, rgba(0,0,0,0) 100%);
    animation: bizSpin 140s linear infinite;
}

/* fine dot grid that fades out away from the box */
html body #biab-hero.biab-hero::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 1 !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    pointer-events: none !important;
    opacity: 1 !important;
    transform: none !important;
    background: radial-gradient(circle at 1px 1px, rgba(248,243,235,.22) 1px, rgba(248,243,235,0) 1.7px) 0 0 / 30px 30px !important;
    -webkit-mask-image: radial-gradient(52% 78% at var(--orb-x) 48%, #000 0%, rgba(0,0,0,0) 78%);
            mask-image: radial-gradient(52% 78% at var(--orb-x) 48%, #000 0%, rgba(0,0,0,0) 78%);
}

/* glass discs (same idea as the Bubba Tia hero arcs) */
html body .biab-hero__inner::before,
html body .biab-hero__inner::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}
html body .biab-hero__inner::before {
    left: -17%;
    top: -34%;
    width: 520px;
    height: 520px;
    background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(135,148,123,.05) 60%, rgba(135,148,123,0));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.11), 0 60px 100px -60px rgba(0,0,0,.55);
    animation: bizDrift 16s ease-in-out infinite;
}
html body .biab-hero__inner::after {
    right: -9%;
    bottom: -30%;
    width: 360px;
    height: 360px;
    background: linear-gradient(200deg, rgba(214,106,67,.34), rgba(201,103,67,.05) 70%);
    box-shadow: inset 0 0 0 1px rgba(255,205,175,.24), 0 40px 80px -50px rgba(0,0,0,.5);
    animation: bizDrift 20s ease-in-out -7s infinite reverse;
}

/* the box: warm halo behind it + soft ground shadow */
html body .biab-hero__visual { isolation: isolate; }
html body .biab-hero__visual::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -8% -6% -12%;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(244,214,160,.36) 0%, rgba(217,183,126,.12) 55%, rgba(217,183,126,0) 78%);
}
html body .biab-hero__visual::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 14%;
    right: 10%;
    bottom: -3%;
    height: 9%;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(0,0,0,.42), rgba(0,0,0,0));
    filter: blur(8px);
}

/* hero text polish */
html body .biab-hero__title {
    text-shadow: 0 2px 40px rgba(0,0,0,.28);
}
html body .biab-hero__statement {
    position: relative;
    padding-left: 18px;
}
html body .biab-hero__statement::before {
    content: "";
    position: absolute;
    left: 0;
    top: .2em;
    bottom: .2em;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--biz-sand), var(--biz-terra));
}

/* hero button — glass pill with a slow sheen */
html body .biab-hero__button {
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05)) !important;
    border: 1px solid rgba(232,216,192,.55) !important;
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    box-shadow: 0 16px 34px -18px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.28) !important;
    transition: transform .35s var(--biz-ease), box-shadow .35s var(--biz-ease), border-color .35s ease, background .35s ease;
}
html body .biab-hero__button::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 55%;
    pointer-events: none;
    background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.22), rgba(255,255,255,0));
    translate: -130% 0;
    animation: bizSheen 6s ease-in-out 2s infinite;
}
html body .biab-hero__button span { display: inline-block; animation: bizNudge 2.6s ease-in-out infinite; }
@media (hover: hover) {
    html body .biab-hero__button:hover {
        transform: translateY(-2px);
        border-color: rgba(217,183,126,.95) !important;
        box-shadow: 0 22px 40px -18px rgba(0,0,0,.75), 0 0 0 4px rgba(217,183,126,.12), inset 0 1px 0 rgba(255,255,255,.34) !important;
    }
}

/* tablet */
@media screen and (max-width: 1100px) {
    html body #biab-hero.biab-hero { --orb-x: 70%; --orb-y: 292px; --orb-d: 900px; }
    html body .biab-hero__inner::before { left: -22%; top: -10%; width: 420px; height: 420px; }
    html body .biab-hero__inner::after  { right: -14%; bottom: -12%; width: 300px; height: 300px; }
}
/* phone */
@media screen and (max-width: 640px) {
    html body #biab-hero.biab-hero { --orb-x: 58%; --orb-y: 232px; --orb-d: 700px; }
    html body #biab-hero.biab-hero::after { background-size: 24px 24px !important; }
    html body .biab-hero__inner::before { left: -34%; top: -6%; width: 300px; height: 300px; }
    html body .biab-hero__inner::after  { right: -20%; bottom: -10%; width: 230px; height: 230px; }
}

/* ---------------------------------------------------------
   02 · INSIDE THE BOX
--------------------------------------------------------- */

html body .biab-foundation {
    background-color: #F8F3EB !important;
    background-image:
        radial-gradient(46% 38% at 96% 6%, rgba(135,148,123,.16), rgba(135,148,123,0) 72%),
        radial-gradient(40% 36% at 0% 100%, rgba(217,183,126,.20), rgba(217,183,126,0) 72%) !important;
}

/* every item gets a fine top rule with a terracotta marker that grows on hover */
html body .biab-foundation__item {
    position: relative;
    padding-top: 26px;
    border-top: 1px solid rgba(83,103,66,.20);
    transition: translate .45s var(--biz-ease);
}
html body .biab-foundation__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: -1px;
    width: 38px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--biz-terra), var(--biz-sand));
    transition: width .55s var(--biz-ease);
}
html body .biab-foundation__icon {
    box-shadow:
        0 16px 28px -14px rgba(120,84,50,.42),
        inset 0 1px 0 rgba(255,255,255,.95),
        inset 0 0 0 1px rgba(255,255,255,.7) !important;
    transition: transform .45s var(--biz-ease), box-shadow .45s var(--biz-ease);
}
html body .biab-foundation__item h3 { letter-spacing: -.012em; }
@media (hover: hover) {
    html body .biab-foundation__item:hover { translate: 0 -4px; }
    html body .biab-foundation__item:hover::before { width: 100%; }
    html body .biab-foundation__item:hover .biab-foundation__icon {
        transform: translateY(-3px) scale(1.05);
        box-shadow: 0 22px 34px -14px rgba(120,84,50,.5), inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255,255,255,.8) !important;
    }
}

/* ---------------------------------------------------------
   03 · THE DIFFERENCE — same coded language as the hero
--------------------------------------------------------- */

html body .biab-transformation__inner { position: relative; z-index: 2; }

html body .biab-transformation::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 1px 1px, rgba(248,243,235,.17) 1px, rgba(248,243,235,0) 1.7px) 0 0 / 30px 30px;
    -webkit-mask-image: radial-gradient(50% 80% at 74% 52%, #000, rgba(0,0,0,0) 78%);
            mask-image: radial-gradient(50% 80% at 74% 52%, #000, rgba(0,0,0,0) 78%);
}

html body .biab-transformation__diagram { isolation: isolate; }

/* two thin orbit rings around the pair of circles */
html body .biab-transformation__diagram::before,
html body .biab-transformation__diagram::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    border-radius: 50%;
    pointer-events: none;
}
html body .biab-transformation__diagram::before {
    width: 128%;
    aspect-ratio: 1;
    border: 1px dashed rgba(217,183,126,.34);
    animation: bizSpin 120s linear infinite;
}
html body .biab-transformation__diagram::after {
    width: 156%;
    aspect-ratio: 1;
    border: 1px solid rgba(232,216,192,.12);
}

/* the "more" circle breathes a soft ring of light */
html body .biab-transformation__circle--more { position: relative; }
html body .biab-transformation__circle--more::before {
    content: "";
    position: absolute;
    inset: -2px;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
    border: 2px solid rgba(214,106,67,.55);
    animation: bizPulse 4.2s ease-out infinite;
}
html body .biab-transformation__circle {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.28),
        inset 0 -26px 50px -26px rgba(0,0,0,.28),
        0 36px 70px -34px rgba(0,0,0,.6) !important;
}
html body .biab-transformation__diagram-arrow {
    text-shadow: 0 6px 18px rgba(0,0,0,.35);
}
html body .biab-transformation__statement { position: relative; }

/* ---------------------------------------------------------
   04 · HOW IT WORKS
--------------------------------------------------------- */

html body .biab-journey {
    background-image:
        radial-gradient(44% 46% at 0% 0%, rgba(217,183,126,.16), rgba(217,183,126,0) 72%),
        radial-gradient(38% 42% at 100% 100%, rgba(135,148,123,.14), rgba(135,148,123,0) 72%) !important;
}
html body .biab-journey__step {
    position: relative;
    padding-top: 26px;
    border-top: 1px solid rgba(83,103,66,.20);
    transition: translate .45s var(--biz-ease);
}
html body .biab-journey__step::before {
    content: "";
    position: absolute;
    left: 0;
    top: -1px;
    width: 38px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--biz-terra), var(--biz-sand));
    transition: width .55s var(--biz-ease);
}
html body .biab-journey__icon {
    box-shadow: 0 16px 28px -14px rgba(83,103,66,.42), inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.7) !important;
    transition: transform .45s var(--biz-ease);
}
@media (hover: hover) {
    html body .biab-journey__step:hover { translate: 0 -4px; }
    html body .biab-journey__step:hover::before { width: 100%; }
    html body .biab-journey__step:hover .biab-journey__icon { transform: translateY(-3px) scale(1.05); }
}

/* closing line becomes a calm glass pill */
html body .biab-journey__closing { display: flex; justify-content: center; }
html body .biab-journey__closing p {
    display: inline-block;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 16px 30px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.5));
    border: 1px solid rgba(217,183,126,.45);
    box-shadow: 0 22px 40px -28px rgba(83,70,40,.45), inset 0 1px 0 #fff;
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
}

/* ---------------------------------------------------------
   05 · NOT EVERY BUSINESS NEEDS THE SAME BOX
--------------------------------------------------------- */

html body .biab-stages {
    background-image:
        radial-gradient(40% 44% at 100% 0%, rgba(201,103,67,.12), rgba(201,103,67,0) 72%),
        radial-gradient(42% 46% at 0% 100%, rgba(135,148,123,.16), rgba(135,148,123,0) 72%) !important;
}
html body .biab-stages__stage {
    transition: translate .5s var(--biz-ease), box-shadow .5s var(--biz-ease);
    box-shadow: 0 30px 50px -34px rgba(70,54,34,.45), inset 0 1px 0 rgba(255,255,255,.55);
}
@media (hover: hover) {
    html body .biab-stages__stage:hover {
        translate: 0 -8px;
        box-shadow: 0 44px 64px -36px rgba(70,54,34,.55), inset 0 1px 0 rgba(255,255,255,.6);
    }
}
html body .biab-stages__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
html body .biab-stages__path-line {
    stroke-dasharray: 2 8;
    stroke-linecap: round;
    stroke-opacity: .6;
}

/* ---------------------------------------------------------
   06 · PACKAGES & INVESTMENT
--------------------------------------------------------- */

html body .biab-packages__card {
    border: 1px solid rgba(217,183,126,.34) !important;
    box-shadow: 0 34px 60px -38px rgba(70,54,34,.50), inset 0 1px 0 rgba(255,255,255,.9) !important;
    transition: translate .5s var(--biz-ease), box-shadow .5s var(--biz-ease);
}
@media (hover: hover) {
    html body .biab-packages__card:hover {
        translate: 0 -8px;
        box-shadow: 0 48px 74px -38px rgba(70,54,34,.60), inset 0 1px 0 #fff !important;
    }
}
/* gradient accent along the top of each card */
html body .biab-packages__card::before {
    content: "";
    position: absolute;
    z-index: 2;
    left: 0; right: 0; top: 0;
    height: 3px;
    pointer-events: none;
    background: linear-gradient(90deg, var(--biz-sage), var(--biz-sand));
}
html body .biab-packages__card--growth::before   { background: linear-gradient(90deg, var(--biz-terra), var(--biz-sand)); }
html body .biab-packages__card--connected::before { background: linear-gradient(90deg, var(--biz-sand), var(--biz-sage)); }

/* the middle (Growth) package stands slightly forward on desktop */
@media screen and (min-width: 1101px) {
    html body .biab-packages__card--growth {
        margin-top: -14px !important;
        border-color: rgba(201,103,67,.40) !important;
        box-shadow: 0 54px 84px -40px rgba(150,70,40,.50), 0 0 0 5px rgba(201,103,67,.07), inset 0 1px 0 #fff !important;
    }
}
html body .biab-packages__price strong {
    letter-spacing: -.035em;
}
html body .biab-packages__mark {
    box-shadow: 0 14px 24px -12px rgba(83,103,66,.45), inset 0 1px 0 rgba(255,255,255,.9) !important;
}

/* connected (dark) card — fine rings in the corner */
html body .biab-packages__card--connected { overflow: hidden; }
html body .biab-packages__card--connected::after {
    content: "";
    position: absolute;
    z-index: 0;
    right: -90px;
    top: -90px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(217,183,126,.16), rgba(217,183,126,0) 70%);
    border: 1px solid rgba(232,216,192,.16);
    outline: 1px solid rgba(232,216,192,.09);
    outline-offset: 36px;
}
html body .biab-packages__card--connected > * { position: relative; z-index: 1; }

/* package buttons */
html body .biab-packages__button {
    transition: transform .35s var(--biz-ease), box-shadow .35s var(--biz-ease), filter .35s ease;
}
@media (hover: hover) {
    html body .biab-packages__button:hover {
        transform: translateY(-2px);
        box-shadow: 0 18px 30px -16px rgba(40,50,38,.6);
        filter: saturate(1.08);
    }
}

/* timeline note + fine print read as one calm, organised block */
html body .biab-packages__schedule {
    position: relative;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
    padding: 22px 30px 22px 40px !important;
    text-align: left !important;
    border-radius: 18px 18px 18px 6px;
    background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.46));
    border: 1px solid rgba(217,183,126,.38);
    box-shadow: 0 24px 40px -32px rgba(70,54,34,.4), inset 0 1px 0 #fff;
}
html body .biab-packages__schedule::before {
    content: "";
    position: absolute;
    left: 14px; top: 18px; bottom: 18px;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--biz-terra), var(--biz-sand));
}

/* ---------------------------------------------------------
   07 · BUILT FOR REAL TEAMS
--------------------------------------------------------- */

html body .biab-proposal__card {
    position: relative;
    border: 1px solid rgba(217,183,126,.34) !important;
    box-shadow: 0 30px 54px -36px rgba(70,54,34,.45), inset 0 1px 0 rgba(255,255,255,.9) !important;
    transition: translate .5s var(--biz-ease), box-shadow .5s var(--biz-ease);
}
html body .biab-proposal__card::before {
    content: "";
    position: absolute;
    left: 28px;
    top: -1px;
    width: 38px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, var(--biz-terra), var(--biz-sand));
    transition: width .55s var(--biz-ease);
}
@media (hover: hover) {
    html body .biab-proposal__card:hover {
        translate: 0 -8px;
        box-shadow: 0 44px 66px -38px rgba(70,54,34,.55), inset 0 1px 0 #fff !important;
    }
    html body .biab-proposal__card:hover::before { width: 84px; }
}
html body .biab-proposal__number {
    box-shadow: 0 12px 22px -10px rgba(40,60,40,.55), 0 0 0 4px rgba(83,103,66,.10);
}

/* ---------------------------------------------------------
   08 · READY WHEN YOU ARE — open design (no box)
--------------------------------------------------------- */

html body .biab-final-cta__inner { position: relative; z-index: 2; isolation: isolate; }

/* soft halo + two thin rings behind the headline */
html body .biab-final-cta__inner::before,
html body .biab-final-cta__inner::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 46%;
    translate: -50% -50%;
    border-radius: 50%;
    pointer-events: none;
}
html body .biab-final-cta__inner::before {
    width: min(980px, 118vw);
    aspect-ratio: 1;
    border: 1px solid rgba(201,103,67,.20);
    box-shadow: 0 0 0 70px rgba(201,103,67,.035), 0 0 0 71px rgba(201,103,67,.12);
    -webkit-mask-image: radial-gradient(closest-side, #000 55%, rgba(0,0,0,0) 100%);
            mask-image: radial-gradient(closest-side, #000 55%, rgba(0,0,0,0) 100%);
}
html body .biab-final-cta__inner::after {
    width: min(560px, 90vw);
    aspect-ratio: 1;
    background: radial-gradient(closest-side, rgba(255,255,255,.7), rgba(255,255,255,0) 72%);
}

html body .biab-final-cta__button {
    position: relative;
    overflow: hidden;
    box-shadow: 0 22px 40px -18px rgba(180,80,45,.65), inset 0 1px 0 rgba(255,255,255,.3) !important;
    transition: transform .35s var(--biz-ease), box-shadow .35s var(--biz-ease);
}
html body .biab-final-cta__button::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 55%;
    pointer-events: none;
    background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.34), rgba(255,255,255,0));
    translate: -130% 0;
    animation: bizSheen 5.5s ease-in-out 1.5s infinite;
}
html body .biab-final-cta__button span { display: inline-block; animation: bizNudge 2.6s ease-in-out infinite; }
@media (hover: hover) {
    html body .biab-final-cta__button:hover {
        transform: translateY(-3px);
        box-shadow: 0 30px 50px -18px rgba(180,80,45,.75), 0 0 0 5px rgba(201,103,67,.14), inset 0 1px 0 rgba(255,255,255,.34) !important;
    }
}

/* ---------------------------------------------------------
   MOBILE — packages carousel keeps its shadows, tidy spacing
--------------------------------------------------------- */

@media screen and (max-width: 1100px) {
    html body .biab-packages__grid { padding-bottom: 36px; }
    html body .biab-journey__closing p { padding: 14px 24px; }
}
@media screen and (max-width: 599px) {
    html body .biab-journey__closing p { border-radius: 24px; }
    html body .biab-packages__schedule { padding: 18px 20px 18px 34px !important; }
    html body .biab-transformation::after { background-size: 24px 24px; }
}

/* ---------------------------------------------------------
   Reduced motion
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html body #biab-hero.biab-hero::before,
    html body .biab-hero__inner::before,
    html body .biab-hero__inner::after,
    html body .biab-hero__button::after,
    html body .biab-hero__button span,
    html body .biab-transformation__diagram::before,
    html body .biab-transformation__circle--more::before,
    html body .biab-final-cta__button::after,
    html body .biab-final-cta__button span { animation: none !important; }
}

/* END — BUSINESS-IN-A-BOX ELEVATION v2 */

/* OPTIONAL — paste only if you want NO top-line accents on the
   Inside the Box, How it works and Built for real teams items */
html body .biab-foundation__item,
html body .biab-journey__step { border-top: 0 !important; padding-top: 0 !important; }
html body .biab-foundation__item::before,
html body .biab-journey__step::before,
html body .biab-proposal__card::before,
html body .biab-packages__card::before { display: none !important; }



/* =========================================================
   FRAYORA — WEBSITE & DIGITAL INFRASTRUCTURE ELEVATION v2
   PASTE AT THE VERY BOTTOM OF main.css (after everything else)

   - No wording is changed. No new images are needed.
   - The hero picture background is replaced with a coded one:
     layered gradients, a fine wireframe grid, soft rings, glass
     "window panes" and glass discs (same family as Business-in-a-Box
     and Bubba Tia, with a "layout / wireframe" accent for this page).
   - Every section below gets a more finished, consistent look.
   - Desktop, tablet and mobile are all handled in this block.
========================================================= */

:root {
    --wd-sand:   #D9B77E;
    --wd-terra:  #C96743;
    --wd-sage:   #87947B;
    --wd-ease:   cubic-bezier(.22, .8, .24, 1);
}

@keyframes wdDrift  { 0%,100% { translate: 0 0; } 50% { translate: 0 -16px; } }
@keyframes wdPane   { 0%,100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes wdPulse  { 0% { scale: .96; opacity: .55; } 70%,100% { scale: 1.28; opacity: 0; } }
@keyframes wdSheen  { 0%,60% { translate: -130% 0; } 100% { translate: 130% 0; } }
@keyframes wdNudge  { 0%,100% { translate: 0 0; } 50% { translate: 4px 0; } }
@keyframes wdSpin   { to { rotate: 360deg; } }

/* ---------------------------------------------------------
   01 · HERO — coded background (replaces the picture)
--------------------------------------------------------- */

html body section.digital-hero.digital-hero {
    --hx: 68%;
    --hy: 302px;
    isolation: isolate;
    background-color: #1E2B23 !important;
    background-image:
        radial-gradient(44% 70% at var(--hx) 50%, rgba(217,183,126,.26) 0%, rgba(201,103,67,.08) 46%, rgba(201,103,67,0) 74%),
        radial-gradient(42% 64% at 2% 0%, rgba(135,148,123,.38) 0%, rgba(135,148,123,0) 70%),
        radial-gradient(40% 56% at 22% 112%, rgba(83,103,66,.46) 0%, rgba(83,103,66,0) 70%),
        linear-gradient(160deg, #18241C 0%, #24322A 50%, #33442F 100%) !important;
    background-size: auto !important;
    background-position: 0 0 !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
}

/* the old dark overlay layer is switched off (keeps the hero calm) */
html body section.digital-hero.digital-hero::before { display: none !important; }

/* soft concentric rings around the visual */
html body section.digital-hero.digital-hero::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 1 !important;
    top: calc(var(--hy) - 540px) !important;
    left: calc(var(--hx) - 540px) !important;
    right: auto !important;
    bottom: auto !important;
    width: 1080px !important;
    height: 1080px !important;
    pointer-events: none !important;
    opacity: 1 !important;
    transform: none !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' fill='none' stroke-width='1.6'%3E%3Ccircle cx='500' cy='500' r='238' stroke='rgb(217,183,126)' stroke-opacity='.40' stroke-dasharray='2 9' stroke-linecap='round'/%3E%3Ccircle cx='500' cy='500' r='350' stroke='rgb(232,216,192)' stroke-opacity='.14'/%3E%3C/svg%3E") center / 100% 100% no-repeat !important;
    -webkit-mask-image: radial-gradient(closest-side, #000 70%, rgba(0,0,0,0) 100%);
            mask-image: radial-gradient(closest-side, #000 70%, rgba(0,0,0,0) 100%);
}

/* glass discs */
html body .digital-hero__inner::before,
html body .digital-hero__inner::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}
html body .digital-hero__inner::before {
    left: -17%;
    top: -34%;
    width: 520px;
    height: 520px;
    background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(135,148,123,.05) 60%, rgba(135,148,123,0));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.11), 0 60px 100px -60px rgba(0,0,0,.55);
    animation: wdDrift 16s ease-in-out infinite;
}
html body .digital-hero__inner::after {
    right: -9%;
    bottom: -30%;
    width: 360px;
    height: 360px;
    background: linear-gradient(200deg, rgba(214,106,67,.32), rgba(201,103,67,.05) 70%);
    box-shadow: inset 0 0 0 1px rgba(255,205,175,.22), 0 40px 80px -50px rgba(0,0,0,.5);
    animation: wdDrift 20s ease-in-out -7s infinite reverse;
}
html body .digital-hero__inner { z-index: 2; }

/* no extra panes behind the visual: the image already has its own glass.
   (switched off explicitly, so this works even if the older v2 block is still in main.css) */
html body .digital-hero__visual::before,
html body .digital-hero__visual::after {
    content: none !important;
    display: none !important;
    background: none !important;
    box-shadow: none !important;
    animation: none !important;
}

/* text shield: rings and grid never touch the words */
html body .digital-hero__content::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -60px -90px -60px -140px;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(27,39,31,.78) 0%, rgba(27,39,31,.5) 55%, rgba(27,39,31,0) 100%);
}

/* hero text polish */
html body .digital-hero__title { text-shadow: 0 2px 40px rgba(0,0,0,.28); }
html body .digital-hero__statement {
    position: relative;
    padding-left: 18px;
}
html body .digital-hero__statement::before {
    content: "";
    position: absolute;
    left: 0; top: .2em; bottom: .2em;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--wd-sand), var(--wd-terra));
}

/* hero button — glass pill with a slow sheen */
html body .digital-hero__button {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05)) !important;
    border: 1px solid rgba(232,216,192,.55) !important;
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    box-shadow: 0 16px 34px -18px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.28) !important;
    transition: transform .35s var(--wd-ease), box-shadow .35s var(--wd-ease), border-color .35s ease;
}
html body .digital-hero__button::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 55%;
    pointer-events: none;
    background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.22), rgba(255,255,255,0));
    translate: -130% 0;
    animation: wdSheen 6s ease-in-out 2s infinite;
}
html body .digital-hero__button span { display: inline-block; animation: wdNudge 2.6s ease-in-out infinite; }
@media (hover: hover) {
    html body .digital-hero__button:hover {
        transform: translateY(-2px);
        border-color: rgba(217,183,126,.95) !important;
        box-shadow: 0 22px 40px -18px rgba(0,0,0,.75), 0 0 0 4px rgba(217,183,126,.12), inset 0 1px 0 rgba(255,255,255,.34) !important;
    }
}

/* tablet */
@media screen and (max-width: 1100px) {
    html body section.digital-hero.digital-hero { --hx: 72%; --hy: 205px; }
    html body section.digital-hero.digital-hero::after { width: 900px !important; height: 900px !important; top: calc(var(--hy) - 450px) !important; left: calc(var(--hx) - 450px) !important; }
    html body .digital-hero__inner::before { left: -22%; top: -10%; width: 420px; height: 420px; }
    html body .digital-hero__inner::after  { right: -14%; bottom: -12%; width: 300px; height: 300px; }
    html body .digital-hero__content::before { inset: -40px -40px -40px -40px; }
}
@media screen and (max-width: 820px) {
    html body section.digital-hero.digital-hero { --hx: 72%; --hy: 175px; }
}
/* phone */
@media screen and (max-width: 640px) {
    html body section.digital-hero.digital-hero { --hx: 52%; --hy: 125px; }
        html body section.digital-hero.digital-hero::after { width: 640px !important; height: 640px !important; top: calc(var(--hy) - 320px) !important; left: calc(var(--hx) - 320px) !important; }
    html body .digital-hero__inner::before { left: -34%; top: -6%; width: 300px; height: 300px; }
    html body .digital-hero__inner::after  { right: -20%; bottom: -10%; width: 230px; height: 230px; }
}

/* ---------------------------------------------------------
   02 · WHAT WE DESIGN — four soft glass cards
--------------------------------------------------------- */

html body .digital-design__grid { gap: 22px 22px; align-items: stretch; }
html body .digital-design__item {
    padding: 22px 24px 26px !important;
    border-radius: 26px 26px 26px 8px;
    height: 100%;
    box-sizing: border-box;
    background: linear-gradient(155deg, rgba(255,255,255,.86), rgba(255,255,255,.42)) !important;
    border: 1px solid rgba(217,183,126,.34) !important;
    box-shadow: 0 30px 50px -38px rgba(70,54,34,.5), inset 0 1px 0 rgba(255,255,255,.95);
    transition: translate .5s var(--wd-ease), box-shadow .5s var(--wd-ease), border-color .4s ease;
}
html body .digital-design__icon {
    box-shadow: 0 14px 26px -12px rgba(70,54,34,.4), 0 0 0 5px rgba(217,183,126,.14);
    transition: scale .5s var(--wd-ease);
}
@media (hover: hover) {
    html body .digital-design__item:hover {
        translate: 0 -6px;
        border-color: rgba(201,103,67,.4) !important;
        box-shadow: 0 42px 60px -36px rgba(70,54,34,.55), inset 0 1px 0 #fff;
    }
    html body .digital-design__item:hover .digital-design__icon { scale: 1.07; }
}
/* soft sage glow behind the cards */
html body .digital-design__grid { position: relative; isolation: isolate; }
html body .digital-design__grid::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -40px -60px -40px -40px;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(135,148,123,.16), rgba(135,148,123,0));
}

/* ---------------------------------------------------------
   03 · THE IMPACT — richer cards
--------------------------------------------------------- */

html body .digital-benefits__card {
    border: 1px solid rgba(217,183,126,.30) !important;
    box-shadow: 0 34px 56px -40px rgba(70,54,34,.55), inset 0 1px 0 rgba(255,255,255,.95);
    transition: translate .5s var(--wd-ease), box-shadow .5s var(--wd-ease), border-color .4s ease;
}
html body .digital-benefits__visual {
    box-shadow: 0 16px 28px -14px rgba(70,54,34,.4), 0 0 0 6px rgba(217,183,126,.14);
    transition: scale .5s var(--wd-ease);
}
html body .digital-benefits__number {
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(201,103,67,.09);
    border: 1px solid rgba(201,103,67,.18);
    font-weight: 700;
    letter-spacing: .08em;
}
@media (hover: hover) {
    html body .digital-benefits__card:hover {
        translate: 0 -8px;
        border-color: rgba(201,103,67,.38) !important;
        box-shadow: 0 46px 66px -38px rgba(70,54,34,.6), inset 0 1px 0 #fff;
    }
    html body .digital-benefits__card:hover .digital-benefits__visual { scale: 1.08; }
}

/* ---------------------------------------------------------
   04 · WEBSITE AS INFRASTRUCTURE — diagram in a glass panel
--------------------------------------------------------- */

html body .digital-system__diagram {
    padding: 30px 28px 26px;
    margin: -30px -28px -26px;
    border-radius: 34px;
    background:
        radial-gradient(circle at 1px 1px, rgba(83,103,66,.16) 1.2px, rgba(83,103,66,0) 1.6px) 0 0 / 22px 22px,
        linear-gradient(160deg, rgba(255,255,255,.82), rgba(255,255,255,.34));
    border: 1px solid rgba(217,183,126,.36);
    box-shadow: 0 44px 70px -46px rgba(70,54,34,.55), inset 0 1px 0 rgba(255,255,255,.95);
}
html body .digital-system__icon {
    box-shadow: 0 14px 24px -12px rgba(70,54,34,.4), 0 0 0 5px rgba(217,183,126,.14);
    transition: translate .4s var(--wd-ease), scale .4s var(--wd-ease);
}
@media (hover: hover) {
    html body .digital-system__node:hover .digital-system__icon { translate: 0 -5px; scale: 1.06; }
}
html body .digital-system__connector--top,
html body .digital-system__connector--bottom { opacity: 1; filter: saturate(1.4); }

/* the website card: glowing, with a slow pulse ring */
html body .digital-system__website {
    box-shadow:
        0 30px 50px -22px rgba(20,32,24,.7),
        0 0 0 10px rgba(217,183,126,.20),
        0 0 0 22px rgba(217,183,126,.10),
        inset 0 1px 0 rgba(255,255,255,.16);
    overflow: visible;
}
html body .digital-system__website::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: 14px;
    border: 1.5px solid rgba(201,103,67,.55);
    pointer-events: none;
    animation: wdPulse 3.6s ease-out infinite;
}
html body .digital-system__website-bar { border-radius: 12px 12px 0 0; }
html body .digital-system__website-content strong { letter-spacing: .06em; }

html body .digital-system__footer { margin-top: 30px; }

/* ---------------------------------------------------------
   05 · OUR WEBSITE PROCESS
--------------------------------------------------------- */

html body .digital-process__icon-wrap .digital-process__icon,
html body .digital-process__icon-wrap {
    transition: translate .45s var(--wd-ease), scale .45s var(--wd-ease);
}
html body .digital-process__icon-wrap {
    filter: drop-shadow(0 14px 18px rgba(70,54,34,.22));
}
@media (hover: hover) {
    html body .digital-process__step:hover .digital-process__icon-wrap { translate: 0 -6px; scale: 1.07; }
}
html body .digital-process__support {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 14px 30px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.45));
    border: 1px solid rgba(217,183,126,.4);
    box-shadow: 0 20px 34px -24px rgba(70,54,34,.5), inset 0 1px 0 rgba(255,255,255,.95);
    text-align: center;
}

/* ---------------------------------------------------------
   06 · FINAL CTA — halo and rings behind the headline
--------------------------------------------------------- */

html body .digital-final-cta__inner { isolation: isolate; }
html body .digital-final-cta__inner::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 46%;
    translate: -50% -50%;
    width: min(1300px, 190vw);
    aspect-ratio: 1;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1300 1300' fill='none' stroke-width='1.6'%3E%3Ccircle cx='650' cy='650' r='500' stroke='rgb(201,103,67)' stroke-opacity='.34'/%3E%3Ccircle cx='650' cy='650' r='572' stroke='rgb(217,183,126)' stroke-opacity='.40' stroke-dasharray='2 9' stroke-linecap='round'/%3E%3Ccircle cx='650' cy='650' r='644' stroke='rgb(201,103,67)' stroke-opacity='.16'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    opacity: .85;
}
html body .digital-final-cta__content::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    width: min(700px, 94vw);
    aspect-ratio: 1;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(255,255,255,.85), rgba(255,255,255,0) 74%);
}
html body .digital-final-cta__button {
    overflow: hidden;
    box-shadow: 0 22px 40px -18px rgba(180,80,45,.65), inset 0 1px 0 rgba(255,255,255,.3) !important;
    transition: transform .35s var(--wd-ease), box-shadow .35s var(--wd-ease);
}
html body .digital-final-cta__button::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 55%;
    pointer-events: none;
    background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.34), rgba(255,255,255,0));
    translate: -130% 0;
    animation: wdSheen 5.5s ease-in-out 1.5s infinite;
}
html body .digital-final-cta__button span { display: inline-block; animation: wdNudge 2.6s ease-in-out infinite; }
@media (hover: hover) {
    html body .digital-final-cta__button:hover {
        transform: translateY(-3px);
        box-shadow: 0 30px 50px -18px rgba(180,80,45,.75), 0 0 0 5px rgba(201,103,67,.14), inset 0 1px 0 rgba(255,255,255,.34) !important;
    }
}

/* ---------------------------------------------------------
   TABLET / PHONE
--------------------------------------------------------- */

@media screen and (max-width: 1100px) {
    html body .digital-system__diagram { margin: 0; padding: 26px 20px 22px; box-sizing: border-box; width: 100%; max-width: 100%; }
    html body .digital-final-cta__inner::before { width: 900px; }
}
@media screen and (max-width: 640px) {
    html body .digital-design__item { padding: 20px 20px 24px !important; }
    html body .digital-system__diagram { padding: 22px 14px 20px; border-radius: 26px; }
    html body .digital-process__support { border-radius: 24px; padding: 14px 22px; }
    html body .digital-final-cta__inner::before { width: 720px; opacity: .7; }
}

/* ---------------------------------------------------------
   VARIETY — so the page doesn't repeat itself
   (dark "Impact" section, staggered design cards, process band)
--------------------------------------------------------- */

/* A · What we design — staggered, two tints */
@media screen and (min-width: 821px) {
    html body .digital-design__grid { align-items: start; }
    html body .digital-design__item { height: auto; }
    html body .digital-design__item:nth-child(even) { margin-top: 38px; }
}
html body .digital-design__item:nth-child(1),
html body .digital-design__item:nth-child(4) {
    background: linear-gradient(155deg, rgba(226,232,216,.95), rgba(255,255,255,.5)) !important;
}

/* B · The impact — deep green section with glass cards */
html body section.digital-benefits.digital-benefits {
    background-color: #1B271F !important;
    background-image:
        radial-gradient(46% 70% at 88% 8%, rgba(201,103,67,.22), rgba(201,103,67,0) 70%),
        radial-gradient(40% 60% at 6% 100%, rgba(135,148,123,.30), rgba(135,148,123,0) 70%),
        linear-gradient(165deg, #1B271F 0%, #26332A 55%, #2F4030 100%) !important;
    color: #F8F3EB;
}
html body .digital-benefits__eyebrow { color: var(--wd-sand) !important; }
html body .digital-benefits__title { color: #F8F3EB !important; text-shadow: 0 2px 30px rgba(0,0,0,.25); }
html body .digital-benefits__arc { border-color: rgba(217,183,126,.22) !important; }
html body .digital-benefits__card {
    background: linear-gradient(155deg, rgba(255,255,255,.11), rgba(255,255,255,.03)) !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    box-shadow: 0 34px 56px -34px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.14);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
}
html body .digital-benefits__card::before { opacity: .35; }
html body .digital-benefits__card h3 { color: #F8F3EB !important; }
html body .digital-benefits__card p { color: rgba(248,243,235,.74) !important; }
html body .digital-benefits__number {
    color: var(--wd-sand) !important;
    background: rgba(217,183,126,.10);
    border-color: rgba(217,183,126,.30);
}
html body .digital-benefits__visual,
html body .digital-benefits__card:nth-child(even) .digital-benefits__visual,
html body .digital-benefits__card:nth-child(odd) .digital-benefits__visual,
html body .digital-benefits__card .digital-benefits__visual--structure,
html body .digital-benefits__card .digital-benefits__visual--brand,
html body .digital-benefits__card .digital-benefits__visual--navigation,
html body .digital-benefits__card .digital-benefits__visual--mobile {
    background-image: linear-gradient(150deg, rgba(255,255,255,.16), rgba(255,255,255,.04)) !important;
    background-color: rgba(27,39,31,.5) !important;
    border: 1px solid rgba(217,183,126,.40) !important;
    box-shadow: 0 16px 28px -14px rgba(0,0,0,.6), 0 0 0 6px rgba(217,183,126,.07);
}
html body .digital-benefits__visual::before,
html body .digital-benefits__visual::after { opacity: .25; }
html body .digital-benefits__visual svg,
html body .digital-benefits__visual svg * { stroke: #E8D8C0 !important; }
@media (hover: hover) {
    html body .digital-benefits__card:hover {
        border-color: rgba(217,183,126,.55) !important;
        box-shadow: 0 46px 66px -34px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.2);
    }
}

/* C · Our website process — one long glass band */
@media screen and (min-width: 1101px) {
    html body .digital-process__steps {
        margin: 0 -44px;
        padding: 36px 44px 30px;
        border-radius: 34px;
        background: linear-gradient(160deg, rgba(255,255,255,.72), rgba(255,255,255,.28));
        border: 1px solid rgba(217,183,126,.38);
        box-shadow: 0 44px 70px -48px rgba(70,54,34,.55), inset 0 1px 0 rgba(255,255,255,.95);
    }
}

/* ---------------------------------------------------------
   Reduced motion
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html body .digital-hero__inner::before,
    html body .digital-hero__inner::after,
    html body .digital-hero__button::after,
    html body .digital-hero__button span,
    html body .digital-system__website::before,
    html body .digital-final-cta__button::after,
    html body .digital-final-cta__button span { animation: none !important; }
}

/* END — WEBSITE & DIGITAL INFRASTRUCTURE ELEVATION v2 */


/* =========================================================
   FRAYORA — WEBSITE & DIGITAL INFRASTRUCTURE ELEVATION v2
   PASTE AT THE VERY BOTTOM OF main.css (after everything else)

   - No wording is changed. No new images are needed.
   - The hero picture background is replaced with a coded one:
     layered gradients, a fine wireframe grid, soft rings, glass
     "window panes" and glass discs (same family as Business-in-a-Box
     and Bubba Tia, with a "layout / wireframe" accent for this page).
   - Every section below gets a more finished, consistent look.
   - Desktop, tablet and mobile are all handled in this block.
========================================================= */

:root {
    --wd-sand:   #D9B77E;
    --wd-terra:  #C96743;
    --wd-sage:   #87947B;
    --wd-ease:   cubic-bezier(.22, .8, .24, 1);
}

@keyframes wdDrift  { 0%,100% { translate: 0 0; } 50% { translate: 0 -16px; } }
@keyframes wdPane   { 0%,100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes wdPulse  { 0% { scale: .96; opacity: .55; } 70%,100% { scale: 1.28; opacity: 0; } }
@keyframes wdSheen  { 0%,60% { translate: -130% 0; } 100% { translate: 130% 0; } }
@keyframes wdNudge  { 0%,100% { translate: 0 0; } 50% { translate: 4px 0; } }
@keyframes wdSpin   { to { rotate: 360deg; } }

/* ---------------------------------------------------------
   01 · HERO — coded background (replaces the picture)
--------------------------------------------------------- */

html body section.digital-hero.digital-hero {
    --hx: 68%;
    --hy: 302px;
    isolation: isolate;
    background-color: #1E2B23 !important;
    background-image:
        radial-gradient(44% 70% at var(--hx) 50%, rgba(217,183,126,.26) 0%, rgba(201,103,67,.08) 46%, rgba(201,103,67,0) 74%),
        radial-gradient(42% 64% at 2% 0%, rgba(135,148,123,.38) 0%, rgba(135,148,123,0) 70%),
        radial-gradient(40% 56% at 22% 112%, rgba(83,103,66,.46) 0%, rgba(83,103,66,0) 70%),
        linear-gradient(160deg, #18241C 0%, #24322A 50%, #33442F 100%) !important;
    background-size: auto !important;
    background-position: 0 0 !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
}

/* the old dark overlay layer is switched off (keeps the hero calm) */
html body section.digital-hero.digital-hero::before { display: none !important; }

/* soft concentric rings around the visual */
html body section.digital-hero.digital-hero::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 1 !important;
    top: calc(var(--hy) - 540px) !important;
    left: calc(var(--hx) - 540px) !important;
    right: auto !important;
    bottom: auto !important;
    width: 1080px !important;
    height: 1080px !important;
    pointer-events: none !important;
    opacity: 1 !important;
    transform: none !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' fill='none' stroke-width='1.6'%3E%3Ccircle cx='500' cy='500' r='238' stroke='rgb(217,183,126)' stroke-opacity='.40' stroke-dasharray='2 9' stroke-linecap='round'/%3E%3Ccircle cx='500' cy='500' r='350' stroke='rgb(232,216,192)' stroke-opacity='.14'/%3E%3C/svg%3E") center / 100% 100% no-repeat !important;
    -webkit-mask-image: radial-gradient(closest-side, #000 70%, rgba(0,0,0,0) 100%);
            mask-image: radial-gradient(closest-side, #000 70%, rgba(0,0,0,0) 100%);
}

/* glass discs */
html body .digital-hero__inner::before,
html body .digital-hero__inner::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}
html body .digital-hero__inner::before {
    left: -17%;
    top: -34%;
    width: 520px;
    height: 520px;
    background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(135,148,123,.05) 60%, rgba(135,148,123,0));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.11), 0 60px 100px -60px rgba(0,0,0,.55);
    animation: wdDrift 16s ease-in-out infinite;
}
html body .digital-hero__inner::after {
    right: -9%;
    bottom: -30%;
    width: 360px;
    height: 360px;
    background: linear-gradient(200deg, rgba(214,106,67,.32), rgba(201,103,67,.05) 70%);
    box-shadow: inset 0 0 0 1px rgba(255,205,175,.22), 0 40px 80px -50px rgba(0,0,0,.5);
    animation: wdDrift 20s ease-in-out -7s infinite reverse;
}
html body .digital-hero__inner { z-index: 2; }

/* no extra panes behind the visual: the image already has its own glass.
   (switched off explicitly, so this works even if the older v2 block is still in main.css) */
html body .digital-hero__visual::before,
html body .digital-hero__visual::after {
    content: none !important;
    display: none !important;
    background: none !important;
    box-shadow: none !important;
    animation: none !important;
}

/* text shield: rings and grid never touch the words */
html body .digital-hero__content::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -60px -90px -60px -140px;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(27,39,31,.78) 0%, rgba(27,39,31,.5) 55%, rgba(27,39,31,0) 100%);
}

/* hero text polish */
html body .digital-hero__title { text-shadow: 0 2px 40px rgba(0,0,0,.28); }
html body .digital-hero__statement {
    position: relative;
    padding-left: 18px;
}
html body .digital-hero__statement::before {
    content: "";
    position: absolute;
    left: 0; top: .2em; bottom: .2em;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--wd-sand), var(--wd-terra));
}

/* hero button — glass pill with a slow sheen */
html body .digital-hero__button {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05)) !important;
    border: 1px solid rgba(232,216,192,.55) !important;
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    box-shadow: 0 16px 34px -18px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.28) !important;
    transition: transform .35s var(--wd-ease), box-shadow .35s var(--wd-ease), border-color .35s ease;
}
html body .digital-hero__button::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 55%;
    pointer-events: none;
    background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.22), rgba(255,255,255,0));
    translate: -130% 0;
    animation: wdSheen 6s ease-in-out 2s infinite;
}
html body .digital-hero__button span { display: inline-block; animation: wdNudge 2.6s ease-in-out infinite; }
@media (hover: hover) {
    html body .digital-hero__button:hover {
        transform: translateY(-2px);
        border-color: rgba(217,183,126,.95) !important;
        box-shadow: 0 22px 40px -18px rgba(0,0,0,.75), 0 0 0 4px rgba(217,183,126,.12), inset 0 1px 0 rgba(255,255,255,.34) !important;
    }
}

/* tablet */
@media screen and (max-width: 1100px) {
    html body section.digital-hero.digital-hero { --hx: 72%; --hy: 205px; }
    html body section.digital-hero.digital-hero::after { width: 900px !important; height: 900px !important; top: calc(var(--hy) - 450px) !important; left: calc(var(--hx) - 450px) !important; }
    html body .digital-hero__inner::before { left: -22%; top: -10%; width: 420px; height: 420px; }
    html body .digital-hero__inner::after  { right: -14%; bottom: -12%; width: 300px; height: 300px; }
    html body .digital-hero__content::before { inset: -40px -40px -40px -40px; }
}
@media screen and (max-width: 820px) {
    html body section.digital-hero.digital-hero { --hx: 72%; --hy: 175px; }
}
/* phone */
@media screen and (max-width: 640px) {
    html body section.digital-hero.digital-hero { --hx: 52%; --hy: 125px; }
        html body section.digital-hero.digital-hero::after { width: 640px !important; height: 640px !important; top: calc(var(--hy) - 320px) !important; left: calc(var(--hx) - 320px) !important; }
    html body .digital-hero__inner::before { left: -34%; top: -6%; width: 300px; height: 300px; }
    html body .digital-hero__inner::after  { right: -20%; bottom: -10%; width: 230px; height: 230px; }
}

/* ---------------------------------------------------------
   02 · WHAT WE DESIGN — four soft glass cards
--------------------------------------------------------- */

html body .digital-design__grid { gap: 22px 22px; align-items: stretch; }
html body .digital-design__item {
    padding: 22px 24px 26px !important;
    border-radius: 26px 26px 26px 8px;
    height: 100%;
    box-sizing: border-box;
    background: linear-gradient(155deg, rgba(255,255,255,.86), rgba(255,255,255,.42)) !important;
    border: 1px solid rgba(217,183,126,.34) !important;
    box-shadow: 0 30px 50px -38px rgba(70,54,34,.5), inset 0 1px 0 rgba(255,255,255,.95);
    transition: translate .5s var(--wd-ease), box-shadow .5s var(--wd-ease), border-color .4s ease;
}
html body .digital-design__icon {
    box-shadow: 0 14px 26px -12px rgba(70,54,34,.4), 0 0 0 5px rgba(217,183,126,.14);
    transition: scale .5s var(--wd-ease);
}
@media (hover: hover) {
    html body .digital-design__item:hover {
        translate: 0 -6px;
        border-color: rgba(201,103,67,.4) !important;
        box-shadow: 0 42px 60px -36px rgba(70,54,34,.55), inset 0 1px 0 #fff;
    }
    html body .digital-design__item:hover .digital-design__icon { scale: 1.07; }
}
/* soft sage glow behind the cards */
html body .digital-design__grid { position: relative; isolation: isolate; }
html body .digital-design__grid::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -40px -60px -40px -40px;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(135,148,123,.16), rgba(135,148,123,0));
}

/* ---------------------------------------------------------
   03 · THE IMPACT — richer cards
--------------------------------------------------------- */

html body .digital-benefits__card {
    border: 1px solid rgba(217,183,126,.30) !important;
    box-shadow: 0 34px 56px -40px rgba(70,54,34,.55), inset 0 1px 0 rgba(255,255,255,.95);
    transition: translate .5s var(--wd-ease), box-shadow .5s var(--wd-ease), border-color .4s ease;
}
html body .digital-benefits__visual {
    box-shadow: 0 16px 28px -14px rgba(70,54,34,.4), 0 0 0 6px rgba(217,183,126,.14);
    transition: scale .5s var(--wd-ease);
}
html body .digital-benefits__number {
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(201,103,67,.09);
    border: 1px solid rgba(201,103,67,.18);
    font-weight: 700;
    letter-spacing: .08em;
}
@media (hover: hover) {
    html body .digital-benefits__card:hover {
        translate: 0 -8px;
        border-color: rgba(201,103,67,.38) !important;
        box-shadow: 0 46px 66px -38px rgba(70,54,34,.6), inset 0 1px 0 #fff;
    }
    html body .digital-benefits__card:hover .digital-benefits__visual { scale: 1.08; }
}

/* ---------------------------------------------------------
   04 · WEBSITE AS INFRASTRUCTURE — diagram in a glass panel
--------------------------------------------------------- */

html body .digital-system__diagram {
    padding: 30px 28px 26px;
    margin: -30px -28px -26px;
    border-radius: 34px;
    background:
        radial-gradient(circle at 1px 1px, rgba(83,103,66,.16) 1.2px, rgba(83,103,66,0) 1.6px) 0 0 / 22px 22px,
        linear-gradient(160deg, rgba(255,255,255,.82), rgba(255,255,255,.34));
    border: 1px solid rgba(217,183,126,.36);
    box-shadow: 0 44px 70px -46px rgba(70,54,34,.55), inset 0 1px 0 rgba(255,255,255,.95);
}
html body .digital-system__icon {
    box-shadow: 0 14px 24px -12px rgba(70,54,34,.4), 0 0 0 5px rgba(217,183,126,.14);
    transition: translate .4s var(--wd-ease), scale .4s var(--wd-ease);
}
@media (hover: hover) {
    html body .digital-system__node:hover .digital-system__icon { translate: 0 -5px; scale: 1.06; }
}
html body .digital-system__connector--top,
html body .digital-system__connector--bottom { opacity: 1; filter: saturate(1.4); }

/* the website card: glowing, with a slow pulse ring */
html body .digital-system__website {
    box-shadow:
        0 30px 50px -22px rgba(20,32,24,.7),
        0 0 0 10px rgba(217,183,126,.20),
        0 0 0 22px rgba(217,183,126,.10),
        inset 0 1px 0 rgba(255,255,255,.16);
    overflow: visible;
}
html body .digital-system__website::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: 14px;
    border: 1.5px solid rgba(201,103,67,.55);
    pointer-events: none;
    animation: wdPulse 3.6s ease-out infinite;
}
html body .digital-system__website-bar { border-radius: 12px 12px 0 0; }
html body .digital-system__website-content strong { letter-spacing: .06em; }

html body .digital-system__footer { margin-top: 30px; }

/* ---------------------------------------------------------
   05 · OUR WEBSITE PROCESS
--------------------------------------------------------- */

html body .digital-process__icon-wrap .digital-process__icon,
html body .digital-process__icon-wrap {
    transition: translate .45s var(--wd-ease), scale .45s var(--wd-ease);
}
html body .digital-process__icon-wrap {
    filter: drop-shadow(0 14px 18px rgba(70,54,34,.22));
}
@media (hover: hover) {
    html body .digital-process__step:hover .digital-process__icon-wrap { translate: 0 -6px; scale: 1.07; }
}
html body .digital-process__support {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 14px 30px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.45));
    border: 1px solid rgba(217,183,126,.4);
    box-shadow: 0 20px 34px -24px rgba(70,54,34,.5), inset 0 1px 0 rgba(255,255,255,.95);
    text-align: center;
}

/* ---------------------------------------------------------
   06 · FINAL CTA — halo and rings behind the headline
--------------------------------------------------------- */

html body .digital-final-cta__inner { isolation: isolate; }
html body .digital-final-cta__inner::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 46%;
    translate: -50% -50%;
    width: min(1300px, 190vw);
    aspect-ratio: 1;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1300 1300' fill='none' stroke-width='1.6'%3E%3Ccircle cx='650' cy='650' r='500' stroke='rgb(201,103,67)' stroke-opacity='.34'/%3E%3Ccircle cx='650' cy='650' r='572' stroke='rgb(217,183,126)' stroke-opacity='.40' stroke-dasharray='2 9' stroke-linecap='round'/%3E%3Ccircle cx='650' cy='650' r='644' stroke='rgb(201,103,67)' stroke-opacity='.16'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    opacity: .85;
}
html body .digital-final-cta__content::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    width: min(700px, 94vw);
    aspect-ratio: 1;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(255,255,255,.85), rgba(255,255,255,0) 74%);
}
html body .digital-final-cta__button {
    overflow: hidden;
    box-shadow: 0 22px 40px -18px rgba(180,80,45,.65), inset 0 1px 0 rgba(255,255,255,.3) !important;
    transition: transform .35s var(--wd-ease), box-shadow .35s var(--wd-ease);
}
html body .digital-final-cta__button::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 55%;
    pointer-events: none;
    background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.34), rgba(255,255,255,0));
    translate: -130% 0;
    animation: wdSheen 5.5s ease-in-out 1.5s infinite;
}
html body .digital-final-cta__button span { display: inline-block; animation: wdNudge 2.6s ease-in-out infinite; }
@media (hover: hover) {
    html body .digital-final-cta__button:hover {
        transform: translateY(-3px);
        box-shadow: 0 30px 50px -18px rgba(180,80,45,.75), 0 0 0 5px rgba(201,103,67,.14), inset 0 1px 0 rgba(255,255,255,.34) !important;
    }
}

/* ---------------------------------------------------------
   TABLET / PHONE
--------------------------------------------------------- */

@media screen and (max-width: 1100px) {
    html body .digital-system__diagram { margin: 0; padding: 26px 20px 22px; box-sizing: border-box; width: 100%; max-width: 100%; }
    html body .digital-final-cta__inner::before { width: 900px; }
}
@media screen and (max-width: 640px) {
    html body .digital-design__item { padding: 20px 20px 24px !important; }
    html body .digital-system__diagram { padding: 22px 14px 20px; border-radius: 26px; }
    html body .digital-process__support { border-radius: 24px; padding: 14px 22px; }
    html body .digital-final-cta__inner::before { width: 720px; opacity: .7; }
}

/* ---------------------------------------------------------
   VARIETY — so the page doesn't repeat itself
   (dark "Impact" section, staggered design cards, process band)
--------------------------------------------------------- */

/* A · What we design — staggered, two tints */
@media screen and (min-width: 821px) {
    html body .digital-design__grid { align-items: start; }
    html body .digital-design__item { height: auto; }
    html body .digital-design__item:nth-child(even) { margin-top: 38px; }
}
html body .digital-design__item:nth-child(1),
html body .digital-design__item:nth-child(4) {
    background: linear-gradient(155deg, rgba(226,232,216,.95), rgba(255,255,255,.5)) !important;
}

/* phone: one column, so the tint alternates 1 · 3 (sage) and 2 · 4 (white) */
@media screen and (max-width: 599px) {
    html body .digital-design__item:nth-child(3) {
        background: linear-gradient(155deg, rgba(226,232,216,.95), rgba(255,255,255,.5)) !important;
    }
    html body .digital-design__item:nth-child(4) {
        background: linear-gradient(155deg, rgba(255,255,255,.86), rgba(255,255,255,.42)) !important;
    }
}

/* B · The impact — deep green section with glass cards */
html body section.digital-benefits.digital-benefits {
    background-color: #1B271F !important;
    background-image:
        radial-gradient(46% 70% at 88% 8%, rgba(201,103,67,.22), rgba(201,103,67,0) 70%),
        radial-gradient(40% 60% at 6% 100%, rgba(135,148,123,.30), rgba(135,148,123,0) 70%),
        linear-gradient(165deg, #1B271F 0%, #26332A 55%, #2F4030 100%) !important;
    color: #F8F3EB;
}
html body .digital-benefits__eyebrow { color: var(--wd-sand) !important; }
html body .digital-benefits__title { color: #F8F3EB !important; text-shadow: 0 2px 30px rgba(0,0,0,.25); }
html body .digital-benefits__arc { border-color: rgba(217,183,126,.22) !important; }
html body .digital-benefits__card {
    background: linear-gradient(155deg, rgba(255,255,255,.11), rgba(255,255,255,.03)) !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    box-shadow: 0 34px 56px -34px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.14);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
}
html body .digital-benefits__card::before { opacity: .35; }
html body .digital-benefits__card h3 { color: #F8F3EB !important; }
html body .digital-benefits__card p { color: rgba(248,243,235,.74) !important; }
html body .digital-benefits__number {
    color: var(--wd-sand) !important;
    background: rgba(217,183,126,.10);
    border-color: rgba(217,183,126,.30);
}
html body .digital-benefits__visual,
html body .digital-benefits__card:nth-child(even) .digital-benefits__visual,
html body .digital-benefits__card:nth-child(odd) .digital-benefits__visual,
html body .digital-benefits__card .digital-benefits__visual--structure,
html body .digital-benefits__card .digital-benefits__visual--brand,
html body .digital-benefits__card .digital-benefits__visual--navigation,
html body .digital-benefits__card .digital-benefits__visual--mobile {
    background-image: linear-gradient(150deg, rgba(255,255,255,.16), rgba(255,255,255,.04)) !important;
    background-color: rgba(27,39,31,.5) !important;
    border: 1px solid rgba(217,183,126,.40) !important;
    box-shadow: 0 16px 28px -14px rgba(0,0,0,.6), 0 0 0 6px rgba(217,183,126,.07);
}
html body .digital-benefits__visual::before,
html body .digital-benefits__visual::after { opacity: .25; }
html body .digital-benefits__visual svg,
html body .digital-benefits__visual svg * { stroke: #E8D8C0 !important; }
@media (hover: hover) {
    html body .digital-benefits__card:hover {
        border-color: rgba(217,183,126,.55) !important;
        box-shadow: 0 46px 66px -34px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.2);
    }
}

/* C · Our website process — one long glass band */
@media screen and (min-width: 1101px) {
    html body .digital-process__steps {
        margin: 0 -44px;
        padding: 36px 44px 30px;
        border-radius: 34px;
        background: linear-gradient(160deg, rgba(255,255,255,.72), rgba(255,255,255,.28));
        border: 1px solid rgba(217,183,126,.38);
        box-shadow: 0 44px 70px -48px rgba(70,54,34,.55), inset 0 1px 0 rgba(255,255,255,.95);
    }
}

/* ---------------------------------------------------------
   Reduced motion
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html body .digital-hero__inner::before,
    html body .digital-hero__inner::after,
    html body .digital-hero__button::after,
    html body .digital-hero__button span,
    html body .digital-system__website::before,
    html body .digital-final-cta__button::after,
    html body .digital-final-cta__button span { animation: none !important; }
}


/* =========================================================
   FRAYORA — BUSINESS KNOWLEDGE & ORGANIZATION ELEVATION v2
   PASTE AT THE VERY BOTTOM OF main.css (after everything else)

   - No wording is changed. No new images are needed.
   - The hero picture background is replaced with a coded one
     (soft glow behind your illustration, thin rings, two glass discs),
     the same family as Business-in-a-Box and Website.
   - The other sections get more variety so the page doesn't repeat.
   - Desktop, tablet and mobile are all handled in this block.
========================================================= */

:root {
    --bkx-sand:  #D9B77E;
    --bkx-terra: #C96743;
    --bkx-sage:  #87947B;
    --bkx-ease:  cubic-bezier(.22, .8, .24, 1);
}

@keyframes bkxDrift  { 0%,100% { translate: 0 0; } 50% { translate: 0 -16px; } }
@keyframes bkxPulse  { 0% { scale: .96; opacity: .5; } 70%,100% { scale: 1.22; opacity: 0; } }
@keyframes bkxSheen  { 0%,60% { translate: -130% 0; } 100% { translate: 130% 0; } }
@keyframes bkxNudge  { 0%,100% { translate: 0 0; } 50% { translate: 4px 0; } }

/* ---------------------------------------------------------
   01 · HERO — coded background (replaces the picture)
--------------------------------------------------------- */

html body section.bk-hero.bk-hero {
    --hx: 71%;
    --hy: 300px;
    isolation: isolate;
    background-color: #1E2B23 !important;
    background-image:
        radial-gradient(34% 62% at var(--hx) var(--hy), rgba(217,183,126,.30) 0%, rgba(201,103,67,.11) 48%, rgba(201,103,67,0) 76%),
        radial-gradient(30% 12% at var(--hx) calc(var(--hy) + 210px), rgba(0,0,0,.34) 0%, rgba(0,0,0,0) 100%),
        radial-gradient(42% 64% at 2% 0%, rgba(135,148,123,.36) 0%, rgba(135,148,123,0) 70%),
        radial-gradient(40% 56% at 20% 112%, rgba(83,103,66,.46) 0%, rgba(83,103,66,0) 70%),
        linear-gradient(160deg, #18241C 0%, #24322A 50%, #33442F 100%) !important;
    background-size: auto !important;
    background-position: 0 0 !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
}

/* the old overlay layer is switched off (keeps the hero calm) */
html body section.bk-hero.bk-hero::before { display: none !important; }

/* thin rings around the illustration */
html body section.bk-hero.bk-hero::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 1 !important;
    top: calc(var(--hy) - 500px) !important;
    left: calc(var(--hx) - 500px) !important;
    right: auto !important;
    bottom: auto !important;
    width: 1000px !important;
    height: 1000px !important;
    pointer-events: none !important;
    opacity: 1 !important;
    transform: none !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' fill='none' stroke-width='1.6'%3E%3Ccircle cx='500' cy='500' r='330' stroke='rgb(217,183,126)' stroke-opacity='.38' stroke-dasharray='2 9' stroke-linecap='round'/%3E%3Ccircle cx='500' cy='500' r='436' stroke='rgb(232,216,192)' stroke-opacity='.14'/%3E%3C/svg%3E") center / 100% 100% no-repeat !important;
    -webkit-mask-image: radial-gradient(closest-side, #000 70%, rgba(0,0,0,0) 100%);
            mask-image: radial-gradient(closest-side, #000 70%, rgba(0,0,0,0) 100%);
}

/* two soft glass discs */
html body .bk-hero__inner::before,
html body .bk-hero__inner::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}
html body .bk-hero__inner::before {
    left: -17%;
    top: -30%;
    width: 520px;
    height: 520px;
    background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(135,148,123,.05) 60%, rgba(135,148,123,0));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.11), 0 60px 100px -60px rgba(0,0,0,.55);
    animation: bkxDrift 16s ease-in-out infinite;
}
html body .bk-hero__inner::after {
    right: -9%;
    bottom: -22%;
    width: 340px;
    height: 340px;
    background: linear-gradient(200deg, rgba(214,106,67,.30), rgba(201,103,67,.05) 70%);
    box-shadow: inset 0 0 0 1px rgba(255,205,175,.20), 0 40px 80px -50px rgba(0,0,0,.5);
    animation: bkxDrift 20s ease-in-out -7s infinite reverse;
}

/* text shield: rings never touch the words */
html body .bk-hero__content::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -60px -90px -60px -140px;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(27,39,31,.78) 0%, rgba(27,39,31,.5) 55%, rgba(27,39,31,0) 100%);
}

html body .bk-hero__title { text-shadow: 0 2px 40px rgba(0,0,0,.28); }

/* hero button — glass pill with a slow sheen */
html body .bk-hero__button {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05)) !important;
    border: 1px solid rgba(232,216,192,.55) !important;
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    box-shadow: 0 16px 34px -18px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.28) !important;
    transition: transform .35s var(--bkx-ease), box-shadow .35s var(--bkx-ease), border-color .35s ease;
}
html body .bk-hero__button::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 55%;
    pointer-events: none;
    background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.22), rgba(255,255,255,0));
    translate: -130% 0;
    animation: bkxSheen 6s ease-in-out 2s infinite;
}
html body .bk-hero__button-arrow { display: inline-block; animation: bkxNudge 2.6s ease-in-out infinite; }
@media (hover: hover) {
    html body .bk-hero__button:hover {
        transform: translateY(-2px);
        border-color: rgba(217,183,126,.95) !important;
        box-shadow: 0 22px 40px -18px rgba(0,0,0,.75), 0 0 0 4px rgba(217,183,126,.12), inset 0 1px 0 rgba(255,255,255,.34) !important;
    }
}

/* tablet: illustration sits above the text */
@media screen and (max-width: 1100px) {
    html body section.bk-hero.bk-hero { --hx: 71%; --hy: 296px; }
    html body section.bk-hero.bk-hero::after { width: 900px !important; height: 900px !important; top: calc(var(--hy) - 450px) !important; left: calc(var(--hx) - 450px) !important; }
    html body .bk-hero__inner::before { left: -22%; top: -10%; width: 420px; height: 420px; }
    html body .bk-hero__inner::after  { right: -14%; bottom: -10%; width: 300px; height: 300px; }
    html body .bk-hero__content::before { inset: -40px -40px -40px -40px; }
}
@media screen and (max-width: 820px) {
    html body section.bk-hero.bk-hero { --hx: 71%; --hy: 237px; }
}
@media screen and (max-width: 640px) {
    html body section.bk-hero.bk-hero { --hx: 66%; --hy: 206px; }
}
/* phone */
@media screen and (max-width: 480px) {
    html body section.bk-hero.bk-hero { --hx: 50%; --hy: 188px; }
    html body section.bk-hero.bk-hero::after { width: 640px !important; height: 640px !important; top: calc(var(--hy) - 320px) !important; left: calc(var(--hx) - 320px) !important; }
    html body .bk-hero__inner::before { left: -34%; top: -6%; width: 300px; height: 300px; }
    html body .bk-hero__inner::after  { right: -20%; bottom: -8%; width: 230px; height: 230px; }
}

/* ---------------------------------------------------------
   02 · WHAT THIS SOLVES — problems feel warm
--------------------------------------------------------- */

html body .bk-solves__card {
    background: linear-gradient(155deg, #FFFDFA, rgba(255,252,248,.62)) !important;
    border: 1px solid rgba(217,183,126,.32) !important;
    box-shadow: 0 30px 50px -36px rgba(70,54,34,.5), inset 0 1px 0 rgba(255,255,255,.95);
    transition: translate .5s var(--bkx-ease), box-shadow .5s var(--bkx-ease), border-color .4s ease;
}
html body .bk-solves__number,
html body .bk-build__number {
    display: inline-block;
    width: fit-content;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(201,103,67,.09);
    border: 1px solid rgba(201,103,67,.18);
    font-weight: 700;
    letter-spacing: .08em;
}
html body .bk-solves__icon,
html body .bk-build__icon,
html body .bk-outcome__icon,
html body .bk-process__icon {
    box-shadow: 0 14px 26px -12px rgba(70,54,34,.4), 0 0 0 5px rgba(217,183,126,.14);
    transition: scale .5s var(--bkx-ease);
}
@media (hover: hover) {
    html body .bk-solves__card:hover,
    html body .bk-build__card:hover {
        translate: 0 -6px;
        border-color: rgba(201,103,67,.4) !important;
        box-shadow: 0 42px 60px -36px rgba(70,54,34,.55), inset 0 1px 0 #fff;
    }
    html body .bk-solves__card:hover .bk-solves__icon,
    html body .bk-build__card:hover .bk-build__icon { scale: 1.07; }
}
/* warm peach on 2 and 3 (checkerboard), staggered on desktop */
html body .bk-solves__card:nth-child(2),
html body .bk-solves__card:nth-child(3) {
    background: linear-gradient(155deg, rgba(247,226,210,.96), rgba(255,252,248,.6)) !important;
}
@media screen and (min-width: 1101px) {
    html body .bk-solves__grid { align-items: start; }
    html body .bk-solves__card:nth-child(even) { margin-top: 36px; }
}
@media screen and (max-width: 599px) {
    html body .bk-solves__card:nth-child(3) { background: linear-gradient(155deg, #FFFDFA, rgba(255,252,248,.62)) !important; }
    html body .bk-solves__card:nth-child(4) { background: linear-gradient(155deg, rgba(247,226,210,.96), rgba(255,252,248,.6)) !important; }
}

/* ---------------------------------------------------------
   03 · WHAT WE BUILD — calm, sage glow
--------------------------------------------------------- */

html body .bk-build__grid { isolation: isolate; }
html body .bk-build__grid::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -50px -70px -50px -50px;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(135,148,123,.18), rgba(135,148,123,0));
}
html body .bk-build__card {
    background: linear-gradient(155deg, #FFFDFA, rgba(255,252,248,.6)) !important;
    border: 1px solid rgba(217,183,126,.32) !important;
    box-shadow: 0 30px 50px -36px rgba(70,54,34,.5), inset 0 1px 0 rgba(255,255,255,.95);
    transition: translate .5s var(--bkx-ease), box-shadow .5s var(--bkx-ease), border-color .4s ease;
}

/* ---------------------------------------------------------
   04 · THE OUTCOME — deep green, glass cards
--------------------------------------------------------- */

html body section.bk-outcome.bk-outcome {
    background-color: #1B271F !important;
    background-image:
        radial-gradient(46% 70% at 90% 6%, rgba(201,103,67,.22), rgba(201,103,67,0) 70%),
        radial-gradient(40% 60% at 4% 100%, rgba(135,148,123,.30), rgba(135,148,123,0) 70%),
        linear-gradient(165deg, #1B271F 0%, #26332A 55%, #2F4030 100%) !important;
    color: #F8F3EB;
}
html body .bk-outcome__eyebrow { color: var(--bkx-sand) !important; }
html body .bk-outcome__title { color: #F8F3EB !important; text-shadow: 0 2px 30px rgba(0,0,0,.25); }
html body .bk-outcome__body { color: rgba(248,243,235,.78) !important; }
html body .bk-outcome__card {
    background: linear-gradient(155deg, rgba(255,255,255,.11), rgba(255,255,255,.03)) !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    box-shadow: 0 34px 56px -34px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.14);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    transition: translate .5s var(--bkx-ease), box-shadow .5s var(--bkx-ease), border-color .4s ease;
}
html body .bk-outcome__card-title { color: #F8F3EB !important; }
html body .bk-outcome__number {
    color: var(--bkx-sand) !important;
}
html body .bk-outcome__accent { display: none !important; }
html body .bk-outcome__icon,
html body .bk-outcome__card:nth-child(even) .bk-outcome__icon,
html body .bk-outcome__card:nth-child(odd) .bk-outcome__icon,
html body .bk-outcome__card--olive .bk-outcome__icon,
html body .bk-outcome__card--terracotta .bk-outcome__icon {
    background-image: linear-gradient(150deg, rgba(255,255,255,.16), rgba(255,255,255,.04)) !important;
    background-color: rgba(27,39,31,.5) !important;
    border: 1px solid rgba(217,183,126,.40) !important;
    color: #E8D8C0 !important;
    box-shadow: 0 16px 28px -14px rgba(0,0,0,.6), 0 0 0 6px rgba(217,183,126,.07);
}
html body .bk-outcome__icon::before,
html body .bk-outcome__icon::after { opacity: .25; }
html body .bk-outcome__icon svg,
html body .bk-outcome__icon svg * { stroke: #E8D8C0 !important; }
@media (hover: hover) {
    html body .bk-outcome__card:hover {
        translate: 0 -8px;
        border-color: rgba(217,183,126,.55) !important;
        box-shadow: 0 46px 66px -34px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.2);
    }
    html body .bk-outcome__card:hover .bk-outcome__icon { scale: 1.08; }
}

/* ---------------------------------------------------------
   05 · OUR PROCESS — one soft glass band on desktop
--------------------------------------------------------- */

html body .bk-process__number {
    display: inline-block;
    width: fit-content;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(201,103,67,.09);
    border: 1px solid rgba(201,103,67,.18);
    font-weight: 700;
    letter-spacing: .08em;
}
@media screen and (min-width: 1101px) {
    html body .bk-process__steps {
        width: calc(100% + 60px) !important;
        max-width: none !important;
        box-sizing: border-box;
        margin: 0 -30px;
        padding: 34px 30px 26px;
        border-radius: 34px;
        background: linear-gradient(160deg, rgba(255,255,255,.72), rgba(255,255,255,.28));
        border: 1px solid rgba(217,183,126,.38);
        box-shadow: 0 44px 70px -48px rgba(70,54,34,.55), inset 0 1px 0 rgba(255,255,255,.95);
    }
}
@media (hover: hover) {
    html body .bk-process__step:hover .bk-process__icon { scale: 1.08; }
}

/* ---------------------------------------------------------
   06 · FINAL CTA — halo and rings behind the headline
--------------------------------------------------------- */

html body .bk-final-cta__content { isolation: isolate; }
html body .bk-final-cta__content::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 46%;
    translate: -50% -50%;
    width: min(1300px, 190vw);
    aspect-ratio: 1;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1300 1300' fill='none' stroke-width='1.6'%3E%3Ccircle cx='650' cy='650' r='500' stroke='rgb(201,103,67)' stroke-opacity='.34'/%3E%3Ccircle cx='650' cy='650' r='572' stroke='rgb(217,183,126)' stroke-opacity='.40' stroke-dasharray='2 9' stroke-linecap='round'/%3E%3Ccircle cx='650' cy='650' r='644' stroke='rgb(201,103,67)' stroke-opacity='.16'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    opacity: .6;
}
html body .bk-final-cta__content::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    width: min(760px, 96vw);
    aspect-ratio: 1;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(255,255,255,.85), rgba(255,255,255,0) 74%);
}
html body .bk-final-cta__button {
    overflow: hidden;
    box-shadow: 0 22px 40px -18px rgba(180,80,45,.65), inset 0 1px 0 rgba(255,255,255,.3) !important;
    transition: transform .35s var(--bkx-ease), box-shadow .35s var(--bkx-ease);
}
html body .bk-final-cta__button::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 55%;
    pointer-events: none;
    background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.34), rgba(255,255,255,0));
    translate: -130% 0;
    animation: bkxSheen 5.5s ease-in-out 1.5s infinite;
}
html body .bk-final-cta__arrow { display: inline-block; animation: bkxNudge 2.6s ease-in-out infinite; }
@media (hover: hover) {
    html body .bk-final-cta__button:hover {
        transform: translateY(-3px);
        box-shadow: 0 30px 50px -18px rgba(180,80,45,.75), 0 0 0 5px rgba(201,103,67,.14), inset 0 1px 0 rgba(255,255,255,.34) !important;
    }
}
@media screen and (max-width: 1100px) { html body .bk-final-cta__content::before { width: 900px; } }
@media screen and (max-width: 640px)  { html body .bk-final-cta__content::before { width: 720px; opacity: .7; } }

/* ---------------------------------------------------------
   Reduced motion
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html body .bk-hero__inner::before,
    html body .bk-hero__inner::after,
    html body .bk-hero__button::after,
    html body .bk-hero__button-arrow,
    html body .bk-final-cta__button::after,
    html body .bk-final-cta__arrow { animation: none !important; }
}



/* =========================================================
   FRAYORA — OPERATIONS & SOPS ELEVATION v2
   PASTE AT THE VERY BOTTOM OF main.css (after everything else)

   - No wording is changed. No new images are needed.
   - The hero picture background is replaced with a coded one
     (soft glow behind your illustration, thin rings, two glass discs),
     the same family as Business-in-a-Box and Website.
   - The other sections get more variety so the page doesn't repeat.
   - Desktop, tablet and mobile are all handled in this block.
========================================================= */

:root {
    --sopx-sand:  #D9B77E;
    --sopx-terra: #C96743;
    --sopx-sage:  #87947B;
    --sopx-ease:  cubic-bezier(.22, .8, .24, 1);
}

@keyframes sopxDrift  { 0%,100% { translate: 0 0; } 50% { translate: 0 -16px; } }
@keyframes sopxPulse  { 0% { scale: .96; opacity: .5; } 70%,100% { scale: 1.22; opacity: 0; } }
@keyframes sopxSheen  { 0%,60% { translate: -130% 0; } 100% { translate: 130% 0; } }
@keyframes sopxNudge  { 0%,100% { translate: 0 0; } 50% { translate: 4px 0; } }

/* ---------------------------------------------------------
   01 · HERO — coded background (replaces the picture)
--------------------------------------------------------- */

html body section.sops-hero.sops-hero {
    --hx: 70.6%;
    --hy: 300px;
    isolation: isolate;
    background-color: #1E2B23 !important;
    background-image:
        radial-gradient(34% 62% at var(--hx) var(--hy), rgba(217,183,126,.30) 0%, rgba(201,103,67,.11) 48%, rgba(201,103,67,0) 76%),
        radial-gradient(30% 12% at var(--hx) calc(var(--hy) + 210px), rgba(0,0,0,.34) 0%, rgba(0,0,0,0) 100%),
        radial-gradient(42% 64% at 2% 0%, rgba(135,148,123,.36) 0%, rgba(135,148,123,0) 70%),
        radial-gradient(40% 56% at 20% 112%, rgba(83,103,66,.46) 0%, rgba(83,103,66,0) 70%),
        linear-gradient(160deg, #18241C 0%, #24322A 50%, #33442F 100%) !important;
    background-size: auto !important;
    background-position: 0 0 !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
}

/* the old overlay layer is switched off (keeps the hero calm) */
html body section.sops-hero.sops-hero::before { display: none !important; }

/* thin rings around the illustration */
html body section.sops-hero.sops-hero::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 1 !important;
    top: calc(var(--hy) - 500px) !important;
    left: calc(var(--hx) - 500px) !important;
    right: auto !important;
    bottom: auto !important;
    width: 1000px !important;
    height: 1000px !important;
    pointer-events: none !important;
    opacity: 1 !important;
    transform: none !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' fill='none' stroke-width='1.6'%3E%3Ccircle cx='500' cy='500' r='440' stroke='rgb(232,216,192)' stroke-opacity='.16'/%3E%3C/svg%3E") center / 100% 100% no-repeat !important;
    -webkit-mask-image: radial-gradient(closest-side, #000 70%, rgba(0,0,0,0) 100%);
            mask-image: radial-gradient(closest-side, #000 70%, rgba(0,0,0,0) 100%);
}

/* two soft glass discs */
html body .sops-hero__inner::before,
html body .sops-hero__inner::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}
html body .sops-hero__inner::before {
    left: -17%;
    top: -30%;
    width: 520px;
    height: 520px;
    background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(135,148,123,.05) 60%, rgba(135,148,123,0));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.11), 0 60px 100px -60px rgba(0,0,0,.55);
    animation: sopxDrift 16s ease-in-out infinite;
}
html body .sops-hero__inner::after {
    right: -9%;
    bottom: -22%;
    width: 340px;
    height: 340px;
    background: linear-gradient(200deg, rgba(214,106,67,.30), rgba(201,103,67,.05) 70%);
    box-shadow: inset 0 0 0 1px rgba(255,205,175,.20), 0 40px 80px -50px rgba(0,0,0,.5);
    animation: sopxDrift 20s ease-in-out -7s infinite reverse;
}

/* text shield: rings never touch the words */
html body .sops-hero__content::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -60px -90px -60px -140px;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(27,39,31,.78) 0%, rgba(27,39,31,.5) 55%, rgba(27,39,31,0) 100%);
}

html body .sops-hero__title { text-shadow: 0 2px 40px rgba(0,0,0,.28); }

/* hero button — glass pill with a slow sheen */
html body .sops-hero__button {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05)) !important;
    border: 1px solid rgba(232,216,192,.55) !important;
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    box-shadow: 0 16px 34px -18px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.28) !important;
    transition: transform .35s var(--sopx-ease), box-shadow .35s var(--sopx-ease), border-color .35s ease;
}
html body .sops-hero__button::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 55%;
    pointer-events: none;
    background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.22), rgba(255,255,255,0));
    translate: -130% 0;
    animation: sopxSheen 6s ease-in-out 2s infinite;
}
html body .sops-hero__arrow { display: inline-block; animation: sopxNudge 2.6s ease-in-out infinite; }
@media (hover: hover) {
    html body .sops-hero__button:hover {
        transform: translateY(-2px);
        border-color: rgba(217,183,126,.95) !important;
        box-shadow: 0 22px 40px -18px rgba(0,0,0,.75), 0 0 0 4px rgba(217,183,126,.12), inset 0 1px 0 rgba(255,255,255,.34) !important;
    }
}

/* tablet: illustration sits above the text */
@media screen and (max-width: 1100px) {
    html body section.sops-hero.sops-hero { --hx: 69%; --hy: 312px; }
    html body section.sops-hero.sops-hero::after { width: 900px !important; height: 900px !important; top: calc(var(--hy) - 450px) !important; left: calc(var(--hx) - 450px) !important; }
    html body .sops-hero__inner::before { left: -22%; top: -10%; width: 420px; height: 420px; }
    html body .sops-hero__inner::after  { right: -14%; bottom: -10%; width: 300px; height: 300px; }
    html body .sops-hero__content::before { inset: -40px -40px -40px -40px; }
}
@media screen and (max-width: 820px) {
    html body section.sops-hero.sops-hero { --hx: 68%; --hy: 250px; }
}
@media screen and (max-width: 640px) {
    html body section.sops-hero.sops-hero { --hx: 58%; --hy: 240px; }
}
/* phone */
@media screen and (max-width: 480px) {
    html body section.sops-hero.sops-hero { --hx: 50%; --hy: 188px; }
    html body section.sops-hero.sops-hero::after { width: 640px !important; height: 640px !important; top: calc(var(--hy) - 320px) !important; left: calc(var(--hx) - 320px) !important; }
    html body .sops-hero__inner::before { left: -34%; top: -6%; width: 300px; height: 300px; }
    html body .sops-hero__inner::after  { right: -20%; bottom: -8%; width: 230px; height: 230px; }
}

/* ---------------------------------------------------------
   02 · WHAT THIS SOLVES — problems feel warm
--------------------------------------------------------- */

html body .sops-solves__card {
    background: linear-gradient(155deg, #FFFDFA, rgba(255,252,248,.62)) !important;
    border: 1px solid rgba(217,183,126,.32) !important;
    box-shadow: 0 30px 50px -36px rgba(70,54,34,.5), inset 0 1px 0 rgba(255,255,255,.95);
    transition: translate .5s var(--sopx-ease), box-shadow .5s var(--sopx-ease), border-color .4s ease;
}
html body .sops-solves__number,
html body .sops-impact__number {
    display: inline-block;
    width: fit-content;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(201,103,67,.09);
    border: 1px solid rgba(201,103,67,.18);
    font-weight: 700;
    letter-spacing: .08em;
}
html body .sops-solves__icon,
html body .sops-build__icon,
html body .sops-impact__icon,
html body .sops-process__icon {
    box-shadow: 0 14px 26px -12px rgba(70,54,34,.4), 0 0 0 5px rgba(217,183,126,.14);
    transition: scale .5s var(--sopx-ease);
}
@media (hover: hover) {
    html body .sops-solves__card:hover {
        translate: 0 -6px;
        border-color: rgba(201,103,67,.4) !important;
        box-shadow: 0 42px 60px -36px rgba(70,54,34,.55), inset 0 1px 0 #fff;
    }
    html body .sops-solves__card:hover .sops-solves__icon { scale: 1.07; }
}
/* warm peach on 2 and 3 (checkerboard), staggered on desktop */
html body .sops-solves__card:nth-child(2),
html body .sops-solves__card:nth-child(3) {
    background: linear-gradient(155deg, rgba(247,226,210,.96), rgba(255,252,248,.6)) !important;
}
@media screen and (min-width: 1101px) {
    html body .sops-solves__grid { align-items: start; }
    html body .sops-solves__card:nth-child(even) { margin-top: 36px; }
}
@media screen and (max-width: 599px) {
    html body .sops-solves__card:nth-child(3) { background: linear-gradient(155deg, #FFFDFA, rgba(255,252,248,.62)) !important; }
    html body .sops-solves__card:nth-child(4) { background: linear-gradient(155deg, rgba(247,226,210,.96), rgba(255,252,248,.6)) !important; }
}

/* ---------------------------------------------------------
   03 · WHAT WE BUILD — zig-zag rows, sage glow
--------------------------------------------------------- */

html body .sops-build__list { position: relative; isolation: isolate; }
html body .sops-build__list::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -50px -70px -50px -50px;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(135,148,123,.18), rgba(135,148,123,0));
}
html body .sops-build__item {
    background: linear-gradient(155deg, #FFFDFA, rgba(255,252,248,.62)) !important;
    border: 1px solid rgba(217,183,126,.32) !important;
    box-shadow: 0 28px 46px -34px rgba(70,54,34,.5), inset 0 1px 0 rgba(255,255,255,.95);
    transition: translate .5s var(--sopx-ease), box-shadow .5s var(--sopx-ease), border-color .4s ease;
}
html body .sops-build__number { font-weight: 700; letter-spacing: .08em; }
@media screen and (min-width: 1101px) {
    html body .sops-build__item:nth-child(even) { margin-left: 34px; width: calc(100% - 34px) !important; max-width: none !important; box-sizing: border-box; }
}
@media (hover: hover) {
    html body .sops-build__item:hover {
        translate: 6px 0;
        border-color: rgba(201,103,67,.4) !important;
        box-shadow: 0 40px 58px -34px rgba(70,54,34,.55), inset 0 1px 0 #fff;
    }
    html body .sops-build__item:hover .sops-build__icon { scale: 1.07; }
}

/* ---------------------------------------------------------
   04 · THE IMPACT — deep green, glass cards
--------------------------------------------------------- */

html body section.sops-impact.sops-impact {
    background-color: #1B271F !important;
    background-image:
        radial-gradient(46% 70% at 90% 6%, rgba(201,103,67,.22), rgba(201,103,67,0) 70%),
        radial-gradient(40% 60% at 4% 100%, rgba(135,148,123,.30), rgba(135,148,123,0) 70%),
        linear-gradient(165deg, #1B271F 0%, #26332A 55%, #2F4030 100%) !important;
    color: #F8F3EB;
}
html body .sops-impact__eyebrow { color: var(--sopx-sand) !important; }
html body .sops-impact__title { color: #F8F3EB !important; text-shadow: 0 2px 30px rgba(0,0,0,.25); }
html body .sops-impact__card {
    background: linear-gradient(155deg, rgba(255,255,255,.11), rgba(255,255,255,.03)) !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    box-shadow: 0 34px 56px -34px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.14);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    transition: translate .5s var(--sopx-ease), box-shadow .5s var(--sopx-ease), border-color .4s ease;
}
html body .sops-impact__card::before { opacity: .35; }
html body .sops-impact__card-title { color: #F8F3EB !important; }
html body .sops-impact__description { color: rgba(248,243,235,.74) !important; }
html body .sops-impact__number {
    color: var(--sopx-sand) !important;
    background: rgba(217,183,126,.10);
    border-color: rgba(217,183,126,.30);
}
html body .sops-impact__icon,
html body .operations-sops-page .sops-impact__icon,
html body .operations-sops-page .sops-impact__card:nth-child(even) .sops-impact__icon,
html body .operations-sops-page .sops-impact__card:nth-child(odd) .sops-impact__icon {
    background-image: linear-gradient(150deg, rgba(255,255,255,.16), rgba(255,255,255,.04)) !important;
    background-color: rgba(27,39,31,.5) !important;
    border: 1px solid rgba(217,183,126,.40) !important;
    color: #E8D8C0 !important;
    box-shadow: 0 16px 28px -14px rgba(0,0,0,.6), 0 0 0 6px rgba(217,183,126,.07);
}
html body .sops-impact__icon::before,
html body .sops-impact__icon::after { opacity: .25; }
html body .sops-impact__icon svg,
html body .sops-impact__icon svg * { stroke: #E8D8C0 !important; }
@media (hover: hover) {
    html body .sops-impact__card:hover {
        translate: 0 -8px;
        border-color: rgba(217,183,126,.55) !important;
        box-shadow: 0 46px 66px -34px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.2);
    }
    html body .sops-impact__card:hover .sops-impact__icon { scale: 1.08; }
}

/* ---------------------------------------------------------
   05 · OUR PROCESS — one soft glass band on desktop
--------------------------------------------------------- */

html body .sops-process__number {
    display: inline-block;
    width: fit-content;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(201,103,67,.09);
    border: 1px solid rgba(201,103,67,.18);
    font-weight: 700;
    letter-spacing: .08em;
}
@media screen and (min-width: 1101px) {
    html body .sops-process__steps { isolation: isolate; }
    html body .sops-process__steps::after {
        content: "";
        position: absolute;
        z-index: -1;
        inset: -34px -30px -26px -30px;
        border-radius: 34px;
        pointer-events: none;
        background: linear-gradient(160deg, rgba(255,255,255,.72), rgba(255,255,255,.28));
        border: 1px solid rgba(217,183,126,.38);
        box-shadow: 0 44px 70px -48px rgba(70,54,34,.55), inset 0 1px 0 rgba(255,255,255,.95);
    }
}
@media (hover: hover) {
    html body .sops-process__step:hover .sops-process__icon { scale: 1.08; }
}

/* ---------------------------------------------------------
   06 · FINAL CTA — halo and rings behind the headline
--------------------------------------------------------- */

html body .sops-final-cta__content { isolation: isolate; }
html body .sops-final-cta__content::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 46%;
    translate: -50% -50%;
    width: min(1300px, 190vw);
    aspect-ratio: 1;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1300 1300' fill='none' stroke-width='1.6'%3E%3Ccircle cx='650' cy='650' r='500' stroke='rgb(201,103,67)' stroke-opacity='.34'/%3E%3Ccircle cx='650' cy='650' r='572' stroke='rgb(217,183,126)' stroke-opacity='.40' stroke-dasharray='2 9' stroke-linecap='round'/%3E%3Ccircle cx='650' cy='650' r='644' stroke='rgb(201,103,67)' stroke-opacity='.16'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    opacity: .6;
}
html body .sops-final-cta__content::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    width: min(760px, 96vw);
    aspect-ratio: 1;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(255,255,255,.85), rgba(255,255,255,0) 74%);
}
html body .sops-final-cta__button {
    overflow: hidden;
    box-shadow: 0 22px 40px -18px rgba(180,80,45,.65), inset 0 1px 0 rgba(255,255,255,.3) !important;
    transition: transform .35s var(--sopx-ease), box-shadow .35s var(--sopx-ease);
}
html body .sops-final-cta__button::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 55%;
    pointer-events: none;
    background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.34), rgba(255,255,255,0));
    translate: -130% 0;
    animation: sopxSheen 5.5s ease-in-out 1.5s infinite;
}
html body .sops-final-cta__arrow { display: inline-block; animation: sopxNudge 2.6s ease-in-out infinite; }
@media (hover: hover) {
    html body .sops-final-cta__button:hover {
        transform: translateY(-3px);
        box-shadow: 0 30px 50px -18px rgba(180,80,45,.75), 0 0 0 5px rgba(201,103,67,.14), inset 0 1px 0 rgba(255,255,255,.34) !important;
    }
}
@media screen and (max-width: 1100px) { html body .sops-final-cta__content::before { width: 900px; } }
@media screen and (max-width: 640px)  { html body .sops-final-cta__content::before { width: 720px; opacity: .45; } }

/* ---------------------------------------------------------
   Reduced motion
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html body .sops-hero__inner::before,
    html body .sops-hero__inner::after,
    html body .sops-hero__button::after,
    html body .sops-hero__arrow,
    html body .sops-final-cta__button::after,
    html body .sops-final-cta__arrow { animation: none !important; }
}

/* END — OPERATIONS & SOPS ELEVATION v2 */





/* =========================================================
   FRAYORA — EMPLOYEE & KNOWLEDGE SYSTEMS ELEVATION v2
   PASTE AT THE VERY BOTTOM OF main.css (after everything else)

   - No wording is changed. No new images are needed.
   - The hero picture background is replaced with a coded one
     (soft glow behind your illustration, thin rings, two glass discs),
     the same family as Business-in-a-Box and Website.
   - The other sections get more variety so the page doesn't repeat.
   - Desktop, tablet and mobile are all handled in this block.
========================================================= */

:root {
    --eksx-sand:  #D9B77E;
    --eksx-terra: #C96743;
    --eksx-sage:  #87947B;
    --eksx-ease:  cubic-bezier(.22, .8, .24, 1);
}

@keyframes eksxDrift  { 0%,100% { translate: 0 0; } 50% { translate: 0 -16px; } }
@keyframes eksxPulse  { 0% { scale: .96; opacity: .5; } 70%,100% { scale: 1.22; opacity: 0; } }
@keyframes eksxSheen  { 0%,60% { translate: -130% 0; } 100% { translate: 130% 0; } }
@keyframes eksxNudge  { 0%,100% { translate: 0 0; } 50% { translate: 4px 0; } }

/* ---------------------------------------------------------
   01 · HERO — coded background (replaces the picture)
--------------------------------------------------------- */

html body section.eks-hero.eks-hero {
    --hx: 70.6%;
    --hy: 303px;
    isolation: isolate;
    background-color: #1E2B23 !important;
    background-image:
        radial-gradient(34% 62% at var(--hx) var(--hy), rgba(217,183,126,.30) 0%, rgba(201,103,67,.11) 48%, rgba(201,103,67,0) 76%),
        radial-gradient(30% 12% at var(--hx) calc(var(--hy) + 210px), rgba(0,0,0,.34) 0%, rgba(0,0,0,0) 100%),
        radial-gradient(42% 64% at 2% 0%, rgba(135,148,123,.36) 0%, rgba(135,148,123,0) 70%),
        radial-gradient(40% 56% at 20% 112%, rgba(83,103,66,.46) 0%, rgba(83,103,66,0) 70%),
        linear-gradient(160deg, #18241C 0%, #24322A 50%, #33442F 100%) !important;
    background-size: auto !important;
    background-position: 0 0 !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
}

/* the old overlay layer is switched off (keeps the hero calm) */
html body section.eks-hero.eks-hero::before { display: none !important; }

/* thin rings around the illustration */
html body section.eks-hero.eks-hero::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 1 !important;
    top: calc(var(--hy) - 500px) !important;
    left: calc(var(--hx) - 500px) !important;
    right: auto !important;
    bottom: auto !important;
    width: 1000px !important;
    height: 1000px !important;
    pointer-events: none !important;
    opacity: 1 !important;
    transform: none !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' fill='none' stroke-width='1.6'%3E%3Ccircle cx='500' cy='500' r='440' stroke='rgb(232,216,192)' stroke-opacity='.16'/%3E%3C/svg%3E") center / 100% 100% no-repeat !important;
    -webkit-mask-image: radial-gradient(closest-side, #000 70%, rgba(0,0,0,0) 100%);
            mask-image: radial-gradient(closest-side, #000 70%, rgba(0,0,0,0) 100%);
}

/* two soft glass discs */
html body .eks-hero__inner::before,
html body .eks-hero__inner::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}
html body .eks-hero__inner::before {
    left: -17%;
    top: -30%;
    width: 440px;
    height: 440px;
    background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(135,148,123,.04) 60%, rgba(135,148,123,0));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 60px 100px -60px rgba(0,0,0,.55);
    animation: eksxDrift 16s ease-in-out infinite;
}
html body .eks-hero__inner::after {
    right: -4%;
    bottom: -24%;
    width: 250px;
    height: 250px;
    background: linear-gradient(200deg, rgba(214,106,67,.22), rgba(201,103,67,.04) 70%);
    box-shadow: inset 0 0 0 1px rgba(255,205,175,.16), 0 40px 80px -50px rgba(0,0,0,.5);
    animation: eksxDrift 20s ease-in-out -7s infinite reverse;
}

/* text shield: rings never touch the words */
html body .eks-hero__content::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -60px -90px -60px -140px;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(27,39,31,.78) 0%, rgba(27,39,31,.5) 55%, rgba(27,39,31,0) 100%);
}

html body .eks-hero__title { text-shadow: 0 2px 40px rgba(0,0,0,.28); }

/* hero button — glass pill with a slow sheen */
html body .eks-hero__button {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05)) !important;
    border: 1px solid rgba(232,216,192,.55) !important;
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    box-shadow: 0 16px 34px -18px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.28) !important;
    transition: transform .35s var(--eksx-ease), box-shadow .35s var(--eksx-ease), border-color .35s ease;
}
html body .eks-hero__button::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 55%;
    pointer-events: none;
    background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.22), rgba(255,255,255,0));
    translate: -130% 0;
    animation: eksxSheen 6s ease-in-out 2s infinite;
}
html body .eks-hero__arrow { display: inline-block; animation: eksxNudge 2.6s ease-in-out infinite; }
@media (hover: hover) {
    html body .eks-hero__button:hover {
        transform: translateY(-2px);
        border-color: rgba(217,183,126,.95) !important;
        box-shadow: 0 22px 40px -18px rgba(0,0,0,.75), 0 0 0 4px rgba(217,183,126,.12), inset 0 1px 0 rgba(255,255,255,.34) !important;
    }
}

/* phone: hero button hugs its text, text on the left, arrow right beside it */
@media screen and (max-width: 599px) {
    html body .eks-hero__button.eks-hero__button.eks-hero__button.eks-hero__button.eks-hero__button {
        display: inline-flex !important;
        width: fit-content !important;
        max-width: 100% !important;
        align-self: flex-start !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        text-align: left !important;
    }
    html body .eks-hero__button.eks-hero__button.eks-hero__button.eks-hero__button.eks-hero__button > span:first-child {
        flex: 0 1 auto !important;
        width: auto !important;
        max-width: none !important;
        text-align: left !important;
    }
}

/* where the illustration sits (so the glow is always behind it) */
@media screen and (min-width: 1101px) and (max-width: 1350px) {
    html body section.eks-hero.eks-hero { --hx: 73.5%; }
}
@media screen and (min-width: 1700px) {
    html body section.eks-hero.eks-hero { --hx: 66%; --hy: 310px; }
}

/* tablet: illustration sits above the text */
@media screen and (max-width: 1100px) {
    html body section.eks-hero.eks-hero { --hx: 69%; --hy: calc(65px + clamp(300px, 45vw, 510px) / 2); }
    html body section.eks-hero.eks-hero::after { width: 900px !important; height: 900px !important; top: calc(var(--hy) - 450px) !important; left: calc(var(--hx) - 450px) !important; }
    html body .eks-hero__inner::before { left: -22%; top: -10%; width: 420px; height: 420px; }
    html body .eks-hero__inner::after  { right: -14%; bottom: -10%; width: 300px; height: 300px; }
    html body .eks-hero__content::before { inset: -40px -40px -40px -40px; }
}
@media screen and (max-width: 749px) {
    html body section.eks-hero.eks-hero { --hx: 58.5%; --hy: 240px; }
}
/* phone */
@media screen and (max-width: 599px) {
    html body section.eks-hero.eks-hero { --hx: 50%; --hy: calc(58px + clamp(225px, 67vw, 310px) / 2); }
    html body section.eks-hero.eks-hero::after { width: 640px !important; height: 640px !important; top: calc(var(--hy) - 320px) !important; left: calc(var(--hx) - 320px) !important; }
    html body .eks-hero__inner::before { left: -34%; top: -6%; width: 300px; height: 300px; }
    html body .eks-hero__inner::after  { right: -24%; bottom: -6%; width: 190px; height: 190px; }
}
@media screen and (max-width: 374px) {
    html body section.eks-hero.eks-hero { --hy: 172px; }
}

/* ---------------------------------------------------------
   02 · A CLEAR PATH — open journey on a soft sage wash
--------------------------------------------------------- */

html body section.eks-path.eks-path {
    background-color: #F7F5EC !important;
    background-image:
        radial-gradient(46% 62% at 100% 0%, rgba(135,148,123,.22), rgba(135,148,123,0) 70%),
        radial-gradient(40% 56% at 0% 100%, rgba(217,183,126,.22), rgba(217,183,126,0) 72%),
        linear-gradient(180deg, #FAF8F1 0%, #F4F2E7 100%) !important;
}
html body .eks-path__inner { position: relative; isolation: isolate; }
html body .eks-path__inner::before {
    content: "";
    position: absolute;
    z-index: -1;
    right: -230px;
    top: -230px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    pointer-events: none;
    border: 1px solid rgba(135,148,123,.28);
}
@media screen and (max-width: 1100px) {
    html body .eks-path__inner::before { right: -250px; top: -260px; width: 460px; height: 460px; }
}
@media screen and (max-width: 599px) {
    html body .eks-path__inner::before { right: -230px; top: -330px; width: 400px; height: 400px; }
}
html body .eks-path__number,
html body .eks-process__number,
html body .eks-impact__number {
    display: inline-block;
    width: fit-content;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(201,103,67,.09);
    border: 1px solid rgba(201,103,67,.18);
    font-weight: 700;
    letter-spacing: .08em;
}

/* one glass-disc language for every icon on the page */
html body .employee-knowledge-page .eks-path__step:nth-child(n) .eks-path__icon.eks-path__icon,
html body .employee-knowledge-page .eks-process__step:nth-child(n) .eks-process__icon.eks-process__icon {
    box-shadow:
        0 5px 12px rgba(60,48,34,.05),
        0 20px 32px -8px rgba(60,48,34,.16),
        0 0 0 6px rgba(217,183,126,.14),
        inset 0 2px 2px rgba(255,255,255,.9),
        inset 0 -4px 9px rgba(120,90,60,.05) !important;
    transition: scale .5s var(--eksx-ease);
}
@media (hover: hover) {
    html body .eks-path__step:hover .eks-path__icon,
    html body .eks-process__step:hover .eks-process__icon { scale: 1.08; }
}

/* ---------------------------------------------------------
   03 · THE IMPACT — deep green, glass cards, staggered
--------------------------------------------------------- */

html body section.eks-impact.eks-impact {
    background-color: #1B271F !important;
    background-image:
        radial-gradient(46% 70% at 90% 6%, rgba(201,103,67,.22), rgba(201,103,67,0) 70%),
        radial-gradient(40% 60% at 4% 100%, rgba(135,148,123,.30), rgba(135,148,123,0) 70%),
        linear-gradient(165deg, #1B271F 0%, #26332A 55%, #2F4030 100%) !important;
    color: #F8F3EB;
}
html body .eks-impact__eyebrow { color: var(--eksx-sand) !important; }
html body .eks-impact__title { color: #F8F3EB !important; text-shadow: 0 2px 30px rgba(0,0,0,.25); }
html body .eks-impact__card {
    background: linear-gradient(155deg, rgba(255,255,255,.11), rgba(255,255,255,.03)) !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    box-shadow: 0 34px 56px -34px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.14) !important;
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    transition: translate .5s var(--eksx-ease), box-shadow .5s var(--eksx-ease), border-color .4s ease;
}
html body .eks-impact__card::before { opacity: .3; }
html body .eks-impact__card-title { color: #F8F3EB !important; }
html body .eks-impact__description { color: rgba(248,243,235,.74) !important; }
html body .eks-impact__number {
    color: var(--eksx-sand) !important;
    background: rgba(217,183,126,.10);
    border-color: rgba(217,183,126,.30);
}
html body .employee-knowledge-page .eks-impact__card:nth-child(n) .eks-impact__icon.eks-impact__icon {
    background-image: linear-gradient(150deg, rgba(255,255,255,.16), rgba(255,255,255,.04)) !important;
    background-color: rgba(27,39,31,.5) !important;
    border: 1px solid rgba(217,183,126,.40) !important;
    color: #E8D8C0 !important;
    box-shadow: 0 16px 28px -14px rgba(0,0,0,.6), 0 0 0 6px rgba(217,183,126,.07) !important;
    transition: scale .5s var(--eksx-ease);
}
html body .eks-impact__icon::before { opacity: .25; }
html body .eks-impact__icon svg,
html body .eks-impact__icon svg * { stroke: #E8D8C0 !important; }
@media screen and (min-width: 1101px) {
    html body .eks-impact__grid { align-items: start; }
    html body .eks-impact__card:nth-child(even) { margin-top: 34px; }
}
@media (hover: hover) {
    html body .eks-impact__card:hover {
        translate: 0 -8px;
        border-color: rgba(217,183,126,.55) !important;
        box-shadow: 0 46px 66px -34px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.2) !important;
    }
    html body .eks-impact__card:hover .eks-impact__icon { scale: 1.08; }
}

/* ---------------------------------------------------------
   04 · OUR PROCESS — one soft glass band on desktop
--------------------------------------------------------- */

@media screen and (min-width: 1101px) {
    html body .eks-process__steps { isolation: isolate; }
    html body .eks-process__steps::after {
        content: "";
        position: absolute;
        z-index: -1;
        inset: -34px -30px -26px -30px;
        border-radius: 34px;
        pointer-events: none;
        background: linear-gradient(160deg, rgba(255,255,255,.72), rgba(255,255,255,.28));
        border: 1px solid rgba(217,183,126,.38);
        box-shadow: 0 44px 70px -48px rgba(70,54,34,.55), inset 0 1px 0 rgba(255,255,255,.95);
    }
}
/* the sideways-scrolling row keeps its icon halo inside the row */
@media screen and (max-width: 1100px) {
    html body .employee-knowledge-page .eks-process__step:nth-child(n) .eks-process__icon.eks-process__icon {
        box-shadow: 0 3px 8px rgba(60,48,34,.06), 0 8px 14px -2px rgba(60,48,34,.12), inset 0 2px 2px rgba(255,255,255,.9), inset 0 -4px 9px rgba(120,90,60,.05) !important;
    }
}

/* ---------------------------------------------------------
   05 · FINAL CTA — halo and rings behind the headline
--------------------------------------------------------- */

html body .eks-final-cta__content { position: relative; isolation: isolate; }
html body .eks-final-cta__content::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 46%;
    translate: -50% -50%;
    width: min(1300px, 190vw);
    aspect-ratio: 1;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1300 1300' fill='none' stroke-width='1.6'%3E%3Ccircle cx='650' cy='650' r='500' stroke='rgb(201,103,67)' stroke-opacity='.34'/%3E%3Ccircle cx='650' cy='650' r='572' stroke='rgb(217,183,126)' stroke-opacity='.40' stroke-dasharray='2 9' stroke-linecap='round'/%3E%3Ccircle cx='650' cy='650' r='644' stroke='rgb(201,103,67)' stroke-opacity='.16'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    opacity: .6;
}
html body .eks-final-cta__content::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    width: min(760px, 96vw);
    aspect-ratio: 1;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(255,255,255,.85), rgba(255,255,255,0) 74%);
}
html body .eks-final-cta__button {
    overflow: hidden;
    box-shadow: 0 22px 40px -18px rgba(180,80,45,.65), inset 0 1px 0 rgba(255,255,255,.3) !important;
    transition: transform .35s var(--eksx-ease), box-shadow .35s var(--eksx-ease);
}
html body .eks-final-cta__button::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 55%;
    pointer-events: none;
    background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.34), rgba(255,255,255,0));
    translate: -130% 0;
    animation: eksxSheen 5.5s ease-in-out 1.5s infinite;
}
html body .eks-final-cta__arrow { display: inline-block; animation: eksxNudge 2.6s ease-in-out infinite; }
@media (hover: hover) {
    html body .eks-final-cta__button:hover {
        transform: translateY(-3px);
        box-shadow: 0 30px 50px -18px rgba(180,80,45,.75), 0 0 0 5px rgba(201,103,67,.14), inset 0 1px 0 rgba(255,255,255,.34) !important;
    }
}
@media screen and (max-width: 1100px) { html body .eks-final-cta__content::before { width: 900px; } }
@media screen and (max-width: 640px)  { html body .eks-final-cta__content::before { width: 720px; opacity: .45; } }

/* ---------------------------------------------------------
   Reduced motion
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html body .eks-hero__inner::before,
    html body .eks-hero__inner::after,
    html body .eks-hero__button::after,
    html body .eks-hero__arrow,
    html body .eks-final-cta__button::after,
    html body .eks-final-cta__arrow { animation: none !important; }
}

/* END — EMPLOYEE & KNOWLEDGE SYSTEMS ELEVATION v2 */

/* =========================================================
   FRAYORA — WORKFLOWS & AUTOMATION ELEVATION v2
   PASTE AT THE VERY BOTTOM OF main.css (after everything else)

   - No wording is changed. No new images are needed.
   - The hero picture background is replaced with a coded one
     (soft glow behind your illustration, thin rings, two glass discs),
     the same family as Business-in-a-Box and Website.
   - The other sections get more variety so the page doesn't repeat.
   - Desktop, tablet and mobile are all handled in this block.
========================================================= */

:root {
    --wfx-sand:  #D9B77E;
    --wfx-terra: #C96743;
    --wfx-sage:  #87947B;
    --wfx-ease:  cubic-bezier(.22, .8, .24, 1);
}

@keyframes wfxDrift  { 0%,100% { translate: 0 0; } 50% { translate: 0 -16px; } }
@keyframes wfxPulse  { 0% { scale: .96; opacity: .5; } 70%,100% { scale: 1.22; opacity: 0; } }
@keyframes wfxSheen  { 0%,60% { translate: -130% 0; } 100% { translate: 130% 0; } }
@keyframes wfxNudge  { 0%,100% { translate: 0 0; } 50% { translate: 4px 0; } }

/* ---------------------------------------------------------
   01 · HERO — coded background (replaces the picture)
--------------------------------------------------------- */

html body section.wf-hero.wf-hero {
    --hx: 70.6%;
    --hy: 303px;
    isolation: isolate;
    background-color: #1E2B23 !important;
    background-image:
        radial-gradient(34% 62% at var(--hx) var(--hy), rgba(217,183,126,.30) 0%, rgba(201,103,67,.11) 48%, rgba(201,103,67,0) 76%),
        radial-gradient(30% 12% at var(--hx) calc(var(--hy) + 210px), rgba(0,0,0,.34) 0%, rgba(0,0,0,0) 100%),
        radial-gradient(42% 64% at 2% 0%, rgba(135,148,123,.36) 0%, rgba(135,148,123,0) 70%),
        radial-gradient(40% 56% at 20% 112%, rgba(83,103,66,.46) 0%, rgba(83,103,66,0) 70%),
        linear-gradient(160deg, #18241C 0%, #24322A 50%, #33442F 100%) !important;
    background-size: auto !important;
    background-position: 0 0 !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
}

/* the old overlay layer is switched off (keeps the hero calm) */
html body section.wf-hero.wf-hero::before { display: none !important; }

/* thin rings around the illustration */
html body section.wf-hero.wf-hero::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 1 !important;
    top: calc(var(--hy) - 500px) !important;
    left: calc(var(--hx) - 500px) !important;
    right: auto !important;
    bottom: auto !important;
    width: 1000px !important;
    height: 1000px !important;
    pointer-events: none !important;
    opacity: 1 !important;
    transform: none !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' fill='none' stroke-width='1.6'%3E%3Ccircle cx='500' cy='500' r='440' stroke='rgb(232,216,192)' stroke-opacity='.16'/%3E%3C/svg%3E") center / 100% 100% no-repeat !important;
    -webkit-mask-image: radial-gradient(closest-side, #000 70%, rgba(0,0,0,0) 100%);
            mask-image: radial-gradient(closest-side, #000 70%, rgba(0,0,0,0) 100%);
}

/* two soft glass discs */
html body .wf-hero__inner::before,
html body .wf-hero__inner::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}
html body .wf-hero__inner::before {
    left: -17%;
    top: -30%;
    width: 440px;
    height: 440px;
    background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(135,148,123,.04) 60%, rgba(135,148,123,0));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 60px 100px -60px rgba(0,0,0,.55);
    animation: wfxDrift 16s ease-in-out infinite;
}
html body .wf-hero__inner::after {
    right: -4%;
    bottom: -24%;
    width: 250px;
    height: 250px;
    background: linear-gradient(200deg, rgba(214,106,67,.22), rgba(201,103,67,.04) 70%);
    box-shadow: inset 0 0 0 1px rgba(255,205,175,.16), 0 40px 80px -50px rgba(0,0,0,.5);
    animation: wfxDrift 20s ease-in-out -7s infinite reverse;
}

/* text shield: rings never touch the words */
html body .wf-hero__content::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -60px -90px -60px -140px;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(27,39,31,.78) 0%, rgba(27,39,31,.5) 55%, rgba(27,39,31,0) 100%);
}

html body .wf-hero__title { text-shadow: 0 2px 40px rgba(0,0,0,.28); }

/* hero button — glass pill with a slow sheen */
html body .wf-hero__button {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05)) !important;
    border: 1px solid rgba(232,216,192,.55) !important;
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    box-shadow: 0 16px 34px -18px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.28) !important;
    transition: transform .35s var(--wfx-ease), box-shadow .35s var(--wfx-ease), border-color .35s ease;
}
html body .wf-hero__button::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 55%;
    pointer-events: none;
    background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.22), rgba(255,255,255,0));
    translate: -130% 0;
    animation: wfxSheen 6s ease-in-out 2s infinite;
}
html body .wf-hero__arrow { display: inline-block; animation: wfxNudge 2.6s ease-in-out infinite; }
@media (hover: hover) {
    html body .wf-hero__button:hover {
        transform: translateY(-2px);
        border-color: rgba(217,183,126,.95) !important;
        box-shadow: 0 22px 40px -18px rgba(0,0,0,.75), 0 0 0 4px rgba(217,183,126,.12), inset 0 1px 0 rgba(255,255,255,.34) !important;
    }
}

/* phone: hero button hugs its text, text on the left, arrow right beside it */
@media screen and (max-width: 599px) {
    html body .wf-hero__button.wf-hero__button.wf-hero__button.wf-hero__button.wf-hero__button {
        display: inline-flex !important;
        width: fit-content !important;
        max-width: 100% !important;
        align-self: flex-start !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        text-align: left !important;
    }
    html body .wf-hero__button.wf-hero__button.wf-hero__button.wf-hero__button.wf-hero__button > span:first-child {
        flex: 0 1 auto !important;
        width: auto !important;
        max-width: none !important;
        text-align: left !important;
    }
}

/* where the illustration sits (so the glow is always behind it) */
@media screen and (min-width: 1101px) and (max-width: 1350px) {
    html body section.wf-hero.wf-hero { --hx: 73.5%; }
}
@media screen and (min-width: 1700px) {
    html body section.wf-hero.wf-hero { --hx: 66%; --hy: 312px; }
}

/* tablet: illustration sits above the text */
@media screen and (max-width: 1100px) {
    html body section.wf-hero.wf-hero { --hx: 68%; --hy: calc(66px + clamp(320px, 46vw, 510px) / 2); }
    html body section.wf-hero.wf-hero::after { width: 900px !important; height: 900px !important; top: calc(var(--hy) - 450px) !important; left: calc(var(--hx) - 450px) !important; }
    html body .wf-hero__inner::before { left: -22%; top: -10%; width: 420px; height: 420px; }
    html body .wf-hero__inner::after  { right: -14%; bottom: -10%; width: 300px; height: 300px; }
    html body .wf-hero__content::before { inset: -40px -40px -40px -40px; }
}
@media screen and (max-width: 749px) {
    html body section.wf-hero.wf-hero { --hx: 57.5%; --hy: 245px; }
}
/* phone */
@media screen and (max-width: 599px) {
    html body section.wf-hero.wf-hero { --hx: 50%; --hy: calc(62px + clamp(235px, 70vw, 330px) / 2); }
    html body section.wf-hero.wf-hero::after { width: 640px !important; height: 640px !important; top: calc(var(--hy) - 320px) !important; left: calc(var(--hx) - 320px) !important; }
    html body .wf-hero__inner::before { left: -34%; top: -6%; width: 300px; height: 300px; }
    html body .wf-hero__inner::after  { right: -24%; bottom: -6%; width: 190px; height: 190px; }
}
@media screen and (max-width: 374px) {
    html body section.wf-hero.wf-hero { --hy: 169px; }
}

/* ---------------------------------------------------------
   02 · BENEFITS — five cards, gently staggered
--------------------------------------------------------- */

html body section.wf-benefits.wf-benefits {
    background-color: #F8F6EE !important;
    background-image:
        radial-gradient(44% 60% at 100% 0%, rgba(135,148,123,.20), rgba(135,148,123,0) 70%),
        radial-gradient(40% 56% at 0% 100%, rgba(217,183,126,.22), rgba(217,183,126,0) 72%),
        linear-gradient(180deg, #FAF8F1 0%, #F5F3E8 100%) !important;
}
html body .wf-benefits__card {
    border: 1px solid rgba(217,183,126,.30) !important;
    box-shadow: 0 30px 50px -36px rgba(70,54,34,.5), inset 0 1px 0 rgba(255,255,255,.95) !important;
    transition: transform .5s var(--wfx-ease), box-shadow .5s var(--wfx-ease), border-color .4s ease;
}
html body .workflows-page .wf-benefits__card:nth-child(n) .wf-benefits__icon.wf-benefits__icon,
html body .workflows-page .wf-transformation__stage:nth-child(n) .wf-transformation__icon.wf-transformation__icon,
html body .workflows-page .wf-connected__step:nth-child(n) .wf-connected__icon.wf-connected__icon {
    transition: scale .5s var(--wfx-ease);
}
html body .workflows-page .wf-benefits__card:nth-child(n) .wf-benefits__icon.wf-benefits__icon {
    box-shadow:
        0 5px 12px rgba(60,48,34,.05),
        0 20px 32px -8px rgba(60,48,34,.16),
        0 0 0 6px rgba(217,183,126,.14),
        inset 0 2px 2px rgba(255,255,255,.9),
        inset 0 -4px 9px rgba(120,90,60,.05) !important;
}
/* sideways-scrolling row: keep the shadow small so the row never shows a cut edge */
@media screen and (min-width: 600px) and (max-width: 1100px) {
    html body .wf-benefits__card { box-shadow: 0 12px 22px -14px rgba(70,54,34,.38), inset 0 1px 0 rgba(255,255,255,.95) !important; }
}
@media screen and (min-width: 1101px) {
    html body .wf-benefits__card:nth-child(even) { margin-top: 28px; margin-bottom: -28px; }
}
@media (hover: hover) {
    html body .wf-benefits__card:hover {
        transform: translateY(-8px);
        border-color: rgba(201,103,67,.4) !important;
        box-shadow: 0 42px 60px -36px rgba(70,54,34,.55), inset 0 1px 0 #fff !important;
    }
    html body .wf-benefits__card:hover .wf-benefits__icon { scale: 1.07; }
}

/* ---------------------------------------------------------
   03 · HOW IT WORKS — deep green, glass cards, glowing result
--------------------------------------------------------- */

html body section.wf-transformation.wf-transformation {
    background-color: #1B271F !important;
    background-image:
        radial-gradient(46% 70% at 92% 8%, rgba(201,103,67,.22), rgba(201,103,67,0) 70%),
        radial-gradient(40% 60% at 2% 100%, rgba(135,148,123,.30), rgba(135,148,123,0) 70%),
        linear-gradient(165deg, #1B271F 0%, #26332A 55%, #2F4030 100%) !important;
    color: #F8F3EB;
}
html body .wf-transformation__eyebrow { color: var(--wfx-sand) !important; }
html body .wf-transformation__title { color: #F8F3EB !important; text-shadow: 0 2px 30px rgba(0,0,0,.25); }
html body .wf-transformation__body { color: rgba(248,243,235,.76) !important; }
html body .wf-transformation__card {
    background: linear-gradient(155deg, rgba(255,255,255,.11), rgba(255,255,255,.03)) !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    box-shadow: 0 34px 56px -34px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.14) !important;
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    transition: transform .5s var(--wfx-ease), box-shadow .5s var(--wfx-ease), border-color .4s ease;
}
/* the RESULT card glows warm */
html body .wf-transformation__stage:nth-child(3) .wf-transformation__card {
    background: linear-gradient(155deg, rgba(217,183,126,.26), rgba(201,103,67,.10) 70%, rgba(255,255,255,.03)) !important;
    border-color: rgba(217,183,126,.50) !important;
    box-shadow: 0 34px 56px -34px rgba(0,0,0,.65), 0 0 60px -14px rgba(217,183,126,.28), inset 0 1px 0 rgba(255,255,255,.2) !important;
}
html body .wf-transformation__card-title { color: #F8F3EB !important; }
html body .wf-transformation__description { color: rgba(248,243,235,.76) !important; }
html body .wf-transformation__number {
    background: var(--wfx-sand) !important;
    color: #1B271F !important;
    box-shadow: 0 0 0 5px rgba(217,183,126,.16);
}
html body .wf-transformation__label {
    background: rgba(255,255,255,.10) !important;
    color: #E8D8C0 !important;
    border: 1px solid rgba(255,255,255,.16);
}
html body .wf-transformation__stage:nth-child(3) .wf-transformation__label {
    background: rgba(217,183,126,.22) !important;
    border-color: rgba(217,183,126,.5);
    color: #F8E6C2 !important;
}
html body .workflows-page .wf-transformation__stage:nth-child(n) .wf-transformation__icon.wf-transformation__icon {
    background-image: linear-gradient(150deg, rgba(255,255,255,.16), rgba(255,255,255,.04)) !important;
    background-color: rgba(27,39,31,.5) !important;
    border: 1px solid rgba(217,183,126,.40) !important;
    color: #E8D8C0 !important;
    box-shadow: 0 16px 28px -14px rgba(0,0,0,.6), 0 0 0 6px rgba(217,183,126,.07) !important;
}
html body .wf-transformation__icon::before { opacity: .25; }
html body .wf-transformation__icon svg,
html body .wf-transformation__icon svg * { stroke: #E8D8C0 !important; }
/* the arrows between the cards turn sand */
html body .workflows-page .wf-transformation__stage:not(:last-child)::after {
    border-top-color: var(--wfx-sand);
    border-right-color: var(--wfx-sand);
}
html body .workflows-page .wf-transformation__stage:not(:last-child)::before {
    background-color: var(--wfx-sand);
}
@media (hover: hover) {
    html body .wf-transformation__card:hover {
        transform: translateY(-8px);
        border-color: rgba(217,183,126,.55) !important;
        box-shadow: 0 46px 66px -34px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.2) !important;
    }
    html body .wf-transformation__card:hover .wf-transformation__icon { scale: 1.08; }
}

/* ---------------------------------------------------------
   04 · BUILT AROUND YOUR BUSINESS — warm wash, glass band
--------------------------------------------------------- */

html body section.wf-connected.wf-connected {
    background-color: #FAF6EE !important;
    background-image:
        radial-gradient(44% 64% at 0% 0%, rgba(221,156,116,.18), rgba(221,156,116,0) 70%),
        radial-gradient(42% 60% at 100% 100%, rgba(135,148,123,.20), rgba(135,148,123,0) 72%),
        linear-gradient(180deg, #FBF8F2 0%, #F8F2E8 100%) !important;
}
html body .workflows-page .wf-connected__step:nth-child(n) .wf-connected__icon.wf-connected__icon {
    box-shadow:
        0 5px 12px rgba(60,48,34,.05),
        0 20px 32px -8px rgba(60,48,34,.16),
        0 0 0 6px rgba(217,183,126,.14),
        inset 0 2px 2px rgba(255,255,255,.9),
        inset 0 -4px 9px rgba(120,90,60,.05) !important;
}
html body .wf-connected__number { box-shadow: 0 0 0 4px rgba(250,246,238,.9), 0 6px 12px -4px rgba(27,39,31,.4); }
@media screen and (min-width: 1101px) {
    html body .wf-connected__flow { isolation: isolate; }
    html body .wf-connected__flow::after {
        content: "";
        position: absolute;
        z-index: -1;
        inset: -40px -32px -30px -48px;
        border-radius: 34px;
        pointer-events: none;
        background: linear-gradient(160deg, rgba(255,255,255,.74), rgba(255,255,255,.30));
        border: 1px solid rgba(217,183,126,.38);
        box-shadow: 0 44px 70px -48px rgba(70,54,34,.55), inset 0 1px 0 rgba(255,255,255,.95);
    }
}
@media (hover: hover) {
    html body .wf-connected__step:hover .wf-connected__icon { scale: 1.08; }
}
/* the sideways-scrolling row keeps its icon halo inside the row */
@media screen and (max-width: 1100px) {
    html body .workflows-page .wf-connected__step:nth-child(n) .wf-connected__icon.wf-connected__icon {
        box-shadow: 0 3px 8px rgba(60,48,34,.06), 0 8px 14px -2px rgba(60,48,34,.12), inset 0 2px 2px rgba(255,255,255,.9), inset 0 -4px 9px rgba(120,90,60,.05) !important;
    }
}

/* ---------------------------------------------------------
   05 · FINAL CTA — halo and rings behind the headline
--------------------------------------------------------- */

html body .wf-final-cta__content { position: relative; isolation: isolate; }
html body .wf-final-cta__content::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 46%;
    translate: -50% -50%;
    width: min(1300px, 190vw);
    aspect-ratio: 1;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1300 1300' fill='none' stroke-width='1.6'%3E%3Ccircle cx='650' cy='650' r='500' stroke='rgb(201,103,67)' stroke-opacity='.34'/%3E%3Ccircle cx='650' cy='650' r='572' stroke='rgb(217,183,126)' stroke-opacity='.40' stroke-dasharray='2 9' stroke-linecap='round'/%3E%3Ccircle cx='650' cy='650' r='644' stroke='rgb(201,103,67)' stroke-opacity='.16'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    opacity: .6;
}
html body .wf-final-cta__content::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    width: min(760px, 96vw);
    aspect-ratio: 1;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(255,255,255,.85), rgba(255,255,255,0) 74%);
}
html body .wf-final-cta__button {
    overflow: hidden;
    box-shadow: 0 22px 40px -18px rgba(27,39,31,.7), inset 0 1px 0 rgba(255,255,255,.2) !important;
    transition: transform .35s var(--wfx-ease), box-shadow .35s var(--wfx-ease);
}
html body .wf-final-cta__button::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 55%;
    pointer-events: none;
    background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.2), rgba(255,255,255,0));
    translate: -130% 0;
    animation: wfxSheen 5.5s ease-in-out 1.5s infinite;
}
html body .wf-final-cta__arrow { display: inline-block; animation: wfxNudge 2.6s ease-in-out infinite; }
@media (hover: hover) {
    html body .wf-final-cta__button:hover {
        transform: translateY(-3px);
        box-shadow: 0 30px 50px -18px rgba(27,39,31,.8), 0 0 0 5px rgba(217,183,126,.22), inset 0 1px 0 rgba(255,255,255,.26) !important;
    }
}
@media screen and (max-width: 1100px) { html body .wf-final-cta__content::before { width: 900px; } }
@media screen and (max-width: 640px)  { html body .wf-final-cta__content::before { width: 720px; opacity: .45; } }

/* ---------------------------------------------------------
   Reduced motion
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html body .wf-hero__inner::before,
    html body .wf-hero__inner::after,
    html body .wf-hero__button::after,
    html body .wf-hero__arrow,
    html body .wf-final-cta__button::after,
    html body .wf-final-cta__arrow { animation: none !important; }
}

/* END — WORKFLOWS & AUTOMATION ELEVATION v2 */



/* =========================================================
   FRAYORA — ONGOING IMPROVEMENT ELEVATION v2
   PASTE AT THE VERY BOTTOM OF main.css (after everything else)

   - No wording is changed. No new images are needed.
   - The hero picture background is replaced with a coded one
     (soft glow behind your illustration, thin rings, two glass discs),
     the same family as Business-in-a-Box and Website.
   - The other sections get more variety so the page doesn't repeat.
   - Desktop, tablet and mobile are all handled in this block.
========================================================= */

:root {
    --oix-sand:  #D9B77E;
    --oix-terra: #C96743;
    --oix-sage:  #87947B;
    --oix-ease:  cubic-bezier(.22, .8, .24, 1);
}

@keyframes oixDrift  { 0%,100% { translate: 0 0; } 50% { translate: 0 -16px; } }
@keyframes oixPulse  { 0% { scale: .96; opacity: .5; } 70%,100% { scale: 1.22; opacity: 0; } }
@keyframes oixSheen  { 0%,60% { translate: -130% 0; } 100% { translate: 130% 0; } }
@keyframes oixNudge  { 0%,100% { translate: 0 0; } 50% { translate: 4px 0; } }

/* ---------------------------------------------------------
   01 · HERO — coded background (replaces the picture)
--------------------------------------------------------- */

html body section.oi-hero.oi-hero {
    --hx: 70.6%;
    --hy: 300px;
    isolation: isolate;
    background-color: #1E2B23 !important;
    background-image:
        radial-gradient(34% 62% at var(--hx) var(--hy), rgba(217,183,126,.30) 0%, rgba(201,103,67,.11) 48%, rgba(201,103,67,0) 76%),
        radial-gradient(30% 12% at var(--hx) calc(var(--hy) + 210px), rgba(0,0,0,.34) 0%, rgba(0,0,0,0) 100%),
        radial-gradient(42% 64% at 2% 0%, rgba(135,148,123,.36) 0%, rgba(135,148,123,0) 70%),
        radial-gradient(40% 56% at 20% 112%, rgba(83,103,66,.46) 0%, rgba(83,103,66,0) 70%),
        linear-gradient(160deg, #18241C 0%, #24322A 50%, #33442F 100%) !important;
    background-size: auto !important;
    background-position: 0 0 !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
}

/* the old overlay layer is switched off (keeps the hero calm) */
html body section.oi-hero.oi-hero::before { display: none !important; }

/* thin rings around the illustration */
html body section.oi-hero.oi-hero::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 1 !important;
    top: calc(var(--hy) - 500px) !important;
    left: calc(var(--hx) - 500px) !important;
    right: auto !important;
    bottom: auto !important;
    width: 1000px !important;
    height: 1000px !important;
    pointer-events: none !important;
    opacity: 1 !important;
    transform: none !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' fill='none' stroke-width='1.6'%3E%3Ccircle cx='500' cy='500' r='440' stroke='rgb(232,216,192)' stroke-opacity='.16'/%3E%3C/svg%3E") center / 100% 100% no-repeat !important;
    -webkit-mask-image: radial-gradient(closest-side, #000 70%, rgba(0,0,0,0) 100%);
            mask-image: radial-gradient(closest-side, #000 70%, rgba(0,0,0,0) 100%);
}

/* two soft glass discs */
html body .oi-hero__inner::before,
html body .oi-hero__inner::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}
html body .oi-hero__inner::before {
    left: -17%;
    top: -30%;
    width: 440px;
    height: 440px;
    background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(135,148,123,.04) 60%, rgba(135,148,123,0));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 60px 100px -60px rgba(0,0,0,.55);
    animation: oixDrift 16s ease-in-out infinite;
}
html body .oi-hero__inner::after {
    right: -4%;
    bottom: -24%;
    width: 250px;
    height: 250px;
    background: linear-gradient(200deg, rgba(214,106,67,.22), rgba(201,103,67,.04) 70%);
    box-shadow: inset 0 0 0 1px rgba(255,205,175,.16), 0 40px 80px -50px rgba(0,0,0,.5);
    animation: oixDrift 20s ease-in-out -7s infinite reverse;
}

/* text shield: rings never touch the words */
html body .oi-hero__content::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -60px -90px -60px -140px;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(27,39,31,.78) 0%, rgba(27,39,31,.5) 55%, rgba(27,39,31,0) 100%);
}

html body .oi-hero__title { text-shadow: 0 2px 40px rgba(0,0,0,.28); }

/* hero button — glass pill with a slow sheen */
html body .oi-hero__button {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05)) !important;
    border: 1px solid rgba(232,216,192,.55) !important;
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    box-shadow: 0 16px 34px -18px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.28) !important;
    transition: transform .35s var(--oix-ease), box-shadow .35s var(--oix-ease), border-color .35s ease;
}
html body .oi-hero__button::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 55%;
    pointer-events: none;
    background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.22), rgba(255,255,255,0));
    translate: -130% 0;
    animation: oixSheen 6s ease-in-out 2s infinite;
}
html body .oi-hero__arrow { display: inline-block; animation: oixNudge 2.6s ease-in-out infinite; }
@media (hover: hover) {
    html body .oi-hero__button:hover {
        transform: translateY(-2px);
        border-color: rgba(217,183,126,.95) !important;
        box-shadow: 0 22px 40px -18px rgba(0,0,0,.75), 0 0 0 4px rgba(217,183,126,.12), inset 0 1px 0 rgba(255,255,255,.34) !important;
    }
}

/* phone: hero button hugs its text, text on the left, arrow right beside it */
@media screen and (max-width: 599px) {
    html body .oi-hero__button.oi-hero__button.oi-hero__button.oi-hero__button.oi-hero__button {
        display: inline-flex !important;
        width: fit-content !important;
        max-width: 100% !important;
        align-self: flex-start !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        text-align: left !important;
    }
    html body .oi-hero__button.oi-hero__button.oi-hero__button.oi-hero__button.oi-hero__button > span:first-child {
        flex: 0 1 auto !important;
        width: auto !important;
        max-width: none !important;
        text-align: left !important;
    }
}

/* where the illustration sits (so the glow is always behind it) */
@media screen and (min-width: 1101px) and (max-width: 1350px) {
    html body section.oi-hero.oi-hero { --hx: 73.5%; --hy: 303px; }
}
@media screen and (min-width: 1700px) {
    html body section.oi-hero.oi-hero { --hx: 66%; --hy: 307px; }
}

/* tablet: illustration sits above the text */
@media screen and (max-width: 1100px) {
    html body section.oi-hero.oi-hero { --hx: 68%; --hy: 310px; }
    html body section.oi-hero.oi-hero::after { width: 900px !important; height: 900px !important; top: calc(var(--hy) - 450px) !important; left: calc(var(--hx) - 450px) !important; }
    html body .oi-hero__inner::before { left: -22%; top: -10%; width: 420px; height: 420px; }
    html body .oi-hero__inner::after  { right: -14%; bottom: -10%; width: 300px; height: 300px; }
    html body .oi-hero__content::before { inset: -40px -40px -40px -40px; }
}
@media screen and (max-width: 960px) { html body section.oi-hero.oi-hero { --hy: 282px; } }
@media screen and (max-width: 880px) { html body section.oi-hero.oi-hero { --hx: 67%; --hy: 258px; } }
@media screen and (max-width: 749px) { html body section.oi-hero.oi-hero { --hx: 58%; --hy: 246px; } }
/* phone */
@media screen and (max-width: 599px) {
    html body section.oi-hero.oi-hero { --hx: 50%; --hy: 230px; }
    html body section.oi-hero.oi-hero::after { width: 640px !important; height: 640px !important; top: calc(var(--hy) - 320px) !important; left: calc(var(--hx) - 320px) !important; }
    html body .oi-hero__inner::before { left: -34%; top: -6%; width: 300px; height: 300px; }
    html body .oi-hero__inner::after  { right: -24%; bottom: -6%; width: 190px; height: 190px; }
}
@media screen and (max-width: 440px) { html body section.oi-hero.oi-hero { --hy: 205px; } }
@media screen and (max-width: 374px) { html body section.oi-hero.oi-hero { --hy: 172px; } }

/* ---------------------------------------------------------
   02 · WHAT WE COVER — open grid on a soft sage wash
--------------------------------------------------------- */

html body section.oi-cover.oi-cover {
    background-color: #F5F4E9 !important;
    background-image:
        radial-gradient(46% 62% at 100% 0%, rgba(135,148,123,.22), rgba(135,148,123,0) 70%),
        radial-gradient(40% 56% at 0% 100%, rgba(217,183,126,.22), rgba(217,183,126,0) 72%),
        linear-gradient(180deg, #FAF8F1 0%, #F3F1E5 100%) !important;
}
html body .oi-cover__inner { position: relative; isolation: isolate; }
html body .oi-cover__inner::before {
    content: "";
    position: absolute;
    z-index: -1;
    right: -230px;
    top: -230px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    pointer-events: none;
    border: 1px solid rgba(135,148,123,.28);
}
@media screen and (max-width: 1100px) {
    html body .oi-cover__inner::before { right: -250px; top: -260px; width: 460px; height: 460px; }
}
@media screen and (max-width: 599px) {
    html body .oi-cover__inner::before { right: -230px; top: -330px; width: 400px; height: 400px; }
}
html body .oi-cover__number,
html body .oi-approach__number,
html body .oi-real__number {
    display: inline-block;
    width: fit-content;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(201,103,67,.09);
    border: 1px solid rgba(201,103,67,.18);
    font-weight: 700;
    letter-spacing: .08em;
}

/* one glass-disc language for every light icon */
html body .ongoing-improvement-page .oi-cover__item:nth-child(n) .oi-cover__icon.oi-cover__icon,
html body .ongoing-improvement-page .oi-approach__step:nth-child(n) .oi-approach__icon.oi-approach__icon,
html body .ongoing-improvement-page .oi-real__feature:nth-child(n) .oi-real__icon.oi-real__icon {
    box-shadow:
        0 5px 12px rgba(60,48,34,.05),
        0 20px 32px -8px rgba(60,48,34,.16),
        0 0 0 6px rgba(217,183,126,.14),
        inset 0 2px 2px rgba(255,255,255,.9),
        inset 0 -4px 9px rgba(120,90,60,.05) !important;
    transition: scale .5s var(--oix-ease);
}
@media (hover: hover) {
    html body .oi-cover__item:hover .oi-cover__icon,
    html body .oi-approach__step:hover .oi-approach__icon,
    html body .oi-real__feature:hover .oi-real__icon { scale: 1.08; }
}

/* ---------------------------------------------------------
   03 · MORE THAN SUPPORT — warm deep olive, glass icons
--------------------------------------------------------- */

html body section.oi-partner.oi-partner {
    background-color: #26332A !important;
    background-image:
        radial-gradient(46% 70% at 96% 4%, rgba(201,103,67,.22), rgba(201,103,67,0) 70%),
        radial-gradient(42% 64% at 2% 100%, rgba(135,148,123,.30), rgba(135,148,123,0) 70%),
        linear-gradient(165deg, #1E2B22 0%, #2A3A2D 55%, #354630 100%) !important;
}
html body .oi-partner__inner { position: relative; isolation: isolate; }
html body .oi-partner__inner::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: -260px;
    bottom: -300px;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    pointer-events: none;
    border: 1px solid rgba(217,183,126,.16);
    background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,0) 60%);
}
html body .oi-partner__eyebrow { color: var(--oix-sand) !important; }
html body .oi-partner__number {
    display: inline-block;
    width: fit-content;
    padding: 3px 10px;
    border-radius: 999px;
    color: var(--oix-sand) !important;
    background: rgba(217,183,126,.10);
    border: 1px solid rgba(217,183,126,.30);
    font-weight: 700;
    letter-spacing: .08em;
}
/* a little air between the number and the small label under it */
html body .ongoing-improvement-page .oi-partner__item:nth-child(n) .oi-partner__number.oi-partner__number {
    margin-bottom: 16px !important;
}
html body .ongoing-improvement-page .oi-partner__item:nth-child(n) .oi-partner__icon.oi-partner__icon {
    box-shadow: 0 16px 28px -14px rgba(0,0,0,.6), 0 0 0 6px rgba(217,183,126,.07), inset 0 1px 1px rgba(255,255,255,.18) !important;
    transition: scale .5s var(--oix-ease);
}
@media (hover: hover) {
    html body .oi-partner__item:hover .oi-partner__icon { scale: 1.08; }
}
@media screen and (max-width: 599px) {
    html body .oi-partner__inner::before { left: -240px; bottom: -280px; width: 420px; height: 420px; }
}

/* ---------------------------------------------------------
   04 · PLANS — warm wash, richer cards, Improve stands out
--------------------------------------------------------- */

html body section.oi-pricing.oi-pricing {
    background-color: #FAF6EE !important;
    background-image:
        radial-gradient(44% 40% at 100% 0%, rgba(201,103,67,.12), rgba(201,103,67,0) 72%),
        radial-gradient(46% 38% at 0% 62%, rgba(135,148,123,.16), rgba(135,148,123,0) 72%),
        linear-gradient(180deg, #FBF8F2 0%, #F8F1E6 100%) !important;
}
html body .oi-pricing__consultation {
    background: linear-gradient(160deg, rgba(255,255,255,.92), rgba(255,250,244,.7)) !important;
    border: 1px solid rgba(217,183,126,.45) !important;
    box-shadow: 0 34px 56px -36px rgba(110,70,40,.45), inset 0 1px 0 rgba(255,255,255,.95) !important;
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
}
html body .oi-pricing__consultation-button {
    position: relative;
    overflow: hidden;
    box-shadow: 0 18px 32px -16px rgba(180,80,45,.6), inset 0 1px 0 rgba(255,255,255,.3) !important;
}

/* Maintain · soft sage glow */
html body section.oi-pricing .oi-pricing__plan--maintain.oi-pricing__plan {
    background-image:
        radial-gradient(70% 36% at 0% 0%, rgba(135,148,123,.22), rgba(135,148,123,0) 72%),
        linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 40%) !important;
    box-shadow: 0 34px 56px -34px rgba(60,80,52,.38), inset 0 1px 0 rgba(255,255,255,.9) !important;
}
/* Improve · warm glow, the plan that draws the eye */
html body section.oi-pricing .oi-pricing__plan--improve.oi-pricing__plan {
    background-image:
        radial-gradient(76% 38% at 100% 0%, rgba(201,103,67,.20), rgba(201,103,67,0) 72%),
        linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 40%) !important;
    box-shadow:
        0 0 0 6px rgba(201,103,67,.08),
        0 44px 70px -34px rgba(201,103,67,.5),
        inset 0 1px 0 rgba(255,255,255,.9) !important;
}
/* Evolve · deep green with sand light */
html body section.oi-pricing .oi-pricing__plan--evolve.oi-pricing__plan {
    background-image:
        radial-gradient(80% 36% at 100% 0%, rgba(217,183,126,.26), rgba(217,183,126,0) 72%),
        radial-gradient(70% 30% at 0% 100%, rgba(135,148,123,.28), rgba(135,148,123,0) 72%),
        linear-gradient(165deg, #1E2B22 0%, #2C3C2F 60%, #354631 100%) !important;
    box-shadow: 0 44px 70px -34px rgba(20,32,24,.7), inset 0 1px 0 rgba(255,255,255,.14) !important;
}
@media (hover: hover) {
    html body .oi-pricing__plan { transition: transform .5s var(--oix-ease), box-shadow .5s var(--oix-ease); }
    html body .oi-pricing__plan:hover { transform: translateY(-8px); }
}
html body .oi-pricing__plan-badge,
html body .oi-pricing__availability { letter-spacing: .1em; }

/* ---------------------------------------------------------
   05 · THE FRAYORA SYSTEM — near-black green, glass panels
--------------------------------------------------------- */

html body section.oi-system.oi-system {
    background-color: #17211A !important;
    background-image:
        radial-gradient(50% 44% at 50% 0%, rgba(217,183,126,.16), rgba(217,183,126,0) 72%),
        radial-gradient(42% 52% at 100% 100%, rgba(201,103,67,.20), rgba(201,103,67,0) 72%),
        radial-gradient(40% 50% at 0% 90%, rgba(135,148,123,.26), rgba(135,148,123,0) 72%),
        linear-gradient(180deg, #17211A 0%, #1F2C23 100%) !important;
}
html body .oi-system__inner { position: relative; isolation: isolate; }
html body .oi-system__inner::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: -420px;
    translate: -50% 0;
    width: 1100px;
    height: 1100px;
    border-radius: 50%;
    pointer-events: none;
    border: 1px solid rgba(217,183,126,.14);
    -webkit-mask-image: linear-gradient(180deg, #000 30%, rgba(0,0,0,0) 62%);
            mask-image: linear-gradient(180deg, #000 30%, rgba(0,0,0,0) 62%);
}
html body .oi-system__eyebrow { color: var(--oix-sand) !important; }
html body .oi-system__title { text-shadow: 0 2px 30px rgba(0,0,0,.3); }
html body .oi-system__panel--patchwork {
    background: linear-gradient(155deg, rgba(255,255,255,.07), rgba(255,255,255,.02)) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: 0 34px 56px -34px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.10) !important;
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
}
html body .oi-system__panel--frayora {
    background:
        radial-gradient(80% 50% at 100% 0%, rgba(217,183,126,.20), rgba(217,183,126,0) 72%),
        linear-gradient(155deg, rgba(255,255,255,.14), rgba(255,255,255,.04)) !important;
    border: 1px solid rgba(217,183,126,.42) !important;
    box-shadow: 0 44px 66px -34px rgba(0,0,0,.75), 0 0 0 6px rgba(217,183,126,.05), inset 0 1px 0 rgba(255,255,255,.18) !important;
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
}
html body .oi-system__transition-symbol {
    box-shadow: 0 0 0 7px rgba(217,183,126,.12), 0 14px 26px -8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.7) !important;
}
@media screen and (max-width: 749px) {
    html body .oi-system__inner::before { width: 760px; height: 760px; top: -340px; }
}

/* ---------------------------------------------------------
   06 · OUR APPROACH — warm wash, one soft glass band
--------------------------------------------------------- */

html body section.oi-approach.oi-approach {
    background-color: #FAF5EC !important;
    background-image:
        radial-gradient(44% 50% at 0% 0%, rgba(217,183,126,.20), rgba(217,183,126,0) 72%),
        radial-gradient(46% 54% at 100% 100%, rgba(201,103,67,.12), rgba(201,103,67,0) 72%),
        linear-gradient(180deg, #FBF8F2 0%, #F8F1E5 100%) !important;
}
@media screen and (min-width: 1101px) {
    html body .oi-approach__steps { position: relative; isolation: isolate; }
    html body .oi-approach__steps::after {
        content: "";
        position: absolute;
        z-index: -1;
        inset: -34px -30px -26px -30px;
        border-radius: 34px;
        pointer-events: none;
        background: linear-gradient(160deg, rgba(255,255,255,.72), rgba(255,255,255,.28));
        border: 1px solid rgba(217,183,126,.38);
        box-shadow: 0 44px 70px -48px rgba(70,54,34,.55), inset 0 1px 0 rgba(255,255,255,.95);
    }
}
@media screen and (max-width: 1100px) {
    html body .ongoing-improvement-page .oi-approach__step:nth-child(n) .oi-approach__icon.oi-approach__icon {
        box-shadow: 0 3px 8px rgba(60,48,34,.06), 0 8px 14px -2px rgba(60,48,34,.12), inset 0 2px 2px rgba(255,255,255,.9), inset 0 -4px 9px rgba(120,90,60,.05) !important;
    }
}

/* ---------------------------------------------------------
   07 · BUILT FOR REAL BUSINESS — peach wash with sage glow
--------------------------------------------------------- */

html body section.oi-real.oi-real {
    background-color: #F6EDE2 !important;
    background-image:
        radial-gradient(44% 56% at 0% 100%, rgba(135,148,123,.22), rgba(135,148,123,0) 72%),
        radial-gradient(46% 52% at 100% 0%, rgba(217,183,126,.26), rgba(217,183,126,0) 72%),
        linear-gradient(180deg, #F8F0E6 0%, #F4E8DA 100%) !important;
}
html body .oi-real__feature {
    box-shadow: 0 34px 56px -34px rgba(110,70,40,.38), inset 0 1px 0 rgba(255,255,255,.95) !important;
    transition: transform .5s var(--oix-ease), box-shadow .5s var(--oix-ease);
}
@media (hover: hover) {
    html body .oi-real__feature:hover {
        transform: translateY(-6px);
        box-shadow: 0 46px 66px -34px rgba(110,70,40,.5), inset 0 1px 0 rgba(255,255,255,.95) !important;
    }
}

/* ---------------------------------------------------------
   08 · FINAL CTA — halo and rings behind the headline
--------------------------------------------------------- */

html body .oi-final__inner { position: relative; isolation: isolate; }
html body .oi-final__inner::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 46%;
    translate: -50% -50%;
    width: min(1300px, 190vw);
    aspect-ratio: 1;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1300 1300' fill='none' stroke-width='1.6'%3E%3Ccircle cx='650' cy='650' r='500' stroke='rgb(201,103,67)' stroke-opacity='.34'/%3E%3Ccircle cx='650' cy='650' r='572' stroke='rgb(217,183,126)' stroke-opacity='.40' stroke-dasharray='2 9' stroke-linecap='round'/%3E%3Ccircle cx='650' cy='650' r='644' stroke='rgb(201,103,67)' stroke-opacity='.16'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    opacity: .6;
}
html body .oi-final__inner::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    width: min(760px, 96vw);
    aspect-ratio: 1;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(255,255,255,.85), rgba(255,255,255,0) 74%);
}
html body .oi-final__button {
    position: relative;
    overflow: hidden;
    box-shadow: 0 22px 40px -18px rgba(180,80,45,.65), inset 0 1px 0 rgba(255,255,255,.3) !important;
    transition: transform .35s var(--oix-ease), box-shadow .35s var(--oix-ease);
}
html body .oi-final__button::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 55%;
    pointer-events: none;
    background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.34), rgba(255,255,255,0));
    translate: -130% 0;
    animation: oixSheen 5.5s ease-in-out 1.5s infinite;
}
html body .oi-final__button-arrow { display: inline-block; animation: oixNudge 2.6s ease-in-out infinite; }
@media (hover: hover) {
    html body .oi-final__button:hover {
        transform: translateY(-3px);
        box-shadow: 0 30px 50px -18px rgba(180,80,45,.75), 0 0 0 5px rgba(201,103,67,.14), inset 0 1px 0 rgba(255,255,255,.34) !important;
    }
}
@media screen and (max-width: 1100px) { html body .oi-final__inner::before { width: 900px; } }
@media screen and (max-width: 640px)  { html body .oi-final__inner::before { width: 720px; opacity: .45; } }

/* ---------------------------------------------------------
   Reduced motion
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html body .oi-hero__inner::before,
    html body .oi-hero__inner::after,
    html body .oi-hero__button::after,
    html body .oi-hero__arrow,
    html body .oi-final__button::after,
    html body .oi-final__button-arrow { animation: none !important; }
}

/* END — ONGOING IMPROVEMENT ELEVATION v2 */



/* =========================================================
   PHONE HERO BUTTON FIX — Employee & Knowledge, Workflows,
   Ongoing Improvement
   PASTE AT THE VERY BOTTOM OF main.css (after everything else)

   The button text was too long to fit on one line on narrow phones,
   so it wrapped into two lines and pushed the arrow to the far right.
   This makes the text and padding a little smaller on phones so the
   text stays on one line, left-aligned, with the arrow right beside it.
========================================================= */
@media screen and (max-width: 599px) {
    html body :is(#frx-fix, .eks-hero__button, .wf-hero__button, .oi-hero__button) {
        display: inline-flex !important;
        width: fit-content !important;
        max-width: 100% !important;
        align-self: flex-start !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        text-align: left !important;
        font-size: clamp(13px, 4.1vw, 16px) !important;
        padding-left: clamp(16px, 5vw, 22px) !important;
        padding-right: clamp(16px, 5vw, 22px) !important;
    }
    html body :is(#frx-fix, .eks-hero__button, .wf-hero__button, .oi-hero__button) > span:first-child {
        flex: 0 1 auto !important;
        width: auto !important;
        max-width: none !important;
        text-align: left !important;
        font-size: inherit !important;
        line-height: 1.25 !important;
    }
}


/* =========================================================
   FRAYORA — OUR WORK ELEVATION v6
   PASTE AT THE VERY BOTTOM OF main.css (after everything else)

   If you pasted an earlier "Our Work elevation" (v2, v3, v4 or v5), DELETE it first
   (find its banner "FRAYORA — OUR WORK ELEVATION" and remove that
   whole block, down to its "END — OUR WORK ELEVATION" line).

   - No wording, template or image files are changed.
   - Everything is scoped to the Our Work page only, so the About page,
     Our Approach and the others keep their own heroes.
   - The hero photo is replaced by a coded background: warm light and
     slow flowing lines (a nod to the lines inside the Frayora logo).
     To bring the photo back, delete the block marked "01 · HERO"
     (down to the line that says "END OF HERO") and nothing else changes.
   - Desktop, tablet and mobile are all in this one file.
========================================================= */

:root {
    --owx-sand:  #D9B77E;
    --owx-terra: #C96743;
    --owx-sage:  #87947B;
    --owx-ease:  cubic-bezier(.22, .8, .24, 1);
}

@keyframes owxFlow  { 0%,100% { translate: -2.5% 0; } 50% { translate: 2.5% 0; } }
@keyframes owxSheen { 0%,60% { translate: -130% 0; } 100% { translate: 130% 0; } }
@keyframes owxNudge { 0%,100% { translate: 0 0; } 50% { translate: 4px 0; } }

/* ---------------------------------------------------------
   01 · HERO — coded background (replaces the photograph)
--------------------------------------------------------- */

html body .frayora-work-page .about-us-page .about-hero {
    --oy: 300px;
    isolation: isolate;
    background-color: #17221B !important;
}

/* layered light: warm glow behind the title, sage top-left, sunrise along the bottom */
html body .frayora-work-page .about-us-page .about-hero .about-hero__media {
    background-image:
        radial-gradient(34% 46% at 50% var(--oy), rgba(232,206,152,.34) 0%, rgba(201,103,67,.14) 52%, rgba(201,103,67,0) 80%),
        radial-gradient(70% 38% at 50% 104%, rgba(214,106,67,.40) 0%, rgba(214,106,67,0) 72%),
        radial-gradient(46% 62% at 0% 0%, rgba(135,148,123,.34) 0%, rgba(135,148,123,0) 70%),
        radial-gradient(40% 56% at 100% 0%, rgba(83,103,66,.34) 0%, rgba(83,103,66,0) 70%),
        linear-gradient(180deg, #131D17 0%, #1E2C23 55%, #2B3C2D 100%) !important;
    background-size: auto !important;
    background-position: 0 0 !important;
    background-repeat: no-repeat !important;
    filter: none !important;
}

/* the old flat overlay is switched off; slow flowing lines take its place */
html body .frayora-work-page .about-us-page .about-hero .about-hero__overlay {
    background: none !important;
    background-color: transparent !important;
}
html body .frayora-work-page .about-us-page .about-hero .about-hero__overlay::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: -6% !important;
    right: -6% !important;
    bottom: 0 !important;
    inset-inline: -6% !important;
    height: auto !important;
    width: auto !important;
    pointer-events: none;
    animation: owxFlow 46s ease-in-out infinite;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 700' preserveAspectRatio='none' fill='none'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' x2='1' y1='0' y2='0'%3E%3Cstop offset='0' stop-color='rgb(217,183,126)' stop-opacity='0'/%3E%3Cstop offset='.3' stop-color='rgb(217,183,126)'/%3E%3Cstop offset='.7' stop-color='rgb(232,206,152)'/%3E%3Cstop offset='1' stop-color='rgb(217,183,126)' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' x1='0' x2='1' y1='0' y2='0'%3E%3Cstop offset='0' stop-color='rgb(201,103,67)' stop-opacity='0'/%3E%3Cstop offset='.35' stop-color='rgb(224,128,90)'/%3E%3Cstop offset='.8' stop-color='rgb(201,103,67)'/%3E%3Cstop offset='1' stop-color='rgb(201,103,67)' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 151C19 149 76 146 114 141C152 136 190 126 229 121C267 116 305 110 343 110C381 109 419 112 457 116C495 120 533 128 571 132C610 135 648 140 686 139C724 138 762 133 800 125C838 118 876 105 914 96C952 86 990 74 1029 69C1067 63 1105 61 1143 63C1181 65 1219 73 1257 81C1295 89 1333 102 1371 110C1410 117 1448 125 1486 128C1524 131 1581 127 1600 127' stroke='url(%23s)' stroke-opacity='0.16' stroke-width='1.3'/%3E%3Cpath d='M0 179C19 177 76 170 114 165C152 160 190 152 229 148C267 145 305 143 343 144C381 145 419 151 457 155C495 159 533 166 571 168C610 170 648 171 686 167C724 163 762 154 800 144C838 135 876 121 914 112C952 103 990 93 1029 90C1067 87 1105 88 1143 92C1181 97 1219 108 1257 116C1295 124 1333 136 1371 143C1410 149 1448 154 1486 155C1524 157 1581 151 1600 150' stroke='url(%23s)' stroke-opacity='0.21' stroke-width='1.3'/%3E%3Cpath d='M0 205C19 203 76 195 114 190C152 186 190 180 229 178C267 177 305 178 343 181C381 183 419 190 457 194C495 197 533 202 571 202C610 202 648 198 686 191C724 184 762 172 800 162C838 151 876 137 914 129C952 122 990 115 1029 114C1067 113 1105 118 1143 124C1181 131 1219 142 1257 151C1295 159 1333 169 1371 174C1410 179 1448 180 1486 180C1524 180 1581 174 1600 172' stroke='url(%23s)' stroke-opacity='0.27' stroke-width='1.3'/%3E%3Cpath d='M0 230C19 228 76 220 114 217C152 214 190 211 229 211C267 211 305 215 343 219C381 222 419 229 457 232C495 234 533 236 571 232C610 229 648 221 686 212C724 203 762 189 800 178C838 167 876 155 914 149C952 143 990 140 1029 141C1067 143 1105 151 1143 158C1181 165 1219 177 1257 184C1295 191 1333 199 1371 202C1410 205 1448 204 1486 203C1524 202 1581 197 1600 196' stroke='url(%23s)' stroke-opacity='0.33' stroke-width='1.3'/%3E%3Cpath d='M0 256C19 254 76 247 114 246C152 244 190 244 229 246C267 248 305 254 343 258C381 261 419 267 457 267C495 268 533 265 571 259C610 253 648 242 686 231C724 220 762 205 800 195C838 185 876 175 914 171C952 167 990 168 1029 171C1067 175 1105 184 1143 192C1181 199 1219 210 1257 216C1295 222 1333 226 1371 228C1410 230 1448 227 1486 226C1524 225 1581 223 1600 222' stroke='url(%23s)' stroke-opacity='0.38' stroke-width='1.3'/%3E%3Cpath d='M0 282C19 281 76 277 114 277C152 277 190 281 229 284C267 287 305 294 343 297C381 299 419 302 457 300C495 298 533 292 571 283C610 274 648 260 686 248C724 237 762 222 800 213C838 204 876 197 914 195C952 194 990 198 1029 203C1067 207 1105 218 1143 225C1181 232 1219 241 1257 245C1295 250 1333 252 1371 252C1410 253 1448 250 1486 250C1524 249 1581 251 1600 251' stroke='url(%23c)' stroke-opacity='0.43' stroke-width='1.6'/%3E%3Cpath d='M0 310C19 310 76 309 114 311C152 313 190 319 229 323C267 326 305 333 343 334C381 335 419 335 457 330C495 325 533 315 571 304C610 293 648 277 686 265C724 253 762 240 800 233C838 226 876 222 914 223C952 223 990 229 1029 235C1067 241 1105 251 1143 257C1181 263 1219 269 1257 272C1295 275 1333 275 1371 276C1410 276 1448 273 1486 275C1524 276 1581 281 1600 283' stroke='url(%23s)' stroke-opacity='0.47' stroke-width='1.3'/%3E%3Cpath d='M0 341C19 342 76 344 114 348C152 351 190 358 229 362C267 365 305 370 343 369C381 368 419 364 457 356C495 348 533 335 571 323C610 310 648 294 686 283C724 272 762 261 800 256C838 250 876 250 914 252C952 254 990 262 1029 267C1067 273 1105 282 1143 287C1181 292 1219 296 1257 298C1295 299 1333 298 1371 299C1410 299 1448 299 1486 302C1524 305 1581 315 1600 317' stroke='url(%23s)' stroke-opacity='0.49' stroke-width='1.3'/%3E%3Cpath d='M0 374C19 376 76 382 114 386C152 391 190 398 229 400C267 403 305 404 343 401C381 397 419 389 457 379C495 369 533 353 571 340C610 327 648 312 686 302C724 292 762 284 800 280C838 277 876 279 914 283C952 286 990 294 1029 299C1067 304 1105 311 1143 315C1181 318 1219 320 1257 321C1295 323 1333 321 1371 323C1410 325 1448 326 1486 332C1524 337 1581 351 1600 355' stroke='url(%23s)' stroke-opacity='0.50' stroke-width='1.3'/%3E%3Cpath d='M0 410C19 412 76 421 114 426C152 430 190 436 229 437C267 438 305 436 343 430C381 424 419 412 457 400C495 388 533 371 571 358C610 345 648 331 686 322C724 314 762 309 800 308C838 306 876 310 914 314C952 317 990 325 1029 329C1067 334 1105 338 1143 341C1181 343 1219 343 1257 344C1295 346 1333 345 1371 349C1410 352 1448 357 1486 365C1524 372 1581 390 1600 395' stroke='url(%23s)' stroke-opacity='0.49' stroke-width='1.3'/%3E%3Cpath d='M0 447C19 450 76 461 114 465C152 469 190 473 229 471C267 470 305 464 343 456C381 447 419 433 457 419C495 406 533 389 571 376C610 364 648 352 686 345C724 339 762 336 800 336C838 336 876 341 914 345C952 348 990 354 1029 357C1067 361 1105 363 1143 365C1181 367 1219 366 1257 368C1295 370 1333 371 1371 377C1410 382 1448 390 1486 400C1524 410 1581 430 1600 436' stroke='url(%23s)' stroke-opacity='0.47' stroke-width='1.3'/%3E%3Cpath d='M0 486C19 489 76 500 114 503C152 506 190 507 229 503C267 499 305 490 343 479C381 468 419 452 457 438C495 424 533 407 571 396C610 385 648 375 686 370C724 365 762 365 800 366C838 366 876 371 914 374C952 377 990 382 1029 384C1067 386 1105 387 1143 388C1181 390 1219 389 1257 393C1295 396 1333 400 1371 408C1410 415 1448 427 1486 439C1524 450 1581 471 1600 478' stroke='url(%23c)' stroke-opacity='0.43' stroke-width='1.6'/%3E%3Cpath d='M0 526C19 528 76 539 114 540C152 541 190 538 229 532C267 525 305 513 343 500C381 488 419 470 457 456C495 442 533 427 571 417C610 407 648 401 686 397C724 393 762 394 800 395C838 396 876 400 914 403C952 405 990 407 1029 408C1067 410 1105 409 1143 411C1181 413 1219 414 1257 419C1295 424 1333 432 1371 442C1410 452 1448 466 1486 479C1524 492 1581 512 1600 519' stroke='url(%23s)' stroke-opacity='0.38' stroke-width='1.3'/%3E%3Cpath d='M0 566C19 567 76 575 114 574C152 573 190 567 229 558C267 549 305 534 343 520C381 506 419 489 457 475C495 462 533 449 571 441C610 432 648 427 686 425C724 422 762 424 800 425C838 425 876 428 914 429C952 430 990 431 1029 432C1067 432 1105 432 1143 435C1181 437 1219 441 1257 448C1295 455 1333 466 1371 478C1410 490 1448 507 1486 520C1524 534 1581 552 1600 559' stroke='url(%23s)' stroke-opacity='0.33' stroke-width='1.3'/%3E%3Cpath d='M0 604C19 604 76 609 114 606C152 602 190 593 229 582C267 571 305 554 343 540C381 525 419 508 457 496C495 483 533 473 571 465C610 458 648 455 686 453C724 451 762 452 800 452C838 452 876 453 914 454C952 454 990 453 1029 454C1067 455 1105 455 1143 460C1181 464 1219 470 1257 480C1295 489 1333 503 1371 517C1410 531 1448 548 1486 562C1524 575 1581 591 1600 597' stroke='url(%23s)' stroke-opacity='0.27' stroke-width='1.3'/%3E%3Cpath d='M0 641C19 640 76 641 114 635C152 628 190 616 229 604C267 591 305 573 343 559C381 545 419 529 457 518C495 507 533 498 571 492C610 486 648 483 686 481C724 479 762 479 800 479C838 478 876 477 914 477C952 477 990 475 1029 477C1067 478 1105 481 1143 487C1181 493 1219 503 1257 514C1295 526 1333 543 1371 557C1410 572 1448 590 1486 602C1524 615 1581 628 1600 633' stroke='url(%23s)' stroke-opacity='0.21' stroke-width='1.3'/%3E%3Cpath d='M0 675C19 673 76 670 114 661C152 653 190 638 229 625C267 611 305 593 343 579C381 566 419 551 457 541C495 531 533 524 571 519C610 513 648 511 686 508C724 506 762 505 800 503C838 502 876 499 914 499C952 499 990 498 1029 500C1067 503 1105 508 1143 516C1181 525 1219 537 1257 551C1295 565 1333 583 1371 598C1410 614 1448 631 1486 642C1524 654 1581 663 1600 667' stroke='url(%23s)' stroke-opacity='0.16' stroke-width='1.3'/%3E%3C/svg%3E") center / 100% 100% no-repeat !important;
    -webkit-mask-image: radial-gradient(ellipse 62% 70% at 50% 54%, #000 30%, rgba(0,0,0,0) 100%);
            mask-image: radial-gradient(ellipse 62% 70% at 50% 54%, #000 30%, rgba(0,0,0,0) 100%);
}

/* soft shield so the title is always easy to read */
html body .frayora-work-page .about-us-page .about-hero__inner::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 14% 8% 14% 8%;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(19,29,23,.50) 0%, rgba(19,29,23,.24) 60%, rgba(19,29,23,0) 100%);
}
html body .frayora-work-page .about-us-page .about-hero__title { text-shadow: 0 2px 40px rgba(0,0,0,.34); }

@media screen and (max-width: 1100px) {
    html body .frayora-work-page .about-us-page .about-hero { --oy: 290px; }
}
@media screen and (max-width: 599px) {
    html body .frayora-work-page .about-us-page .about-hero { --oy: 185px; }
    html body .frayora-work-page .about-us-page .about-hero__inner::before { inset: 14% 0 14% 0; }
}
/* END OF HERO */

/* ---------------------------------------------------------
   02 · PORTFOLIO — soft sage wash, polished filters and cards
--------------------------------------------------------- */

html body section.fw-portfolio.fw-portfolio {
    background-color: #F8F6EE !important;
    background-image:
        radial-gradient(44% 34% at 100% 0%, rgba(135,148,123,.18), rgba(135,148,123,0) 72%),
        radial-gradient(42% 30% at 0% 62%, rgba(217,183,126,.18), rgba(217,183,126,0) 72%),
        linear-gradient(180deg, #FBF9F3 0%, #F6F3E8 100%) !important;
}

/* filter pills */
html body .fw-portfolio__filter {
    transition: transform .35s var(--owx-ease), box-shadow .35s var(--owx-ease), border-color .3s ease, background-color .3s ease;
}
html body .fw-portfolio__filter.is-active {
    box-shadow: 0 16px 28px -14px rgba(27,39,31,.7), inset 0 1px 0 rgba(255,255,255,.14) !important;
}
@media (hover: hover) {
    html body .fw-portfolio__filter:not(.is-active):hover {
        transform: translateY(-2px);
        border-color: rgba(217,183,126,.85) !important;
        box-shadow: 0 14px 24px -14px rgba(110,70,40,.4);
    }
}

/* project cards */
html body .fw-project__media {
    box-shadow: 0 30px 50px -30px rgba(40,52,40,.5), 0 0 0 1px rgba(255,255,255,.6) inset;
    transition: transform .5s var(--owx-ease), box-shadow .5s var(--owx-ease);
}
html body .fw-project__media img { transition: transform .8s var(--owx-ease); }
html body .fw-project__number {
    display: inline-block;
    width: fit-content;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(201,103,67,.09);
    border: 1px solid rgba(201,103,67,.18);
    font-weight: 700;
    letter-spacing: .08em;
}
html body .fw-project__link span { display: inline-block; transition: translate .35s var(--owx-ease); }
@media (hover: hover) {
    html body .fw-project:hover .fw-project__media {
        transform: translateY(-8px);
        box-shadow: 0 44px 64px -30px rgba(40,52,40,.62), 0 0 0 1px rgba(255,255,255,.7) inset;
    }
    html body .fw-project:hover .fw-project__media img { transform: scale(1.045); }
    html body .fw-project__link:hover span { translate: 3px -1px; }
}

/* cards waiting for a picture: a quiet deep-green "window" instead of a pale box */
html body .frayora-work-page .fw-project .fw-project__media.fw-project__media--placeholder {
    background-color: #1F2C24 !important;
    background-image:
        radial-gradient(70% 80% at 100% 0%, rgba(217,183,126,.26), rgba(217,183,126,0) 70%),
        radial-gradient(60% 70% at 0% 100%, rgba(135,148,123,.34), rgba(135,148,123,0) 72%),
        linear-gradient(155deg, #2A3A2E 0%, #1B271F 100%) !important;
    border: 1px solid rgba(217,183,126,.22) !important;
}
html body .frayora-work-page .fw-project:nth-child(4n + 3) .fw-project__media--placeholder {
    background-image:
        radial-gradient(70% 80% at 100% 0%, rgba(214,106,67,.34), rgba(214,106,67,0) 70%),
        radial-gradient(60% 70% at 0% 100%, rgba(217,183,126,.24), rgba(217,183,126,0) 72%),
        linear-gradient(155deg, #2E3A2D 0%, #1B271F 100%) !important;
}
html body .frayora-work-page .fw-project:nth-child(4n + 2) .fw-project__media--placeholder {
    background-image:
        radial-gradient(70% 80% at 0% 0%, rgba(135,148,123,.40), rgba(135,148,123,0) 70%),
        radial-gradient(60% 70% at 100% 100%, rgba(217,183,126,.20), rgba(217,183,126,0) 72%),
        linear-gradient(155deg, #28382C 0%, #19251D 100%) !important;
}
html body .frayora-work-page .fw-project .fw-project__placeholder-art {
    width: 62%;
    height: 70%;
    border: 1px solid rgba(232,216,192,.28);
    border-radius: 14px 5px 14px 5px;
    background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.03));
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    box-shadow: 0 30px 40px -22px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.16);
}
/* three small window dots */
html body .frayora-work-page .fw-project .fw-project__placeholder-art::before {
    left: 7%;
    top: 10%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(232,206,152,.85);
    box-shadow: 12px 0 0 rgba(232,206,152,.5), 24px 0 0 rgba(232,206,152,.25);
}
/* a tiny page: sidebar, headline, text lines and two accent tiles */
html body .frayora-work-page .fw-project .fw-project__placeholder-art::after {
    left: 7%;
    top: 26%;
    width: 86%;
    height: 66%;
    border: 0;
    border-radius: 0;
    background:
        linear-gradient(rgba(255,255,255,.14), rgba(255,255,255,.14)) 0 0 / 24% 100% no-repeat,
        linear-gradient(rgba(232,206,152,.55), rgba(232,206,152,.55)) 32% 2% / 42% 9% no-repeat,
        linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,.2)) 32% 24% / 66% 5% no-repeat,
        linear-gradient(rgba(255,255,255,.14), rgba(255,255,255,.14)) 32% 38% / 52% 5% no-repeat,
        linear-gradient(rgba(214,106,67,.55), rgba(214,106,67,.55)) 32% 62% / 31% 34% no-repeat,
        linear-gradient(rgba(135,148,123,.6), rgba(135,148,123,.6)) 67% 62% / 31% 34% no-repeat;
}

/* view all */
html body .fw-portfolio__more-button {
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    box-shadow: 0 18px 30px -18px rgba(70,54,34,.45), inset 0 1px 0 rgba(255,255,255,.9) !important;
    transition: transform .35s var(--owx-ease), box-shadow .35s var(--owx-ease), border-color .3s ease;
}
html body .fw-portfolio__more-arrow { display: inline-block; animation: owxNudge 2.6s ease-in-out infinite; }
@media (hover: hover) {
    html body .fw-portfolio__more-button:hover {
        transform: translateY(-3px);
        border-color: rgba(217,183,126,.9) !important;
        box-shadow: 0 26px 40px -18px rgba(70,54,34,.5), 0 0 0 4px rgba(217,183,126,.14), inset 0 1px 0 rgba(255,255,255,.95) !important;
    }
}

/* ---------------------------------------------------------
   03 · THE PRINCIPLES — deep green band, glass icons
--------------------------------------------------------- */

html body section.fw-principles.fw-principles {
    background-color: #1B271F !important;
    background-image:
        radial-gradient(46% 70% at 94% 6%, rgba(201,103,67,.22), rgba(201,103,67,0) 70%),
        radial-gradient(42% 64% at 2% 100%, rgba(135,148,123,.30), rgba(135,148,123,0) 70%),
        linear-gradient(165deg, #1B271F 0%, #26332A 55%, #2F4030 100%) !important;
    color: #F8F3EB;
}
html body .fw-principles__inner { isolation: isolate; }
html body .fw-principles__inner::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: -360px;
    translate: -50% 0;
    width: 1000px;
    height: 1000px;
    border-radius: 50%;
    pointer-events: none;
    border: 1px solid rgba(217,183,126,.14);
    -webkit-mask-image: linear-gradient(180deg, #000 30%, rgba(0,0,0,0) 62%);
            mask-image: linear-gradient(180deg, #000 30%, rgba(0,0,0,0) 62%);
}
html body .fw-principles__title { color: #F8F3EB !important; }
html body .fw-principles__description { color: rgba(248,243,235,.74) !important; }

/* dark glass badge, sand line icons */
html body .frayora-work-page .fw-principles__item:nth-child(n) .fw-principles__icon.fw-principles__icon {
    color: #E4C98F !important;
    background: linear-gradient(145deg, rgba(247,240,230,.16) 0%, rgba(247,240,230,.05) 100%) !important;
    border: 1px solid rgba(217,183,126,.38) !important;
    box-shadow: 0 16px 28px -14px rgba(0,0,0,.6), 0 0 0 6px rgba(217,183,126,.07), inset 0 1px 1px rgba(255,255,255,.18) !important;
    transition: scale .5s var(--owx-ease);
}
html body .fw-principles__icon::before { border-color: rgba(255,255,255,.12) !important; }
@media (hover: hover) {
    html body .fw-principles__item:hover .fw-principles__icon { scale: 1.08; }
}
/* the thin dividers between the five items */
html body .fw-principles__item::before,
html body .fw-principles__item::after { border-color: rgba(217,183,126,.26) !important; }

/* ---------------------------------------------------------
   04 · FINAL CTA — warm light, flowing lines, a sunrise at the footer
--------------------------------------------------------- */

html body .frayora-work-page .fw-final-cta.fw-final-cta {
    isolation: isolate;
    padding-top: 36px !important;
    padding-bottom: calc(110px + var(--fr-edge)) !important;
    background-color: #F8F3EB !important;
    background-image:
        radial-gradient(64% 52% at 50% 104%, rgba(201,103,67,.34) 0%, rgba(214,150,100,.16) 46%, rgba(201,103,67,0) 78%),
        radial-gradient(40% 52% at 0% 20%, rgba(135,148,123,.22) 0%, rgba(135,148,123,0) 70%),
        radial-gradient(40% 52% at 100% 20%, rgba(217,183,126,.30) 0%, rgba(217,183,126,0) 70%),
        linear-gradient(180deg, #FAF6EF 0%, #F6EADB 100%) !important;
}
/* slow flowing lines (the same family as the hero, in warm sand and terracotta) */
html body .frayora-work-page .fw-final-cta.fw-final-cta::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 0;
    top: 0 !important; bottom: 0 !important;
    left: -6% !important; right: -6% !important;
    pointer-events: none;
    animation: owxFlow 46s ease-in-out infinite;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 700' preserveAspectRatio='none' fill='none'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' x2='1' y1='0' y2='0'%3E%3Cstop offset='0' stop-color='rgb(150,112,52)' stop-opacity='0'/%3E%3Cstop offset='.3' stop-color='rgb(150,112,52)'/%3E%3Cstop offset='.7' stop-color='rgb(170,134,76)'/%3E%3Cstop offset='1' stop-color='rgb(150,112,52)' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' x1='0' x2='1' y1='0' y2='0'%3E%3Cstop offset='0' stop-color='rgb(201,103,67)' stop-opacity='0'/%3E%3Cstop offset='.35' stop-color='rgb(205,100,60)'/%3E%3Cstop offset='.8' stop-color='rgb(201,103,67)'/%3E%3Cstop offset='1' stop-color='rgb(201,103,67)' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 151C19 149 76 146 114 141C152 136 190 126 229 121C267 116 305 110 343 110C381 109 419 112 457 116C495 120 533 128 571 132C610 135 648 140 686 139C724 138 762 133 800 125C838 118 876 105 914 96C952 86 990 74 1029 69C1067 63 1105 61 1143 63C1181 65 1219 73 1257 81C1295 89 1333 102 1371 110C1410 117 1448 125 1486 128C1524 131 1581 127 1600 127' stroke='url(%23s)' stroke-opacity='0.20' stroke-width='1.5'/%3E%3Cpath d='M0 179C19 177 76 170 114 165C152 160 190 152 229 148C267 145 305 143 343 144C381 145 419 151 457 155C495 159 533 166 571 168C610 170 648 171 686 167C724 163 762 154 800 144C838 135 876 121 914 112C952 103 990 93 1029 90C1067 87 1105 88 1143 92C1181 97 1219 108 1257 116C1295 124 1333 136 1371 143C1410 149 1448 154 1486 155C1524 157 1581 151 1600 150' stroke='url(%23s)' stroke-opacity='0.27' stroke-width='1.5'/%3E%3Cpath d='M0 205C19 203 76 195 114 190C152 186 190 180 229 178C267 177 305 178 343 181C381 183 419 190 457 194C495 197 533 202 571 202C610 202 648 198 686 191C724 184 762 172 800 162C838 151 876 137 914 129C952 122 990 115 1029 114C1067 113 1105 118 1143 124C1181 131 1219 142 1257 151C1295 159 1333 169 1371 174C1410 179 1448 180 1486 180C1524 180 1581 174 1600 172' stroke='url(%23s)' stroke-opacity='0.35' stroke-width='1.5'/%3E%3Cpath d='M0 230C19 228 76 220 114 217C152 214 190 211 229 211C267 211 305 215 343 219C381 222 419 229 457 232C495 234 533 236 571 232C610 229 648 221 686 212C724 203 762 189 800 178C838 167 876 155 914 149C952 143 990 140 1029 141C1067 143 1105 151 1143 158C1181 165 1219 177 1257 184C1295 191 1333 199 1371 202C1410 205 1448 204 1486 203C1524 202 1581 197 1600 196' stroke='url(%23s)' stroke-opacity='0.43' stroke-width='1.5'/%3E%3Cpath d='M0 256C19 254 76 247 114 246C152 244 190 244 229 246C267 248 305 254 343 258C381 261 419 267 457 267C495 268 533 265 571 259C610 253 648 242 686 231C724 220 762 205 800 195C838 185 876 175 914 171C952 167 990 168 1029 171C1067 175 1105 184 1143 192C1181 199 1219 210 1257 216C1295 222 1333 226 1371 228C1410 230 1448 227 1486 226C1524 225 1581 223 1600 222' stroke='url(%23s)' stroke-opacity='0.49' stroke-width='1.5'/%3E%3Cpath d='M0 282C19 281 76 277 114 277C152 277 190 281 229 284C267 287 305 294 343 297C381 299 419 302 457 300C495 298 533 292 571 283C610 274 648 260 686 248C724 237 762 222 800 213C838 204 876 197 914 195C952 194 990 198 1029 203C1067 207 1105 218 1143 225C1181 232 1219 241 1257 245C1295 250 1333 252 1371 252C1410 253 1448 250 1486 250C1524 249 1581 251 1600 251' stroke='url(%23c)' stroke-opacity='0.56' stroke-width='1.6'/%3E%3Cpath d='M0 310C19 310 76 309 114 311C152 313 190 319 229 323C267 326 305 333 343 334C381 335 419 335 457 330C495 325 533 315 571 304C610 293 648 277 686 265C724 253 762 240 800 233C838 226 876 222 914 223C952 223 990 229 1029 235C1067 241 1105 251 1143 257C1181 263 1219 269 1257 272C1295 275 1333 275 1371 276C1410 276 1448 273 1486 275C1524 276 1581 281 1600 283' stroke='url(%23s)' stroke-opacity='0.61' stroke-width='1.5'/%3E%3Cpath d='M0 341C19 342 76 344 114 348C152 351 190 358 229 362C267 365 305 370 343 369C381 368 419 364 457 356C495 348 533 335 571 323C610 310 648 294 686 283C724 272 762 261 800 256C838 250 876 250 914 252C952 254 990 262 1029 267C1067 273 1105 282 1143 287C1181 292 1219 296 1257 298C1295 299 1333 298 1371 299C1410 299 1448 299 1486 302C1524 305 1581 315 1600 317' stroke='url(%23s)' stroke-opacity='0.63' stroke-width='1.5'/%3E%3Cpath d='M0 374C19 376 76 382 114 386C152 391 190 398 229 400C267 403 305 404 343 401C381 397 419 389 457 379C495 369 533 353 571 340C610 327 648 312 686 302C724 292 762 284 800 280C838 277 876 279 914 283C952 286 990 294 1029 299C1067 304 1105 311 1143 315C1181 318 1219 320 1257 321C1295 323 1333 321 1371 323C1410 325 1448 326 1486 332C1524 337 1581 351 1600 355' stroke='url(%23s)' stroke-opacity='0.65' stroke-width='1.5'/%3E%3Cpath d='M0 410C19 412 76 421 114 426C152 430 190 436 229 437C267 438 305 436 343 430C381 424 419 412 457 400C495 388 533 371 571 358C610 345 648 331 686 322C724 314 762 309 800 308C838 306 876 310 914 314C952 317 990 325 1029 329C1067 334 1105 338 1143 341C1181 343 1219 343 1257 344C1295 346 1333 345 1371 349C1410 352 1448 357 1486 365C1524 372 1581 390 1600 395' stroke='url(%23s)' stroke-opacity='0.63' stroke-width='1.5'/%3E%3Cpath d='M0 447C19 450 76 461 114 465C152 469 190 473 229 471C267 470 305 464 343 456C381 447 419 433 457 419C495 406 533 389 571 376C610 364 648 352 686 345C724 339 762 336 800 336C838 336 876 341 914 345C952 348 990 354 1029 357C1067 361 1105 363 1143 365C1181 367 1219 366 1257 368C1295 370 1333 371 1371 377C1410 382 1448 390 1486 400C1524 410 1581 430 1600 436' stroke='url(%23s)' stroke-opacity='0.61' stroke-width='1.5'/%3E%3Cpath d='M0 486C19 489 76 500 114 503C152 506 190 507 229 503C267 499 305 490 343 479C381 468 419 452 457 438C495 424 533 407 571 396C610 385 648 375 686 370C724 365 762 365 800 366C838 366 876 371 914 374C952 377 990 382 1029 384C1067 386 1105 387 1143 388C1181 390 1219 389 1257 393C1295 396 1333 400 1371 408C1410 415 1448 427 1486 439C1524 450 1581 471 1600 478' stroke='url(%23c)' stroke-opacity='0.56' stroke-width='1.6'/%3E%3Cpath d='M0 526C19 528 76 539 114 540C152 541 190 538 229 532C267 525 305 513 343 500C381 488 419 470 457 456C495 442 533 427 571 417C610 407 648 401 686 397C724 393 762 394 800 395C838 396 876 400 914 403C952 405 990 407 1029 408C1067 410 1105 409 1143 411C1181 413 1219 414 1257 419C1295 424 1333 432 1371 442C1410 452 1448 466 1486 479C1524 492 1581 512 1600 519' stroke='url(%23s)' stroke-opacity='0.49' stroke-width='1.5'/%3E%3Cpath d='M0 566C19 567 76 575 114 574C152 573 190 567 229 558C267 549 305 534 343 520C381 506 419 489 457 475C495 462 533 449 571 441C610 432 648 427 686 425C724 422 762 424 800 425C838 425 876 428 914 429C952 430 990 431 1029 432C1067 432 1105 432 1143 435C1181 437 1219 441 1257 448C1295 455 1333 466 1371 478C1410 490 1448 507 1486 520C1524 534 1581 552 1600 559' stroke='url(%23s)' stroke-opacity='0.43' stroke-width='1.5'/%3E%3Cpath d='M0 604C19 604 76 609 114 606C152 602 190 593 229 582C267 571 305 554 343 540C381 525 419 508 457 496C495 483 533 473 571 465C610 458 648 455 686 453C724 451 762 452 800 452C838 452 876 453 914 454C952 454 990 453 1029 454C1067 455 1105 455 1143 460C1181 464 1219 470 1257 480C1295 489 1333 503 1371 517C1410 531 1448 548 1486 562C1524 575 1581 591 1600 597' stroke='url(%23s)' stroke-opacity='0.35' stroke-width='1.5'/%3E%3Cpath d='M0 641C19 640 76 641 114 635C152 628 190 616 229 604C267 591 305 573 343 559C381 545 419 529 457 518C495 507 533 498 571 492C610 486 648 483 686 481C724 479 762 479 800 479C838 478 876 477 914 477C952 477 990 475 1029 477C1067 478 1105 481 1143 487C1181 493 1219 503 1257 514C1295 526 1333 543 1371 557C1410 572 1448 590 1486 602C1524 615 1581 628 1600 633' stroke='url(%23s)' stroke-opacity='0.27' stroke-width='1.5'/%3E%3Cpath d='M0 675C19 673 76 670 114 661C152 653 190 638 229 625C267 611 305 593 343 579C381 566 419 551 457 541C495 531 533 524 571 519C610 513 648 511 686 508C724 506 762 505 800 503C838 502 876 499 914 499C952 499 990 498 1029 500C1067 503 1105 508 1143 516C1181 525 1219 537 1257 551C1295 565 1333 583 1371 598C1410 614 1448 631 1486 642C1524 654 1581 663 1600 667' stroke='url(%23s)' stroke-opacity='0.20' stroke-width='1.5'/%3E%3C/svg%3E") center / 100% 100% no-repeat !important;
    -webkit-mask-image: radial-gradient(ellipse 64% 72% at 50% 50%, #000 28%, rgba(0,0,0,0) 100%);
            mask-image: radial-gradient(ellipse 64% 72% at 50% 50%, #000 28%, rgba(0,0,0,0) 100%);
}
html body .frayora-work-page .fw-final-cta .fw-final-cta__inner {
    z-index: 2;
    overflow: visible;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
/* soft white glow behind the words so the lines never touch them */
html body .frayora-work-page .fw-final-cta .fw-final-cta__inner::before {
    content: "" !important;
    display: block !important;
    height: 175% !important;
    width: min(1080px, 100%) !important;
    right: auto !important; bottom: auto !important;
    filter: none !important;
    opacity: 1 !important;
    border-radius: 0 !important;
    position: absolute !important;
    z-index: -1;
    left: 50% !important;
    top: 44% !important;
    translate: -50% -50%;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(250,246,239,.97) 0%, rgba(250,246,239,.92) 50%, rgba(250,246,239,0) 100%);
}
html body .frayora-work-page .fw-final-cta .fw-final-cta__inner::after { display: none !important; }

html body .fw-final-cta__button {
    overflow: hidden;
    transition: transform .35s var(--owx-ease), box-shadow .35s var(--owx-ease), border-color .3s ease;
}
html body .fw-final-cta__button--primary {
    box-shadow: 0 22px 40px -18px rgba(180,80,45,.65), inset 0 1px 0 rgba(255,255,255,.3) !important;
}
html body .fw-final-cta__button--primary::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 55%;
    pointer-events: none;
    background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.34), rgba(255,255,255,0));
    translate: -130% 0;
    animation: owxSheen 5.5s ease-in-out 1.5s infinite;
}
html body .fw-final-cta__button--secondary {
    background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.7)) !important;
    border: 1px solid rgba(217,183,126,.7) !important;
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    box-shadow: 0 18px 30px -18px rgba(70,54,34,.4), inset 0 1px 0 rgba(255,255,255,.95) !important;
}
@media (hover: hover) {
    html body .fw-final-cta__button--primary:hover {
        transform: translateY(-3px);
        box-shadow: 0 30px 50px -18px rgba(180,80,45,.75), 0 0 0 5px rgba(201,103,67,.14), inset 0 1px 0 rgba(255,255,255,.34) !important;
    }
    html body .fw-final-cta__button--secondary:hover {
        transform: translateY(-3px);
        border-color: rgba(217,183,126,.95) !important;
        box-shadow: 0 26px 40px -18px rgba(70,54,34,.5), 0 0 0 4px rgba(217,183,126,.14), inset 0 1px 0 rgba(255,255,255,.95) !important;
    }
}

/* ---------------------------------------------------------
   Reduced motion
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html body .frayora-work-page .about-us-page .about-hero .about-hero__overlay::before,
    html body .fw-portfolio__more-arrow,
    html body .fw-final-cta__button--primary::before,
    html body .frayora-work-page .fw-final-cta.fw-final-cta::after { animation: none !important; }
}

/* END — OUR WORK ELEVATION v6 */


/* =========================================================
   FRAYORA — OUR APPROACH ELEVATION v4
   PASTE AT THE VERY BOTTOM OF main.css (after everything else)

   If you pasted "Our Approach elevation v2" or "v3" before, DELETE it first
   (find the banner "FRAYORA — OUR APPROACH ELEVATION v2" or "v3" and remove
   that whole block, down to its matching "END — OUR APPROACH ELEVATION" line).
   Do NOT delete "OUR APPROACH ELEVATION v1".

   - No wording, template or image files are changed.
   - Your hero photo stays; it gets a richer, warmer overlay.
   - No flowing-line backgrounds here (those belong to the Our Work
     hero); the only line is the glowing dotted one joining the steps.
   - The four approach cards step down gently (Find -> Build ->
     Connect -> Make it usable), with glass badges and number pills.
   - "The Frayora Method" becomes a deep green band with glowing
     steps; the comparison lifts the Frayora panel; the final
     section is warm light with a sunrise glow.
   - Everything is scoped to the Our Approach page only.
   - Desktop, tablet and mobile are all in this one file.
========================================================= */

:root {
    --oax-sand:  #D9B77E;
    --oax-terra: #C96743;
    --oax-sage:  #87947B;
    --oax-ease:  cubic-bezier(.22, .8, .24, 1);
}

@keyframes oaxFlow  { 0%,100% { translate: -2.5% 0; } 50% { translate: 2.5% 0; } }
@keyframes oaxSheen { 0%,60% { translate: -130% 0; } 100% { translate: 130% 0; } }
@keyframes oaxZoom  { from { scale: 1; } to { scale: 1.06; } }
@keyframes oaxDash  { to { stroke-dashoffset: -22; } }

/* ---------------------------------------------------------
   01 · HERO — same photo, richer overlay and a slow zoom
--------------------------------------------------------- */

html body .our-approach-page .about-us-page .about-hero__media {
    animation: oaxZoom 30s ease-in-out infinite alternate;
    transform-origin: 50% 45%;
}
html body .our-approach-page .about-us-page .about-hero__overlay::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none;
    background:
        radial-gradient(60% 58% at 50% 44%, rgba(19,29,23,.50) 0%, rgba(19,29,23,0) 72%),
        radial-gradient(70% 52% at 50% 108%, rgba(201,103,67,.46) 0%, rgba(201,103,67,0) 72%),
        radial-gradient(46% 62% at 0% 0%, rgba(135,148,123,.34) 0%, rgba(135,148,123,0) 70%),
        radial-gradient(40% 56% at 100% 0%, rgba(217,183,126,.24) 0%, rgba(217,183,126,0) 70%),
        linear-gradient(180deg, rgba(19,29,23,.34) 0%, rgba(19,29,23,.04) 40%, rgba(19,29,23,.42) 100%) !important;
}
html body .our-approach-page .about-us-page .about-hero__title {
    text-shadow: 0 4px 50px rgba(10,18,13,.45);
}

/* ---------------------------------------------------------
   02 · THE FRAYORA APPROACH — four steps that step down
--------------------------------------------------------- */

html body .our-approach-page .oa-approach-cards.oa-approach-cards {
    background-image:
        radial-gradient(44% 34% at 100% 40%, rgba(217,183,126,.20) 0%, rgba(217,183,126,0) 72%),
        radial-gradient(42% 34% at 0% 74%, rgba(135,148,123,.16) 0%, rgba(135,148,123,0) 72%) !important;
}

/* the little white top line on each card is not needed */
html body .our-approach-page .oa-approach-cards__card::before { display: none !important; }

html body .our-approach-page .oa-approach-cards__card.oa-approach-cards__card {
    background: linear-gradient(160deg, rgba(255,255,255,.98), rgba(253,243,233,.82)) !important;
    border: 1px solid rgba(217,183,126,.40) !important;
    box-shadow: 0 30px 50px -30px rgba(79,91,73,.42), inset 0 1px 0 #fff !important;
    transition: translate .45s var(--oax-ease), box-shadow .45s var(--oax-ease), border-color .35s ease;
}
html body .our-approach-page .oa-approach-cards__card.oa-approach-cards__card:nth-child(even) {
    background: linear-gradient(160deg, rgba(255,255,255,.98), rgba(238,243,230,.84)) !important;
}
@media (hover: hover) {
    html body .our-approach-page .oa-approach-cards__card.oa-approach-cards__card:hover {
        translate: 0 -8px;
        border-color: rgba(217,183,126,.8) !important;
        box-shadow: 0 44px 64px -32px rgba(79,91,73,.52), inset 0 1px 0 #fff !important;
    }
}

/* number becomes a small pill */
html body .our-approach-page .oa-approach-cards__number.oa-approach-cards__number {
    display: inline-flex !important;
    align-self: flex-start;
    align-items: center;
    width: auto !important;
    padding: 5px 13px !important;
    border-radius: 999px;
    background: rgba(201,103,67,.10);
    border: 1px solid rgba(201,103,67,.24);
}
html body .our-approach-page .oa-approach-cards__card:nth-child(even) .oa-approach-cards__number {
    background: rgba(135,148,123,.16);
    border-color: rgba(135,148,123,.40);
}

/* icon badges get a soft outer ring */
html body .our-approach-page .oa-approach-cards__card:nth-child(n) .oa-approach-cards__icon.oa-approach-cards__icon {
    box-shadow: 0 14px 24px -12px rgba(132,99,78,.5), 0 0 0 7px rgba(217,183,126,.14), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -3px 6px rgba(132,99,78,.10) !important;
}
html body .our-approach-page .oa-approach-cards__card:nth-child(even) .oa-approach-cards__icon.oa-approach-cards__icon {
    box-shadow: 0 14px 24px -12px rgba(86,100,73,.5), 0 0 0 7px rgba(135,148,123,.16), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -3px 6px rgba(86,100,73,.10) !important;
}

/* desktop: each card sits a little lower than the one before it */
@media screen and (min-width: 1101px) {
    html body .our-approach-page .oa-approach-cards__grid { align-items: stretch; }
    html body .our-approach-page .oa-approach-cards__card.oa-approach-cards__card { height: auto !important; align-self: stretch; }
    html body .our-approach-page .oa-approach-cards__card:nth-child(2) { margin-top: 24px; }
    html body .our-approach-page .oa-approach-cards__card:nth-child(3) { margin-top: 48px; }
    html body .our-approach-page .oa-approach-cards__card:nth-child(4) { margin-top: 72px; }
}

/* closing statement: a soft sand highlight under the italic line */
html body .our-approach-page .oa-approach-cards__statement em {
    display: table !important;
    margin-left: auto !important;
    margin-right: auto !important;
    background: linear-gradient(transparent 66%, rgba(217,183,126,.34) 66%, rgba(217,183,126,.34) 90%, transparent 90%);
    padding: 0 8px;
}
@media screen and (max-width: 899px) {
    html body .our-approach-page .oa-approach-cards__statement em { display: block !important; background: none; padding: 0; }
}

/* ---------------------------------------------------------
   03 · THE FRAYORA METHOD — deep green band, glowing steps
--------------------------------------------------------- */

html body .our-approach-page .oa-journey.oa-journey {
    background-color: #17221B !important;
    background-image:
        radial-gradient(60% 44% at 50% 108%, rgba(201,103,67,.34) 0%, rgba(201,103,67,.10) 50%, rgba(201,103,67,0) 78%),
        radial-gradient(44% 50% at 0% 14%, rgba(135,148,123,.28) 0%, rgba(135,148,123,0) 70%),
        radial-gradient(40% 50% at 100% 22%, rgba(83,103,66,.32) 0%, rgba(83,103,66,0) 70%),
        linear-gradient(180deg, #131D17 0%, #1C2A21 55%, #26352B 100%) !important;
}
/* a faint dot grid behind the steps ("scattered to structured"); fades out toward the middle */
html body .our-approach-page .oa-journey__inner { isolation: isolate; }
html body .our-approach-page .oa-journey__inner::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0; bottom: 0;
    left: calc(50% - 56vw);
    width: 112vw;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(232,206,152,.5) 1.3px, transparent 1.6px);
    background-size: 30px 30px;
    opacity: .5;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 8%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 78%, #000 92%, #000 100%);
            mask-image: linear-gradient(90deg, #000 0%, #000 8%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 78%, #000 92%, #000 100%);
}
@media screen and (max-width: 1100px) {
    html body .our-approach-page .oa-journey__inner::before { opacity: .0; }
}
html body .our-approach-page .oa-journey__eyebrow { color: #E58A66 !important; }
html body .our-approach-page .oa-journey__heading { color: #F8F3EB !important; text-shadow: 0 2px 30px rgba(0,0,0,.3); }
html body .our-approach-page .oa-journey__description { color: rgba(248,243,235,.76) !important; }
html body .our-approach-page .oa-journey__step-title { color: #F8F3EB !important; }
html body .our-approach-page .oa-journey__step-text { color: rgba(248,243,235,.72) !important; }
html body .our-approach-page .oa-journey__statement { color: #F8F3EB !important; }
html body .our-approach-page .oa-journey__statement em { color: #C3D2B4 !important; }
html body .our-approach-page .oa-journey__fineprint { color: rgba(248,243,235,.62) !important; }

/* dark glass badges with sand numbers */
html body .our-approach-page .oa-journey__step:nth-of-type(n) .oa-journey__marker.oa-journey__marker {
    background: linear-gradient(145deg, rgba(247,240,230,.18) 0%, rgba(247,240,230,.05) 100%) !important;
    color: #E8CD96 !important;
    border: 1px solid rgba(217,183,126,.42) !important;
    box-shadow: 0 18px 30px -14px rgba(0,0,0,.65), 0 0 0 8px rgba(217,183,126,.07), 0 0 28px rgba(217,183,126,.14), inset 0 1px 1px rgba(255,255,255,.20) !important;
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    transition: scale .5s var(--oax-ease), box-shadow .5s var(--oax-ease);
}
html body .our-approach-page .oa-journey__step:nth-of-type(even) .oa-journey__marker.oa-journey__marker {
    color: #CFE0BF !important;
    border-color: rgba(168,190,150,.5) !important;
    box-shadow: 0 18px 30px -14px rgba(0,0,0,.65), 0 0 0 8px rgba(135,148,123,.10), 0 0 28px rgba(135,148,123,.2), inset 0 1px 1px rgba(255,255,255,.20) !important;
}
html body .our-approach-page .oa-journey__marker::before { border-color: rgba(255,255,255,.12) !important; }
@media (hover: hover) {
    html body .our-approach-page .oa-journey__step:hover .oa-journey__marker { scale: 1.1; }
}
@media (hover: hover) and (pointer: fine) {
    html body .our-approach-page .oa-journey__step:hover .oa-journey__marker .oa-journey__number.oa-journey__number { color: #F6E2B0 !important; }
    html body .our-approach-page .oa-journey__step:nth-of-type(even):hover .oa-journey__marker .oa-journey__number.oa-journey__number { color: #E2F0D2 !important; }
}

/* the wave that links the five steps (desktop): a glowing dotted line */
html body .our-approach-page .oa-journey__wave-shadow {
    stroke: rgba(217,183,126,.30) !important;
    stroke-width: 7px !important;
    vector-effect: non-scaling-stroke;
    filter: blur(5px);
}
html body .our-approach-page .oa-journey__wave-line {
    stroke: #E2C48A !important;
    stroke-width: 1.8px !important;
    stroke-linecap: round;
    stroke-dasharray: 2 9;
    vector-effect: non-scaling-stroke;
    animation: oaxDash 2.4s linear infinite;
}
/* the vertical line (tablet + phone) */
html body .our-approach-page .oa-journey__step:nth-of-type(n)::after {
    background: linear-gradient(rgba(217,183,126,.62), rgba(217,183,126,.22), rgba(217,183,126,.62)) !important;
    border-left-color: rgba(217,183,126,.5) !important;
}
@media screen and (max-width: 599px) {
    html body .our-approach-page .oa-journey__step:nth-of-type(n)::after { background: none !important; }
}

/* ---------------------------------------------------------
   04 · WHY OUR APPROACH IS DIFFERENT — the Frayora panel lifts
--------------------------------------------------------- */

html body .our-approach-page .oa-compare.oa-compare {
    background-image:
        radial-gradient(42% 30% at 0% 56%, rgba(217,183,126,.18) 0%, rgba(217,183,126,0) 72%),
        radial-gradient(44% 32% at 100% 78%, rgba(135,148,123,.16) 0%, rgba(135,148,123,0) 72%) !important;
}
html body .our-approach-page .oa-compare__panel-body > * { position: relative; z-index: 1; }

/* the usual reaction: calm, flat, a little faded */
html body .our-approach-page .oa-compare__panel--usual { transition: translate .45s var(--oax-ease); }
html body .our-approach-page .oa-compare__panel--usual .oa-compare__panel-body {
    box-shadow: 0 18px 34px -24px rgba(79,91,73,.30), inset 0 1px 0 rgba(255,255,255,.7) !important;
}

/* the Frayora approach: deep green, warm glow, flowing lines */
html body .our-approach-page .oa-compare__panel--frayora { transition: translate .45s var(--oax-ease); }
html body .our-approach-page .oa-compare__panel--frayora .oa-compare__tab { background: #26352A !important; }
html body .our-approach-page .oa-compare__panel--frayora .oa-compare__panel-body.oa-compare__panel-body {
    background:
        radial-gradient(70% 46% at 50% 112%, rgba(201,103,67,.40) 0%, rgba(201,103,67,0) 74%),
        radial-gradient(50% 50% at 100% 0%, rgba(135,148,123,.26) 0%, rgba(135,148,123,0) 70%),
        linear-gradient(150deg, #26352A 0%, #1E2C23 55%, #17221B 100%) !important;
    border-color: rgba(217,183,126,.42) !important;
    box-shadow: 0 50px 70px -36px rgba(20,32,24,.78), inset 0 1px 0 rgba(255,255,255,.14) !important;
}
html body .our-approach-page .oa-compare__panel--frayora .oa-compare__panel-heading { color: #F8F3EB !important; }
html body .our-approach-page .oa-compare__panel--frayora .oa-compare__list li { border-color: rgba(255,255,255,.12) !important; }
html body .our-approach-page .oa-compare__panel--frayora .oa-compare__list-icon {
    box-shadow: 0 8px 16px -8px rgba(0,0,0,.5), 0 0 0 5px rgba(217,183,126,.08), inset 0 1px 0 rgba(255,255,255,.24) !important;
}
@media (hover: hover) {
    html body .our-approach-page .oa-compare__panel--usual:hover { translate: 0 -4px; }
    html body .our-approach-page .oa-compare__panel--frayora:hover { translate: 0 -8px; }
}
@media screen and (min-width: 600px) {
    html body .our-approach-page .oa-compare__panel--frayora { margin-top: -14px; }
}

/* an arrow badge between the two panels: from one to the other */
@media screen and (min-width: 1101px) {
    html body .our-approach-page .oa-compare__grid { position: relative; }
    html body .our-approach-page .oa-compare__grid::after {
        content: "";
        position: absolute;
        z-index: 6;
        left: 50%;
        top: 54%;
        width: 58px;
        height: 58px;
        translate: -50% -50%;
        border-radius: 50%;
        pointer-events: none;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C96743' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 26px 26px no-repeat, linear-gradient(145deg, #FFFFFF, #F6E9DC);
        border: 1px solid rgba(217,183,126,.6);
        box-shadow: 0 18px 30px -14px rgba(70,54,34,.5), 0 0 0 7px rgba(250,247,242,.9), inset 0 1px 0 #fff;
    }
}

/* ---------------------------------------------------------
   05 · FINAL SECTION — warm light, flowing lines, a sunrise
--------------------------------------------------------- */

html body .our-approach-page .oa-final.oa-final {
    isolation: isolate;
    background-color: #F8F3EB !important;
    background-image:
        radial-gradient(64% 50% at 50% 104%, rgba(201,103,67,.34) 0%, rgba(214,150,100,.16) 46%, rgba(201,103,67,0) 78%),
        radial-gradient(40% 50% at 0% 20%, rgba(135,148,123,.22) 0%, rgba(135,148,123,0) 70%),
        radial-gradient(40% 50% at 100% 20%, rgba(217,183,126,.30) 0%, rgba(217,183,126,0) 70%),
        linear-gradient(180deg, #FAF6EF 0%, #F6EADB 100%) !important;
}
html body .our-approach-page .oa-final__button {
    position: relative;
    overflow: hidden;
    box-shadow: 0 22px 40px -18px rgba(180,80,45,.65), inset 0 1px 0 rgba(255,255,255,.3) !important;
    transition: transform .35s var(--oax-ease), box-shadow .35s var(--oax-ease);
}
html body .our-approach-page .oa-final__button::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 55%;
    pointer-events: none;
    background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.34), rgba(255,255,255,0));
    translate: -130% 0;
    animation: oaxSheen 5.5s ease-in-out 1.5s infinite;
}
@media (hover: hover) {
    html body .our-approach-page .oa-final__button:hover {
        transform: translateY(-3px);
        box-shadow: 0 30px 50px -18px rgba(180,80,45,.75), 0 0 0 5px rgba(201,103,67,.14), inset 0 1px 0 rgba(255,255,255,.34) !important;
    }
}

/* ---------------------------------------------------------
   Reduced motion
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html body .our-approach-page .about-us-page .about-hero__media,
    html body .our-approach-page .oa-journey__wave-line,
    html body .our-approach-page .oa-final__button::before { animation: none !important; }
}

/* END — OUR APPROACH ELEVATION v4 */


/* =========================================================
   FRAYORA — ABOUT US ELEVATION v4
   PASTE AT THE VERY BOTTOM OF main.css

   - No words, photos or buttons are changed.
   - Do NOT delete "ABOUT US ELEVATION v1" (the shaped section
     edges live there). If you are replacing an older v2 / v3,
     delete that block first (down to its END line).
   - Desktop, tablet and phone.
========================================================= */

:root {
    --abx-sand: #D9B77E;
    --abx-terra: #C96743;
    --abx-sage: #87947B;
    --abx-ease: cubic-bezier(.22, .8, .24, 1);
}

@keyframes abxZoom   { from { scale: 1; } to { scale: 1.07; } }
@keyframes abxSheen  { 0%, 55% { translate: -130% 0; } 100% { translate: 330% 0; } }
@keyframes abxFloat  { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

/* ---------------------------------------------------------
   01 · HERO — the photo stays, warmer and slowly alive
--------------------------------------------------------- */

html body main.about-us-page .about-hero__media {
    animation:
        frayoraAboutPhotoIn 1.9s cubic-bezier(.22, 1, .36, 1) both,
        abxZoom 30s ease-in-out 1.9s infinite alternate;
    transform-origin: 50% 45%;
}
html body main.about-us-page .about-hero__overlay::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none;
    background:
        radial-gradient(56% 56% at 50% 46%, rgba(19,29,23,.26) 0%, rgba(19,29,23,0) 72%),
        radial-gradient(74% 50% at 50% 108%, rgba(201,103,67,.44) 0%, rgba(201,103,67,0) 72%),
        radial-gradient(46% 62% at 0% 0%, rgba(135,148,123,.32) 0%, rgba(135,148,123,0) 70%),
        radial-gradient(40% 56% at 100% 0%, rgba(217,183,126,.26) 0%, rgba(217,183,126,0) 70%),
        linear-gradient(180deg, rgba(19,29,23,.16) 0%, rgba(19,29,23,0) 40%, rgba(19,29,23,.28) 100%) !important;
}
html body main.about-us-page .about-hero__title {
    text-shadow: 0 4px 50px rgba(10,18,13,.5), 0 1px 2px rgba(10,18,13,.25);
}

/* ---------------------------------------------------------
   02 · SUMMARY — the big statement
--------------------------------------------------------- */

html body main.about-us-page .about-summary.about-summary {
    background-image:
        radial-gradient(46% 70% at 50% 58%, rgba(247,222,200,.55) 0%, rgba(247,222,200,0) 72%),
        radial-gradient(34% 60% at 0% 100%, rgba(135,148,123,.16) 0%, rgba(135,148,123,0) 72%),
        radial-gradient(34% 60% at 100% 90%, rgba(217,183,126,.20) 0%, rgba(217,183,126,0) 72%) !important;
}
html body main.about-us-page .about-summary__inner.about-summary__inner {
    padding-top: 62px !important;
}
/* three small dots — the Frayora palette — above the statement */
html body main.about-us-page .about-summary__inner::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    width: 76px;
    height: 12px;
    margin-left: -38px;
    pointer-events: none;
    background:
        radial-gradient(circle at 6px 50%,  #87947B 0 5px, transparent 5.6px),
        radial-gradient(circle at 38px 50%, #C96743 0 5px, transparent 5.6px),
        radial-gradient(circle at 70px 50%, #D9B77E 0 5px, transparent 5.6px);
}
html body main.about-us-page .about-summary__quote em {
    padding: 0 .14em;
    margin: 0 -.06em;
    background: linear-gradient(180deg, transparent 60%, rgba(217,183,126,.46) 60%, rgba(217,183,126,.46) 90%, transparent 90%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* ---------------------------------------------------------
   03 · WHY WE EXIST — four principles
--------------------------------------------------------- */

html body main.about-us-page .about-why.about-why {
    background-image:
        radial-gradient(40% 40% at 6% 14%, rgba(247,205,178,.46) 0%, rgba(247,205,178,0) 72%),
        radial-gradient(40% 44% at 96% 88%, rgba(158,175,140,.26) 0%, rgba(158,175,140,0) 72%),
        radial-gradient(36% 30% at 62% 0%, rgba(217,183,126,.20) 0%, rgba(217,183,126,0) 72%) !important;
}
html body main.about-us-page .about-why__card.about-why__card {
    position: relative;
    overflow: hidden !important;
    isolation: isolate;
    border: 1px solid rgba(217,183,126,.42) !important;
    background:
        radial-gradient(90% 60% at 100% 0%, rgba(247,205,178,.34) 0%, rgba(247,205,178,0) 70%),
        linear-gradient(160deg, #FFFFFF 0%, #FFF8F0 100%) !important;
    box-shadow: 0 26px 46px -28px rgba(79,91,73,.38), inset 0 1px 0 #fff !important;
    transition: translate .45s var(--abx-ease), box-shadow .45s var(--abx-ease), border-color .35s ease;
}
html body main.about-us-page .about-why__card.about-why__card:nth-child(even) {
    background:
        radial-gradient(90% 60% at 100% 0%, rgba(190,206,172,.36) 0%, rgba(190,206,172,0) 70%),
        linear-gradient(160deg, #FFFFFF 0%, #F9FBF4 100%) !important;
}
/* soft sun disc tucked into the corner of every card */
html body main.about-us-page .about-why__card.about-why__card::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    z-index: -1;
    right: -40px;
    bottom: -40px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle at 40% 40%, rgba(232,150,112,.34) 0%, rgba(240,190,150,.20) 46%, rgba(240,190,150,0) 70%);
    transition: scale .6s var(--abx-ease);
}
html body main.about-us-page .about-why__card.about-why__card:nth-child(even)::after {
    background: radial-gradient(circle at 40% 40%, rgba(140,158,120,.36) 0%, rgba(170,188,150,.20) 46%, rgba(170,188,150,0) 70%);
}
html body main.about-us-page .about-why__icon.about-why__icon {
    box-shadow:
        0 14px 24px -12px rgba(132,99,78,.55),
        0 0 0 9px rgba(247,220,198,.38),
        inset 0 1px 0 rgba(255,255,255,.95),
        inset 0 -3px 6px rgba(132,99,78,.10) !important;
}
html body main.about-us-page .about-why__card:nth-child(even) .about-why__icon.about-why__icon {
    box-shadow:
        0 14px 24px -12px rgba(86,100,73,.55),
        0 0 0 9px rgba(205,218,190,.42),
        inset 0 1px 0 rgba(255,255,255,.95),
        inset 0 -3px 6px rgba(86,100,73,.10) !important;
}
html body main.about-us-page .about-why__icon.about-why__icon { margin-left: 9px !important; margin-top: 9px !important; margin-bottom: 30px !important; }
@media (hover: hover) {
    html body main.about-us-page .about-why__card.about-why__card:hover {
        translate: 0 -10px;
        border-color: rgba(201,103,67,.40) !important;
        box-shadow: 0 44px 60px -30px rgba(79,91,73,.46), inset 0 1px 0 #fff !important;
    }
    html body main.about-us-page .about-why__card.about-why__card:hover::after { scale: 1.35; }
}

/* ---------------------------------------------------------
   04 · FOUNDER STORY
--------------------------------------------------------- */

html body main.about-us-page .about-founder.about-founder {
    overflow-x: clip;
    background-image:
        radial-gradient(40% 52% at 84% 54%, rgba(205,218,190,.55) 0%, rgba(205,218,190,0) 72%),
        radial-gradient(34% 40% at 0% 98%, rgba(247,205,178,.32) 0%, rgba(247,205,178,0) 72%) !important;
}
/* the rising sun behind the portrait */
html body main.about-us-page .about-founder__visual::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    z-index: 0;
    top: -64px;
    right: -64px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle at 40% 40%, rgba(226,138,98,.62) 0%, rgba(232,170,128,.40) 42%, rgba(217,183,126,.16) 62%, rgba(217,183,126,0) 72%);
}
html body main.about-us-page .about-founder__image-wrap.about-founder__image-wrap {
    box-shadow: 0 44px 70px -34px rgba(79,91,73,.55), 0 0 0 8px rgba(255,255,255,.55), inset 0 1px 0 rgba(255,255,255,.6) !important;
}
/* an easier first line to read */
html body main.about-us-page .about-founder__body > p:first-child {
    font-size: 1.14em;
    line-height: 1.7;
    color: #232A24;
}
/* closing statement as a soft note */
html body main.about-us-page .about-founder__statement.about-founder__statement {
    border-top: 0 !important;
    padding: 22px 26px !important;
    margin-top: 30px !important;
    border-radius: 26px 8px 26px 8px;
    border: 1px solid rgba(217,183,126,.42) !important;
    background: linear-gradient(135deg, rgba(247,232,205,.62), rgba(255,255,255,.55)) !important;
    box-shadow: 0 18px 32px -24px rgba(79,91,73,.4), inset 0 1px 0 #fff;
    font-size: 18px !important;
    line-height: 1.55 !important;
    color: #2B352D !important;
}

html body main.about-us-page .about-founder__signature { margin-top: 28px !important; }

/* tablet + phone: keep the sun behind the portrait, never behind the heading */
@media screen and (max-width: 1100px) {
    html body main.about-us-page .about-founder__content { position: relative; z-index: 2; }
    html body main.about-us-page .about-founder__visual::after {
        top: 28%;
        right: -36px;
        width: 220px;
        height: 220px;
    }
}
@media screen and (max-width: 599px) {
    html body main.about-us-page .about-founder__visual::after {
        top: 34%;
        right: -22px;
        width: 170px;
        height: 170px;
    }
}

/* ---------------------------------------------------------
   05 · THE MISSING LAYER — scattered vs. built on a foundation
--------------------------------------------------------- */

html body main.about-us-page .about-layer.about-layer {
    background-image:
        radial-gradient(44% 58% at 80% 46%, rgba(255,247,236,.85) 0%, rgba(255,247,236,0) 72%),
        radial-gradient(38% 40% at 100% 0%, rgba(217,183,126,.24) 0%, rgba(217,183,126,0) 72%),
        radial-gradient(36% 44% at 0% 100%, rgba(158,175,140,.24) 0%, rgba(158,175,140,0) 72%) !important;
}

/* the old way: a little scattered, outlined, quiet */
html body main.about-us-page .about-layer__panel--old.about-layer__panel--old {
    border: 1.5px dashed rgba(132,99,78,.36) !important;
    background: linear-gradient(160deg, #F7F0E8, #ECE1D4) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7) !important;
}
html body main.about-us-page .about-layer__symbol--app:nth-child(1) { rotate: -9deg; translate: 0 3px; }
html body main.about-us-page .about-layer__symbol--app:nth-child(2) { rotate: 7deg;  translate: 0 -4px; }
html body main.about-us-page .about-layer__symbol--app:nth-child(3) { rotate: -5deg; translate: 0 4px; }
html body main.about-us-page .about-layer__symbol--app:nth-child(4) { rotate: 10deg; translate: 0 -3px; }
html body main.about-us-page .about-layer__symbol--app:nth-child(5) { rotate: -7deg; translate: 0 2px; }

/* the Frayora way: clean, aligned, lit softly from below */
html body main.about-us-page .about-layer__panel--new.about-layer__panel--new {
    border: 1px solid rgba(201,103,67,.26) !important;
    background:
        radial-gradient(90% 50% at 50% 120%, rgba(214,106,67,.16) 0%, rgba(214,106,67,0) 72%),
        linear-gradient(160deg, #FFFFFF, #FFF8F0) !important;
    box-shadow: 0 26px 44px -30px rgba(184,88,55,.42), inset 0 1px 0 #fff !important;
}
html body main.about-us-page .about-layer__comparison { align-items: stretch !important; }
html body main.about-us-page .about-layer__process.about-layer__process { border-bottom: 0 !important; padding-bottom: 0 !important; margin-top: 30px !important; }

/* the five-step sequence as little chips */
html body main.about-us-page .about-layer__process.about-layer__process {
    align-items: center !important;
    flex-wrap: wrap !important;
    row-gap: 10px !important;
    column-gap: 2px !important;
}
html body main.about-us-page .about-layer__process-step {
    padding: 7px 9px !important;
    border-radius: 999px;
    background: linear-gradient(145deg, #E08A63, #C96743) !important;
    border: 1px solid transparent;
    color: #fff !important;
    box-shadow: 0 12px 20px -10px rgba(201,103,67,.7), inset 0 1px 0 rgba(255,255,255,.35);
    line-height: 1.1 !important;
    white-space: nowrap;
}
html body main.about-us-page .about-layer__process-arrow { font-size: 15px !important; }
/* the closing thought as a soft note */
html body main.about-us-page .about-layer__bottom.about-layer__bottom {
    border-top: 0 !important;
    margin-top: 22px !important;
    padding: 22px 26px 24px !important;
    border-radius: 26px 8px 26px 8px;
    border: 1px solid rgba(217,183,126,.40) !important;
    background: linear-gradient(135deg, rgba(255,255,255,.66), rgba(247,232,205,.40)) !important;
    box-shadow: 0 18px 30px -24px rgba(79,91,73,.38), inset 0 1px 0 #fff;
}

/* ---------------------------------------------------------
   06 · THE FRAYORA APPROACH — three steps that lead on
--------------------------------------------------------- */

html body main.about-us-page .about-method.about-method {
    background-image:
        linear-gradient(180deg, rgba(222,230,208,.50) 0%, rgba(222,230,208,0) 46%),
        radial-gradient(44% 40% at 0% 100%, rgba(247,205,178,.40) 0%, rgba(247,205,178,0) 72%),
        radial-gradient(40% 36% at 100% 96%, rgba(217,183,126,.26) 0%, rgba(217,183,126,0) 72%) !important;
}
html body main.about-us-page .about-method__steps.about-method__steps { gap: 36px !important; }
html body main.about-us-page .about-method__step.about-method__step {
    border: 1px solid rgba(217,183,126,.42) !important;
    background:
        radial-gradient(90% 56% at 50% 128%, rgba(247,205,178,.46) 0%, rgba(247,205,178,0) 72%),
        linear-gradient(160deg, #FFFFFF, #FFFAF4) !important;
    box-shadow: 0 28px 48px -30px rgba(79,91,73,.42), inset 0 1px 0 #fff !important;
    transition: translate .45s var(--abx-ease), box-shadow .45s var(--abx-ease), border-color .35s ease;
}
html body main.about-us-page .about-method__step.about-method__step:nth-child(even) {
    background:
        radial-gradient(90% 56% at 50% 128%, rgba(190,206,172,.46) 0%, rgba(190,206,172,0) 72%),
        linear-gradient(160deg, #FFFFFF, #FAFBF5) !important;
}
html body main.about-us-page .about-method__number.about-method__number {
    box-shadow:
        0 14px 24px -12px rgba(132,99,78,.55),
        0 0 0 8px rgba(247,220,198,.40),
        inset 0 1px 0 rgba(255,255,255,.95),
        inset 0 -3px 6px rgba(132,99,78,.10) !important;
    margin: 8px 0 0 8px !important;
}
html body main.about-us-page .about-method__step:nth-child(even) .about-method__number.about-method__number {
    box-shadow:
        0 14px 24px -12px rgba(86,100,73,.55),
        0 0 0 8px rgba(205,218,190,.44),
        inset 0 1px 0 rgba(255,255,255,.95),
        inset 0 -3px 6px rgba(86,100,73,.10) !important;
}
/* little "next" marker in the gap between the cards */
@media screen and (min-width: 1101px) {
    html body main.about-us-page .about-method__step:not(:last-child)::after {
        content: "" !important;
        display: block !important;
        position: absolute;
        z-index: 3;
        top: 54px;
        right: -33px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        pointer-events: none;
        background:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / 14px no-repeat,
            linear-gradient(145deg, #E08A63, #C96743);
        box-shadow: 0 10px 18px -8px rgba(201,103,67,.75), 0 0 0 5px rgba(201,103,67,.13);
    }
}
@media (hover: hover) {
    html body main.about-us-page .about-method__step.about-method__step:hover {
        translate: 0 -10px;
        border-color: rgba(201,103,67,.40) !important;
        box-shadow: 0 44px 60px -30px rgba(79,91,73,.48), inset 0 1px 0 #fff !important;
    }
}
/* closing line: a soft glowing pill behind the words */
html body main.about-us-page .about-method__closing-heading h3 {
    padding: 8px 32px 9px;
    line-height: 1.25;
    text-align: center;
    border-radius: 999px;
    border: 1px solid rgba(217,183,126,.46);
    background: linear-gradient(90deg, rgba(217,183,126,.10), rgba(217,183,126,.34) 50%, rgba(217,183,126,.10));
    box-shadow: 0 14px 26px -20px rgba(160,120,60,.5), inset 0 1px 0 rgba(255,255,255,.6);
}
@media screen and (max-width: 599px) {
    html body main.about-us-page .about-method__closing-heading h3 { padding: 8px 22px 9px; border-radius: 28px; }
}

@media screen and (max-width: 599px) {
    html body main.about-us-page .about-layer__process.about-layer__process { justify-content: flex-start !important; column-gap: 8px !important; }
    html body main.about-us-page .about-layer__process-arrow { display: none !important; }
}

/* ---------------------------------------------------------
   07 · OUR VALUES + OUR MISSION — the dark band
--------------------------------------------------------- */

html body main.about-us-page .about-values-mission.about-values-mission {
    background:
        radial-gradient(70% 46% at 50% 116%, rgba(201,103,67,.34) 0%, rgba(201,103,67,0) 70%),
        radial-gradient(44% 60% at 0% 0%, rgba(135,148,123,.28) 0%, rgba(135,148,123,0) 70%),
        radial-gradient(40% 56% at 100% 0%, rgba(217,183,126,.16) 0%, rgba(217,183,126,0) 70%),
        linear-gradient(160deg, #3A473C, #303B32 55%, #2B352D) !important;
}

/* each value as a quiet glass tile */
html body main.about-us-page .about-values-mission__grid.about-values-mission__grid { gap: 18px !important; }
html body main.about-us-page .about-values-mission__value.about-values-mission__value {
    grid-template-columns: 64px minmax(0, 1fr) !important;
    column-gap: 16px !important;
    align-items: start !important;
    padding: 20px 20px 22px !important;
    border: 1px solid rgba(228,201,143,.20);
    border-radius: 30px 8px 30px 8px;
    background: linear-gradient(155deg, rgba(247,240,230,.09), rgba(247,240,230,.025));
    box-shadow: 0 22px 36px -26px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.10);
    transition: translate .45s var(--abx-ease), border-color .35s ease, background .35s ease, box-shadow .45s var(--abx-ease);
}
html body main.about-us-page .about-values-mission__icon.about-values-mission__icon {
    width: 64px !important;
    height: 64px !important;
    box-shadow: 0 14px 26px -14px rgba(0,0,0,.6), 0 0 0 7px rgba(228,201,143,.08), inset 0 1px 0 rgba(255,255,255,.22) !important;
}
html body main.about-us-page .about-values-mission__icon.about-values-mission__icon svg { width: 28px !important; height: 28px !important; }
@media (hover: hover) {
    html body main.about-us-page .about-values-mission__value.about-values-mission__value:hover {
        translate: 0 -6px;
        border-color: rgba(228,201,143,.42);
        background: linear-gradient(155deg, rgba(247,240,230,.14), rgba(247,240,230,.04));
        box-shadow: 0 34px 46px -26px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.16);
    }
}

/* the mission card gets its own sunrise */
html body main.about-us-page .about-values-mission__mission.about-values-mission__mission {
    position: relative;
    overflow: hidden !important;
    isolation: isolate;
    border-color: rgba(228,201,143,.38) !important;
    background: linear-gradient(155deg, rgba(247,240,230,.13), rgba(247,240,230,.04)) !important;
}
html body main.about-us-page .about-values-mission__mission.about-values-mission__mission::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(80% 44% at 50% 112%, rgba(214,106,67,.50) 0%, rgba(214,106,67,0) 72%),
        radial-gradient(50% 36% at 100% 0%, rgba(217,183,126,.18) 0%, rgba(217,183,126,0) 72%);
}

/* ---------------------------------------------------------
   08 · FINAL CALL TO ACTION — a sunrise to finish on
--------------------------------------------------------- */

html body main.about-us-page .about-final-cta.about-final-cta {
    isolation: isolate;
    background-image:
        radial-gradient(76% 70% at 50% 112%, rgba(201,103,67,.40) 0%, rgba(201,103,67,0) 70%),
        radial-gradient(40% 56% at 0% 0%, rgba(135,148,123,.22) 0%, rgba(135,148,123,0) 70%),
        radial-gradient(40% 56% at 100% 0%, rgba(217,183,126,.30) 0%, rgba(217,183,126,0) 70%) !important;
}
/* the rising sun */
html body main.about-us-page .about-final-cta.about-final-cta::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    z-index: -2;
    left: 50%;
    bottom: -250px;
    width: 720px;
    height: 720px;
    margin-left: -360px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(222,120,82,.56) 0%, rgba(230,150,108,.38) 38%, rgba(240,200,160,.16) 58%, rgba(240,200,160,0) 70%);
}
/* soft halo behind the words */
html body main.about-us-page .about-final-cta__inner::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 50%;
    width: min(980px, 100%);
    height: 128%;
    transform: translate(-50%, -56%);
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(255,251,245,.92) 0%, rgba(255,251,245,.64) 55%, rgba(255,251,245,0) 100%);
}
html body main.about-us-page .about-final-cta__button.about-final-cta__button {
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, #DB7D57, #C0552F) !important;
    box-shadow: 0 24px 40px -16px rgba(180,80,45,.68), 0 0 0 5px rgba(201,103,67,.12), inset 0 1px 0 rgba(255,255,255,.34) !important;
    transition: translate .35s var(--abx-ease), box-shadow .35s var(--abx-ease);
}
html body main.about-us-page .about-final-cta__button::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 55%;
    pointer-events: none;
    background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.34), rgba(255,255,255,0));
    translate: -130% 0;
    animation: abxSheen 5.5s ease-in-out 1.5s infinite;
}
html body main.about-us-page .about-final-cta__arrow { transition: translate .35s var(--abx-ease); }
@media (hover: hover) {
    html body main.about-us-page .about-final-cta__button.about-final-cta__button:hover {
        translate: 0 -3px;
        box-shadow: 0 32px 50px -18px rgba(180,80,45,.78), 0 0 0 6px rgba(201,103,67,.16), inset 0 1px 0 rgba(255,255,255,.34) !important;
    }
    html body main.about-us-page .about-final-cta__button:hover .about-final-cta__arrow { translate: 5px 0; }
}

/* ---------------------------------------------------------
   Reduced motion
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html body main.about-us-page .about-hero__media,
    html body main.about-us-page .about-final-cta__button::before { animation: none !important; }
}

/* END — ABOUT US ELEVATION v4 */

/* =========================================================
   FRAYORA — RESOURCES ELEVATION v2
   PASTE AT THE VERY BOTTOM OF main.css

   - No words, photos or links are changed.
   - Do NOT delete "RESOURCES ELEVATION v1" (the shaped section
     edges live there). If you are replacing an older v2 / v3,
     delete that block first (down to its END line).
   - Desktop, tablet and phone.
========================================================= */

:root {
    --rsx-sand: #D9B77E;
    --rsx-terra: #C96743;
    --rsx-sage: #87947B;
    --rsx-ease: cubic-bezier(.22, .8, .24, 1);
}

@keyframes rsxZoom  { from { scale: 1; } to { scale: 1.07; } }
@keyframes rsxSheen { 0%, 55% { translate: -130% 0; } 100% { translate: 330% 0; } }

/* ---------------------------------------------------------
   01 · HERO — the photo stays, warmer and slowly alive
--------------------------------------------------------- */

html body main.frayora-resources-page .about-us-page .about-hero__media {
    animation:
        frayoraAboutPhotoIn 1.9s cubic-bezier(.22, 1, .36, 1) both,
        rsxZoom 30s ease-in-out 1.9s infinite alternate;
    transform-origin: 50% 45%;
}
html body main.frayora-resources-page .about-us-page .about-hero__overlay::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none;
    background:
        radial-gradient(56% 56% at 50% 44%, rgba(19,29,23,.34) 0%, rgba(19,29,23,0) 72%),
        radial-gradient(74% 50% at 50% 108%, rgba(201,103,67,.40) 0%, rgba(201,103,67,0) 72%),
        radial-gradient(46% 62% at 0% 0%, rgba(135,148,123,.30) 0%, rgba(135,148,123,0) 70%),
        radial-gradient(40% 56% at 100% 0%, rgba(217,183,126,.22) 0%, rgba(217,183,126,0) 70%),
        linear-gradient(180deg, rgba(19,29,23,.16) 0%, rgba(19,29,23,0) 40%, rgba(19,29,23,.28) 100%) !important;
}
html body main.frayora-resources-page .about-us-page .about-hero__title {
    text-shadow: 0 4px 50px rgba(10,18,13,.5), 0 1px 2px rgba(10,18,13,.25);
}

/* ---------------------------------------------------------
   02 · BROWSE BY TOPIC — six cards, the middle ones step down
--------------------------------------------------------- */

html body main.frayora-resources-page .fr-resources-topics.fr-resources-topics {
    background-image:
        radial-gradient(40% 34% at 0% 16%, rgba(247,205,178,.40) 0%, rgba(247,205,178,0) 72%),
        radial-gradient(40% 40% at 100% 62%, rgba(158,175,140,.22) 0%, rgba(158,175,140,0) 72%),
        radial-gradient(34% 26% at 78% 6%, rgba(217,183,126,.20) 0%, rgba(217,183,126,0) 72%) !important;
}
html body main.frayora-resources-page .fr-resources-topics__card.fr-resources-topics__card {
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(217,183,126,.42) !important;
    background:
        radial-gradient(90% 56% at 50% 130%, rgba(247,205,178,.50) 0%, rgba(247,205,178,0) 72%),
        linear-gradient(160deg, #FFFFFF, #FFFAF4) !important;
    box-shadow: 0 26px 46px -30px rgba(79,91,73,.40), inset 0 1px 0 #fff !important;
    transition: translate .45s var(--rsx-ease), box-shadow .45s var(--rsx-ease), border-color .35s ease;
}
html body main.frayora-resources-page .fr-resources-topics__card.fr-resources-topics__card:nth-child(even) {
    background:
        radial-gradient(90% 56% at 50% 130%, rgba(190,206,172,.50) 0%, rgba(190,206,172,0) 72%),
        linear-gradient(160deg, #FFFFFF, #FAFBF5) !important;
}
html body main.frayora-resources-page .fr-resources-topics__icon.fr-resources-topics__icon {
    margin-bottom: 26px !important;
    box-shadow:
        0 14px 24px -12px rgba(132,99,78,.55),
        0 0 0 9px rgba(247,220,198,.38),
        inset 0 1px 0 rgba(255,255,255,.95),
        inset 0 -3px 6px rgba(132,99,78,.10) !important;
}
html body main.frayora-resources-page .fr-resources-topics__card:nth-child(even) .fr-resources-topics__icon.fr-resources-topics__icon {
    box-shadow:
        0 14px 24px -12px rgba(86,100,73,.55),
        0 0 0 9px rgba(205,218,190,.42),
        inset 0 1px 0 rgba(255,255,255,.95),
        inset 0 -3px 6px rgba(86,100,73,.10) !important;
}
html body main.frayora-resources-page .fr-resources-topics__icon.fr-resources-topics__icon { margin-left: 9px !important; margin-top: 9px !important; }

/* the link becomes a word + a little arrow button */
html body main.frayora-resources-page .fr-resources-topics__link,
html body main.frayora-resources-page .fr-featured__link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 !important;
    text-decoration: none !important;
}
html body main.frayora-resources-page .fr-resources-topics__link svg,
html body main.frayora-resources-page .fr-featured__link svg {
    box-sizing: content-box !important;
    width: 15px !important;
    height: 15px !important;
    padding: 8px;
    border-radius: 50%;
    color: #B85A36;
    background: rgba(201,103,67,.12);
    box-shadow: inset 0 0 0 1px rgba(201,103,67,.22);
    transition: background .3s ease, color .3s ease, translate .35s var(--rsx-ease), box-shadow .3s ease;
}
@media (hover: hover) {
    html body main.frayora-resources-page .fr-resources-topics__card.fr-resources-topics__card:hover {
        translate: 0 -10px;
        border-color: rgba(201,103,67,.40) !important;
        box-shadow: 0 44px 60px -30px rgba(79,91,73,.48), inset 0 1px 0 #fff !important;
    }
    html body main.frayora-resources-page .fr-resources-topics__card:hover .fr-resources-topics__link svg,
    html body main.frayora-resources-page .fr-featured__card:hover .fr-featured__link svg {
        background: #C96743;
        color: #fff;
        translate: 4px 0;
        box-shadow: 0 10px 18px -8px rgba(201,103,67,.7);
    }
}
@media screen and (min-width: 1101px) {
    html body main.frayora-resources-page .fr-resources-topics__grid { padding-bottom: 32px; }
    html body main.frayora-resources-page .fr-resources-topics__card.fr-resources-topics__card:nth-child(3n+2) { top: 32px; }
}

/* ---------------------------------------------------------
   03 · FEATURED RESOURCES — photo cards with floating labels
--------------------------------------------------------- */

html body main.frayora-resources-page .fr-featured.fr-featured {
    background-image:
        linear-gradient(180deg, rgba(247,205,178,.34) 0%, rgba(247,205,178,0) 42%),
        radial-gradient(42% 40% at 0% 100%, rgba(158,175,140,.26) 0%, rgba(158,175,140,0) 72%),
        radial-gradient(38% 34% at 100% 8%, rgba(217,183,126,.26) 0%, rgba(217,183,126,0) 72%) !important;
}
html body main.frayora-resources-page .fr-featured__card.fr-featured__card {
    border: 1px solid rgba(217,183,126,.46) !important;
    box-shadow: 0 28px 48px -30px rgba(79,91,73,.44), inset 0 1px 0 #fff !important;
    transition: translate .45s var(--rsx-ease), box-shadow .45s var(--rsx-ease), border-color .35s ease;
}
html body main.frayora-resources-page .fr-featured__media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(27,39,31,0) 52%, rgba(27,39,31,.30) 100%),
        radial-gradient(70% 60% at 50% 120%, rgba(201,103,67,.22) 0%, rgba(201,103,67,0) 70%);
}
html body main.frayora-resources-page .fr-featured__image {
    transition: scale 1s var(--rsx-ease);
}
/* category: a little glass label that straddles photo and text */
html body main.frayora-resources-page .fr-featured__content.fr-featured__content {
    position: relative;
    padding-top: 50px !important;
}
html body main.frayora-resources-page .fr-featured__category.fr-featured__category {
    position: absolute;
    z-index: 2;
    top: -17px;
    left: 22px;
    margin: 0 !important;
    padding: 8px 13px 7px;
    border-radius: 999px;
    color: #566449 !important;
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(217,183,126,.50);
    box-shadow: 0 12px 20px -12px rgba(79,91,73,.55), inset 0 1px 0 #fff;
    line-height: 1.1;
    white-space: nowrap;
}
@media (hover: hover) {
    html body main.frayora-resources-page .fr-featured__card.fr-featured__card:hover {
        translate: 0 -10px;
        border-color: rgba(201,103,67,.40) !important;
        box-shadow: 0 46px 62px -30px rgba(79,91,73,.52), inset 0 1px 0 #fff !important;
    }
    html body main.frayora-resources-page .fr-featured__card:hover .fr-featured__image { scale: 1.07; }
    html body main.frayora-resources-page .fr-featured a.fr-featured__all:hover {
        color: #fff !important;
        background: linear-gradient(145deg, #DB7D57, #C0552F) !important;
        border-color: transparent !important;
        box-shadow: 0 18px 30px -14px rgba(180,80,45,.7), inset 0 1px 0 rgba(255,255,255,.34) !important;
    }
}
html body main.frayora-resources-page .fr-featured a.fr-featured__all { transition: background .3s ease, color .3s ease, box-shadow .3s ease, border-color .3s ease; }

/* ---------------------------------------------------------
   04 · FINAL CALL TO ACTION — a small sky: sun, sage, sand
--------------------------------------------------------- */

html body main.frayora-resources-page .fr-resources-cta.fr-resources-cta {
    isolation: isolate;
    background-image:
        radial-gradient(76% 70% at 50% 114%, rgba(201,103,67,.40) 0%, rgba(201,103,67,0) 70%),
        radial-gradient(34% 46% at 4% 36%, rgba(158,175,140,.20) 0%, rgba(158,175,140,0) 72%),
        radial-gradient(34% 46% at 96% 30%, rgba(217,183,126,.36) 0%, rgba(217,183,126,0) 72%),
        radial-gradient(40% 40% at 50% 0%, rgba(247,205,178,.34) 0%, rgba(247,205,178,0) 72%) !important;
}
/* the rising sun */
html body main.frayora-resources-page .fr-resources-cta.fr-resources-cta::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    z-index: -2;
    left: 50%;
    bottom: -250px;
    width: 720px;
    height: 720px;
    margin-left: -360px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(222,120,82,.56) 0%, rgba(230,150,108,.38) 38%, rgba(240,200,160,.16) 58%, rgba(240,200,160,0) 70%);
}
html body main.frayora-resources-page .fr-resources-cta__inner::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 50%;
    width: min(1000px, 100%);
    height: 130%;
    transform: translate(-50%, -54%);
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(255,251,245,.92) 0%, rgba(255,251,245,.64) 55%, rgba(255,251,245,0) 100%);
}
html body main.frayora-resources-page .fr-resources-cta__button.fr-resources-cta__button {
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, #DB7D57, #C0552F) !important;
    box-shadow: 0 24px 40px -16px rgba(180,80,45,.68), 0 0 0 5px rgba(201,103,67,.12), inset 0 1px 0 rgba(255,255,255,.34) !important;
    transition: translate .35s var(--rsx-ease), box-shadow .35s var(--rsx-ease);
}
html body main.frayora-resources-page .fr-resources-cta__button::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 55%;
    pointer-events: none;
    background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.34), rgba(255,255,255,0));
    translate: -130% 0;
    animation: rsxSheen 5.5s ease-in-out 1.5s infinite;
}
html body main.frayora-resources-page .fr-resources-cta__button svg { transition: translate .35s var(--rsx-ease); }
@media (hover: hover) {
    html body main.frayora-resources-page .fr-resources-cta__button.fr-resources-cta__button:hover {
        translate: 0 -3px;
        box-shadow: 0 32px 50px -18px rgba(180,80,45,.78), 0 0 0 6px rgba(201,103,67,.16), inset 0 1px 0 rgba(255,255,255,.34) !important;
    }
    html body main.frayora-resources-page .fr-resources-cta__button:hover svg { translate: 5px 0; }
}

/* ---------------------------------------------------------
   Reduced motion
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html body main.frayora-resources-page .about-us-page .about-hero__media,
    html body main.frayora-resources-page .fr-resources-cta__button::before { animation: none !important; }
}

/* END — RESOURCES ELEVATION v2 */


/* =====================================================================
   CONTACT US ELEVATION v2
   Paste at the VERY BOTTOM of main.css.
   If an older "CONTACT US ELEVATION v2/v3" block exists, delete it first
   (down to its END line). Do NOT delete "CONTACT US ELEVATION v1".
   ===================================================================== */

html body main.frayora-contact-page {
    --ctx-terra: #C96743;
    --ctx-terra-deep: #B2532F;
    --ctx-sand: #D9B77E;
    --ctx-sage: #87947B;
    --ctx-ink: #1B271F;
    --ctx-cream: #F8F3EB;
}

/* ---------- HERO (photo kept, warmer + slow zoom) ---------- */

html body main.frayora-contact-page .about-hero__media {
    animation:
        frayoraAboutPhotoIn 1.9s cubic-bezier(.22,1,.36,1) both,
        ctxZoom 30s ease-in-out 1.9s infinite alternate !important;
}

@keyframes ctxZoom {
    from { scale: 1; }
    to   { scale: 1.06; }
}

html body main.frayora-contact-page .about-hero__overlay::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background:
        radial-gradient(60% 55% at 50% 50%, rgba(23,34,27,.32), rgba(23,34,27,0) 72%),
        radial-gradient(74% 50% at 50% 108%, rgba(201,103,67,.42), rgba(201,103,67,0) 70%),
        radial-gradient(50% 55% at 8% 0%, rgba(135,148,123,.30), rgba(135,148,123,0) 70%),
        radial-gradient(46% 50% at 96% 0%, rgba(217,183,126,.24), rgba(217,183,126,0) 70%),
        linear-gradient(180deg, rgba(23,34,27,.16), rgba(23,34,27,0) 30%, rgba(23,34,27,.28) 100%) !important;
}

html body main.frayora-contact-page .about-hero__title {
    text-shadow: 0 2px 26px rgba(15,24,18,.45) !important;
}

/* ---------- SECTION 2 : THREE WAYS TO REACH US ---------- */

html body main.frayora-contact-page .fc-options {
    background-color: #FAF7F2 !important;
    background-image:
        radial-gradient(520px 380px at 4% 0%, rgba(135,148,123,.16), rgba(135,148,123,0) 70%),
        radial-gradient(560px 420px at 98% 100%, rgba(201,103,67,.12), rgba(201,103,67,0) 70%),
        radial-gradient(420px 320px at 90% 6%, rgba(217,183,126,.16), rgba(217,183,126,0) 70%) !important;
}

html body main.frayora-contact-page .fc-options__heading em,
html body main.frayora-contact-page .fc-options__heading i,
html body main.frayora-contact-page .fc-options__intro h2 em {
    background: linear-gradient(180deg, transparent 62%, rgba(217,183,126,.42) 62%) !important;
    padding: 0 .12em !important;
    font-style: italic;
}

/* cards */
html body main.frayora-contact-page .fc-options__card.fc-options__card {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    background:
        radial-gradient(260px 220px at 100% 108%, rgba(247,220,198,.62), rgba(247,220,198,0) 72%),
        linear-gradient(160deg, rgba(255,255,255,.96), rgba(255,251,246,.9)) !important;
    border: 1px solid rgba(232,219,204,.9) !important;
    box-shadow:
        0 10px 26px rgba(69,54,40,.05),
        0 26px 60px rgba(69,54,40,.08),
        inset 0 1px 0 rgba(255,255,255,.95) !important;
    transition: translate .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, border-color .45s ease !important;
}

html body main.frayora-contact-page .fc-options__card.fc-options__card:nth-child(2) {
    background:
        radial-gradient(260px 220px at 100% 108%, rgba(200,212,190,.62), rgba(200,212,190,0) 72%),
        linear-gradient(160deg, rgba(255,255,255,.96), rgba(255,251,246,.9)) !important;
}

html body main.frayora-contact-page .fc-options__card.fc-options__card:nth-child(3) {
    background:
        radial-gradient(260px 220px at 100% 108%, rgba(240,221,180,.7), rgba(240,221,180,0) 72%),
        linear-gradient(160deg, rgba(255,255,255,.96), rgba(255,251,246,.9)) !important;
}

html body main.frayora-contact-page .fc-options__card.fc-options__card:hover {
    translate: 0 -10px;
    border-color: rgba(217,183,126,.7) !important;
    box-shadow:
        0 16px 34px rgba(69,54,40,.08),
        0 38px 80px rgba(69,54,40,.13),
        inset 0 1px 0 rgba(255,255,255,.95) !important;
}

/* icon badges */
html body main.frayora-contact-page .fc-options__icon.fc-options__icon {
    box-shadow:
        0 0 0 8px rgba(247,220,198,.38),
        0 12px 24px rgba(201,103,67,.14),
        inset 0 1px 0 rgba(255,255,255,.9) !important;
}

html body main.frayora-contact-page .fc-options__card:nth-child(2) .fc-options__icon.fc-options__icon {
    background: linear-gradient(145deg, #F1F5EC, #DCE5D3) !important;
    color: #56674F !important;
    box-shadow:
        0 0 0 8px rgba(200,212,190,.38),
        0 12px 24px rgba(86,103,79,.14),
        inset 0 1px 0 rgba(255,255,255,.9) !important;
}

html body main.frayora-contact-page .fc-options__card:nth-child(3) .fc-options__icon.fc-options__icon {
    background: linear-gradient(145deg, #FBF3E2, #F0DDB4) !important;
    color: #8A6A2C !important;
    box-shadow:
        0 0 0 8px rgba(240,221,180,.46),
        0 12px 24px rgba(138,106,44,.14),
        inset 0 1px 0 rgba(255,255,255,.9) !important;
}

/* email link underline */
html body main.frayora-contact-page .fc-options__email {
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
    text-decoration: none !important;
    padding-bottom: 3px;
    transition: background-size .4s ease !important;
}
html body main.frayora-contact-page .fc-options__card:hover .fc-options__email,
html body main.frayora-contact-page .fc-options__email:hover {
    background-size: 100% 1.5px;
}

/* buttons (sheen on ::after, base ::before kept) */
html body main.frayora-contact-page .fc-options__button.fc-options__button,
html body main.frayora-contact-page .fc-booking__button.fc-booking__button,
html body main.frayora-contact-page .fc-inquiry__submit.fc-inquiry__submit {
    overflow: hidden !important;
    background: linear-gradient(145deg, #DB7D57, #C0552F) !important;
    border-color: rgba(230,210,147,.7) !important;
    box-shadow:
        0 10px 22px rgba(192,85,47,.26),
        0 2px 0 rgba(255,255,255,.12) inset !important;
    transition: translate .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease !important;
}

html body main.frayora-contact-page .fc-options__button.fc-options__button::after,
html body main.frayora-contact-page .fc-booking__button.fc-booking__button::after,
html body main.frayora-contact-page .fc-inquiry__submit.fc-inquiry__submit::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 46%;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,.34), transparent);
    translate: -140% 0;
    animation: ctxSheen 5.5s ease-in-out 1.4s infinite;
}

@keyframes ctxSheen {
    0%, 62%  { translate: -140% 0; }
    100%     { translate: 340% 0; }
}

html body main.frayora-contact-page .fc-options__button.fc-options__button:hover,
html body main.frayora-contact-page .fc-booking__button.fc-booking__button:hover,
html body main.frayora-contact-page .fc-inquiry__submit.fc-inquiry__submit:hover {
    translate: 0 -3px;
    box-shadow:
        0 16px 30px rgba(192,85,47,.34),
        0 2px 0 rgba(255,255,255,.14) inset !important;
}

html body main.frayora-contact-page .fc-options__button:hover svg,
html body main.frayora-contact-page .fc-booking__button:hover svg {
    translate: 4px 0;
}

@media (max-width: 1100px) {
    html body main.frayora-contact-page .fc-options__card.fc-options__card:hover { translate: 0 -6px; }
}

/* ---------- SECTION 3 : PROJECT INQUIRY ---------- */

html body main.frayora-contact-page .fc-inquiry {
    background-color: #F5EDE4 !important;
    background-image:
        radial-gradient(560px 420px at 0% 6%, rgba(135,148,123,.18), rgba(135,148,123,0) 70%),
        radial-gradient(620px 460px at 100% 96%, rgba(201,103,67,.13), rgba(201,103,67,0) 70%),
        radial-gradient(420px 320px at 62% 0%, rgba(217,183,126,.16), rgba(217,183,126,0) 70%) !important;
}

/* left intro stays in view while the form is filled (desktop only) */
@media (min-width: 1101px) {
    html body main.frayora-contact-page .fc-inquiry {
        overflow: visible !important;
        overflow-x: clip !important;
    }
    html body main.frayora-contact-page .fc-inquiry__grid,
    html body main.frayora-contact-page .fc-inquiry__inner {
        align-items: start !important;
    }
    html body main.frayora-contact-page .fc-inquiry__intro {
        position: sticky !important;
        top: 130px !important;
        align-self: start !important;
    }
}

/* form card */
html body main.frayora-contact-page .fc-inquiry__form-shell.fc-inquiry__form-shell {
    border-radius: 44px 12px 44px 12px !important;
    border: 1px solid rgba(232,219,204,.9) !important;
    background:
        radial-gradient(300px 260px at 100% 0%, rgba(247,220,198,.5), rgba(247,220,198,0) 72%),
        radial-gradient(320px 280px at 0% 100%, rgba(200,212,190,.45), rgba(200,212,190,0) 72%),
        #FFFCF8 !important;
    box-shadow:
        0 14px 34px rgba(69,54,40,.06),
        0 40px 90px rgba(69,54,40,.11),
        inset 0 1px 0 rgba(255,255,255,.98) !important;
}

/* fields */
html body main.frayora-contact-page .fc-inquiry__field.fc-inquiry__field label {
    color: #2A352C !important;
    letter-spacing: .01em;
}
html body main.frayora-contact-page .fc-inquiry__required.fc-inquiry__required {
    color: var(--ctx-terra) !important;
    font-weight: 700;
}

html body main.frayora-contact-page .fc-inquiry__field.fc-inquiry__field input,
html body main.frayora-contact-page .fc-inquiry__field.fc-inquiry__field select,
html body main.frayora-contact-page .fc-inquiry__field.fc-inquiry__field textarea {
    border: 1px solid #E3D6C4 !important;
    border-radius: 14px !important;
    background-color: #FFFEFC !important;
    box-shadow: 0 1px 2px rgba(69,54,40,.03) inset, 0 6px 14px rgba(69,54,40,.025) !important;
    transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease !important;
}

html body main.frayora-contact-page .fc-inquiry__field.fc-inquiry__field select {
    appearance: none !important;
    -webkit-appearance: none !important;
    padding-right: 42px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C96743' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 14px 14px !important;
}

html body main.frayora-contact-page .fc-inquiry__field.fc-inquiry__field input:hover,
html body main.frayora-contact-page .fc-inquiry__field.fc-inquiry__field select:hover,
html body main.frayora-contact-page .fc-inquiry__field.fc-inquiry__field textarea:hover {
    border-color: #D9B77E !important;
}

html body main.frayora-contact-page .fc-inquiry__field.fc-inquiry__field input:focus,
html body main.frayora-contact-page .fc-inquiry__field.fc-inquiry__field select:focus,
html body main.frayora-contact-page .fc-inquiry__field.fc-inquiry__field textarea:focus {
    border-color: var(--ctx-terra) !important;
    background-color: #FFFFFF !important;
    box-shadow: 0 0 0 4px rgba(201,103,67,.14), 0 8px 20px rgba(201,103,67,.08) !important;
}

/* reCAPTCHA + submit */
html body main.frayora-contact-page .fc-inquiry__recaptcha {
    margin-top: 30px !important;
}

html body main.frayora-contact-page .fc-inquiry__submit-wrap {
    margin-top: 24px !important;
}

html body main.frayora-contact-page .fc-inquiry__submit-wrap .fc-inquiry__submit.fc-inquiry__submit {
    padding: 14px 40px !important;
    min-height: 54px !important;
}

html body main.frayora-contact-page .fc-inquiry__submit.fc-inquiry__submit span {
    position: relative;
    z-index: 1;
}

/* privacy as a soft note */
html body main.frayora-contact-page .fc-inquiry__privacy.fc-inquiry__privacy {
    margin-top: 26px !important;
    padding: 14px 20px !important;
    border: 1px solid #EADFCF !important;
    border-radius: 22px 8px 22px 8px !important;
    background: linear-gradient(135deg, rgba(247,238,226,.7), rgba(255,252,248,.5)) !important;
}

/* ---------- SECTION 4 : INTRO CALL ---------- */

html body main.frayora-contact-page .fc-booking {
    position: relative;
    isolation: isolate;
    background-color: #FAF7F2 !important;
    background-image:
        radial-gradient(540px 400px at 100% 4%, rgba(217,183,126,.2), rgba(217,183,126,0) 70%),
        radial-gradient(600px 440px at 0% 100%, rgba(135,148,123,.16), rgba(135,148,123,0) 70%),
        radial-gradient(520px 400px at 70% 100%, rgba(201,103,67,.12), rgba(201,103,67,0) 70%) !important;
}

html body main.frayora-contact-page .fc-booking__intro {
    align-self: center !important;
}

html body main.frayora-contact-page .fc-booking__panel.fc-booking__panel {
    border: 1px solid rgba(232,219,204,.95) !important;
    box-shadow:
        0 0 0 10px rgba(247,220,198,.34),
        0 18px 40px rgba(69,54,40,.08),
        0 44px 90px rgba(69,54,40,.12) !important;
}

html body main.frayora-contact-page .fc-booking__button.fc-booking__button {
    margin-top: 32px !important;
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 1100px) {
    html body main.frayora-contact-page .fc-booking__panel.fc-booking__panel {
        box-shadow:
            0 0 0 8px rgba(247,220,198,.32),
            0 16px 36px rgba(69,54,40,.08),
            0 34px 70px rgba(69,54,40,.1) !important;
    }
}

@media (max-width: 599px) {
    html body main.frayora-contact-page .fc-inquiry__form-shell.fc-inquiry__form-shell {
        border-radius: 30px 10px 30px 10px !important;
    }
    html body main.frayora-contact-page .fc-booking__panel.fc-booking__panel {
        box-shadow:
            0 0 0 6px rgba(247,220,198,.3),
            0 14px 30px rgba(69,54,40,.08) !important;
    }
    html body main.frayora-contact-page .fc-inquiry__privacy.fc-inquiry__privacy {
        padding: 12px 16px !important;
    }
    html body main.frayora-contact-page .fc-options__icon.fc-options__icon {
        box-shadow: 0 0 0 6px rgba(247,220,198,.38), 0 8px 18px rgba(201,103,67,.12) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body main.frayora-contact-page .about-hero__media { animation: none !important; }
    html body main.frayora-contact-page .fc-options__button::after,
    html body main.frayora-contact-page .fc-booking__button::after,
    html body main.frayora-contact-page .fc-inquiry__submit::after { animation: none !important; }
}

/* END — CONTACT US ELEVATION v2 */

/* =====================================================================
   FRAYORA: WEBSITE & DIGITAL INFRASTRUCTURE PACKAGES v1
   PASTE AT THE VERY BOTTOM OF main.css (after everything else).

   This styles the new "Packages & Investment" section and the small
   "View packages and pricing" link under the hero button.
   Desktop, tablet and phone are all handled in this one block.
   If you ever need to replace it, delete everything from this banner
   down to the line that says "END: WEBSITE & DIGITAL INFRASTRUCTURE
   PACKAGES v1", then paste the new block.
   ===================================================================== */

/* ---------- Hero link under the button ---------- */

html body .digital-hero__packages-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 22px;
    margin-left: 6px;
    padding-bottom: 3px;
    color: rgba(248, 243, 235, 0.86);
    font: 500 14px/1.4 "Inter", sans-serif;
    letter-spacing: 0.01em;
    text-decoration: none;
    border-bottom: 1px solid rgba(217, 183, 126, 0.55);
    transition: color 0.3s ease, border-color 0.3s ease, gap 0.3s ease;
}

html body .digital-hero__packages-link::after {
    content: "↓";
    color: #D9B77E;
    font-size: 15px;
    transition: translate 0.3s ease;
}

html body .digital-hero__packages-link:hover,
html body .digital-hero__packages-link:focus-visible {
    color: #FFFFFF;
    border-color: #D9B77E;
}

html body .digital-hero__packages-link:hover::after {
    translate: 0 3px;
}

/* ---------- Section shell ---------- */

html body .digital-packages {
    position: relative;
    isolation: isolate;
    width: 100%;
    overflow: hidden;
    margin-top: calc(var(--fr-edge) * -1) !important;
    padding: calc(104px + var(--fr-edge)) 0 calc(92px + var(--fr-edge));
    scroll-margin-top: 110px;
    color: #1F211D;
    background-color: #FAF7F2;
    background-image:
        radial-gradient(560px 420px at 4% 12%, rgba(255, 255, 255, 0.70), rgba(255, 255, 255, 0) 72%),
        radial-gradient(620px 460px at 98% 14%, rgba(217, 183, 126, 0.20), rgba(217, 183, 126, 0) 70%),
        radial-gradient(640px 480px at 92% 100%, rgba(201, 103, 67, 0.13), rgba(201, 103, 67, 0) 70%),
        radial-gradient(560px 440px at 0% 100%, rgba(135, 148, 123, 0.18), rgba(135, 148, 123, 0) 70%);
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.990), 12.5% calc(var(--fr-edge) * 0.962), 18.8% calc(var(--fr-edge) * 0.916), 25.0% calc(var(--fr-edge) * 0.854), 31.2% calc(var(--fr-edge) * 0.778), 37.5% calc(var(--fr-edge) * 0.691), 43.8% calc(var(--fr-edge) * 0.598), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.402), 62.5% calc(var(--fr-edge) * 0.309), 68.8% calc(var(--fr-edge) * 0.222), 75.0% calc(var(--fr-edge) * 0.146), 81.2% calc(var(--fr-edge) * 0.084), 87.5% calc(var(--fr-edge) * 0.038), 93.8% calc(var(--fr-edge) * 0.010), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.990), 12.5% calc(var(--fr-edge) * 0.962), 18.8% calc(var(--fr-edge) * 0.916), 25.0% calc(var(--fr-edge) * 0.854), 31.2% calc(var(--fr-edge) * 0.778), 37.5% calc(var(--fr-edge) * 0.691), 43.8% calc(var(--fr-edge) * 0.598), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.402), 62.5% calc(var(--fr-edge) * 0.309), 68.8% calc(var(--fr-edge) * 0.222), 75.0% calc(var(--fr-edge) * 0.146), 81.2% calc(var(--fr-edge) * 0.084), 87.5% calc(var(--fr-edge) * 0.038), 93.8% calc(var(--fr-edge) * 0.010), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
}

/* the same sage to gold line that sits on every other section edge */
html body .digital-packages::before {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 0 0 auto 0;
    height: calc(var(--fr-edge) + 6px);
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135, 148, 123, 0), #87947B 18%, #D9B77E 62%, rgba(217, 183, 126, 0));
    opacity: 0.6;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.990), 12.5% calc(var(--fr-edge) * 0.962), 18.8% calc(var(--fr-edge) * 0.916), 25.0% calc(var(--fr-edge) * 0.854), 31.2% calc(var(--fr-edge) * 0.778), 37.5% calc(var(--fr-edge) * 0.691), 43.8% calc(var(--fr-edge) * 0.598), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.402), 62.5% calc(var(--fr-edge) * 0.309), 68.8% calc(var(--fr-edge) * 0.222), 75.0% calc(var(--fr-edge) * 0.146), 81.2% calc(var(--fr-edge) * 0.084), 87.5% calc(var(--fr-edge) * 0.038), 93.8% calc(var(--fr-edge) * 0.010), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.010 + 3px), 87.5% calc(var(--fr-edge) * 0.038 + 3px), 81.2% calc(var(--fr-edge) * 0.084 + 3px), 75.0% calc(var(--fr-edge) * 0.146 + 3px), 68.8% calc(var(--fr-edge) * 0.222 + 3px), 62.5% calc(var(--fr-edge) * 0.309 + 3px), 56.2% calc(var(--fr-edge) * 0.402 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.598 + 3px), 37.5% calc(var(--fr-edge) * 0.691 + 3px), 31.2% calc(var(--fr-edge) * 0.778 + 3px), 25.0% calc(var(--fr-edge) * 0.854 + 3px), 18.8% calc(var(--fr-edge) * 0.916 + 3px), 12.5% calc(var(--fr-edge) * 0.962 + 3px), 6.2% calc(var(--fr-edge) * 0.990 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.990), 12.5% calc(var(--fr-edge) * 0.962), 18.8% calc(var(--fr-edge) * 0.916), 25.0% calc(var(--fr-edge) * 0.854), 31.2% calc(var(--fr-edge) * 0.778), 37.5% calc(var(--fr-edge) * 0.691), 43.8% calc(var(--fr-edge) * 0.598), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.402), 62.5% calc(var(--fr-edge) * 0.309), 68.8% calc(var(--fr-edge) * 0.222), 75.0% calc(var(--fr-edge) * 0.146), 81.2% calc(var(--fr-edge) * 0.084), 87.5% calc(var(--fr-edge) * 0.038), 93.8% calc(var(--fr-edge) * 0.010), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.010 + 3px), 87.5% calc(var(--fr-edge) * 0.038 + 3px), 81.2% calc(var(--fr-edge) * 0.084 + 3px), 75.0% calc(var(--fr-edge) * 0.146 + 3px), 68.8% calc(var(--fr-edge) * 0.222 + 3px), 62.5% calc(var(--fr-edge) * 0.309 + 3px), 56.2% calc(var(--fr-edge) * 0.402 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.598 + 3px), 37.5% calc(var(--fr-edge) * 0.691 + 3px), 31.2% calc(var(--fr-edge) * 0.778 + 3px), 25.0% calc(var(--fr-edge) * 0.854 + 3px), 18.8% calc(var(--fr-edge) * 0.916 + 3px), 12.5% calc(var(--fr-edge) * 0.962 + 3px), 6.2% calc(var(--fr-edge) * 0.990 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
}

html body .digital-packages,
html body .digital-packages *,
html body .digital-packages *::before,
html body .digital-packages *::after {
    box-sizing: border-box;
}

html body .digital-packages__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
}

/* ---------- Header ---------- */

html body .digital-packages__header {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    column-gap: 65px;
    align-items: end;
    margin-bottom: 52px;
}

html body .digital-packages__eyebrow {
    position: relative;
    margin: 0 0 19px;
    padding-left: 48px;
    color: #C96743;
    font: 600 12px/1.4 "Inter", sans-serif;
    letter-spacing: 0.15em;
}

html body .digital-packages__eyebrow::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 34px;
    height: 10px;
    translate: 0 -50%;
    background: #C96743;
    clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);
}

html body .digital-packages__title {
    margin: 0;
    max-width: 740px;
    color: #1F211D;
    font: 600 clamp(36px, 3.4vw, 49px) / 1.13 "Manrope", sans-serif;
    letter-spacing: -0.05em;
    text-wrap: balance;
}

html body .digital-packages__intro {
    max-width: 440px;
    justify-self: end;
    padding-bottom: 3px;
}

html body .digital-packages__intro p {
    margin: 0 0 19px;
    color: #65695F;
    font: 400 15px/1.78 "Inter", sans-serif;
}

html body .digital-packages__currency {
    color: #66745C;
    font: 600 10px/1.5 "Inter", sans-serif;
    letter-spacing: 0.11em;
}

/* ---------- Cards ---------- */

html body .digital-packages__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
    padding: 16px 0 12px;
}

html body .digital-packages__card {
    --dp-text: #1F211D;
    --dp-muted: #62665F;
    --dp-line: rgba(65, 72, 59, 0.16);
    --dp-accent: #B96748;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border-radius: 36px 12px 36px 12px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    color: var(--dp-text);
    box-shadow:
        0 26px 52px rgba(45, 41, 34, 0.10),
        0 8px 16px rgba(45, 41, 34, 0.055),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: translate 0.45s cubic-bezier(.22, 1, .36, 1), box-shadow 0.45s ease;
}

/* soft glow in the bottom corner of each card */
html body .digital-packages__card::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -80px;
    bottom: -90px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    pointer-events: none;
}

html body .digital-packages__card--essential {
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.92), rgba(248, 243, 235, 0.82) 64%, rgba(235, 228, 216, 0.66));
}
html body .digital-packages__card--essential::after {
    background: radial-gradient(circle, rgba(200, 212, 190, 0.55), rgba(200, 212, 190, 0) 68%);
}

html body .digital-packages__card--professional {
    --dp-accent: #C96743;
    background: linear-gradient(150deg, rgba(255, 249, 244, 0.94), rgba(245, 228, 219, 0.86) 65%, rgba(233, 206, 193, 0.70));
    border-color: rgba(201, 103, 67, 0.24);
}
html body .digital-packages__card--professional::after {
    background: radial-gradient(circle, rgba(247, 200, 170, 0.65), rgba(247, 200, 170, 0) 68%);
}

html body .digital-packages__card--custom {
    --dp-text: #F8F3EB;
    --dp-muted: rgba(248, 243, 235, 0.78);
    --dp-line: rgba(248, 243, 235, 0.2);
    --dp-accent: #EEDFB9;
    background: linear-gradient(145deg, #4E5F4E 0%, #39483B 52%, #2D3C31 100%);
    border-color: rgba(235, 240, 220, 0.22);
    box-shadow:
        0 27px 52px rgba(29, 43, 32, 0.24),
        0 8px 16px rgba(29, 43, 32, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
html body .digital-packages__card--custom::after {
    background: radial-gradient(circle, rgba(217, 183, 126, 0.28), rgba(217, 183, 126, 0) 68%);
}

@media (hover: hover) {
    html body .digital-packages__card:hover {
        translate: 0 -8px;
        box-shadow:
            0 36px 68px rgba(45, 41, 34, 0.15),
            0 10px 18px rgba(45, 41, 34, 0.07),
            inset 0 1px 0 rgba(255, 255, 255, 0.85);
    }
    html body .digital-packages__card--custom:hover {
        box-shadow:
            0 38px 68px rgba(29, 43, 32, 0.28),
            0 10px 18px rgba(29, 43, 32, 0.12),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
}

html body .digital-packages__card-head {
    position: relative;
    padding: 32px 30px 26px;
    border-bottom: 1px solid var(--dp-line);
}

html body .digital-packages__index {
    display: block;
    padding-right: 120px;
    color: var(--dp-accent);
    font: 600 10px/1.4 "Inter", sans-serif;
    letter-spacing: 0.11em;
}

html body .digital-packages__badge {
    position: absolute;
    z-index: 3;
    top: 24px;
    right: 24px;
    padding: 6px 13px 6px;
    border-radius: 999px;
    background: linear-gradient(145deg, #DB7D57, #C0552F);
    color: #FFFFFF;
    font: 700 9.5px/1.2 "Inter", sans-serif;
    letter-spacing: 0.12em;
    box-shadow: 0 8px 16px rgba(192, 85, 47, 0.28);
}

html body .digital-packages__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin: 20px 0 15px;
    border-radius: 50%;
    border: 1px solid rgba(105, 122, 90, 0.14);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(229, 232, 219, 0.7));
    box-shadow:
        0 0 0 8px rgba(200, 212, 190, 0.28),
        0 8px 18px rgba(47, 55, 43, 0.08),
        inset 0 1px 2px rgba(255, 255, 255, 0.8);
}

html body .digital-packages__mark svg {
    width: 25px;
    height: 25px;
    stroke: #637154;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

html body .digital-packages__card--professional .digital-packages__mark {
    background: linear-gradient(145deg, #FFF8F1, #F0D7CA);
    box-shadow:
        0 0 0 8px rgba(247, 220, 198, 0.5),
        0 8px 18px rgba(201, 103, 67, 0.14),
        inset 0 1px 2px rgba(255, 255, 255, 0.8);
}
html body .digital-packages__card--professional .digital-packages__mark svg {
    stroke: #B65F3F;
}

html body .digital-packages__card--custom .digital-packages__mark {
    background: rgba(244, 238, 218, 0.1);
    border-color: rgba(244, 238, 218, 0.22);
    box-shadow: 0 0 0 8px rgba(244, 238, 218, 0.07), inset 0 1px 2px rgba(255, 255, 255, 0.12);
}
html body .digital-packages__card--custom .digital-packages__mark svg {
    stroke: #E9D9B7;
}

html body .digital-packages__card h3 {
    margin: 0 0 10px;
    color: var(--dp-text);
    font: 600 29px/1.18 "Manrope", sans-serif;
    letter-spacing: -0.045em;
}

html body .digital-packages__summary {
    min-height: 3.4em;
    margin: 0 0 24px;
    color: var(--dp-muted);
    font: 400 13.5px/1.7 "Inter", sans-serif;
}

html body .digital-packages__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    column-gap: 9px;
    row-gap: 3px;
    color: var(--dp-text);
}

html body .digital-packages__price > span {
    width: 100%;
    color: var(--dp-muted);
    font: 600 10px/1.4 "Inter", sans-serif;
    letter-spacing: 0.06em;
}

html body .digital-packages__price strong {
    color: var(--dp-text);
    font: 600 40px/1.14 "Manrope", sans-serif;
    letter-spacing: -0.055em;
}

html body .digital-packages__price small {
    color: var(--dp-muted);
    font: 400 11.5px/1.4 "Inter", sans-serif;
}

html body .digital-packages__card-body {
    flex: 1;
    padding: 28px 30px 26px;
}

html body .digital-packages__list-label {
    margin: 0 0 20px;
    color: var(--dp-accent);
    font: 600 10px/1.4 "Inter", sans-serif;
    letter-spacing: 0.1em;
}

html body .digital-packages__list {
    display: grid;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

html body .digital-packages__list li {
    position: relative;
    min-width: 0;
    margin: 0;
    padding-left: 24px;
}

html body .digital-packages__list li::before {
    content: "✓";
    position: absolute;
    top: 1px;
    left: 0;
    color: var(--dp-accent);
    font: 700 13px/1.5 "Inter", sans-serif;
}

html body .digital-packages__list strong {
    display: block;
    margin-bottom: 4px;
    color: var(--dp-text);
    font: 600 13.5px/1.5 "Manrope", sans-serif;
    letter-spacing: -0.018em;
}

html body .digital-packages__list span {
    display: block;
    color: var(--dp-muted);
    font: 400 12.5px/1.68 "Inter", sans-serif;
}

html body .digital-packages__card-foot {
    margin-top: auto;
    padding: 0 30px 30px;
}

html body .digital-packages__card-foot > p {
    min-height: 56px;
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid var(--dp-line);
    color: var(--dp-muted);
    font: 400 12px/1.6 "Inter", sans-serif;
}

html body .digital-packages__button {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    min-height: 50px;
    padding: 11px 20px;
    border-radius: 999px;
    background: #53664B;
    color: #FFFFFF;
    font: 600 13px/1.35 "Manrope", sans-serif;
    text-decoration: none;
    box-shadow: 0 9px 18px rgba(42, 57, 40, 0.16);
    transition: translate 0.3s cubic-bezier(.22, 1, .36, 1), background 0.3s ease, box-shadow 0.3s ease;
}

html body .digital-packages__button span {
    font: 400 21px/1 "Inter", sans-serif;
    transition: translate 0.3s ease;
}

html body .digital-packages__button::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    width: 45%;
    pointer-events: none;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    translate: -140% 0;
    animation: dpSheen 6s ease-in-out 1.6s infinite;
}

@keyframes dpSheen {
    0%, 62% { translate: -140% 0; }
    100%    { translate: 340% 0; }
}

html body .digital-packages__card--professional .digital-packages__button {
    background: linear-gradient(145deg, #DB7D57, #C0552F);
    box-shadow: 0 10px 20px rgba(192, 85, 47, 0.26);
}

html body .digital-packages__card--custom .digital-packages__button {
    background: #F8F3EB;
    color: #2F4033;
    box-shadow: 0 10px 20px rgba(15, 25, 17, 0.28);
}

html body .digital-packages__button:hover,
html body .digital-packages__button:focus-visible {
    translate: 0 -3px;
    background: #43543C;
    color: #FFFFFF;
}
html body .digital-packages__card--professional .digital-packages__button:hover,
html body .digital-packages__card--professional .digital-packages__button:focus-visible {
    background: linear-gradient(145deg, #D6714A, #B24A27);
}
html body .digital-packages__card--custom .digital-packages__button:hover,
html body .digital-packages__card--custom .digital-packages__button:focus-visible {
    background: #EADDC5;
    color: #25372C;
}
html body .digital-packages__button:hover span {
    translate: 3px 0;
}
html body .digital-packages__button:focus-visible {
    outline: 3px solid #C96743;
    outline-offset: 3px;
}

/* ---------- Good to know ---------- */

html body .digital-packages__notes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 40px;
}

html body .digital-packages__note {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 28px 28px 26px;
    border-radius: 26px 8px 26px 8px;
    border: 1px solid rgba(232, 219, 204, 0.9);
    background:
        radial-gradient(180px 150px at 100% 110%, rgba(247, 220, 198, 0.55), rgba(247, 220, 198, 0) 72%),
        rgba(255, 253, 249, 0.78);
    box-shadow: 0 14px 30px rgba(69, 54, 40, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
html body .digital-packages__note:nth-child(2) {
    background:
        radial-gradient(180px 150px at 100% 110%, rgba(200, 212, 190, 0.55), rgba(200, 212, 190, 0) 72%),
        rgba(255, 253, 249, 0.78);
}
html body .digital-packages__note:nth-child(3) {
    background:
        radial-gradient(180px 150px at 100% 110%, rgba(240, 221, 180, 0.62), rgba(240, 221, 180, 0) 72%),
        rgba(255, 253, 249, 0.78);
}

html body .digital-packages__note-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: linear-gradient(145deg, #FFF8F1, #F0D7CA);
    box-shadow: 0 0 0 7px rgba(247, 220, 198, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.85);
}
html body .digital-packages__note:nth-child(2) .digital-packages__note-icon {
    background: linear-gradient(145deg, #F1F5EC, #DCE5D3);
    box-shadow: 0 0 0 7px rgba(200, 212, 190, 0.38), inset 0 1px 2px rgba(255, 255, 255, 0.85);
}
html body .digital-packages__note:nth-child(3) .digital-packages__note-icon {
    background: linear-gradient(145deg, #FBF3E2, #F0DDB4);
    box-shadow: 0 0 0 7px rgba(240, 221, 180, 0.45), inset 0 1px 2px rgba(255, 255, 255, 0.85);
}

html body .digital-packages__note-icon svg {
    width: 24px;
    height: 24px;
    stroke: #B65F3F;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
html body .digital-packages__note:nth-child(2) .digital-packages__note-icon svg { stroke: #56674F; }
html body .digital-packages__note:nth-child(3) .digital-packages__note-icon svg { stroke: #8A6A2C; }

html body .digital-packages__note h3 {
    margin: 0 0 8px;
    color: #1F211D;
    font: 600 18px/1.3 "Manrope", sans-serif;
    letter-spacing: -0.03em;
}

html body .digital-packages__note p {
    margin: 0;
    color: #62665F;
    font: 400 13.5px/1.72 "Inter", sans-serif;
}

/* ---------- Business Foundation link ---------- */

html body .digital-packages__bundle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-top: 26px;
    padding: 24px 28px 24px 32px;
    border-radius: 30px 10px 30px 10px;
    border: 1px solid rgba(217, 183, 126, 0.5);
    background:
        radial-gradient(260px 200px at 0% 50%, rgba(247, 220, 198, 0.55), rgba(247, 220, 198, 0) 72%),
        linear-gradient(135deg, rgba(255, 252, 247, 0.92), rgba(250, 240, 226, 0.8));
    box-shadow: 0 16px 34px rgba(69, 54, 40, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

html body .digital-packages__bundle-text {
    display: grid;
    gap: 4px;
    min-width: 0;
}

html body .digital-packages__bundle-text strong {
    color: #1F211D;
    font: 600 19px/1.3 "Manrope", sans-serif;
    letter-spacing: -0.03em;
}

html body .digital-packages__bundle-text span {
    color: #5C6258;
    font: 400 14px/1.65 "Inter", sans-serif;
}

html body .digital-packages__bundle-link {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 50px;
    padding: 12px 24px;
    border-radius: 999px;
    background: linear-gradient(145deg, #DB7D57, #C0552F);
    color: #FFFFFF;
    font: 600 13.5px/1.3 "Manrope", sans-serif;
    text-decoration: none;
    box-shadow: 0 10px 20px rgba(192, 85, 47, 0.26);
    transition: translate 0.3s cubic-bezier(.22, 1, .36, 1), box-shadow 0.3s ease;
}

html body .digital-packages__bundle-link span {
    transition: translate 0.3s ease;
}

html body .digital-packages__bundle-link:hover,
html body .digital-packages__bundle-link:focus-visible {
    translate: 0 -3px;
    color: #FFFFFF;
    box-shadow: 0 16px 28px rgba(192, 85, 47, 0.34);
}
html body .digital-packages__bundle-link:hover span {
    translate: 4px 0;
}

/* ---------- Fine print ---------- */

html body .digital-packages__terms {
    max-width: 1100px;
    margin: 34px auto 0;
    padding-top: 26px;
    border-top: 1px solid rgba(71, 73, 61, 0.15);
}

html body .digital-packages__terms p {
    margin: 0 0 9px;
    color: #77756C;
    font: 400 11.5px/1.8 "Inter", sans-serif;
}

/* ---------- Desktop: lift the middle card a little ---------- */

@media (min-width: 1101px) {
    html body .digital-packages__grid { padding-top: 30px; }
    html body .digital-packages__card--professional { margin-top: -16px; }
    html body .digital-packages__card--professional .digital-packages__card-head { padding-top: 48px; }
    html body .digital-packages__card--professional .digital-packages__badge { top: 40px; }
}

@media (min-width: 1101px) and (max-width: 1300px) {
    html body .digital-packages__card-head { padding: 28px 24px 24px; }
    html body .digital-packages__card-body { padding: 26px 24px; }
    html body .digital-packages__card-foot { padding: 0 24px 26px; }
    html body .digital-packages__badge { right: 18px; }
    html body .digital-packages__price strong { font-size: 36px; }
}

/* ---------- Tablet ---------- */

@media (min-width: 600px) and (max-width: 1100px) {
    html body .digital-packages { padding: calc(80px + var(--fr-edge)) 0 calc(76px + var(--fr-edge)); }
    html body .digital-packages__inner { padding: 0 40px; }
    html body .digital-packages__header { display: block; margin-bottom: 40px; }
    html body .digital-packages__title { font-size: clamp(34px, 4.7vw, 44px); }
    html body .digital-packages__intro { max-width: 640px; margin-top: 22px; justify-self: start; }
    html body .digital-packages__grid {
        grid-template-columns: minmax(0, 1fr);
        max-width: 700px;
        margin: 0 auto;
        gap: 22px;
    }
    html body .digital-packages__summary { min-height: 0; }
    html body .digital-packages__card-foot > p { min-height: 0; padding-bottom: 18px; }
    html body .digital-packages__notes { grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 700px; margin: 36px auto 0; }
    html body .digital-packages__bundle { max-width: 700px; margin: 24px auto 0; }
    html body .digital-packages__terms { max-width: 700px; }
}

/* ---------- Phone ---------- */

@media (max-width: 599px) {
    html body .digital-packages { padding: calc(56px + var(--fr-edge)) 0 calc(56px + var(--fr-edge)); scroll-margin-top: 85px; }
    html body .digital-packages__inner { padding: 0 24px; }
    html body .digital-packages__header { display: block; margin-bottom: 30px; }
    html body .digital-packages__eyebrow { font-size: 11px; margin-bottom: 14px; padding-left: 44px; }
    html body .digital-packages__title { font-size: clamp(30px, 8vw, 38px); line-height: 1.16; }
    html body .digital-packages__intro { max-width: none; margin-top: 18px; justify-self: start; }
    html body .digital-packages__intro p { font-size: 14px; }
    html body .digital-packages__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-top: 6px; }
    html body .digital-packages__card { border-radius: 30px 10px 30px 10px; }
    html body .digital-packages__card-head { padding: 26px 24px 22px; }
    html body .digital-packages__card-body { padding: 24px 24px 26px; }
    html body .digital-packages__card-foot { padding: 0 24px 24px; }
    html body .digital-packages__card h3 { font-size: 26px; }
    html body .digital-packages__summary { min-height: 0; margin-bottom: 20px; }
    html body .digital-packages__price strong { font-size: 36px; }
    html body .digital-packages__badge { top: 20px; right: 20px; }
    html body .digital-packages__card-foot > p { min-height: 0; padding-bottom: 16px; }
    html body .digital-packages__notes { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 30px; }
    html body .digital-packages__note { padding: 24px 22px; }
    html body .digital-packages__bundle { flex-direction: column; align-items: flex-start; gap: 18px; padding: 24px 22px; }
    html body .digital-packages__bundle-link { width: 100%; justify-content: center; }
    html body .digital-packages__terms { margin-top: 28px; }
    html body .digital-packages__terms p { font-size: 11px; }
    html body .digital-hero__packages-link { margin-left: 2px; }
}

@media (prefers-reduced-motion: reduce) {
    html body .digital-packages__button::after { animation: none !important; }
    html body .digital-packages__card,
    html body .digital-packages__button,
    html body .digital-packages__bundle-link { transition: none !important; }
}

/* END: WEBSITE & DIGITAL INFRASTRUCTURE PACKAGES v1 */


/* =====================================================================
   FRAYORA BUSINESS FOUNDATION: PRICING & PACKAGES v2
   ---------------------------------------------------------------------
   Paste this at the VERY BOTTOM of main.css (after everything else).
   If you already pasted v1, first delete the whole v1 block (from its
   banner down to the line starting "END: FRAYORA BUSINESS FOUNDATION").
   It only adds styling for the new pieces (hero link, founding client
   band, price notes, add-ons, review card). Nothing old is deleted.
   To replace it later: delete from this banner down to the line that
   starts with "END: FRAYORA BUSINESS FOUNDATION", then paste the new one.
   ===================================================================== */

/* ---------- Hero: buttons row ---------- */

body .business-in-a-box-page .biab-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0 30px;
}

body .business-in-a-box-page .biab-hero__packages-link {
    position: relative;
    margin-bottom: 11px;
    padding: 6px 0;
    color: #F1E2D4;
    font: 600 14px/1.4 "Manrope", sans-serif;
    letter-spacing: -0.01em;
    text-decoration: none;
    transition: color .25s ease;
}

body .business-in-a-box-page .biab-hero__packages-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1px;
    height: 1px;
    background: linear-gradient(90deg, #D9B77E, rgba(217, 183, 126, 0.25));
    transform-origin: left center;
    transition: transform .35s ease;
}

body .business-in-a-box-page .biab-hero__packages-link:hover,
body .business-in-a-box-page .biab-hero__packages-link:focus-visible {
    color: #FFFFFF;
}

body .business-in-a-box-page .biab-hero__packages-link:hover::after {
    transform: scaleX(0.6);
}

body .business-in-a-box-page .biab-hero__packages-link:focus-visible {
    outline: 2px solid #D9B77E;
    outline-offset: 5px;
    border-radius: 4px;
}

/* ---------- Packages: header text alignment on tablet and phone ---------- */

@media (max-width: 1100px) {
    body .business-in-a-box-page .biab-packages__intro {
        margin-left: 0;
        padding-left: 0;
        justify-self: start;
        max-width: 640px;
    }
}

/* ---------- Packages: founding client band ---------- */

body .business-in-a-box-page .biab-packages__founding {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 30px;
    margin: 0 0 24px;
    padding: 26px 34px;
    overflow: hidden;
    border: 1px solid rgba(217, 183, 126, 0.5);
    border-radius: 22px 22px 22px 56px;
    background:
        radial-gradient(ellipse 50% 140% at 100% 100%, rgba(217, 183, 126, 0.26), transparent 70%),
        linear-gradient(120deg, rgba(255, 255, 255, 0.78), rgba(247, 220, 198, 0.52));
    box-shadow: 0 18px 38px rgba(64, 51, 36, 0.07), 0 3px 10px rgba(64, 51, 36, 0.04);
}

body .business-in-a-box-page .biab-packages__founding::after {
    content: "";
    position: absolute;
    right: -70px;
    top: -90px;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 103, 67, 0.14), rgba(201, 103, 67, 0) 68%);
    pointer-events: none;
}

body .business-in-a-box-page .biab-packages__founding-count {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background: linear-gradient(145deg, #DB7D57, #C0552F);
    color: #FFFFFF;
    box-shadow: 0 0 0 9px rgba(247, 220, 198, 0.55), 0 14px 26px rgba(192, 85, 47, 0.26);
}

body .business-in-a-box-page .biab-packages__founding-count svg {
    width: 38px;
    height: 38px;
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body .business-in-a-box-page .biab-packages__founding-copy {
    position: relative;
    z-index: 1;
    min-width: 0;
}

body .business-in-a-box-page .biab-packages__founding-label {
    margin: 0 0 8px;
    color: #B2532F;
    font: 600 11px/1.4 "Inter", sans-serif;
    letter-spacing: 0.14em;
}

body .business-in-a-box-page .biab-packages__founding-text {
    max-width: 880px;
    margin: 0;
    color: #3B4639;
    font: 400 14.5px/1.72 "Inter", sans-serif;
}

body .business-in-a-box-page .biab-packages__founding-text strong {
    color: #1F2A21;
    font-weight: 600;
}

/* ---------- Packages: line under each price ---------- */

body .business-in-a-box-page .biab-packages__price-note {
    margin: 14px 0 0;
    color: var(--b-muted, #62665F);
    font: 400 12.5px/1.5 "Inter", sans-serif;
}

body .business-in-a-box-page .biab-packages__price-note strong {
    margin-left: 4px;
    color: var(--b-text, #1F211D);
    font: 600 15px/1.3 "Manrope", sans-serif;
    letter-spacing: -0.02em;
}

body .business-in-a-box-page .biab-packages__price-note--founding {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(201, 103, 67, 0.1);
    border: 1px solid rgba(201, 103, 67, 0.22);
    color: #8F4023;
    font-weight: 600;
    font-size: 12px;
}

body .business-in-a-box-page .biab-packages__price-note--founding strong {
    color: #B2532F;
}

/* ---------- Packages: add-ons and review ---------- */

body .business-in-a-box-page .biab-packages__extras {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 17px;
    margin-top: 40px;
    align-items: stretch;
}

body .business-in-a-box-page .biab-packages__addons,
body .business-in-a-box-page .biab-packages__review {
    position: relative;
    overflow: hidden;
    min-width: 0;
    padding: 34px 36px 32px;
    border-radius: 22px;
    box-shadow: 0 15px 32px rgba(64, 51, 36, 0.055), 0 3px 11px rgba(64, 51, 36, 0.035);
}

body .business-in-a-box-page .biab-packages__addons {
    border: 1px solid rgba(112, 98, 81, 0.13);
    border-radius: 22px 22px 56px 22px;
    background:
        radial-gradient(ellipse 60% 70% at 0% 0%, rgba(255, 255, 255, 0.9), transparent 70%),
        linear-gradient(145deg, rgba(255, 253, 249, 0.88), rgba(235, 238, 225, 0.7));
}

body .business-in-a-box-page .biab-packages__addons::after {
    content: "";
    position: absolute;
    right: -60px;
    bottom: -70px;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(135, 148, 123, 0.2), rgba(135, 148, 123, 0) 68%);
    pointer-events: none;
}

body .business-in-a-box-page .biab-packages__review {
    border: 1px solid rgba(201, 103, 67, 0.23);
    border-radius: 22px 56px 22px 22px;
    background:
        radial-gradient(ellipse 70% 60% at 100% 0%, rgba(217, 183, 126, 0.3), transparent 72%),
        linear-gradient(145deg, #FBEFE6, #F3DFD2);
}

body .business-in-a-box-page .biab-packages__review::after {
    content: "";
    position: absolute;
    left: -80px;
    bottom: -90px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 103, 67, 0.15), rgba(201, 103, 67, 0) 68%);
    pointer-events: none;
}

body .business-in-a-box-page .biab-packages__addons > *,
body .business-in-a-box-page .biab-packages__review > * {
    position: relative;
    z-index: 1;
}

body .business-in-a-box-page .biab-packages__extras-label {
    margin: 0 0 12px;
    color: #B2532F;
    font: 600 10px/1.4 "Inter", sans-serif;
    letter-spacing: 0.12em;
}

body .business-in-a-box-page .biab-packages__extras-title {
    margin: 0 0 20px;
    color: #1F211D;
    font: 600 26px/1.2 "Manrope", sans-serif;
    letter-spacing: -0.04em;
}

body .business-in-a-box-page .biab-packages__addon-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

body .business-in-a-box-page .biab-packages__addon-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 22px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(65, 72, 59, 0.13);
}

body .business-in-a-box-page .biab-packages__addon-list li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

body .business-in-a-box-page .biab-packages__addon-list span {
    color: #4A5348;
    font: 400 14px/1.5 "Inter", sans-serif;
}

body .business-in-a-box-page .biab-packages__addon-list strong {
    flex: none;
    color: #1F211D;
    font: 600 15px/1.4 "Manrope", sans-serif;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

body .business-in-a-box-page .biab-packages__review-text {
    margin: 0 0 20px;
    color: #55574E;
    font: 400 14px/1.75 "Inter", sans-serif;
}

body .business-in-a-box-page .biab-packages__review-price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 22px;
}

body .business-in-a-box-page .biab-packages__review-price strong {
    color: #1F211D;
    font: 600 40px/1.1 "Manrope", sans-serif;
    letter-spacing: -0.055em;
}

body .business-in-a-box-page .biab-packages__review-price small {
    color: #62665F;
    font: 400 12px/1.4 "Inter", sans-serif;
}

body .business-in-a-box-page .biab-packages__review .biab-packages__button {
    margin-top: auto;
    background: linear-gradient(145deg, #DB7D57, #C0552F);
    box-shadow: 0 10px 20px rgba(192, 85, 47, 0.24);
}

@media (hover: hover) {
    body .business-in-a-box-page .biab-packages__review .biab-packages__button:hover {
        background: linear-gradient(145deg, #D4724B, #B24B28);
    }
}

body .business-in-a-box-page .biab-packages__review {
    display: flex;
    flex-direction: column;
}

/* ---------- Desktop spacing for the lower part of the section ---------- */

body .business-in-a-box-page .biab-packages__schedule {
    margin-top: 34px;
}

/* ---------- Tablet ---------- */

@media (min-width: 600px) and (max-width: 1100px) {
    body .business-in-a-box-page .biab-packages__founding {
        padding: 24px 28px;
        column-gap: 24px;
    }

    body .business-in-a-box-page .biab-packages__extras {
        grid-template-columns: 1fr;
    }

    body .business-in-a-box-page .biab-packages__addons,
    body .business-in-a-box-page .biab-packages__review {
        padding: 30px 30px 28px;
    }
}

/* ---------- Phone ---------- */

@media (max-width: 599px) {
    body .business-in-a-box-page .biab-hero__actions {
        gap: 0 24px;
    }

    body .business-in-a-box-page .biab-packages__founding {
        grid-template-columns: 1fr;
        row-gap: 18px;
        padding: 24px 22px 24px;
        border-radius: 20px 20px 20px 40px;
    }

    body .business-in-a-box-page .biab-packages__founding-count {
        width: 70px;
        height: 70px;
        box-shadow: 0 0 0 7px rgba(247, 220, 198, 0.55), 0 12px 22px rgba(192, 85, 47, 0.24);
    }

    body .business-in-a-box-page .biab-packages__founding-count svg {
        width: 33px;
        height: 33px;
    }

    body .business-in-a-box-page .biab-packages__founding-text {
        font-size: 14px;
    }

    body .business-in-a-box-page .biab-packages__extras {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 28px;
    }

    body .business-in-a-box-page .biab-packages__addons,
    body .business-in-a-box-page .biab-packages__review {
        padding: 28px 22px 26px;
        border-radius: 20px;
    }

    body .business-in-a-box-page .biab-packages__extras-title {
        font-size: 23px;
        margin-bottom: 16px;
    }

    body .business-in-a-box-page .biab-packages__addon-list li {
        gap: 14px;
    }

    body .business-in-a-box-page .biab-packages__addon-list span {
        font-size: 13px;
    }

    body .business-in-a-box-page .biab-packages__addon-list strong {
        font-size: 14px;
    }

    body .business-in-a-box-page .biab-packages__review-price strong {
        font-size: 34px;
    }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    body .business-in-a-box-page .biab-hero__packages-link,
    body .business-in-a-box-page .biab-hero__packages-link::after {
        transition: none !important;
    }
}

/* END: FRAYORA BUSINESS FOUNDATION PRICING & PACKAGES v2 */


/* =====================================================
   FRAYORA — RESOURCES LAUNCH ADJUSTMENTS

   Temporarily hide:
   1. Browse by Topic
   2. View All Resources

   Preserves:
   - Resources hero
   - Four featured resource cards
   - Card typography and images
   - Final CTA
   - Desktop, tablet and mobile styling
===================================================== */

html body main.frayora-resources-page
section.fr-resources-topics {
    display: none !important;
}

html body main.frayora-resources-page
a.fr-featured__all {
    display: none !important;
}


/* =====================================================================
   FRAYORA: BUSINESS KNOWLEDGE & ORGANIZATION PACKAGES v1
   PASTE AT THE VERY BOTTOM OF main.css (after everything else).

   This styles the new "Packages & Investment" section and the small
   "View packages and pricing" link next to the hero button.
   Desktop, tablet and phone are all handled in this one block.
   If you ever need to replace it, delete everything from this banner
   down to the line that says "END: BUSINESS KNOWLEDGE & ORGANIZATION
   PACKAGES v1", then paste the new block.
   ===================================================================== */

/* ---------- Hero: button and link on one row ---------- */

html body .bk-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0 30px;
}

html body .bk-hero__packages-link {
    position: relative;
    margin-bottom: 14px;
    padding: 6px 0;
    color: #F1E2D4;
    font: 600 14px/1.4 "Manrope", sans-serif;
    letter-spacing: -0.01em;
    text-decoration: none;
    transition: color .25s ease;
}

html body .bk-hero__packages-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1px;
    height: 1px;
    background: linear-gradient(90deg, #D9B77E, rgba(217, 183, 126, 0.25));
    transform-origin: left center;
    transition: transform .35s ease;
}

html body .bk-hero__packages-link:hover,
html body .bk-hero__packages-link:focus-visible {
    color: #FFFFFF;
}

html body .bk-hero__packages-link:hover::after {
    transform: scaleX(0.6);
}

html body .bk-hero__packages-link:focus-visible {
    outline: 2px solid #D9B77E;
    outline-offset: 5px;
    border-radius: 4px;
}

/* ---------- Section shell ---------- */

html body .bk-packages {
    position: relative;
    isolation: isolate;
    width: 100%;
    overflow: hidden;
    margin-top: calc(var(--fr-edge) * -1) !important;
    padding: calc(104px + var(--fr-edge)) 0 calc(92px + var(--fr-edge));
    scroll-margin-top: 110px;
    color: #1F211D;
    background-color: #FAF7F2;
    background-image:
        radial-gradient(560px 420px at 4% 12%, rgba(255, 255, 255, 0.70), rgba(255, 255, 255, 0) 72%),
        radial-gradient(620px 460px at 98% 14%, rgba(217, 183, 126, 0.20), rgba(217, 183, 126, 0) 70%),
        radial-gradient(640px 480px at 92% 100%, rgba(201, 103, 67, 0.13), rgba(201, 103, 67, 0) 70%),
        radial-gradient(560px 440px at 0% 100%, rgba(135, 148, 123, 0.18), rgba(135, 148, 123, 0) 70%);
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.990), 12.5% calc(var(--fr-edge) * 0.962), 18.8% calc(var(--fr-edge) * 0.916), 25.0% calc(var(--fr-edge) * 0.854), 31.2% calc(var(--fr-edge) * 0.778), 37.5% calc(var(--fr-edge) * 0.691), 43.8% calc(var(--fr-edge) * 0.598), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.402), 62.5% calc(var(--fr-edge) * 0.309), 68.8% calc(var(--fr-edge) * 0.222), 75.0% calc(var(--fr-edge) * 0.146), 81.2% calc(var(--fr-edge) * 0.084), 87.5% calc(var(--fr-edge) * 0.038), 93.8% calc(var(--fr-edge) * 0.010), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.990), 12.5% calc(var(--fr-edge) * 0.962), 18.8% calc(var(--fr-edge) * 0.916), 25.0% calc(var(--fr-edge) * 0.854), 31.2% calc(var(--fr-edge) * 0.778), 37.5% calc(var(--fr-edge) * 0.691), 43.8% calc(var(--fr-edge) * 0.598), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.402), 62.5% calc(var(--fr-edge) * 0.309), 68.8% calc(var(--fr-edge) * 0.222), 75.0% calc(var(--fr-edge) * 0.146), 81.2% calc(var(--fr-edge) * 0.084), 87.5% calc(var(--fr-edge) * 0.038), 93.8% calc(var(--fr-edge) * 0.010), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
}

/* the same sage to gold line that sits on every other section edge */
html body .bk-packages::before {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 0 0 auto 0;
    height: calc(var(--fr-edge) + 6px);
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135, 148, 123, 0), #87947B 18%, #D9B77E 62%, rgba(217, 183, 126, 0));
    opacity: 0.6;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.990), 12.5% calc(var(--fr-edge) * 0.962), 18.8% calc(var(--fr-edge) * 0.916), 25.0% calc(var(--fr-edge) * 0.854), 31.2% calc(var(--fr-edge) * 0.778), 37.5% calc(var(--fr-edge) * 0.691), 43.8% calc(var(--fr-edge) * 0.598), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.402), 62.5% calc(var(--fr-edge) * 0.309), 68.8% calc(var(--fr-edge) * 0.222), 75.0% calc(var(--fr-edge) * 0.146), 81.2% calc(var(--fr-edge) * 0.084), 87.5% calc(var(--fr-edge) * 0.038), 93.8% calc(var(--fr-edge) * 0.010), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.010 + 3px), 87.5% calc(var(--fr-edge) * 0.038 + 3px), 81.2% calc(var(--fr-edge) * 0.084 + 3px), 75.0% calc(var(--fr-edge) * 0.146 + 3px), 68.8% calc(var(--fr-edge) * 0.222 + 3px), 62.5% calc(var(--fr-edge) * 0.309 + 3px), 56.2% calc(var(--fr-edge) * 0.402 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.598 + 3px), 37.5% calc(var(--fr-edge) * 0.691 + 3px), 31.2% calc(var(--fr-edge) * 0.778 + 3px), 25.0% calc(var(--fr-edge) * 0.854 + 3px), 18.8% calc(var(--fr-edge) * 0.916 + 3px), 12.5% calc(var(--fr-edge) * 0.962 + 3px), 6.2% calc(var(--fr-edge) * 0.990 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.990), 12.5% calc(var(--fr-edge) * 0.962), 18.8% calc(var(--fr-edge) * 0.916), 25.0% calc(var(--fr-edge) * 0.854), 31.2% calc(var(--fr-edge) * 0.778), 37.5% calc(var(--fr-edge) * 0.691), 43.8% calc(var(--fr-edge) * 0.598), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.402), 62.5% calc(var(--fr-edge) * 0.309), 68.8% calc(var(--fr-edge) * 0.222), 75.0% calc(var(--fr-edge) * 0.146), 81.2% calc(var(--fr-edge) * 0.084), 87.5% calc(var(--fr-edge) * 0.038), 93.8% calc(var(--fr-edge) * 0.010), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.010 + 3px), 87.5% calc(var(--fr-edge) * 0.038 + 3px), 81.2% calc(var(--fr-edge) * 0.084 + 3px), 75.0% calc(var(--fr-edge) * 0.146 + 3px), 68.8% calc(var(--fr-edge) * 0.222 + 3px), 62.5% calc(var(--fr-edge) * 0.309 + 3px), 56.2% calc(var(--fr-edge) * 0.402 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.598 + 3px), 37.5% calc(var(--fr-edge) * 0.691 + 3px), 31.2% calc(var(--fr-edge) * 0.778 + 3px), 25.0% calc(var(--fr-edge) * 0.854 + 3px), 18.8% calc(var(--fr-edge) * 0.916 + 3px), 12.5% calc(var(--fr-edge) * 0.962 + 3px), 6.2% calc(var(--fr-edge) * 0.990 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
}

html body .bk-packages,
html body .bk-packages *,
html body .bk-packages *::before,
html body .bk-packages *::after {
    box-sizing: border-box;
}

html body .bk-packages__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
}

/* ---------- Header ---------- */

html body .bk-packages__header {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    column-gap: 65px;
    align-items: end;
    margin-bottom: 52px;
}

html body .bk-packages__eyebrow {
    position: relative;
    margin: 0 0 19px;
    padding-left: 48px;
    color: #C96743;
    font: 600 12px/1.4 "Inter", sans-serif;
    letter-spacing: 0.15em;
}

html body .bk-packages__eyebrow::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 34px;
    height: 10px;
    translate: 0 -50%;
    background: #C96743;
    clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);
}

html body .bk-packages__title {
    margin: 0;
    max-width: 740px;
    color: #1F211D;
    font: 600 clamp(36px, 3.4vw, 49px) / 1.13 "Manrope", sans-serif;
    letter-spacing: -0.05em;
    text-wrap: balance;
}

html body .bk-packages__intro {
    max-width: 440px;
    justify-self: end;
    padding-bottom: 3px;
}

html body .bk-packages__intro p {
    margin: 0 0 19px;
    color: #65695F;
    font: 400 15px/1.78 "Inter", sans-serif;
}

html body .bk-packages__currency {
    color: #66745C;
    font: 600 10px/1.5 "Inter", sans-serif;
    letter-spacing: 0.11em;
}

/* ---------- Cards ---------- */

html body .bk-packages__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
    padding: 16px 0 12px;
}

html body .bk-packages__card {
    --dp-text: #1F211D;
    --dp-muted: #62665F;
    --dp-line: rgba(65, 72, 59, 0.16);
    --dp-accent: #B96748;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border-radius: 36px 12px 36px 12px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    color: var(--dp-text);
    box-shadow:
        0 26px 52px rgba(45, 41, 34, 0.10),
        0 8px 16px rgba(45, 41, 34, 0.055),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: translate 0.45s cubic-bezier(.22, 1, .36, 1), box-shadow 0.45s ease;
}

/* soft glow in the bottom corner of each card */
html body .bk-packages__card::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -80px;
    bottom: -90px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    pointer-events: none;
}

html body .bk-packages__card--foundation {
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.92), rgba(248, 243, 235, 0.82) 64%, rgba(235, 228, 216, 0.66));
}
html body .bk-packages__card--foundation::after {
    background: radial-gradient(circle, rgba(200, 212, 190, 0.55), rgba(200, 212, 190, 0) 68%);
}

html body .bk-packages__card--workspace {
    --dp-accent: #C96743;
    background: linear-gradient(150deg, rgba(255, 249, 244, 0.94), rgba(245, 228, 219, 0.86) 65%, rgba(233, 206, 193, 0.70));
    border-color: rgba(201, 103, 67, 0.24);
}
html body .bk-packages__card--workspace::after {
    background: radial-gradient(circle, rgba(247, 200, 170, 0.65), rgba(247, 200, 170, 0) 68%);
}

html body .bk-packages__card--memory {
    --dp-text: #F8F3EB;
    --dp-muted: rgba(248, 243, 235, 0.78);
    --dp-line: rgba(248, 243, 235, 0.2);
    --dp-accent: #EEDFB9;
    background: linear-gradient(145deg, #4E5F4E 0%, #39483B 52%, #2D3C31 100%);
    border-color: rgba(235, 240, 220, 0.22);
    box-shadow:
        0 27px 52px rgba(29, 43, 32, 0.24),
        0 8px 16px rgba(29, 43, 32, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
html body .bk-packages__card--memory::after {
    background: radial-gradient(circle, rgba(217, 183, 126, 0.28), rgba(217, 183, 126, 0) 68%);
}

@media (hover: hover) {
    html body .bk-packages__card:hover {
        translate: 0 -8px;
        box-shadow:
            0 36px 68px rgba(45, 41, 34, 0.15),
            0 10px 18px rgba(45, 41, 34, 0.07),
            inset 0 1px 0 rgba(255, 255, 255, 0.85);
    }
    html body .bk-packages__card--memory:hover {
        box-shadow:
            0 38px 68px rgba(29, 43, 32, 0.28),
            0 10px 18px rgba(29, 43, 32, 0.12),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
}

html body .bk-packages__card-head {
    position: relative;
    padding: 32px 30px 26px;
    border-bottom: 1px solid var(--dp-line);
}

html body .bk-packages__index {
    display: block;
    padding-right: 120px;
    color: var(--dp-accent);
    font: 600 10px/1.4 "Inter", sans-serif;
    letter-spacing: 0.11em;
}

html body .bk-packages__badge {
    position: absolute;
    z-index: 3;
    top: 24px;
    right: 24px;
    padding: 6px 13px 6px;
    border-radius: 999px;
    background: linear-gradient(145deg, #DB7D57, #C0552F);
    color: #FFFFFF;
    font: 700 9.5px/1.2 "Inter", sans-serif;
    letter-spacing: 0.12em;
    box-shadow: 0 8px 16px rgba(192, 85, 47, 0.28);
}

html body .bk-packages__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin: 20px 0 15px;
    border-radius: 50%;
    border: 1px solid rgba(105, 122, 90, 0.14);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(229, 232, 219, 0.7));
    box-shadow:
        0 0 0 8px rgba(200, 212, 190, 0.28),
        0 8px 18px rgba(47, 55, 43, 0.08),
        inset 0 1px 2px rgba(255, 255, 255, 0.8);
}

html body .bk-packages__mark svg {
    width: 25px;
    height: 25px;
    stroke: #637154;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

html body .bk-packages__card--workspace .bk-packages__mark {
    background: linear-gradient(145deg, #FFF8F1, #F0D7CA);
    box-shadow:
        0 0 0 8px rgba(247, 220, 198, 0.5),
        0 8px 18px rgba(201, 103, 67, 0.14),
        inset 0 1px 2px rgba(255, 255, 255, 0.8);
}
html body .bk-packages__card--workspace .bk-packages__mark svg {
    stroke: #B65F3F;
}

html body .bk-packages__card--memory .bk-packages__mark {
    background: rgba(244, 238, 218, 0.1);
    border-color: rgba(244, 238, 218, 0.22);
    box-shadow: 0 0 0 8px rgba(244, 238, 218, 0.07), inset 0 1px 2px rgba(255, 255, 255, 0.12);
}
html body .bk-packages__card--memory .bk-packages__mark svg {
    stroke: #E9D9B7;
}

html body .bk-packages__card h3 {
    margin: 0 0 10px;
    color: var(--dp-text);
    font: 600 29px/1.18 "Manrope", sans-serif;
    letter-spacing: -0.045em;
}

html body .bk-packages__summary {
    min-height: 3.4em;
    margin: 0 0 24px;
    color: var(--dp-muted);
    font: 400 13.5px/1.7 "Inter", sans-serif;
}

html body .bk-packages__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    column-gap: 9px;
    row-gap: 3px;
    color: var(--dp-text);
}

html body .bk-packages__price > span {
    width: 100%;
    color: var(--dp-muted);
    font: 600 10px/1.4 "Inter", sans-serif;
    letter-spacing: 0.06em;
}

html body .bk-packages__price strong {
    color: var(--dp-text);
    font: 600 40px/1.14 "Manrope", sans-serif;
    letter-spacing: -0.055em;
}

html body .bk-packages__price small {
    color: var(--dp-muted);
    font: 400 11.5px/1.4 "Inter", sans-serif;
}

html body .bk-packages__card-body {
    flex: 1;
    padding: 28px 30px 26px;
}

html body .bk-packages__list-label {
    margin: 0 0 20px;
    color: var(--dp-accent);
    font: 600 10px/1.4 "Inter", sans-serif;
    letter-spacing: 0.1em;
}

html body .bk-packages__list {
    display: grid;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

html body .bk-packages__list li {
    position: relative;
    min-width: 0;
    margin: 0;
    padding-left: 24px;
}

html body .bk-packages__list li::before {
    content: "✓";
    position: absolute;
    top: 1px;
    left: 0;
    color: var(--dp-accent);
    font: 700 13px/1.5 "Inter", sans-serif;
}

html body .bk-packages__list strong {
    display: block;
    margin-bottom: 4px;
    color: var(--dp-text);
    font: 600 13.5px/1.5 "Manrope", sans-serif;
    letter-spacing: -0.018em;
}

html body .bk-packages__list span {
    display: block;
    color: var(--dp-muted);
    font: 400 12.5px/1.68 "Inter", sans-serif;
}

html body .bk-packages__card-foot {
    margin-top: auto;
    padding: 0 30px 30px;
}

html body .bk-packages__card-foot > p {
    min-height: 56px;
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid var(--dp-line);
    color: var(--dp-muted);
    font: 400 12px/1.6 "Inter", sans-serif;
}

html body .bk-packages__button {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    min-height: 50px;
    padding: 11px 20px;
    border-radius: 999px;
    background: #53664B;
    color: #FFFFFF;
    font: 600 13px/1.35 "Manrope", sans-serif;
    text-decoration: none;
    box-shadow: 0 9px 18px rgba(42, 57, 40, 0.16);
    transition: translate 0.3s cubic-bezier(.22, 1, .36, 1), background 0.3s ease, box-shadow 0.3s ease;
}

html body .bk-packages__button span {
    font: 400 21px/1 "Inter", sans-serif;
    transition: translate 0.3s ease;
}

html body .bk-packages__button::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    width: 45%;
    pointer-events: none;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    translate: -140% 0;
    animation: bkSheen 6s ease-in-out 1.6s infinite;
}

@keyframes bkSheen {
    0%, 62% { translate: -140% 0; }
    100%    { translate: 340% 0; }
}

html body .bk-packages__card--workspace .bk-packages__button {
    background: linear-gradient(145deg, #DB7D57, #C0552F);
    box-shadow: 0 10px 20px rgba(192, 85, 47, 0.26);
}

html body .bk-packages__card--memory .bk-packages__button {
    background: #F8F3EB;
    color: #2F4033;
    box-shadow: 0 10px 20px rgba(15, 25, 17, 0.28);
}

html body .bk-packages__button:hover,
html body .bk-packages__button:focus-visible {
    translate: 0 -3px;
    background: #43543C;
    color: #FFFFFF;
}
html body .bk-packages__card--workspace .bk-packages__button:hover,
html body .bk-packages__card--workspace .bk-packages__button:focus-visible {
    background: linear-gradient(145deg, #D6714A, #B24A27);
}
html body .bk-packages__card--memory .bk-packages__button:hover,
html body .bk-packages__card--memory .bk-packages__button:focus-visible {
    background: #EADDC5;
    color: #25372C;
}
html body .bk-packages__button:hover span {
    translate: 3px 0;
}
html body .bk-packages__button:focus-visible {
    outline: 3px solid #C96743;
    outline-offset: 3px;
}

/* ---------- Good to know ---------- */

html body .bk-packages__notes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 40px;
}

html body .bk-packages__note {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 28px 28px 26px;
    border-radius: 26px 8px 26px 8px;
    border: 1px solid rgba(232, 219, 204, 0.9);
    background:
        radial-gradient(180px 150px at 100% 110%, rgba(247, 220, 198, 0.55), rgba(247, 220, 198, 0) 72%),
        rgba(255, 253, 249, 0.78);
    box-shadow: 0 14px 30px rgba(69, 54, 40, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
html body .bk-packages__note:nth-child(2) {
    background:
        radial-gradient(180px 150px at 100% 110%, rgba(200, 212, 190, 0.55), rgba(200, 212, 190, 0) 72%),
        rgba(255, 253, 249, 0.78);
}
html body .bk-packages__note:nth-child(3) {
    background:
        radial-gradient(180px 150px at 100% 110%, rgba(240, 221, 180, 0.62), rgba(240, 221, 180, 0) 72%),
        rgba(255, 253, 249, 0.78);
}

html body .bk-packages__note-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: linear-gradient(145deg, #FFF8F1, #F0D7CA);
    box-shadow: 0 0 0 7px rgba(247, 220, 198, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.85);
}
html body .bk-packages__note:nth-child(2) .bk-packages__note-icon {
    background: linear-gradient(145deg, #F1F5EC, #DCE5D3);
    box-shadow: 0 0 0 7px rgba(200, 212, 190, 0.38), inset 0 1px 2px rgba(255, 255, 255, 0.85);
}
html body .bk-packages__note:nth-child(3) .bk-packages__note-icon {
    background: linear-gradient(145deg, #FBF3E2, #F0DDB4);
    box-shadow: 0 0 0 7px rgba(240, 221, 180, 0.45), inset 0 1px 2px rgba(255, 255, 255, 0.85);
}

html body .bk-packages__note-icon svg {
    width: 24px;
    height: 24px;
    stroke: #B65F3F;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
html body .bk-packages__note:nth-child(2) .bk-packages__note-icon svg { stroke: #56674F; }
html body .bk-packages__note:nth-child(3) .bk-packages__note-icon svg { stroke: #8A6A2C; }

html body .bk-packages__note h3 {
    margin: 0 0 8px;
    color: #1F211D;
    font: 600 18px/1.3 "Manrope", sans-serif;
    letter-spacing: -0.03em;
}

html body .bk-packages__note p {
    margin: 0;
    color: #62665F;
    font: 400 13.5px/1.72 "Inter", sans-serif;
}

/* ---------- Business Foundation link ---------- */

html body .bk-packages__bundle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-top: 26px;
    padding: 24px 28px 24px 32px;
    border-radius: 30px 10px 30px 10px;
    border: 1px solid rgba(217, 183, 126, 0.5);
    background:
        radial-gradient(260px 200px at 0% 50%, rgba(247, 220, 198, 0.55), rgba(247, 220, 198, 0) 72%),
        linear-gradient(135deg, rgba(255, 252, 247, 0.92), rgba(250, 240, 226, 0.8));
    box-shadow: 0 16px 34px rgba(69, 54, 40, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

html body .bk-packages__bundle-text {
    display: grid;
    gap: 4px;
    min-width: 0;
}

html body .bk-packages__bundle-text strong {
    color: #1F211D;
    font: 600 19px/1.3 "Manrope", sans-serif;
    letter-spacing: -0.03em;
}

html body .bk-packages__bundle-text span {
    color: #5C6258;
    font: 400 14px/1.65 "Inter", sans-serif;
}

html body .bk-packages__bundle-link {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 50px;
    padding: 12px 24px;
    border-radius: 999px;
    background: linear-gradient(145deg, #DB7D57, #C0552F);
    color: #FFFFFF;
    font: 600 13.5px/1.3 "Manrope", sans-serif;
    text-decoration: none;
    box-shadow: 0 10px 20px rgba(192, 85, 47, 0.26);
    transition: translate 0.3s cubic-bezier(.22, 1, .36, 1), box-shadow 0.3s ease;
}

html body .bk-packages__bundle-link span {
    transition: translate 0.3s ease;
}

html body .bk-packages__bundle-link:hover,
html body .bk-packages__bundle-link:focus-visible {
    translate: 0 -3px;
    color: #FFFFFF;
    box-shadow: 0 16px 28px rgba(192, 85, 47, 0.34);
}
html body .bk-packages__bundle-link:hover span {
    translate: 4px 0;
}

/* ---------- Fine print ---------- */

html body .bk-packages__terms {
    max-width: 1100px;
    margin: 34px auto 0;
    padding-top: 26px;
    border-top: 1px solid rgba(71, 73, 61, 0.15);
}

html body .bk-packages__terms p {
    margin: 0 0 9px;
    color: #77756C;
    font: 400 11.5px/1.8 "Inter", sans-serif;
}

/* ---------- Desktop: lift the middle card a little ---------- */

@media (min-width: 1101px) {
    html body .bk-packages__grid { padding-top: 30px; }
    html body .bk-packages__card--workspace { margin-top: -16px; }
    html body .bk-packages__card--workspace .bk-packages__card-head { padding-top: 48px; }
    html body .bk-packages__card--workspace .bk-packages__badge { top: 40px; }
}

@media (min-width: 1101px) and (max-width: 1300px) {
    html body .bk-packages__card-head { padding: 28px 24px 24px; }
    html body .bk-packages__card-body { padding: 26px 24px; }
    html body .bk-packages__card-foot { padding: 0 24px 26px; }
    html body .bk-packages__badge { right: 18px; }
    html body .bk-packages__price strong { font-size: 36px; }
}

/* ---------- Tablet ---------- */

@media (min-width: 600px) and (max-width: 1100px) {
    html body .bk-packages { padding: calc(80px + var(--fr-edge)) 0 calc(76px + var(--fr-edge)); }
    html body .bk-packages__inner { padding: 0 40px; }
    html body .bk-packages__header { display: block; margin-bottom: 40px; }
    html body .bk-packages__title { font-size: clamp(34px, 4.7vw, 44px); }
    html body .bk-packages__intro { max-width: 640px; margin-top: 22px; justify-self: start; }
    html body .bk-packages__grid {
        grid-template-columns: minmax(0, 1fr);
        max-width: 700px;
        margin: 0 auto;
        gap: 22px;
    }
    html body .bk-packages__summary { min-height: 0; }
    html body .bk-packages__card-foot > p { min-height: 0; padding-bottom: 18px; }
    html body .bk-packages__notes { grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 700px; margin: 36px auto 0; }
    html body .bk-packages__bundle { max-width: 700px; margin: 24px auto 0; }
    html body .bk-packages__terms { max-width: 700px; }
}

/* ---------- Phone ---------- */

@media (max-width: 599px) {
    html body .bk-packages { padding: calc(56px + var(--fr-edge)) 0 calc(56px + var(--fr-edge)); scroll-margin-top: 85px; }
    html body .bk-packages__inner { padding: 0 24px; }
    html body .bk-packages__header { display: block; margin-bottom: 30px; }
    html body .bk-packages__eyebrow { font-size: 11px; margin-bottom: 14px; padding-left: 44px; }
    html body .bk-packages__title { font-size: clamp(30px, 8vw, 38px); line-height: 1.16; }
    html body .bk-packages__intro { max-width: none; margin-top: 18px; justify-self: start; }
    html body .bk-packages__intro p { font-size: 14px; }
    html body .bk-packages__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-top: 6px; }
    html body .bk-packages__card { border-radius: 30px 10px 30px 10px; }
    html body .bk-packages__card-head { padding: 26px 24px 22px; }
    html body .bk-packages__card-body { padding: 24px 24px 26px; }
    html body .bk-packages__card-foot { padding: 0 24px 24px; }
    html body .bk-packages__card h3 { font-size: 26px; }
    html body .bk-packages__summary { min-height: 0; margin-bottom: 20px; }
    html body .bk-packages__price strong { font-size: 36px; }
    html body .bk-packages__badge { top: 20px; right: 20px; }
    html body .bk-packages__card-foot > p { min-height: 0; padding-bottom: 16px; }
    html body .bk-packages__notes { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 30px; }
    html body .bk-packages__note { padding: 24px 22px; }
    html body .bk-packages__bundle { flex-direction: column; align-items: flex-start; gap: 18px; padding: 24px 22px; }
    html body .bk-packages__bundle-link { width: 100%; justify-content: center; }
    html body .bk-packages__terms { margin-top: 28px; }
    html body .bk-packages__terms p { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
    html body .bk-packages__button::after { animation: none !important; }
    html body .bk-packages__card,
    html body .bk-packages__button,
    html body .bk-packages__bundle-link { transition: none !important; }
}



/* ---------- Packages: add-ons and review ---------- */

html body .bk-packages__extras {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 17px;
    margin-top: 40px;
    align-items: stretch;
}

html body .bk-packages__addons,
html body .bk-packages__review {
    position: relative;
    overflow: hidden;
    min-width: 0;
    padding: 34px 36px 32px;
    border-radius: 22px;
    box-shadow: 0 15px 32px rgba(64, 51, 36, 0.055), 0 3px 11px rgba(64, 51, 36, 0.035);
}

html body .bk-packages__addons {
    border: 1px solid rgba(112, 98, 81, 0.13);
    border-radius: 22px 22px 56px 22px;
    background:
        radial-gradient(ellipse 60% 70% at 0% 0%, rgba(255, 255, 255, 0.9), transparent 70%),
        linear-gradient(145deg, rgba(255, 253, 249, 0.88), rgba(235, 238, 225, 0.7));
}

html body .bk-packages__addons::after {
    content: "";
    position: absolute;
    right: -60px;
    bottom: -70px;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(135, 148, 123, 0.2), rgba(135, 148, 123, 0) 68%);
    pointer-events: none;
}

html body .bk-packages__review {
    border: 1px solid rgba(201, 103, 67, 0.23);
    border-radius: 22px 56px 22px 22px;
    background:
        radial-gradient(ellipse 70% 60% at 100% 0%, rgba(217, 183, 126, 0.3), transparent 72%),
        linear-gradient(145deg, #FBEFE6, #F3DFD2);
}

html body .bk-packages__review::after {
    content: "";
    position: absolute;
    left: -80px;
    bottom: -90px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 103, 67, 0.15), rgba(201, 103, 67, 0) 68%);
    pointer-events: none;
}

html body .bk-packages__addons > *,
html body .bk-packages__review > * {
    position: relative;
    z-index: 1;
}

html body .bk-packages__extras-label {
    margin: 0 0 12px;
    color: #B2532F;
    font: 600 10px/1.4 "Inter", sans-serif;
    letter-spacing: 0.12em;
}

html body .bk-packages__extras-title {
    margin: 0 0 20px;
    color: #1F211D;
    font: 600 26px/1.2 "Manrope", sans-serif;
    letter-spacing: -0.04em;
}

html body .bk-packages__addon-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

html body .bk-packages__addon-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 22px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(65, 72, 59, 0.13);
}

html body .bk-packages__addon-list li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

html body .bk-packages__addon-list span {
    color: #4A5348;
    font: 400 14px/1.5 "Inter", sans-serif;
}

html body .bk-packages__addon-list strong {
    flex: none;
    color: #1F211D;
    font: 600 15px/1.4 "Manrope", sans-serif;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

html body .bk-packages__review-text {
    margin: 0 0 20px;
    color: #55574E;
    font: 400 14px/1.75 "Inter", sans-serif;
}

html body .bk-packages__review-price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 22px;
}

html body .bk-packages__review-price strong {
    color: #1F211D;
    font: 600 40px/1.1 "Manrope", sans-serif;
    letter-spacing: -0.055em;
}

html body .bk-packages__review-price small {
    color: #62665F;
    font: 400 12px/1.4 "Inter", sans-serif;
}

html body .bk-packages__review .bk-packages__button {
    margin-top: auto;
    background: linear-gradient(145deg, #DB7D57, #C0552F);
    box-shadow: 0 10px 20px rgba(192, 85, 47, 0.24);
}

@media (hover: hover) {
    html body .bk-packages__review .bk-packages__button:hover {
        background: linear-gradient(145deg, #D4724B, #B24B28);
    }
}

html body .bk-packages__review {
    display: flex;
    flex-direction: column;
}


/* ---------- Add-ons and review: tablet ---------- */

@media (min-width: 600px) and (max-width: 1100px) {
    html body .bk-packages__extras {
        grid-template-columns: 1fr;
    }

    html body .bk-packages__addons,
    html body .bk-packages__review {
        padding: 30px 30px 28px;
    }
}

/* ---------- Add-ons and review: phone ---------- */

@media (max-width: 599px) {
    html body .bk-hero__actions {
        gap: 0 24px;
    }

    html body .bk-packages__extras {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 28px;
    }

    html body .bk-packages__addons,
    html body .bk-packages__review {
        padding: 28px 22px 26px;
        border-radius: 20px;
    }

    html body .bk-packages__extras-title {
        font-size: 23px;
        margin-bottom: 16px;
    }

    html body .bk-packages__addon-list li {
        gap: 14px;
    }

    html body .bk-packages__addon-list span {
        font-size: 13px;
    }

    html body .bk-packages__addon-list strong {
        font-size: 14px;
    }

    html body .bk-packages__review-price strong {
        font-size: 34px;
    }
}

/* ---------- Reduced motion for the hero link ---------- */

@media (prefers-reduced-motion: reduce) {
    html body .bk-hero__packages-link,
    html body .bk-hero__packages-link::after {
        transition: none !important;
    }
}

/* END: BUSINESS KNOWLEDGE & ORGANIZATION PACKAGES v1 */

/* =====================================================================
   FRAYORA: OPERATIONS & SOPS PACKAGES v1
   PASTE AT THE VERY BOTTOM OF main.css (after everything else).

   This styles the new "Packages & Investment" section and the small
   "View packages and pricing" link next to the hero button.
   Desktop, tablet and phone are all handled in this one block.
   If you ever need to replace it, delete everything from this banner
   down to the line that says "END: OPERATIONS & SOPS
   PACKAGES v1", then paste the new block.
   ===================================================================== */

/* ---------- Hero: button and link on one row ---------- */

html body .sops-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0 30px;
}

html body .sops-hero__packages-link {
    position: relative;
    margin-bottom: 14px;
    padding: 6px 0;
    color: #F1E2D4;
    font: 600 14px/1.4 "Manrope", sans-serif;
    letter-spacing: -0.01em;
    text-decoration: none;
    transition: color .25s ease;
}

html body .sops-hero__packages-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1px;
    height: 1px;
    background: linear-gradient(90deg, #D9B77E, rgba(217, 183, 126, 0.25));
    transform-origin: left center;
    transition: transform .35s ease;
}

html body .sops-hero__packages-link:hover,
html body .sops-hero__packages-link:focus-visible {
    color: #FFFFFF;
}

html body .sops-hero__packages-link:hover::after {
    transform: scaleX(0.6);
}

html body .sops-hero__packages-link:focus-visible {
    outline: 2px solid #D9B77E;
    outline-offset: 5px;
    border-radius: 4px;
}

/* ---------- Section shell ---------- */

html body .sops-packages {
    position: relative;
    isolation: isolate;
    width: 100%;
    overflow: hidden;
    margin-top: calc(var(--fr-edge) * -1) !important;
    padding: calc(104px + var(--fr-edge)) 0 calc(92px + var(--fr-edge));
    scroll-margin-top: 110px;
    color: #1F211D;
    background-color: #FAF7F2;
    background-image:
        radial-gradient(560px 420px at 4% 12%, rgba(255, 255, 255, 0.70), rgba(255, 255, 255, 0) 72%),
        radial-gradient(620px 460px at 98% 14%, rgba(217, 183, 126, 0.20), rgba(217, 183, 126, 0) 70%),
        radial-gradient(640px 480px at 92% 100%, rgba(201, 103, 67, 0.13), rgba(201, 103, 67, 0) 70%),
        radial-gradient(560px 440px at 0% 100%, rgba(135, 148, 123, 0.18), rgba(135, 148, 123, 0) 70%);
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.990), 12.5% calc(var(--fr-edge) * 0.962), 18.8% calc(var(--fr-edge) * 0.916), 25.0% calc(var(--fr-edge) * 0.854), 31.2% calc(var(--fr-edge) * 0.778), 37.5% calc(var(--fr-edge) * 0.691), 43.8% calc(var(--fr-edge) * 0.598), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.402), 62.5% calc(var(--fr-edge) * 0.309), 68.8% calc(var(--fr-edge) * 0.222), 75.0% calc(var(--fr-edge) * 0.146), 81.2% calc(var(--fr-edge) * 0.084), 87.5% calc(var(--fr-edge) * 0.038), 93.8% calc(var(--fr-edge) * 0.010), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.990), 12.5% calc(var(--fr-edge) * 0.962), 18.8% calc(var(--fr-edge) * 0.916), 25.0% calc(var(--fr-edge) * 0.854), 31.2% calc(var(--fr-edge) * 0.778), 37.5% calc(var(--fr-edge) * 0.691), 43.8% calc(var(--fr-edge) * 0.598), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.402), 62.5% calc(var(--fr-edge) * 0.309), 68.8% calc(var(--fr-edge) * 0.222), 75.0% calc(var(--fr-edge) * 0.146), 81.2% calc(var(--fr-edge) * 0.084), 87.5% calc(var(--fr-edge) * 0.038), 93.8% calc(var(--fr-edge) * 0.010), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
}

/* the same sage to gold line that sits on every other section edge */
html body .sops-packages::before {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 0 0 auto 0;
    height: calc(var(--fr-edge) + 6px);
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135, 148, 123, 0), #87947B 18%, #D9B77E 62%, rgba(217, 183, 126, 0));
    opacity: 0.6;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.990), 12.5% calc(var(--fr-edge) * 0.962), 18.8% calc(var(--fr-edge) * 0.916), 25.0% calc(var(--fr-edge) * 0.854), 31.2% calc(var(--fr-edge) * 0.778), 37.5% calc(var(--fr-edge) * 0.691), 43.8% calc(var(--fr-edge) * 0.598), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.402), 62.5% calc(var(--fr-edge) * 0.309), 68.8% calc(var(--fr-edge) * 0.222), 75.0% calc(var(--fr-edge) * 0.146), 81.2% calc(var(--fr-edge) * 0.084), 87.5% calc(var(--fr-edge) * 0.038), 93.8% calc(var(--fr-edge) * 0.010), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.010 + 3px), 87.5% calc(var(--fr-edge) * 0.038 + 3px), 81.2% calc(var(--fr-edge) * 0.084 + 3px), 75.0% calc(var(--fr-edge) * 0.146 + 3px), 68.8% calc(var(--fr-edge) * 0.222 + 3px), 62.5% calc(var(--fr-edge) * 0.309 + 3px), 56.2% calc(var(--fr-edge) * 0.402 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.598 + 3px), 37.5% calc(var(--fr-edge) * 0.691 + 3px), 31.2% calc(var(--fr-edge) * 0.778 + 3px), 25.0% calc(var(--fr-edge) * 0.854 + 3px), 18.8% calc(var(--fr-edge) * 0.916 + 3px), 12.5% calc(var(--fr-edge) * 0.962 + 3px), 6.2% calc(var(--fr-edge) * 0.990 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.990), 12.5% calc(var(--fr-edge) * 0.962), 18.8% calc(var(--fr-edge) * 0.916), 25.0% calc(var(--fr-edge) * 0.854), 31.2% calc(var(--fr-edge) * 0.778), 37.5% calc(var(--fr-edge) * 0.691), 43.8% calc(var(--fr-edge) * 0.598), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.402), 62.5% calc(var(--fr-edge) * 0.309), 68.8% calc(var(--fr-edge) * 0.222), 75.0% calc(var(--fr-edge) * 0.146), 81.2% calc(var(--fr-edge) * 0.084), 87.5% calc(var(--fr-edge) * 0.038), 93.8% calc(var(--fr-edge) * 0.010), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.010 + 3px), 87.5% calc(var(--fr-edge) * 0.038 + 3px), 81.2% calc(var(--fr-edge) * 0.084 + 3px), 75.0% calc(var(--fr-edge) * 0.146 + 3px), 68.8% calc(var(--fr-edge) * 0.222 + 3px), 62.5% calc(var(--fr-edge) * 0.309 + 3px), 56.2% calc(var(--fr-edge) * 0.402 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.598 + 3px), 37.5% calc(var(--fr-edge) * 0.691 + 3px), 31.2% calc(var(--fr-edge) * 0.778 + 3px), 25.0% calc(var(--fr-edge) * 0.854 + 3px), 18.8% calc(var(--fr-edge) * 0.916 + 3px), 12.5% calc(var(--fr-edge) * 0.962 + 3px), 6.2% calc(var(--fr-edge) * 0.990 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
}

html body .sops-packages,
html body .sops-packages *,
html body .sops-packages *::before,
html body .sops-packages *::after {
    box-sizing: border-box;
}

html body .sops-packages__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
}

/* ---------- Header ---------- */

html body .sops-packages__header {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    column-gap: 65px;
    align-items: end;
    margin-bottom: 52px;
}

html body .sops-packages__eyebrow {
    position: relative;
    margin: 0 0 19px;
    padding-left: 48px;
    color: #C96743;
    font: 600 12px/1.4 "Inter", sans-serif;
    letter-spacing: 0.15em;
}

html body .sops-packages__eyebrow::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 34px;
    height: 10px;
    translate: 0 -50%;
    background: #C96743;
    clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);
}

html body .sops-packages__title {
    margin: 0;
    max-width: 740px;
    color: #1F211D;
    font: 600 clamp(36px, 3.4vw, 49px) / 1.13 "Manrope", sans-serif;
    letter-spacing: -0.05em;
    text-wrap: balance;
}

html body .sops-packages__intro {
    max-width: 440px;
    justify-self: end;
    padding-bottom: 3px;
}

html body .sops-packages__intro p {
    margin: 0 0 19px;
    color: #65695F;
    font: 400 15px/1.78 "Inter", sans-serif;
}

html body .sops-packages__currency {
    color: #66745C;
    font: 600 10px/1.5 "Inter", sans-serif;
    letter-spacing: 0.11em;
}

/* ---------- Cards ---------- */

html body .sops-packages__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
    padding: 16px 0 12px;
}

html body .sops-packages__card {
    --dp-text: #1F211D;
    --dp-muted: #62665F;
    --dp-line: rgba(65, 72, 59, 0.16);
    --dp-accent: #B96748;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border-radius: 36px 12px 36px 12px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    color: var(--dp-text);
    box-shadow:
        0 26px 52px rgba(45, 41, 34, 0.10),
        0 8px 16px rgba(45, 41, 34, 0.055),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: translate 0.45s cubic-bezier(.22, 1, .36, 1), box-shadow 0.45s ease;
}

/* soft glow in the bottom corner of each card */
html body .sops-packages__card::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -80px;
    bottom: -90px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    pointer-events: none;
}

html body .sops-packages__card--starter {
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.92), rgba(248, 243, 235, 0.82) 64%, rgba(235, 228, 216, 0.66));
}
html body .sops-packages__card--starter::after {
    background: radial-gradient(circle, rgba(200, 212, 190, 0.55), rgba(200, 212, 190, 0) 68%);
}

html body .sops-packages__card--library {
    --dp-accent: #C96743;
    background: linear-gradient(150deg, rgba(255, 249, 244, 0.94), rgba(245, 228, 219, 0.86) 65%, rgba(233, 206, 193, 0.70));
    border-color: rgba(201, 103, 67, 0.24);
}
html body .sops-packages__card--library::after {
    background: radial-gradient(circle, rgba(247, 200, 170, 0.65), rgba(247, 200, 170, 0) 68%);
}

html body .sops-packages__card--manual {
    --dp-text: #F8F3EB;
    --dp-muted: rgba(248, 243, 235, 0.78);
    --dp-line: rgba(248, 243, 235, 0.2);
    --dp-accent: #EEDFB9;
    background: linear-gradient(145deg, #4E5F4E 0%, #39483B 52%, #2D3C31 100%);
    border-color: rgba(235, 240, 220, 0.22);
    box-shadow:
        0 27px 52px rgba(29, 43, 32, 0.24),
        0 8px 16px rgba(29, 43, 32, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
html body .sops-packages__card--manual::after {
    background: radial-gradient(circle, rgba(217, 183, 126, 0.28), rgba(217, 183, 126, 0) 68%);
}

@media (hover: hover) {
    html body .sops-packages__card:hover {
        translate: 0 -8px;
        box-shadow:
            0 36px 68px rgba(45, 41, 34, 0.15),
            0 10px 18px rgba(45, 41, 34, 0.07),
            inset 0 1px 0 rgba(255, 255, 255, 0.85);
    }
    html body .sops-packages__card--manual:hover {
        box-shadow:
            0 38px 68px rgba(29, 43, 32, 0.28),
            0 10px 18px rgba(29, 43, 32, 0.12),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
}

html body .sops-packages__card-head {
    position: relative;
    padding: 32px 30px 26px;
    border-bottom: 1px solid var(--dp-line);
}

html body .sops-packages__index {
    display: block;
    padding-right: 120px;
    color: var(--dp-accent);
    font: 600 10px/1.4 "Inter", sans-serif;
    letter-spacing: 0.11em;
}

html body .sops-packages__badge {
    position: absolute;
    z-index: 3;
    top: 24px;
    right: 24px;
    padding: 6px 13px 6px;
    border-radius: 999px;
    background: linear-gradient(145deg, #DB7D57, #C0552F);
    color: #FFFFFF;
    font: 700 9.5px/1.2 "Inter", sans-serif;
    letter-spacing: 0.12em;
    box-shadow: 0 8px 16px rgba(192, 85, 47, 0.28);
}

html body .sops-packages__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin: 20px 0 15px;
    border-radius: 50%;
    border: 1px solid rgba(105, 122, 90, 0.14);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(229, 232, 219, 0.7));
    box-shadow:
        0 0 0 8px rgba(200, 212, 190, 0.28),
        0 8px 18px rgba(47, 55, 43, 0.08),
        inset 0 1px 2px rgba(255, 255, 255, 0.8);
}

html body .sops-packages__mark svg {
    width: 25px;
    height: 25px;
    stroke: #637154;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

html body .sops-packages__card--library .sops-packages__mark {
    background: linear-gradient(145deg, #FFF8F1, #F0D7CA);
    box-shadow:
        0 0 0 8px rgba(247, 220, 198, 0.5),
        0 8px 18px rgba(201, 103, 67, 0.14),
        inset 0 1px 2px rgba(255, 255, 255, 0.8);
}
html body .sops-packages__card--library .sops-packages__mark svg {
    stroke: #B65F3F;
}

html body .sops-packages__card--manual .sops-packages__mark {
    background: rgba(244, 238, 218, 0.1);
    border-color: rgba(244, 238, 218, 0.22);
    box-shadow: 0 0 0 8px rgba(244, 238, 218, 0.07), inset 0 1px 2px rgba(255, 255, 255, 0.12);
}
html body .sops-packages__card--manual .sops-packages__mark svg {
    stroke: #E9D9B7;
}

html body .sops-packages__card h3 {
    margin: 0 0 10px;
    color: var(--dp-text);
    font: 600 29px/1.18 "Manrope", sans-serif;
    letter-spacing: -0.045em;
}

html body .sops-packages__summary {
    min-height: 3.4em;
    margin: 0 0 24px;
    color: var(--dp-muted);
    font: 400 13.5px/1.7 "Inter", sans-serif;
}

html body .sops-packages__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    column-gap: 9px;
    row-gap: 3px;
    color: var(--dp-text);
}

html body .sops-packages__price > span {
    width: 100%;
    color: var(--dp-muted);
    font: 600 10px/1.4 "Inter", sans-serif;
    letter-spacing: 0.06em;
}

html body .sops-packages__price strong {
    color: var(--dp-text);
    font: 600 40px/1.14 "Manrope", sans-serif;
    letter-spacing: -0.055em;
}

html body .sops-packages__price small {
    color: var(--dp-muted);
    font: 400 11.5px/1.4 "Inter", sans-serif;
}

html body .sops-packages__card-body {
    flex: 1;
    padding: 28px 30px 26px;
}

html body .sops-packages__list-label {
    margin: 0 0 20px;
    color: var(--dp-accent);
    font: 600 10px/1.4 "Inter", sans-serif;
    letter-spacing: 0.1em;
}

html body .sops-packages__list {
    display: grid;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

html body .sops-packages__list li {
    position: relative;
    min-width: 0;
    margin: 0;
    padding-left: 24px;
}

html body .sops-packages__list li::before {
    content: "✓";
    position: absolute;
    top: 1px;
    left: 0;
    color: var(--dp-accent);
    font: 700 13px/1.5 "Inter", sans-serif;
}

html body .sops-packages__list strong {
    display: block;
    margin-bottom: 4px;
    color: var(--dp-text);
    font: 600 13.5px/1.5 "Manrope", sans-serif;
    letter-spacing: -0.018em;
}

html body .sops-packages__list span {
    display: block;
    color: var(--dp-muted);
    font: 400 12.5px/1.68 "Inter", sans-serif;
}

html body .sops-packages__card-foot {
    margin-top: auto;
    padding: 0 30px 30px;
}

html body .sops-packages__card-foot > p {
    min-height: 56px;
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid var(--dp-line);
    color: var(--dp-muted);
    font: 400 12px/1.6 "Inter", sans-serif;
}

html body .sops-packages__button {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    min-height: 50px;
    padding: 11px 20px;
    border-radius: 999px;
    background: #53664B;
    color: #FFFFFF;
    font: 600 13px/1.35 "Manrope", sans-serif;
    text-decoration: none;
    box-shadow: 0 9px 18px rgba(42, 57, 40, 0.16);
    transition: translate 0.3s cubic-bezier(.22, 1, .36, 1), background 0.3s ease, box-shadow 0.3s ease;
}

html body .sops-packages__button span {
    font: 400 21px/1 "Inter", sans-serif;
    transition: translate 0.3s ease;
}

html body .sops-packages__button::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    width: 45%;
    pointer-events: none;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    translate: -140% 0;
    animation: sopsSheen 6s ease-in-out 1.6s infinite;
}

@keyframes sopsSheen {
    0%, 62% { translate: -140% 0; }
    100%    { translate: 340% 0; }
}

html body .sops-packages__card--library .sops-packages__button {
    background: linear-gradient(145deg, #DB7D57, #C0552F);
    box-shadow: 0 10px 20px rgba(192, 85, 47, 0.26);
}

html body .sops-packages__card--manual .sops-packages__button {
    background: #F8F3EB;
    color: #2F4033;
    box-shadow: 0 10px 20px rgba(15, 25, 17, 0.28);
}

html body .sops-packages__button:hover,
html body .sops-packages__button:focus-visible {
    translate: 0 -3px;
    background: #43543C;
    color: #FFFFFF;
}
html body .sops-packages__card--library .sops-packages__button:hover,
html body .sops-packages__card--library .sops-packages__button:focus-visible {
    background: linear-gradient(145deg, #D6714A, #B24A27);
}
html body .sops-packages__card--manual .sops-packages__button:hover,
html body .sops-packages__card--manual .sops-packages__button:focus-visible {
    background: #EADDC5;
    color: #25372C;
}
html body .sops-packages__button:hover span {
    translate: 3px 0;
}
html body .sops-packages__button:focus-visible {
    outline: 3px solid #C96743;
    outline-offset: 3px;
}

/* ---------- Good to know ---------- */

html body .sops-packages__notes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 40px;
}

html body .sops-packages__note {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 28px 28px 26px;
    border-radius: 26px 8px 26px 8px;
    border: 1px solid rgba(232, 219, 204, 0.9);
    background:
        radial-gradient(180px 150px at 100% 110%, rgba(247, 220, 198, 0.55), rgba(247, 220, 198, 0) 72%),
        rgba(255, 253, 249, 0.78);
    box-shadow: 0 14px 30px rgba(69, 54, 40, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
html body .sops-packages__note:nth-child(2) {
    background:
        radial-gradient(180px 150px at 100% 110%, rgba(200, 212, 190, 0.55), rgba(200, 212, 190, 0) 72%),
        rgba(255, 253, 249, 0.78);
}
html body .sops-packages__note:nth-child(3) {
    background:
        radial-gradient(180px 150px at 100% 110%, rgba(240, 221, 180, 0.62), rgba(240, 221, 180, 0) 72%),
        rgba(255, 253, 249, 0.78);
}

html body .sops-packages__note-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: linear-gradient(145deg, #FFF8F1, #F0D7CA);
    box-shadow: 0 0 0 7px rgba(247, 220, 198, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.85);
}
html body .sops-packages__note:nth-child(2) .sops-packages__note-icon {
    background: linear-gradient(145deg, #F1F5EC, #DCE5D3);
    box-shadow: 0 0 0 7px rgba(200, 212, 190, 0.38), inset 0 1px 2px rgba(255, 255, 255, 0.85);
}
html body .sops-packages__note:nth-child(3) .sops-packages__note-icon {
    background: linear-gradient(145deg, #FBF3E2, #F0DDB4);
    box-shadow: 0 0 0 7px rgba(240, 221, 180, 0.45), inset 0 1px 2px rgba(255, 255, 255, 0.85);
}

html body .sops-packages__note-icon svg {
    width: 24px;
    height: 24px;
    stroke: #B65F3F;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
html body .sops-packages__note:nth-child(2) .sops-packages__note-icon svg { stroke: #56674F; }
html body .sops-packages__note:nth-child(3) .sops-packages__note-icon svg { stroke: #8A6A2C; }

html body .sops-packages__note h3 {
    margin: 0 0 8px;
    color: #1F211D;
    font: 600 18px/1.3 "Manrope", sans-serif;
    letter-spacing: -0.03em;
}

html body .sops-packages__note p {
    margin: 0;
    color: #62665F;
    font: 400 13.5px/1.72 "Inter", sans-serif;
}

/* ---------- Business Foundation link ---------- */

html body .sops-packages__bundle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-top: 26px;
    padding: 24px 28px 24px 32px;
    border-radius: 30px 10px 30px 10px;
    border: 1px solid rgba(217, 183, 126, 0.5);
    background:
        radial-gradient(260px 200px at 0% 50%, rgba(247, 220, 198, 0.55), rgba(247, 220, 198, 0) 72%),
        linear-gradient(135deg, rgba(255, 252, 247, 0.92), rgba(250, 240, 226, 0.8));
    box-shadow: 0 16px 34px rgba(69, 54, 40, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

html body .sops-packages__bundle-text {
    display: grid;
    gap: 4px;
    min-width: 0;
}

html body .sops-packages__bundle-text strong {
    color: #1F211D;
    font: 600 19px/1.3 "Manrope", sans-serif;
    letter-spacing: -0.03em;
}

html body .sops-packages__bundle-text span {
    color: #5C6258;
    font: 400 14px/1.65 "Inter", sans-serif;
}

html body .sops-packages__bundle-link {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 50px;
    padding: 12px 24px;
    border-radius: 999px;
    background: linear-gradient(145deg, #DB7D57, #C0552F);
    color: #FFFFFF;
    font: 600 13.5px/1.3 "Manrope", sans-serif;
    text-decoration: none;
    box-shadow: 0 10px 20px rgba(192, 85, 47, 0.26);
    transition: translate 0.3s cubic-bezier(.22, 1, .36, 1), box-shadow 0.3s ease;
}

html body .sops-packages__bundle-link span {
    transition: translate 0.3s ease;
}

html body .sops-packages__bundle-link:hover,
html body .sops-packages__bundle-link:focus-visible {
    translate: 0 -3px;
    color: #FFFFFF;
    box-shadow: 0 16px 28px rgba(192, 85, 47, 0.34);
}
html body .sops-packages__bundle-link:hover span {
    translate: 4px 0;
}

/* ---------- Fine print ---------- */

html body .sops-packages__terms {
    max-width: 1100px;
    margin: 34px auto 0;
    padding-top: 26px;
    border-top: 1px solid rgba(71, 73, 61, 0.15);
}

html body .sops-packages__terms p {
    margin: 0 0 9px;
    color: #77756C;
    font: 400 11.5px/1.8 "Inter", sans-serif;
}

/* ---------- Desktop: lift the middle card a little ---------- */

@media (min-width: 1101px) {
    html body .sops-packages__grid { padding-top: 30px; }
    html body .sops-packages__card--library { margin-top: -16px; }
    html body .sops-packages__card--library .sops-packages__card-head { padding-top: 48px; }
    html body .sops-packages__card--library .sops-packages__badge { top: 40px; }
}

@media (min-width: 1101px) and (max-width: 1300px) {
    html body .sops-packages__card-head { padding: 28px 24px 24px; }
    html body .sops-packages__card-body { padding: 26px 24px; }
    html body .sops-packages__card-foot { padding: 0 24px 26px; }
    html body .sops-packages__badge { right: 18px; }
    html body .sops-packages__price strong { font-size: 36px; }
}

/* ---------- Tablet ---------- */

@media (min-width: 600px) and (max-width: 1100px) {
    html body .sops-packages { padding: calc(80px + var(--fr-edge)) 0 calc(76px + var(--fr-edge)); }
    html body .sops-packages__inner { padding: 0 40px; }
    html body .sops-packages__header { display: block; margin-bottom: 40px; }
    html body .sops-packages__title { font-size: clamp(34px, 4.7vw, 44px); }
    html body .sops-packages__intro { max-width: 640px; margin-top: 22px; justify-self: start; }
    html body .sops-packages__grid {
        grid-template-columns: minmax(0, 1fr);
        max-width: 700px;
        margin: 0 auto;
        gap: 22px;
    }
    html body .sops-packages__summary { min-height: 0; }
    html body .sops-packages__card-foot > p { min-height: 0; padding-bottom: 18px; }
    html body .sops-packages__notes { grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 700px; margin: 36px auto 0; }
    html body .sops-packages__bundle { max-width: 700px; margin: 24px auto 0; }
    html body .sops-packages__terms { max-width: 700px; }
}

/* ---------- Phone ---------- */

@media (max-width: 599px) {
    html body .sops-packages { padding: calc(56px + var(--fr-edge)) 0 calc(56px + var(--fr-edge)); scroll-margin-top: 85px; }
    html body .sops-packages__inner { padding: 0 24px; }
    html body .sops-packages__header { display: block; margin-bottom: 30px; }
    html body .sops-packages__eyebrow { font-size: 11px; margin-bottom: 14px; padding-left: 44px; }
    html body .sops-packages__title { font-size: clamp(30px, 8vw, 38px); line-height: 1.16; }
    html body .sops-packages__intro { max-width: none; margin-top: 18px; justify-self: start; }
    html body .sops-packages__intro p { font-size: 14px; }
    html body .sops-packages__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-top: 6px; }
    html body .sops-packages__card { border-radius: 30px 10px 30px 10px; }
    html body .sops-packages__card-head { padding: 26px 24px 22px; }
    html body .sops-packages__card-body { padding: 24px 24px 26px; }
    html body .sops-packages__card-foot { padding: 0 24px 24px; }
    html body .sops-packages__card h3 { font-size: 26px; }
    html body .sops-packages__summary { min-height: 0; margin-bottom: 20px; }
    html body .sops-packages__price strong { font-size: 36px; }
    html body .sops-packages__badge { top: 20px; right: 20px; }
    html body .sops-packages__card-foot > p { min-height: 0; padding-bottom: 16px; }
    html body .sops-packages__notes { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 30px; }
    html body .sops-packages__note { padding: 24px 22px; }
    html body .sops-packages__bundle { flex-direction: column; align-items: flex-start; gap: 18px; padding: 24px 22px; }
    html body .sops-packages__bundle-link { width: 100%; justify-content: center; }
    html body .sops-packages__terms { margin-top: 28px; }
    html body .sops-packages__terms p { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
    html body .sops-packages__button::after { animation: none !important; }
    html body .sops-packages__card,
    html body .sops-packages__button,
    html body .sops-packages__bundle-link { transition: none !important; }
}



/* ---------- Packages: add-ons and review ---------- */

html body .sops-packages__extras {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 17px;
    margin-top: 40px;
    align-items: stretch;
}

html body .sops-packages__addons,
html body .sops-packages__review {
    position: relative;
    overflow: hidden;
    min-width: 0;
    padding: 34px 36px 32px;
    border-radius: 22px;
    box-shadow: 0 15px 32px rgba(64, 51, 36, 0.055), 0 3px 11px rgba(64, 51, 36, 0.035);
}

html body .sops-packages__addons {
    border: 1px solid rgba(112, 98, 81, 0.13);
    border-radius: 22px 22px 56px 22px;
    background:
        radial-gradient(ellipse 60% 70% at 0% 0%, rgba(255, 255, 255, 0.9), transparent 70%),
        linear-gradient(145deg, rgba(255, 253, 249, 0.88), rgba(235, 238, 225, 0.7));
}

html body .sops-packages__addons::after {
    content: "";
    position: absolute;
    right: -60px;
    bottom: -70px;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(135, 148, 123, 0.2), rgba(135, 148, 123, 0) 68%);
    pointer-events: none;
}

html body .sops-packages__review {
    border: 1px solid rgba(201, 103, 67, 0.23);
    border-radius: 22px 56px 22px 22px;
    background:
        radial-gradient(ellipse 70% 60% at 100% 0%, rgba(217, 183, 126, 0.3), transparent 72%),
        linear-gradient(145deg, #FBEFE6, #F3DFD2);
}

html body .sops-packages__review::after {
    content: "";
    position: absolute;
    left: -80px;
    bottom: -90px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 103, 67, 0.15), rgba(201, 103, 67, 0) 68%);
    pointer-events: none;
}

html body .sops-packages__addons > *,
html body .sops-packages__review > * {
    position: relative;
    z-index: 1;
}

html body .sops-packages__extras-label {
    margin: 0 0 12px;
    color: #B2532F;
    font: 600 10px/1.4 "Inter", sans-serif;
    letter-spacing: 0.12em;
}

html body .sops-packages__extras-title {
    margin: 0 0 20px;
    color: #1F211D;
    font: 600 26px/1.2 "Manrope", sans-serif;
    letter-spacing: -0.04em;
}

html body .sops-packages__addon-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

html body .sops-packages__addon-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 22px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(65, 72, 59, 0.13);
}

html body .sops-packages__addon-list li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

html body .sops-packages__addon-list span {
    color: #4A5348;
    font: 400 14px/1.5 "Inter", sans-serif;
}

html body .sops-packages__addon-list strong {
    flex: none;
    color: #1F211D;
    font: 600 15px/1.4 "Manrope", sans-serif;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

html body .sops-packages__review-text {
    margin: 0 0 20px;
    color: #55574E;
    font: 400 14px/1.75 "Inter", sans-serif;
}

html body .sops-packages__review-price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 22px;
}

html body .sops-packages__review-price strong {
    color: #1F211D;
    font: 600 40px/1.1 "Manrope", sans-serif;
    letter-spacing: -0.055em;
}

html body .sops-packages__review-price small {
    color: #62665F;
    font: 400 12px/1.4 "Inter", sans-serif;
}

html body .sops-packages__review .sops-packages__button {
    margin-top: auto;
    background: linear-gradient(145deg, #DB7D57, #C0552F);
    box-shadow: 0 10px 20px rgba(192, 85, 47, 0.24);
}

@media (hover: hover) {
    html body .sops-packages__review .sops-packages__button:hover {
        background: linear-gradient(145deg, #D4724B, #B24B28);
    }
}

html body .sops-packages__review {
    display: flex;
    flex-direction: column;
}


/* ---------- Add-ons and review: tablet ---------- */

@media (min-width: 600px) and (max-width: 1100px) {
    html body .sops-packages__extras {
        grid-template-columns: 1fr;
    }

    html body .sops-packages__addons,
    html body .sops-packages__review {
        padding: 30px 30px 28px;
    }
}

/* ---------- Add-ons and review: phone ---------- */

@media (max-width: 599px) {
    html body .sops-hero__actions {
        gap: 0 24px;
    }

    html body .sops-packages__extras {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 28px;
    }

    html body .sops-packages__addons,
    html body .sops-packages__review {
        padding: 28px 22px 26px;
        border-radius: 20px;
    }

    html body .sops-packages__extras-title {
        font-size: 23px;
        margin-bottom: 16px;
    }

    html body .sops-packages__addon-list li {
        gap: 14px;
    }

    html body .sops-packages__addon-list span {
        font-size: 13px;
    }

    html body .sops-packages__addon-list strong {
        font-size: 14px;
    }

    html body .sops-packages__review-price strong {
        font-size: 34px;
    }
}

/* ---------- Reduced motion for the hero link ---------- */

@media (prefers-reduced-motion: reduce) {
    html body .sops-hero__packages-link,
    html body .sops-hero__packages-link::after {
        transition: none !important;
    }
}

/* END: OPERATIONS & SOPS PACKAGES v1 */


/* =====================================================================
   FRAYORA: EMPLOYEE & KNOWLEDGE SYSTEMS PACKAGES v1
   PASTE AT THE VERY BOTTOM OF main.css (after everything else).

   This styles the new "Packages & Investment" section and the small
   "View packages and pricing" link next to the hero button.
   Desktop, tablet and phone are all handled in this one block.
   If you ever need to replace it, delete everything from this banner
   down to the line that says "END: EMPLOYEE & KNOWLEDGE SYSTEMS
   PACKAGES v1", then paste the new block.
   ===================================================================== */

/* ---------- Hero: button and link on one row ---------- */

html body .eks-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0 30px;
}

html body .eks-hero__packages-link {
    position: relative;
    margin-bottom: 14px;
    padding: 6px 0;
    color: #F1E2D4;
    font: 600 14px/1.4 "Manrope", sans-serif;
    letter-spacing: -0.01em;
    text-decoration: none;
    transition: color .25s ease;
}

html body .eks-hero__packages-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1px;
    height: 1px;
    background: linear-gradient(90deg, #D9B77E, rgba(217, 183, 126, 0.25));
    transform-origin: left center;
    transition: transform .35s ease;
}

html body .eks-hero__packages-link:hover,
html body .eks-hero__packages-link:focus-visible {
    color: #FFFFFF;
}

html body .eks-hero__packages-link:hover::after {
    transform: scaleX(0.6);
}

html body .eks-hero__packages-link:focus-visible {
    outline: 2px solid #D9B77E;
    outline-offset: 5px;
    border-radius: 4px;
}

/* ---------- Section shell ---------- */

html body .eks-packages {
    position: relative;
    isolation: isolate;
    width: 100%;
    overflow: hidden;
    margin-top: calc(var(--fr-edge) * -1) !important;
    padding: calc(104px + var(--fr-edge)) 0 calc(92px + var(--fr-edge));
    scroll-margin-top: 110px;
    color: #1F211D;
    background-color: #F5EDE4;
    background-image:
        radial-gradient(560px 420px at 4% 12%, rgba(255, 255, 255, 0.70), rgba(255, 255, 255, 0) 72%),
        radial-gradient(620px 460px at 98% 14%, rgba(217, 183, 126, 0.20), rgba(217, 183, 126, 0) 70%),
        radial-gradient(640px 480px at 92% 100%, rgba(201, 103, 67, 0.13), rgba(201, 103, 67, 0) 70%),
        radial-gradient(560px 440px at 0% 100%, rgba(135, 148, 123, 0.18), rgba(135, 148, 123, 0) 70%);
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.990), 12.5% calc(var(--fr-edge) * 0.962), 18.8% calc(var(--fr-edge) * 0.916), 25.0% calc(var(--fr-edge) * 0.854), 31.2% calc(var(--fr-edge) * 0.778), 37.5% calc(var(--fr-edge) * 0.691), 43.8% calc(var(--fr-edge) * 0.598), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.402), 62.5% calc(var(--fr-edge) * 0.309), 68.8% calc(var(--fr-edge) * 0.222), 75.0% calc(var(--fr-edge) * 0.146), 81.2% calc(var(--fr-edge) * 0.084), 87.5% calc(var(--fr-edge) * 0.038), 93.8% calc(var(--fr-edge) * 0.010), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.990), 12.5% calc(var(--fr-edge) * 0.962), 18.8% calc(var(--fr-edge) * 0.916), 25.0% calc(var(--fr-edge) * 0.854), 31.2% calc(var(--fr-edge) * 0.778), 37.5% calc(var(--fr-edge) * 0.691), 43.8% calc(var(--fr-edge) * 0.598), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.402), 62.5% calc(var(--fr-edge) * 0.309), 68.8% calc(var(--fr-edge) * 0.222), 75.0% calc(var(--fr-edge) * 0.146), 81.2% calc(var(--fr-edge) * 0.084), 87.5% calc(var(--fr-edge) * 0.038), 93.8% calc(var(--fr-edge) * 0.010), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
}

/* the same sage to gold line that sits on every other section edge */
html body .eks-packages::before {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 0 0 auto 0;
    height: calc(var(--fr-edge) + 6px);
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135, 148, 123, 0), #87947B 18%, #D9B77E 62%, rgba(217, 183, 126, 0));
    opacity: 0.6;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.990), 12.5% calc(var(--fr-edge) * 0.962), 18.8% calc(var(--fr-edge) * 0.916), 25.0% calc(var(--fr-edge) * 0.854), 31.2% calc(var(--fr-edge) * 0.778), 37.5% calc(var(--fr-edge) * 0.691), 43.8% calc(var(--fr-edge) * 0.598), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.402), 62.5% calc(var(--fr-edge) * 0.309), 68.8% calc(var(--fr-edge) * 0.222), 75.0% calc(var(--fr-edge) * 0.146), 81.2% calc(var(--fr-edge) * 0.084), 87.5% calc(var(--fr-edge) * 0.038), 93.8% calc(var(--fr-edge) * 0.010), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.010 + 3px), 87.5% calc(var(--fr-edge) * 0.038 + 3px), 81.2% calc(var(--fr-edge) * 0.084 + 3px), 75.0% calc(var(--fr-edge) * 0.146 + 3px), 68.8% calc(var(--fr-edge) * 0.222 + 3px), 62.5% calc(var(--fr-edge) * 0.309 + 3px), 56.2% calc(var(--fr-edge) * 0.402 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.598 + 3px), 37.5% calc(var(--fr-edge) * 0.691 + 3px), 31.2% calc(var(--fr-edge) * 0.778 + 3px), 25.0% calc(var(--fr-edge) * 0.854 + 3px), 18.8% calc(var(--fr-edge) * 0.916 + 3px), 12.5% calc(var(--fr-edge) * 0.962 + 3px), 6.2% calc(var(--fr-edge) * 0.990 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.990), 12.5% calc(var(--fr-edge) * 0.962), 18.8% calc(var(--fr-edge) * 0.916), 25.0% calc(var(--fr-edge) * 0.854), 31.2% calc(var(--fr-edge) * 0.778), 37.5% calc(var(--fr-edge) * 0.691), 43.8% calc(var(--fr-edge) * 0.598), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.402), 62.5% calc(var(--fr-edge) * 0.309), 68.8% calc(var(--fr-edge) * 0.222), 75.0% calc(var(--fr-edge) * 0.146), 81.2% calc(var(--fr-edge) * 0.084), 87.5% calc(var(--fr-edge) * 0.038), 93.8% calc(var(--fr-edge) * 0.010), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.010 + 3px), 87.5% calc(var(--fr-edge) * 0.038 + 3px), 81.2% calc(var(--fr-edge) * 0.084 + 3px), 75.0% calc(var(--fr-edge) * 0.146 + 3px), 68.8% calc(var(--fr-edge) * 0.222 + 3px), 62.5% calc(var(--fr-edge) * 0.309 + 3px), 56.2% calc(var(--fr-edge) * 0.402 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.598 + 3px), 37.5% calc(var(--fr-edge) * 0.691 + 3px), 31.2% calc(var(--fr-edge) * 0.778 + 3px), 25.0% calc(var(--fr-edge) * 0.854 + 3px), 18.8% calc(var(--fr-edge) * 0.916 + 3px), 12.5% calc(var(--fr-edge) * 0.962 + 3px), 6.2% calc(var(--fr-edge) * 0.990 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
}

html body .eks-packages,
html body .eks-packages *,
html body .eks-packages *::before,
html body .eks-packages *::after {
    box-sizing: border-box;
}

html body .eks-packages__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
}

/* ---------- Header ---------- */

html body .eks-packages__header {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    column-gap: 65px;
    align-items: end;
    margin-bottom: 52px;
}

html body .eks-packages__eyebrow {
    position: relative;
    margin: 0 0 19px;
    padding-left: 48px;
    color: #C96743;
    font: 600 12px/1.4 "Inter", sans-serif;
    letter-spacing: 0.15em;
}

html body .eks-packages__eyebrow::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 34px;
    height: 10px;
    translate: 0 -50%;
    background: #C96743;
    clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);
}

html body .eks-packages__title {
    margin: 0;
    max-width: 740px;
    color: #1F211D;
    font: 600 clamp(36px, 3.4vw, 49px) / 1.13 "Manrope", sans-serif;
    letter-spacing: -0.05em;
    text-wrap: balance;
}

html body .eks-packages__intro {
    max-width: 440px;
    justify-self: end;
    padding-bottom: 3px;
}

html body .eks-packages__intro p {
    margin: 0 0 19px;
    color: #65695F;
    font: 400 15px/1.78 "Inter", sans-serif;
}

html body .eks-packages__currency {
    color: #66745C;
    font: 600 10px/1.5 "Inter", sans-serif;
    letter-spacing: 0.11em;
}

/* ---------- Cards ---------- */

html body .eks-packages__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
    padding: 16px 0 12px;
}

html body .eks-packages__card {
    --dp-text: #1F211D;
    --dp-muted: #62665F;
    --dp-line: rgba(65, 72, 59, 0.16);
    --dp-accent: #B96748;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border-radius: 36px 12px 36px 12px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    color: var(--dp-text);
    box-shadow:
        0 26px 52px rgba(45, 41, 34, 0.10),
        0 8px 16px rgba(45, 41, 34, 0.055),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: translate 0.45s cubic-bezier(.22, 1, .36, 1), box-shadow 0.45s ease;
}

/* soft glow in the bottom corner of each card */
html body .eks-packages__card::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -80px;
    bottom: -90px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    pointer-events: none;
}

html body .eks-packages__card--starter {
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.92), rgba(248, 243, 235, 0.82) 64%, rgba(235, 228, 216, 0.66));
}
html body .eks-packages__card--starter::after {
    background: radial-gradient(circle, rgba(200, 212, 190, 0.55), rgba(200, 212, 190, 0) 68%);
}

html body .eks-packages__card--handbook {
    --dp-accent: #C96743;
    background: linear-gradient(150deg, rgba(255, 249, 244, 0.94), rgba(245, 228, 219, 0.86) 65%, rgba(233, 206, 193, 0.70));
    border-color: rgba(201, 103, 67, 0.24);
}
html body .eks-packages__card--handbook::after {
    background: radial-gradient(circle, rgba(247, 200, 170, 0.65), rgba(247, 200, 170, 0) 68%);
}

html body .eks-packages__card--hub {
    --dp-text: #F8F3EB;
    --dp-muted: rgba(248, 243, 235, 0.78);
    --dp-line: rgba(248, 243, 235, 0.2);
    --dp-accent: #EEDFB9;
    background: linear-gradient(145deg, #4E5F4E 0%, #39483B 52%, #2D3C31 100%);
    border-color: rgba(235, 240, 220, 0.22);
    box-shadow:
        0 27px 52px rgba(29, 43, 32, 0.24),
        0 8px 16px rgba(29, 43, 32, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
html body .eks-packages__card--hub::after {
    background: radial-gradient(circle, rgba(217, 183, 126, 0.28), rgba(217, 183, 126, 0) 68%);
}

@media (hover: hover) {
    html body .eks-packages__card:hover {
        translate: 0 -8px;
        box-shadow:
            0 36px 68px rgba(45, 41, 34, 0.15),
            0 10px 18px rgba(45, 41, 34, 0.07),
            inset 0 1px 0 rgba(255, 255, 255, 0.85);
    }
    html body .eks-packages__card--hub:hover {
        box-shadow:
            0 38px 68px rgba(29, 43, 32, 0.28),
            0 10px 18px rgba(29, 43, 32, 0.12),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
}

html body .eks-packages__card-head {
    position: relative;
    padding: 32px 30px 26px;
    border-bottom: 1px solid var(--dp-line);
}

html body .eks-packages__index {
    display: block;
    padding-right: 120px;
    color: var(--dp-accent);
    font: 600 10px/1.4 "Inter", sans-serif;
    letter-spacing: 0.11em;
}

html body .eks-packages__badge {
    position: absolute;
    z-index: 3;
    top: 24px;
    right: 24px;
    padding: 6px 13px 6px;
    border-radius: 999px;
    background: linear-gradient(145deg, #DB7D57, #C0552F);
    color: #FFFFFF;
    font: 700 9.5px/1.2 "Inter", sans-serif;
    letter-spacing: 0.12em;
    box-shadow: 0 8px 16px rgba(192, 85, 47, 0.28);
}

html body .eks-packages__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin: 20px 0 15px;
    border-radius: 50%;
    border: 1px solid rgba(105, 122, 90, 0.14);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(229, 232, 219, 0.7));
    box-shadow:
        0 0 0 8px rgba(200, 212, 190, 0.28),
        0 8px 18px rgba(47, 55, 43, 0.08),
        inset 0 1px 2px rgba(255, 255, 255, 0.8);
}

html body .eks-packages__mark svg {
    width: 25px;
    height: 25px;
    stroke: #637154;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

html body .eks-packages__card--handbook .eks-packages__mark {
    background: linear-gradient(145deg, #FFF8F1, #F0D7CA);
    box-shadow:
        0 0 0 8px rgba(247, 220, 198, 0.5),
        0 8px 18px rgba(201, 103, 67, 0.14),
        inset 0 1px 2px rgba(255, 255, 255, 0.8);
}
html body .eks-packages__card--handbook .eks-packages__mark svg {
    stroke: #B65F3F;
}

html body .eks-packages__card--hub .eks-packages__mark {
    background: rgba(244, 238, 218, 0.1);
    border-color: rgba(244, 238, 218, 0.22);
    box-shadow: 0 0 0 8px rgba(244, 238, 218, 0.07), inset 0 1px 2px rgba(255, 255, 255, 0.12);
}
html body .eks-packages__card--hub .eks-packages__mark svg {
    stroke: #E9D9B7;
}

html body .eks-packages__card h3 {
    margin: 0 0 10px;
    color: var(--dp-text);
    font: 600 29px/1.18 "Manrope", sans-serif;
    letter-spacing: -0.045em;
}

html body .eks-packages__summary {
    min-height: 3.4em;
    margin: 0 0 24px;
    color: var(--dp-muted);
    font: 400 13.5px/1.7 "Inter", sans-serif;
}

html body .eks-packages__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    column-gap: 9px;
    row-gap: 3px;
    color: var(--dp-text);
}

html body .eks-packages__price > span {
    width: 100%;
    color: var(--dp-muted);
    font: 600 10px/1.4 "Inter", sans-serif;
    letter-spacing: 0.06em;
}

html body .eks-packages__price strong {
    color: var(--dp-text);
    font: 600 40px/1.14 "Manrope", sans-serif;
    letter-spacing: -0.055em;
}

html body .eks-packages__price small {
    color: var(--dp-muted);
    font: 400 11.5px/1.4 "Inter", sans-serif;
}

html body .eks-packages__card-body {
    flex: 1;
    padding: 28px 30px 26px;
}

html body .eks-packages__list-label {
    margin: 0 0 20px;
    color: var(--dp-accent);
    font: 600 10px/1.4 "Inter", sans-serif;
    letter-spacing: 0.1em;
}

html body .eks-packages__list {
    display: grid;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

html body .eks-packages__list li {
    position: relative;
    min-width: 0;
    margin: 0;
    padding-left: 24px;
}

html body .eks-packages__list li::before {
    content: "✓";
    position: absolute;
    top: 1px;
    left: 0;
    color: var(--dp-accent);
    font: 700 13px/1.5 "Inter", sans-serif;
}

html body .eks-packages__list strong {
    display: block;
    margin-bottom: 4px;
    color: var(--dp-text);
    font: 600 13.5px/1.5 "Manrope", sans-serif;
    letter-spacing: -0.018em;
}

html body .eks-packages__list span {
    display: block;
    color: var(--dp-muted);
    font: 400 12.5px/1.68 "Inter", sans-serif;
}

html body .eks-packages__card-foot {
    margin-top: auto;
    padding: 0 30px 30px;
}

html body .eks-packages__card-foot > p {
    min-height: 56px;
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid var(--dp-line);
    color: var(--dp-muted);
    font: 400 12px/1.6 "Inter", sans-serif;
}

html body .eks-packages__button {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    min-height: 50px;
    padding: 11px 20px;
    border-radius: 999px;
    background: #53664B;
    color: #FFFFFF;
    font: 600 13px/1.35 "Manrope", sans-serif;
    text-decoration: none;
    box-shadow: 0 9px 18px rgba(42, 57, 40, 0.16);
    transition: translate 0.3s cubic-bezier(.22, 1, .36, 1), background 0.3s ease, box-shadow 0.3s ease;
}

html body .eks-packages__button span {
    font: 400 21px/1 "Inter", sans-serif;
    transition: translate 0.3s ease;
}

html body .eks-packages__button::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    width: 45%;
    pointer-events: none;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    translate: -140% 0;
    animation: eksSheen 6s ease-in-out 1.6s infinite;
}

@keyframes eksSheen {
    0%, 62% { translate: -140% 0; }
    100%    { translate: 340% 0; }
}

html body .eks-packages__card--handbook .eks-packages__button {
    background: linear-gradient(145deg, #DB7D57, #C0552F);
    box-shadow: 0 10px 20px rgba(192, 85, 47, 0.26);
}

html body .eks-packages__card--hub .eks-packages__button {
    background: #F8F3EB;
    color: #2F4033;
    box-shadow: 0 10px 20px rgba(15, 25, 17, 0.28);
}

html body .eks-packages__button:hover,
html body .eks-packages__button:focus-visible {
    translate: 0 -3px;
    background: #43543C;
    color: #FFFFFF;
}
html body .eks-packages__card--handbook .eks-packages__button:hover,
html body .eks-packages__card--handbook .eks-packages__button:focus-visible {
    background: linear-gradient(145deg, #D6714A, #B24A27);
}
html body .eks-packages__card--hub .eks-packages__button:hover,
html body .eks-packages__card--hub .eks-packages__button:focus-visible {
    background: #EADDC5;
    color: #25372C;
}
html body .eks-packages__button:hover span {
    translate: 3px 0;
}
html body .eks-packages__button:focus-visible {
    outline: 3px solid #C96743;
    outline-offset: 3px;
}

/* ---------- Good to know ---------- */

html body .eks-packages__notes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 40px;
}

html body .eks-packages__note {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 28px 28px 26px;
    border-radius: 26px 8px 26px 8px;
    border: 1px solid rgba(232, 219, 204, 0.9);
    background:
        radial-gradient(180px 150px at 100% 110%, rgba(247, 220, 198, 0.55), rgba(247, 220, 198, 0) 72%),
        rgba(255, 253, 249, 0.78);
    box-shadow: 0 14px 30px rgba(69, 54, 40, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
html body .eks-packages__note:nth-child(2) {
    background:
        radial-gradient(180px 150px at 100% 110%, rgba(200, 212, 190, 0.55), rgba(200, 212, 190, 0) 72%),
        rgba(255, 253, 249, 0.78);
}
html body .eks-packages__note:nth-child(3) {
    background:
        radial-gradient(180px 150px at 100% 110%, rgba(240, 221, 180, 0.62), rgba(240, 221, 180, 0) 72%),
        rgba(255, 253, 249, 0.78);
}

html body .eks-packages__note-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: linear-gradient(145deg, #FFF8F1, #F0D7CA);
    box-shadow: 0 0 0 7px rgba(247, 220, 198, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.85);
}
html body .eks-packages__note:nth-child(2) .eks-packages__note-icon {
    background: linear-gradient(145deg, #F1F5EC, #DCE5D3);
    box-shadow: 0 0 0 7px rgba(200, 212, 190, 0.38), inset 0 1px 2px rgba(255, 255, 255, 0.85);
}
html body .eks-packages__note:nth-child(3) .eks-packages__note-icon {
    background: linear-gradient(145deg, #FBF3E2, #F0DDB4);
    box-shadow: 0 0 0 7px rgba(240, 221, 180, 0.45), inset 0 1px 2px rgba(255, 255, 255, 0.85);
}

html body .eks-packages__note-icon svg {
    width: 24px;
    height: 24px;
    stroke: #B65F3F;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
html body .eks-packages__note:nth-child(2) .eks-packages__note-icon svg { stroke: #56674F; }
html body .eks-packages__note:nth-child(3) .eks-packages__note-icon svg { stroke: #8A6A2C; }

html body .eks-packages__note h3 {
    margin: 0 0 8px;
    color: #1F211D;
    font: 600 18px/1.3 "Manrope", sans-serif;
    letter-spacing: -0.03em;
}

html body .eks-packages__note p {
    margin: 0;
    color: #62665F;
    font: 400 13.5px/1.72 "Inter", sans-serif;
}

/* ---------- Business Foundation link ---------- */

html body .eks-packages__bundle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-top: 26px;
    padding: 24px 28px 24px 32px;
    border-radius: 30px 10px 30px 10px;
    border: 1px solid rgba(217, 183, 126, 0.5);
    background:
        radial-gradient(260px 200px at 0% 50%, rgba(247, 220, 198, 0.55), rgba(247, 220, 198, 0) 72%),
        linear-gradient(135deg, rgba(255, 252, 247, 0.92), rgba(250, 240, 226, 0.8));
    box-shadow: 0 16px 34px rgba(69, 54, 40, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

html body .eks-packages__bundle-text {
    display: grid;
    gap: 4px;
    min-width: 0;
}

html body .eks-packages__bundle-text strong {
    color: #1F211D;
    font: 600 19px/1.3 "Manrope", sans-serif;
    letter-spacing: -0.03em;
}

html body .eks-packages__bundle-text span {
    color: #5C6258;
    font: 400 14px/1.65 "Inter", sans-serif;
}

html body .eks-packages__bundle-link {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 50px;
    padding: 12px 24px;
    border-radius: 999px;
    background: linear-gradient(145deg, #DB7D57, #C0552F);
    color: #FFFFFF;
    font: 600 13.5px/1.3 "Manrope", sans-serif;
    text-decoration: none;
    box-shadow: 0 10px 20px rgba(192, 85, 47, 0.26);
    transition: translate 0.3s cubic-bezier(.22, 1, .36, 1), box-shadow 0.3s ease;
}

html body .eks-packages__bundle-link span {
    transition: translate 0.3s ease;
}

html body .eks-packages__bundle-link:hover,
html body .eks-packages__bundle-link:focus-visible {
    translate: 0 -3px;
    color: #FFFFFF;
    box-shadow: 0 16px 28px rgba(192, 85, 47, 0.34);
}
html body .eks-packages__bundle-link:hover span {
    translate: 4px 0;
}

/* ---------- Fine print ---------- */

html body .eks-packages__terms {
    max-width: 1100px;
    margin: 34px auto 0;
    padding-top: 26px;
    border-top: 1px solid rgba(71, 73, 61, 0.15);
}

html body .eks-packages__terms p {
    margin: 0 0 9px;
    color: #77756C;
    font: 400 11.5px/1.8 "Inter", sans-serif;
}

/* ---------- Desktop: lift the middle card a little ---------- */

@media (min-width: 1101px) {
    html body .eks-packages__grid { padding-top: 30px; }
    html body .eks-packages__card--handbook { margin-top: -16px; }
    html body .eks-packages__card--handbook .eks-packages__card-head { padding-top: 48px; }
    html body .eks-packages__card--handbook .eks-packages__badge { top: 40px; }
}

@media (min-width: 1101px) and (max-width: 1300px) {
    html body .eks-packages__card-head { padding: 28px 24px 24px; }
    html body .eks-packages__card-body { padding: 26px 24px; }
    html body .eks-packages__card-foot { padding: 0 24px 26px; }
    html body .eks-packages__badge { right: 18px; }
    html body .eks-packages__price strong { font-size: 36px; }
}

/* ---------- Tablet ---------- */

@media (min-width: 600px) and (max-width: 1100px) {
    html body .eks-packages { padding: calc(80px + var(--fr-edge)) 0 calc(76px + var(--fr-edge)); }
    html body .eks-packages__inner { padding: 0 40px; }
    html body .eks-packages__header { display: block; margin-bottom: 40px; }
    html body .eks-packages__title { font-size: clamp(34px, 4.7vw, 44px); }
    html body .eks-packages__intro { max-width: 640px; margin-top: 22px; justify-self: start; }
    html body .eks-packages__grid {
        grid-template-columns: minmax(0, 1fr);
        max-width: 700px;
        margin: 0 auto;
        gap: 22px;
    }
    html body .eks-packages__summary { min-height: 0; }
    html body .eks-packages__card-foot > p { min-height: 0; padding-bottom: 18px; }
    html body .eks-packages__notes { grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 700px; margin: 36px auto 0; }
    html body .eks-packages__bundle { max-width: 700px; margin: 24px auto 0; }
    html body .eks-packages__terms { max-width: 700px; }
}

/* ---------- Phone ---------- */

@media (max-width: 599px) {
    html body .eks-packages { padding: calc(56px + var(--fr-edge)) 0 calc(56px + var(--fr-edge)); scroll-margin-top: 85px; }
    html body .eks-packages__inner { padding: 0 24px; }
    html body .eks-packages__header { display: block; margin-bottom: 30px; }
    html body .eks-packages__eyebrow { font-size: 11px; margin-bottom: 14px; padding-left: 44px; }
    html body .eks-packages__title { font-size: clamp(30px, 8vw, 38px); line-height: 1.16; }
    html body .eks-packages__intro { max-width: none; margin-top: 18px; justify-self: start; }
    html body .eks-packages__intro p { font-size: 14px; }
    html body .eks-packages__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-top: 6px; }
    html body .eks-packages__card { border-radius: 30px 10px 30px 10px; }
    html body .eks-packages__card-head { padding: 26px 24px 22px; }
    html body .eks-packages__card-body { padding: 24px 24px 26px; }
    html body .eks-packages__card-foot { padding: 0 24px 24px; }
    html body .eks-packages__card h3 { font-size: 26px; }
    html body .eks-packages__summary { min-height: 0; margin-bottom: 20px; }
    html body .eks-packages__price strong { font-size: 36px; }
    html body .eks-packages__badge { top: 20px; right: 20px; }
    html body .eks-packages__card-foot > p { min-height: 0; padding-bottom: 16px; }
    html body .eks-packages__notes { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 30px; }
    html body .eks-packages__note { padding: 24px 22px; }
    html body .eks-packages__bundle { flex-direction: column; align-items: flex-start; gap: 18px; padding: 24px 22px; }
    html body .eks-packages__bundle-link { width: 100%; justify-content: center; }
    html body .eks-packages__terms { margin-top: 28px; }
    html body .eks-packages__terms p { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
    html body .eks-packages__button::after { animation: none !important; }
    html body .eks-packages__card,
    html body .eks-packages__button,
    html body .eks-packages__bundle-link { transition: none !important; }
}



/* ---------- Packages: add-ons and review ---------- */

html body .eks-packages__extras {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 17px;
    margin-top: 40px;
    align-items: stretch;
}

html body .eks-packages__addons,
html body .eks-packages__review {
    position: relative;
    overflow: hidden;
    min-width: 0;
    padding: 34px 36px 32px;
    border-radius: 22px;
    box-shadow: 0 15px 32px rgba(64, 51, 36, 0.055), 0 3px 11px rgba(64, 51, 36, 0.035);
}

html body .eks-packages__addons {
    border: 1px solid rgba(112, 98, 81, 0.13);
    border-radius: 22px 22px 56px 22px;
    background:
        radial-gradient(ellipse 60% 70% at 0% 0%, rgba(255, 255, 255, 0.9), transparent 70%),
        linear-gradient(145deg, rgba(255, 253, 249, 0.88), rgba(235, 238, 225, 0.7));
}

html body .eks-packages__addons::after {
    content: "";
    position: absolute;
    right: -60px;
    bottom: -70px;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(135, 148, 123, 0.2), rgba(135, 148, 123, 0) 68%);
    pointer-events: none;
}

html body .eks-packages__review {
    border: 1px solid rgba(201, 103, 67, 0.23);
    border-radius: 22px 56px 22px 22px;
    background:
        radial-gradient(ellipse 70% 60% at 100% 0%, rgba(217, 183, 126, 0.3), transparent 72%),
        linear-gradient(145deg, #FBEFE6, #F3DFD2);
}

html body .eks-packages__review::after {
    content: "";
    position: absolute;
    left: -80px;
    bottom: -90px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 103, 67, 0.15), rgba(201, 103, 67, 0) 68%);
    pointer-events: none;
}

html body .eks-packages__addons > *,
html body .eks-packages__review > * {
    position: relative;
    z-index: 1;
}

html body .eks-packages__extras-label {
    margin: 0 0 12px;
    color: #B2532F;
    font: 600 10px/1.4 "Inter", sans-serif;
    letter-spacing: 0.12em;
}

html body .eks-packages__extras-title {
    margin: 0 0 20px;
    color: #1F211D;
    font: 600 26px/1.2 "Manrope", sans-serif;
    letter-spacing: -0.04em;
}

html body .eks-packages__addon-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

html body .eks-packages__addon-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 22px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(65, 72, 59, 0.13);
}

html body .eks-packages__addon-list li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

html body .eks-packages__addon-list span {
    color: #4A5348;
    font: 400 14px/1.5 "Inter", sans-serif;
}

html body .eks-packages__addon-list strong {
    flex: none;
    color: #1F211D;
    font: 600 15px/1.4 "Manrope", sans-serif;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

html body .eks-packages__review-text {
    margin: 0 0 20px;
    color: #55574E;
    font: 400 14px/1.75 "Inter", sans-serif;
}

html body .eks-packages__review-price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 22px;
}

html body .eks-packages__review-price strong {
    color: #1F211D;
    font: 600 40px/1.1 "Manrope", sans-serif;
    letter-spacing: -0.055em;
}

html body .eks-packages__review-price small {
    color: #62665F;
    font: 400 12px/1.4 "Inter", sans-serif;
}

html body .eks-packages__review .eks-packages__button {
    margin-top: auto;
    background: linear-gradient(145deg, #DB7D57, #C0552F);
    box-shadow: 0 10px 20px rgba(192, 85, 47, 0.24);
}

@media (hover: hover) {
    html body .eks-packages__review .eks-packages__button:hover {
        background: linear-gradient(145deg, #D4724B, #B24B28);
    }
}

html body .eks-packages__review {
    display: flex;
    flex-direction: column;
}


/* ---------- Add-ons and review: tablet ---------- */

@media (min-width: 600px) and (max-width: 1100px) {
    html body .eks-packages__extras {
        grid-template-columns: 1fr;
    }

    html body .eks-packages__addons,
    html body .eks-packages__review {
        padding: 30px 30px 28px;
    }
}

/* ---------- Add-ons and review: phone ---------- */

@media (max-width: 599px) {
    html body .eks-hero__actions {
        gap: 0 24px;
    }

    html body .eks-packages__extras {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 28px;
    }

    html body .eks-packages__addons,
    html body .eks-packages__review {
        padding: 28px 22px 26px;
        border-radius: 20px;
    }

    html body .eks-packages__extras-title {
        font-size: 23px;
        margin-bottom: 16px;
    }

    html body .eks-packages__addon-list li {
        gap: 14px;
    }

    html body .eks-packages__addon-list span {
        font-size: 13px;
    }

    html body .eks-packages__addon-list strong {
        font-size: 14px;
    }

    html body .eks-packages__review-price strong {
        font-size: 34px;
    }
}

/* ---------- Reduced motion for the hero link ---------- */

@media (prefers-reduced-motion: reduce) {
    html body .eks-hero__packages-link,
    html body .eks-hero__packages-link::after {
        transition: none !important;
    }
}

/* END: EMPLOYEE & KNOWLEDGE SYSTEMS PACKAGES v1 */


/* =====================================================================
   FRAYORA: WORKFLOWS & AUTOMATION PACKAGES v1
   PASTE AT THE VERY BOTTOM OF main.css (after everything else).

   This styles the new "Packages & Investment" section, the small
   "View packages and pricing" link next to the hero button, and the
   number labels on the benefit cards.
   Desktop, tablet and phone are all handled in this one block.
   If you ever need to replace it, delete everything from this banner
   down to the line that says "END: WORKFLOWS & AUTOMATION
   PACKAGES v1", then paste the new block.
   ===================================================================== */

/* ---------- Hero: button and link on one row ---------- */

html body .wf-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0 30px;
}

html body .wf-hero__packages-link {
    position: relative;
    margin-bottom: 14px;
    padding: 6px 0;
    color: #F1E2D4;
    font: 600 14px/1.4 "Manrope", sans-serif;
    letter-spacing: -0.01em;
    text-decoration: none;
    transition: color .25s ease;
}

html body .wf-hero__packages-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1px;
    height: 1px;
    background: linear-gradient(90deg, #D9B77E, rgba(217, 183, 126, 0.25));
    transform-origin: left center;
    transition: transform .35s ease;
}

html body .wf-hero__packages-link:hover,
html body .wf-hero__packages-link:focus-visible {
    color: #FFFFFF;
}

html body .wf-hero__packages-link:hover::after {
    transform: scaleX(0.6);
}

html body .wf-hero__packages-link:focus-visible {
    outline: 2px solid #D9B77E;
    outline-offset: 5px;
    border-radius: 4px;
}

/* ---------- Section shell ---------- */

html body .wf-packages {
    position: relative;
    isolation: isolate;
    width: 100%;
    overflow: hidden;
    margin-top: calc(var(--fr-edge) * -1) !important;
    padding: calc(104px + var(--fr-edge)) 0 calc(92px + var(--fr-edge));
    scroll-margin-top: 110px;
    color: #1F211D;
    background-color: #F5EDE4;
    background-image:
        radial-gradient(560px 420px at 4% 12%, rgba(255, 255, 255, 0.70), rgba(255, 255, 255, 0) 72%),
        radial-gradient(620px 460px at 98% 14%, rgba(217, 183, 126, 0.20), rgba(217, 183, 126, 0) 70%),
        radial-gradient(640px 480px at 92% 100%, rgba(201, 103, 67, 0.13), rgba(201, 103, 67, 0) 70%),
        radial-gradient(560px 440px at 0% 100%, rgba(135, 148, 123, 0.18), rgba(135, 148, 123, 0) 70%);
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.990), 12.5% calc(var(--fr-edge) * 0.962), 18.8% calc(var(--fr-edge) * 0.916), 25.0% calc(var(--fr-edge) * 0.854), 31.2% calc(var(--fr-edge) * 0.778), 37.5% calc(var(--fr-edge) * 0.691), 43.8% calc(var(--fr-edge) * 0.598), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.402), 62.5% calc(var(--fr-edge) * 0.309), 68.8% calc(var(--fr-edge) * 0.222), 75.0% calc(var(--fr-edge) * 0.146), 81.2% calc(var(--fr-edge) * 0.084), 87.5% calc(var(--fr-edge) * 0.038), 93.8% calc(var(--fr-edge) * 0.010), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.990), 12.5% calc(var(--fr-edge) * 0.962), 18.8% calc(var(--fr-edge) * 0.916), 25.0% calc(var(--fr-edge) * 0.854), 31.2% calc(var(--fr-edge) * 0.778), 37.5% calc(var(--fr-edge) * 0.691), 43.8% calc(var(--fr-edge) * 0.598), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.402), 62.5% calc(var(--fr-edge) * 0.309), 68.8% calc(var(--fr-edge) * 0.222), 75.0% calc(var(--fr-edge) * 0.146), 81.2% calc(var(--fr-edge) * 0.084), 87.5% calc(var(--fr-edge) * 0.038), 93.8% calc(var(--fr-edge) * 0.010), 100.0% calc(var(--fr-edge) * 0.000), 100% 100%, 0 100%);
}

/* the same sage to gold line that sits on every other section edge */
html body .wf-packages::before {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 0 0 auto 0;
    height: calc(var(--fr-edge) + 6px);
    pointer-events: none;
    background: linear-gradient(90deg, rgba(135, 148, 123, 0), #87947B 18%, #D9B77E 62%, rgba(217, 183, 126, 0));
    opacity: 0.6;
    clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.990), 12.5% calc(var(--fr-edge) * 0.962), 18.8% calc(var(--fr-edge) * 0.916), 25.0% calc(var(--fr-edge) * 0.854), 31.2% calc(var(--fr-edge) * 0.778), 37.5% calc(var(--fr-edge) * 0.691), 43.8% calc(var(--fr-edge) * 0.598), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.402), 62.5% calc(var(--fr-edge) * 0.309), 68.8% calc(var(--fr-edge) * 0.222), 75.0% calc(var(--fr-edge) * 0.146), 81.2% calc(var(--fr-edge) * 0.084), 87.5% calc(var(--fr-edge) * 0.038), 93.8% calc(var(--fr-edge) * 0.010), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.010 + 3px), 87.5% calc(var(--fr-edge) * 0.038 + 3px), 81.2% calc(var(--fr-edge) * 0.084 + 3px), 75.0% calc(var(--fr-edge) * 0.146 + 3px), 68.8% calc(var(--fr-edge) * 0.222 + 3px), 62.5% calc(var(--fr-edge) * 0.309 + 3px), 56.2% calc(var(--fr-edge) * 0.402 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.598 + 3px), 37.5% calc(var(--fr-edge) * 0.691 + 3px), 31.2% calc(var(--fr-edge) * 0.778 + 3px), 25.0% calc(var(--fr-edge) * 0.854 + 3px), 18.8% calc(var(--fr-edge) * 0.916 + 3px), 12.5% calc(var(--fr-edge) * 0.962 + 3px), 6.2% calc(var(--fr-edge) * 0.990 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
    -webkit-clip-path: polygon(0.0% calc(var(--fr-edge) * 1.000), 6.2% calc(var(--fr-edge) * 0.990), 12.5% calc(var(--fr-edge) * 0.962), 18.8% calc(var(--fr-edge) * 0.916), 25.0% calc(var(--fr-edge) * 0.854), 31.2% calc(var(--fr-edge) * 0.778), 37.5% calc(var(--fr-edge) * 0.691), 43.8% calc(var(--fr-edge) * 0.598), 50.0% calc(var(--fr-edge) * 0.500), 56.2% calc(var(--fr-edge) * 0.402), 62.5% calc(var(--fr-edge) * 0.309), 68.8% calc(var(--fr-edge) * 0.222), 75.0% calc(var(--fr-edge) * 0.146), 81.2% calc(var(--fr-edge) * 0.084), 87.5% calc(var(--fr-edge) * 0.038), 93.8% calc(var(--fr-edge) * 0.010), 100.0% calc(var(--fr-edge) * 0.000), 100.0% calc(var(--fr-edge) * 0.000 + 3px), 93.8% calc(var(--fr-edge) * 0.010 + 3px), 87.5% calc(var(--fr-edge) * 0.038 + 3px), 81.2% calc(var(--fr-edge) * 0.084 + 3px), 75.0% calc(var(--fr-edge) * 0.146 + 3px), 68.8% calc(var(--fr-edge) * 0.222 + 3px), 62.5% calc(var(--fr-edge) * 0.309 + 3px), 56.2% calc(var(--fr-edge) * 0.402 + 3px), 50.0% calc(var(--fr-edge) * 0.500 + 3px), 43.8% calc(var(--fr-edge) * 0.598 + 3px), 37.5% calc(var(--fr-edge) * 0.691 + 3px), 31.2% calc(var(--fr-edge) * 0.778 + 3px), 25.0% calc(var(--fr-edge) * 0.854 + 3px), 18.8% calc(var(--fr-edge) * 0.916 + 3px), 12.5% calc(var(--fr-edge) * 0.962 + 3px), 6.2% calc(var(--fr-edge) * 0.990 + 3px), 0.0% calc(var(--fr-edge) * 1.000 + 3px));
}

html body .wf-packages,
html body .wf-packages *,
html body .wf-packages *::before,
html body .wf-packages *::after {
    box-sizing: border-box;
}

html body .wf-packages__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
}

/* ---------- Header ---------- */

html body .wf-packages__header {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    column-gap: 65px;
    align-items: end;
    margin-bottom: 52px;
}

html body .wf-packages__eyebrow {
    position: relative;
    margin: 0 0 19px;
    padding-left: 48px;
    color: #C96743;
    font: 600 12px/1.4 "Inter", sans-serif;
    letter-spacing: 0.15em;
}

html body .wf-packages__eyebrow::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 34px;
    height: 10px;
    translate: 0 -50%;
    background: #C96743;
    clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);
}

html body .wf-packages__title {
    margin: 0;
    max-width: 740px;
    color: #1F211D;
    font: 600 clamp(36px, 3.4vw, 49px) / 1.13 "Manrope", sans-serif;
    letter-spacing: -0.05em;
    text-wrap: balance;
}

html body .wf-packages__intro {
    max-width: 440px;
    justify-self: end;
    padding-bottom: 3px;
}

html body .wf-packages__intro p {
    margin: 0 0 19px;
    color: #65695F;
    font: 400 15px/1.78 "Inter", sans-serif;
}

html body .wf-packages__currency {
    color: #66745C;
    font: 600 10px/1.5 "Inter", sans-serif;
    letter-spacing: 0.11em;
}

/* ---------- Cards ---------- */

html body .wf-packages__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
    padding: 16px 0 12px;
}

html body .wf-packages__card {
    --dp-text: #1F211D;
    --dp-muted: #62665F;
    --dp-line: rgba(65, 72, 59, 0.16);
    --dp-accent: #B96748;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border-radius: 36px 12px 36px 12px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    color: var(--dp-text);
    box-shadow:
        0 26px 52px rgba(45, 41, 34, 0.10),
        0 8px 16px rgba(45, 41, 34, 0.055),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: translate 0.45s cubic-bezier(.22, 1, .36, 1), box-shadow 0.45s ease;
}

/* soft glow in the bottom corner of each card */
html body .wf-packages__card::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -80px;
    bottom: -90px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    pointer-events: none;
}

html body .wf-packages__card--first {
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.92), rgba(248, 243, 235, 0.82) 64%, rgba(235, 228, 216, 0.66));
}
html body .wf-packages__card--first::after {
    background: radial-gradient(circle, rgba(200, 212, 190, 0.55), rgba(200, 212, 190, 0) 68%);
}

html body .wf-packages__card--system {
    --dp-accent: #C96743;
    background: linear-gradient(150deg, rgba(255, 249, 244, 0.94), rgba(245, 228, 219, 0.86) 65%, rgba(233, 206, 193, 0.70));
    border-color: rgba(201, 103, 67, 0.24);
}
html body .wf-packages__card--system::after {
    background: radial-gradient(circle, rgba(247, 200, 170, 0.65), rgba(247, 200, 170, 0) 68%);
}

html body .wf-packages__card--build {
    --dp-text: #F8F3EB;
    --dp-muted: rgba(248, 243, 235, 0.78);
    --dp-line: rgba(248, 243, 235, 0.2);
    --dp-accent: #EEDFB9;
    background: linear-gradient(145deg, #4E5F4E 0%, #39483B 52%, #2D3C31 100%);
    border-color: rgba(235, 240, 220, 0.22);
    box-shadow:
        0 27px 52px rgba(29, 43, 32, 0.24),
        0 8px 16px rgba(29, 43, 32, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
html body .wf-packages__card--build::after {
    background: radial-gradient(circle, rgba(217, 183, 126, 0.28), rgba(217, 183, 126, 0) 68%);
}

@media (hover: hover) {
    html body .wf-packages__card:hover {
        translate: 0 -8px;
        box-shadow:
            0 36px 68px rgba(45, 41, 34, 0.15),
            0 10px 18px rgba(45, 41, 34, 0.07),
            inset 0 1px 0 rgba(255, 255, 255, 0.85);
    }
    html body .wf-packages__card--build:hover {
        box-shadow:
            0 38px 68px rgba(29, 43, 32, 0.28),
            0 10px 18px rgba(29, 43, 32, 0.12),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
}

html body .wf-packages__card-head {
    position: relative;
    padding: 32px 30px 26px;
    border-bottom: 1px solid var(--dp-line);
}

html body .wf-packages__index {
    display: block;
    padding-right: 120px;
    color: var(--dp-accent);
    font: 600 10px/1.4 "Inter", sans-serif;
    letter-spacing: 0.11em;
}

html body .wf-packages__badge {
    position: absolute;
    z-index: 3;
    top: 24px;
    right: 24px;
    padding: 6px 13px 6px;
    border-radius: 999px;
    background: linear-gradient(145deg, #DB7D57, #C0552F);
    color: #FFFFFF;
    font: 700 9.5px/1.2 "Inter", sans-serif;
    letter-spacing: 0.12em;
    box-shadow: 0 8px 16px rgba(192, 85, 47, 0.28);
}

html body .wf-packages__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin: 20px 0 15px;
    border-radius: 50%;
    border: 1px solid rgba(105, 122, 90, 0.14);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(229, 232, 219, 0.7));
    box-shadow:
        0 0 0 8px rgba(200, 212, 190, 0.28),
        0 8px 18px rgba(47, 55, 43, 0.08),
        inset 0 1px 2px rgba(255, 255, 255, 0.8);
}

html body .wf-packages__mark svg {
    width: 25px;
    height: 25px;
    stroke: #637154;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

html body .wf-packages__card--system .wf-packages__mark {
    background: linear-gradient(145deg, #FFF8F1, #F0D7CA);
    box-shadow:
        0 0 0 8px rgba(247, 220, 198, 0.5),
        0 8px 18px rgba(201, 103, 67, 0.14),
        inset 0 1px 2px rgba(255, 255, 255, 0.8);
}
html body .wf-packages__card--system .wf-packages__mark svg {
    stroke: #B65F3F;
}

html body .wf-packages__card--build .wf-packages__mark {
    background: rgba(244, 238, 218, 0.1);
    border-color: rgba(244, 238, 218, 0.22);
    box-shadow: 0 0 0 8px rgba(244, 238, 218, 0.07), inset 0 1px 2px rgba(255, 255, 255, 0.12);
}
html body .wf-packages__card--build .wf-packages__mark svg {
    stroke: #E9D9B7;
}

html body .wf-packages__card h3 {
    margin: 0 0 10px;
    color: var(--dp-text);
    font: 600 29px/1.18 "Manrope", sans-serif;
    letter-spacing: -0.045em;
}

html body .wf-packages__summary {
    min-height: 3.4em;
    margin: 0 0 24px;
    color: var(--dp-muted);
    font: 400 13.5px/1.7 "Inter", sans-serif;
}

html body .wf-packages__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    column-gap: 9px;
    row-gap: 3px;
    color: var(--dp-text);
}

html body .wf-packages__price > span {
    width: 100%;
    color: var(--dp-muted);
    font: 600 10px/1.4 "Inter", sans-serif;
    letter-spacing: 0.06em;
}

html body .wf-packages__price strong {
    color: var(--dp-text);
    font: 600 40px/1.14 "Manrope", sans-serif;
    letter-spacing: -0.055em;
}

html body .wf-packages__price small {
    color: var(--dp-muted);
    font: 400 11.5px/1.4 "Inter", sans-serif;
}

html body .wf-packages__card-body {
    flex: 1;
    padding: 28px 30px 26px;
}

html body .wf-packages__list-label {
    margin: 0 0 20px;
    color: var(--dp-accent);
    font: 600 10px/1.4 "Inter", sans-serif;
    letter-spacing: 0.1em;
}

html body .wf-packages__list {
    display: grid;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

html body .wf-packages__list li {
    position: relative;
    min-width: 0;
    margin: 0;
    padding-left: 24px;
}

html body .wf-packages__list li::before {
    content: "✓";
    position: absolute;
    top: 1px;
    left: 0;
    color: var(--dp-accent);
    font: 700 13px/1.5 "Inter", sans-serif;
}

html body .wf-packages__list strong {
    display: block;
    margin-bottom: 4px;
    color: var(--dp-text);
    font: 600 13.5px/1.5 "Manrope", sans-serif;
    letter-spacing: -0.018em;
}

html body .wf-packages__list span {
    display: block;
    color: var(--dp-muted);
    font: 400 12.5px/1.68 "Inter", sans-serif;
}

html body .wf-packages__card-foot {
    margin-top: auto;
    padding: 0 30px 30px;
}

html body .wf-packages__card-foot > p {
    min-height: 56px;
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid var(--dp-line);
    color: var(--dp-muted);
    font: 400 12px/1.6 "Inter", sans-serif;
}

html body .wf-packages__button {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    min-height: 50px;
    padding: 11px 20px;
    border-radius: 999px;
    background: #53664B;
    color: #FFFFFF;
    font: 600 13px/1.35 "Manrope", sans-serif;
    text-decoration: none;
    box-shadow: 0 9px 18px rgba(42, 57, 40, 0.16);
    transition: translate 0.3s cubic-bezier(.22, 1, .36, 1), background 0.3s ease, box-shadow 0.3s ease;
}

html body .wf-packages__button span {
    font: 400 21px/1 "Inter", sans-serif;
    transition: translate 0.3s ease;
}

html body .wf-packages__button::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    width: 45%;
    pointer-events: none;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    translate: -140% 0;
    animation: wfSheen 6s ease-in-out 1.6s infinite;
}

@keyframes wfSheen {
    0%, 62% { translate: -140% 0; }
    100%    { translate: 340% 0; }
}

html body .wf-packages__card--system .wf-packages__button {
    background: linear-gradient(145deg, #DB7D57, #C0552F);
    box-shadow: 0 10px 20px rgba(192, 85, 47, 0.26);
}

html body .wf-packages__card--build .wf-packages__button {
    background: #F8F3EB;
    color: #2F4033;
    box-shadow: 0 10px 20px rgba(15, 25, 17, 0.28);
}

html body .wf-packages__button:hover,
html body .wf-packages__button:focus-visible {
    translate: 0 -3px;
    background: #43543C;
    color: #FFFFFF;
}
html body .wf-packages__card--system .wf-packages__button:hover,
html body .wf-packages__card--system .wf-packages__button:focus-visible {
    background: linear-gradient(145deg, #D6714A, #B24A27);
}
html body .wf-packages__card--build .wf-packages__button:hover,
html body .wf-packages__card--build .wf-packages__button:focus-visible {
    background: #EADDC5;
    color: #25372C;
}
html body .wf-packages__button:hover span {
    translate: 3px 0;
}
html body .wf-packages__button:focus-visible {
    outline: 3px solid #C96743;
    outline-offset: 3px;
}

/* ---------- Good to know ---------- */

html body .wf-packages__notes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 40px;
}

html body .wf-packages__note {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 28px 28px 26px;
    border-radius: 26px 8px 26px 8px;
    border: 1px solid rgba(232, 219, 204, 0.9);
    background:
        radial-gradient(180px 150px at 100% 110%, rgba(247, 220, 198, 0.55), rgba(247, 220, 198, 0) 72%),
        rgba(255, 253, 249, 0.78);
    box-shadow: 0 14px 30px rgba(69, 54, 40, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
html body .wf-packages__note:nth-child(2) {
    background:
        radial-gradient(180px 150px at 100% 110%, rgba(200, 212, 190, 0.55), rgba(200, 212, 190, 0) 72%),
        rgba(255, 253, 249, 0.78);
}
html body .wf-packages__note:nth-child(3) {
    background:
        radial-gradient(180px 150px at 100% 110%, rgba(240, 221, 180, 0.62), rgba(240, 221, 180, 0) 72%),
        rgba(255, 253, 249, 0.78);
}

html body .wf-packages__note-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: linear-gradient(145deg, #FFF8F1, #F0D7CA);
    box-shadow: 0 0 0 7px rgba(247, 220, 198, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.85);
}
html body .wf-packages__note:nth-child(2) .wf-packages__note-icon {
    background: linear-gradient(145deg, #F1F5EC, #DCE5D3);
    box-shadow: 0 0 0 7px rgba(200, 212, 190, 0.38), inset 0 1px 2px rgba(255, 255, 255, 0.85);
}
html body .wf-packages__note:nth-child(3) .wf-packages__note-icon {
    background: linear-gradient(145deg, #FBF3E2, #F0DDB4);
    box-shadow: 0 0 0 7px rgba(240, 221, 180, 0.45), inset 0 1px 2px rgba(255, 255, 255, 0.85);
}

html body .wf-packages__note-icon svg {
    width: 24px;
    height: 24px;
    stroke: #B65F3F;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
html body .wf-packages__note:nth-child(2) .wf-packages__note-icon svg { stroke: #56674F; }
html body .wf-packages__note:nth-child(3) .wf-packages__note-icon svg { stroke: #8A6A2C; }

html body .wf-packages__note h3 {
    margin: 0 0 8px;
    color: #1F211D;
    font: 600 18px/1.3 "Manrope", sans-serif;
    letter-spacing: -0.03em;
}

html body .wf-packages__note p {
    margin: 0;
    color: #62665F;
    font: 400 13.5px/1.72 "Inter", sans-serif;
}

/* ---------- Business Foundation link ---------- */

html body .wf-packages__bundle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-top: 26px;
    padding: 24px 28px 24px 32px;
    border-radius: 30px 10px 30px 10px;
    border: 1px solid rgba(217, 183, 126, 0.5);
    background:
        radial-gradient(260px 200px at 0% 50%, rgba(247, 220, 198, 0.55), rgba(247, 220, 198, 0) 72%),
        linear-gradient(135deg, rgba(255, 252, 247, 0.92), rgba(250, 240, 226, 0.8));
    box-shadow: 0 16px 34px rgba(69, 54, 40, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

html body .wf-packages__bundle-text {
    display: grid;
    gap: 4px;
    min-width: 0;
}

html body .wf-packages__bundle-text strong {
    color: #1F211D;
    font: 600 19px/1.3 "Manrope", sans-serif;
    letter-spacing: -0.03em;
}

html body .wf-packages__bundle-text span {
    color: #5C6258;
    font: 400 14px/1.65 "Inter", sans-serif;
}

html body .wf-packages__bundle-link {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 50px;
    padding: 12px 24px;
    border-radius: 999px;
    background: linear-gradient(145deg, #DB7D57, #C0552F);
    color: #FFFFFF;
    font: 600 13.5px/1.3 "Manrope", sans-serif;
    text-decoration: none;
    box-shadow: 0 10px 20px rgba(192, 85, 47, 0.26);
    transition: translate 0.3s cubic-bezier(.22, 1, .36, 1), box-shadow 0.3s ease;
}

html body .wf-packages__bundle-link span {
    transition: translate 0.3s ease;
}

html body .wf-packages__bundle-link:hover,
html body .wf-packages__bundle-link:focus-visible {
    translate: 0 -3px;
    color: #FFFFFF;
    box-shadow: 0 16px 28px rgba(192, 85, 47, 0.34);
}
html body .wf-packages__bundle-link:hover span {
    translate: 4px 0;
}

/* ---------- Fine print ---------- */

html body .wf-packages__terms {
    max-width: 1100px;
    margin: 34px auto 0;
    padding-top: 26px;
    border-top: 1px solid rgba(71, 73, 61, 0.15);
}

html body .wf-packages__terms p {
    margin: 0 0 9px;
    color: #77756C;
    font: 400 11.5px/1.8 "Inter", sans-serif;
}

/* ---------- Desktop: lift the middle card a little ---------- */

@media (min-width: 1101px) {
    html body .wf-packages__grid { padding-top: 30px; }
    html body .wf-packages__card--system { margin-top: -16px; }
    html body .wf-packages__card--system .wf-packages__card-head { padding-top: 48px; }
    html body .wf-packages__card--system .wf-packages__badge { top: 40px; }
}

@media (min-width: 1101px) and (max-width: 1300px) {
    html body .wf-packages__card-head { padding: 28px 24px 24px; }
    html body .wf-packages__card-body { padding: 26px 24px; }
    html body .wf-packages__card-foot { padding: 0 24px 26px; }
    html body .wf-packages__badge { right: 18px; }
    html body .wf-packages__price strong { font-size: 36px; }
}

/* ---------- Tablet ---------- */

@media (min-width: 600px) and (max-width: 1100px) {
    html body .wf-packages { padding: calc(80px + var(--fr-edge)) 0 calc(76px + var(--fr-edge)); }
    html body .wf-packages__inner { padding: 0 40px; }
    html body .wf-packages__header { display: block; margin-bottom: 40px; }
    html body .wf-packages__title { font-size: clamp(34px, 4.7vw, 44px); }
    html body .wf-packages__intro { max-width: 640px; margin-top: 22px; justify-self: start; }
    html body .wf-packages__grid {
        grid-template-columns: minmax(0, 1fr);
        max-width: 700px;
        margin: 0 auto;
        gap: 22px;
    }
    html body .wf-packages__summary { min-height: 0; }
    html body .wf-packages__card-foot > p { min-height: 0; padding-bottom: 18px; }
    html body .wf-packages__notes { grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 700px; margin: 36px auto 0; }
    html body .wf-packages__bundle { max-width: 700px; margin: 24px auto 0; }
    html body .wf-packages__terms { max-width: 700px; }
}

/* ---------- Phone ---------- */

@media (max-width: 599px) {
    html body .wf-packages { padding: calc(56px + var(--fr-edge)) 0 calc(56px + var(--fr-edge)); scroll-margin-top: 85px; }
    html body .wf-packages__inner { padding: 0 24px; }
    html body .wf-packages__header { display: block; margin-bottom: 30px; }
    html body .wf-packages__eyebrow { font-size: 11px; margin-bottom: 14px; padding-left: 44px; }
    html body .wf-packages__title { font-size: clamp(30px, 8vw, 38px); line-height: 1.16; }
    html body .wf-packages__intro { max-width: none; margin-top: 18px; justify-self: start; }
    html body .wf-packages__intro p { font-size: 14px; }
    html body .wf-packages__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-top: 6px; }
    html body .wf-packages__card { border-radius: 30px 10px 30px 10px; }
    html body .wf-packages__card-head { padding: 26px 24px 22px; }
    html body .wf-packages__card-body { padding: 24px 24px 26px; }
    html body .wf-packages__card-foot { padding: 0 24px 24px; }
    html body .wf-packages__card h3 { font-size: 26px; }
    html body .wf-packages__summary { min-height: 0; margin-bottom: 20px; }
    html body .wf-packages__price strong { font-size: 36px; }
    html body .wf-packages__badge { top: 20px; right: 20px; }
    html body .wf-packages__card-foot > p { min-height: 0; padding-bottom: 16px; }
    html body .wf-packages__notes { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 30px; }
    html body .wf-packages__note { padding: 24px 22px; }
    html body .wf-packages__bundle { flex-direction: column; align-items: flex-start; gap: 18px; padding: 24px 22px; }
    html body .wf-packages__bundle-link { width: 100%; justify-content: center; }
    html body .wf-packages__terms { margin-top: 28px; }
    html body .wf-packages__terms p { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
    html body .wf-packages__button::after { animation: none !important; }
    html body .wf-packages__card,
    html body .wf-packages__button,
    html body .wf-packages__bundle-link { transition: none !important; }
}



/* ---------- Packages: add-ons and review ---------- */

html body .wf-packages__extras {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 17px;
    margin-top: 40px;
    align-items: stretch;
}

html body .wf-packages__addons,
html body .wf-packages__review {
    position: relative;
    overflow: hidden;
    min-width: 0;
    padding: 34px 36px 32px;
    border-radius: 22px;
    box-shadow: 0 15px 32px rgba(64, 51, 36, 0.055), 0 3px 11px rgba(64, 51, 36, 0.035);
}

html body .wf-packages__addons {
    border: 1px solid rgba(112, 98, 81, 0.13);
    border-radius: 22px 22px 56px 22px;
    background:
        radial-gradient(ellipse 60% 70% at 0% 0%, rgba(255, 255, 255, 0.9), transparent 70%),
        linear-gradient(145deg, rgba(255, 253, 249, 0.88), rgba(235, 238, 225, 0.7));
}

html body .wf-packages__addons::after {
    content: "";
    position: absolute;
    right: -60px;
    bottom: -70px;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(135, 148, 123, 0.2), rgba(135, 148, 123, 0) 68%);
    pointer-events: none;
}

html body .wf-packages__review {
    border: 1px solid rgba(201, 103, 67, 0.23);
    border-radius: 22px 56px 22px 22px;
    background:
        radial-gradient(ellipse 70% 60% at 100% 0%, rgba(217, 183, 126, 0.3), transparent 72%),
        linear-gradient(145deg, #FBEFE6, #F3DFD2);
}

html body .wf-packages__review::after {
    content: "";
    position: absolute;
    left: -80px;
    bottom: -90px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 103, 67, 0.15), rgba(201, 103, 67, 0) 68%);
    pointer-events: none;
}

html body .wf-packages__addons > *,
html body .wf-packages__review > * {
    position: relative;
    z-index: 1;
}

html body .wf-packages__extras-label {
    margin: 0 0 12px;
    color: #B2532F;
    font: 600 10px/1.4 "Inter", sans-serif;
    letter-spacing: 0.12em;
}

html body .wf-packages__extras-title {
    margin: 0 0 20px;
    color: #1F211D;
    font: 600 26px/1.2 "Manrope", sans-serif;
    letter-spacing: -0.04em;
}

html body .wf-packages__addon-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

html body .wf-packages__addon-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 22px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(65, 72, 59, 0.13);
}

html body .wf-packages__addon-list li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

html body .wf-packages__addon-list span {
    color: #4A5348;
    font: 400 14px/1.5 "Inter", sans-serif;
}

html body .wf-packages__addon-list strong {
    flex: none;
    color: #1F211D;
    font: 600 15px/1.4 "Manrope", sans-serif;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

html body .wf-packages__review-text {
    margin: 0 0 20px;
    color: #55574E;
    font: 400 14px/1.75 "Inter", sans-serif;
}

html body .wf-packages__review-price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 22px;
}

html body .wf-packages__review-price strong {
    color: #1F211D;
    font: 600 40px/1.1 "Manrope", sans-serif;
    letter-spacing: -0.055em;
}

html body .wf-packages__review-price small {
    color: #62665F;
    font: 400 12px/1.4 "Inter", sans-serif;
}

html body .wf-packages__review .wf-packages__button {
    margin-top: auto;
    background: linear-gradient(145deg, #DB7D57, #C0552F);
    box-shadow: 0 10px 20px rgba(192, 85, 47, 0.24);
}

@media (hover: hover) {
    html body .wf-packages__review .wf-packages__button:hover {
        background: linear-gradient(145deg, #D4724B, #B24B28);
    }
}

html body .wf-packages__review {
    display: flex;
    flex-direction: column;
}


/* ---------- Add-ons and review: tablet ---------- */

@media (min-width: 600px) and (max-width: 1100px) {
    html body .wf-packages__extras {
        grid-template-columns: 1fr;
    }

    html body .wf-packages__addons,
    html body .wf-packages__review {
        padding: 30px 30px 28px;
    }
}

/* ---------- Add-ons and review: phone ---------- */

@media (max-width: 599px) {
    html body .wf-hero__actions {
        gap: 0 24px;
    }

    html body .wf-packages__extras {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 28px;
    }

    html body .wf-packages__addons,
    html body .wf-packages__review {
        padding: 28px 22px 26px;
        border-radius: 20px;
    }

    html body .wf-packages__extras-title {
        font-size: 23px;
        margin-bottom: 16px;
    }

    html body .wf-packages__addon-list li {
        gap: 14px;
    }

    html body .wf-packages__addon-list span {
        font-size: 13px;
    }

    html body .wf-packages__addon-list strong {
        font-size: 14px;
    }

    html body .wf-packages__review-price strong {
        font-size: 34px;
    }
}

/* ---------- Reduced motion for the hero link ---------- */

@media (prefers-reduced-motion: reduce) {
    html body .wf-hero__packages-link,
    html body .wf-hero__packages-link::after {
        transition: none !important;
    }
}

/* ---------- Benefit cards: number sits above the title (no dash) ---------- */

html body .workflows-page .wf-benefits__number {
    display: block;
    width: fit-content;
    margin: 0 0 10px;
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(201, 103, 67, 0.10);
    color: #C96743;
    font: 700 12px/1.3 "Inter", sans-serif;
    letter-spacing: 0.06em;
}

/* END: WORKFLOWS & AUTOMATION PACKAGES v1 */


/* =====================================================================
   FRAYORA: ONGOING IMPROVEMENT FIXES v1
   PASTE AT THE VERY BOTTOM OF main.css (after everything else).

   1. Section 3 ("More than support"): removes the faint square box
      around each icon. The icons stay exactly where they are.
   2. Hero on desktop: gives the picture more room so it no longer
      sits right against the headline and paragraph.

   To replace it later, delete everything from this banner down to
   the line that says "END: ONGOING IMPROVEMENT FIXES v1".
   ===================================================================== */

/* ---------- Section 3: no box around the icons (all screen sizes) ---------- */

html body .ongoing-improvement-page .oi-partner__item:nth-child(n) .oi-partner__icon.oi-partner__icon {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* ---------- Hero: more space between the text and the picture (desktop) ---------- */

@media (min-width: 1101px) {

    html body .ongoing-improvement-page .oi-hero__visual {
        width: calc(100% - 28px) !important;
        max-width: 560px !important;
        justify-self: end !important;
        margin: 0 -16px 0 0 !important;
    }
}

/* END: ONGOING IMPROVEMENT FIXES v1 */

/* =========================================================
   OUR WORK: SAMPLE NOTE UNDER INTRO
   Add at the very bottom of main.css
========================================================= */
html body .fw-portfolio .fw-portfolio__description.fw-portfolio__note {
    margin-top: 12px !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: #7a8176 !important;
}
@media screen and (max-width: 599px) {
    html body .fw-portfolio .fw-portfolio__description.fw-portfolio__note {
        margin-top: 10px !important;
        font-size: 13px !important;
    }
}
/* END: OUR WORK SAMPLE NOTE */

/* =========================================================
   ABOUT US: FOUNDER SIGNATURE IMAGE
   Add at the very bottom of main.css
========================================================= */
html body .about-us-page .about-founder__signature-img {
    display: block !important;
    width: auto !important;
    height: 70px !important;
    max-width: 100% !important;
    margin: 0 !important;
    object-fit: contain !important;
}
@media screen and (max-width: 1100px) {
    html body .about-us-page .about-founder__signature-img { height: 64px !important; }
}
@media screen and (max-width: 599px) {
    html body .about-us-page .about-founder__signature-img { height: 56px !important; }
}
/* END: ABOUT US SIGNATURE IMAGE */