/* ============================================================
   MY ANCILLARY AGENCY
   GLOBAL WEBSITE STYLESHEET
   ============================================================ */


/* ============================================================
   01. ROOT VARIABLES
   ============================================================ */

:root {

    --primary: #6d28d9;
    --primary-dark: #4c1d95;
    --primary-deep: #2e1065;
    --primary-light: #8b5cf6;
    --primary-soft: #f3efff;

    --secondary: #a855f7;

    --white: #ffffff;
    --black: #111111;

    --text: #17141f;
    --text-light: #6b6575;
    --text-muted: #898391;

    --border: #e9e5ef;
    --border-dark: #d9d2e4;

    --surface: #f8f7fb;
    --surface-dark: #f1eef7;

    --success: #16803c;
    --warning: #a16207;
    --danger: #b42318;

    --container: 1240px;

    --header-height: 88px;

    --radius-xs: 7px;
    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 28px;
    --radius-xl: 36px;

    --shadow-xs:
        0 4px 14px rgba(31, 17, 53, 0.04);

    --shadow-sm:
        0 8px 25px rgba(31, 17, 53, 0.06);

    --shadow-md:
        0 18px 50px rgba(31, 17, 53, 0.10);

    --shadow-lg:
        0 30px 80px rgba(31, 17, 53, 0.16);

    --transition:
        0.25s ease;
}


/* ============================================================
   02. RESET
   ============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
}

body {

    font-family:
        'Inter',
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        sans-serif;

    color: var(--text);
    background: var(--white);

    line-height: 1.65;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    overflow-x: hidden;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
}

section,
header,
footer,
main,
aside,
nav {
    min-width: 0;
}


/* ============================================================
   03. ACCESSIBILITY
   ============================================================ */

.skip-link {

    position: fixed;

    top: -100px;
    left: 20px;

    z-index: 99999;

    padding: 12px 20px;

    border-radius: var(--radius-sm);

    background: var(--primary);
    color: var(--white);

    font-weight: 700;
}

.skip-link:focus {
    top: 20px;
}


/* ============================================================
   04. CONTAINER
   ============================================================ */

.container {

    width:
        min(
            calc(100% - 48px),
            var(--container)
        );

    margin-inline: auto;

    min-width: 0;
}


/* ============================================================
   05. GLOBAL TYPOGRAPHY
   ============================================================ */

h1,
h2,
h3,
h4,
h5,
h6 {

    font-family:
        'Plus Jakarta Sans',
        'Inter',
        sans-serif;

    color: var(--text);
}

h1,
h2,
h3 {
    font-weight: 800;
}

.page-heading,
.section-heading {
    max-width: 760px;
}

.section-label {

    display: inline-block;

    margin-bottom: 14px;

    color: var(--primary);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 2px;
    line-height: 1.2;

    text-transform: uppercase;
}

.section-heading h2 {

    margin-bottom: 18px;

    font-size: clamp(34px, 4vw, 52px);

    line-height: 1.12;
    letter-spacing: -2px;
}

.section-heading h2 span,
.page-heading h1 span,
.page-content h2 span,
.page-section h2 span {
    color: var(--primary);
}

.section-heading > p {

    max-width: 680px;

    margin: 0;

    color: var(--text-light);

    font-size: 16px;
    line-height: 1.75;
}


/* ============================================================
   06. HEADER
   ============================================================ */

.site-header {

    position: relative;

    top: 0;
    left: 0;

    width: 100%;

    min-height: var(--header-height);

    z-index: 1000;

    color: var(--white);

    background:
        linear-gradient(
            110deg,
            rgba(46,16,101,0.98),
            rgba(109,40,217,0.96)
        );

    box-shadow:
        0 8px 30px rgba(46,16,101,0.12);

    transition:
        background var(--transition),
        box-shadow var(--transition),
        backdrop-filter var(--transition);
}

.site-header.scrolled {

    position: fixed;

    background:
        rgba(38,12,79,0.96);

    backdrop-filter: blur(18px);

    box-shadow:
        0 8px 30px rgba(0,0,0,0.18);
}

.header-container {

    min-height: var(--header-height);

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    min-width: 0;
    position: relative;
}


/* ============================================================
   07. BRAND
   ============================================================ */

@font-face {

    font-family: 'SoftLine';

    src:
        url('/assets/fonts/SoftLine.otf')
        format('opentype');

    font-weight: 400;
    font-style: normal;

    font-display: swap;
}

.site-brand {

    display: inline-flex;

    flex-direction: column;

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

    gap: 6px;

    color: var(--white);

    white-space: nowrap;

    line-height: 1;

    flex-shrink: 0;
}

.site-brand-logo {

    display: block;

    font-family: 'SoftLine', sans-serif;

    font-size: 52px;
    font-weight: 50;

    letter-spacing: -15px;
    line-height: 0.72;

    color: var(--white);

    white-space: nowrap;

    transform: scaleX(0.92);

    transform-origin: left center;
}

.site-brand-name {

    display: block;

    font-family:
        'Plus Jakarta Sans',
        sans-serif;

    font-size: 16px;
    font-weight: 600;

    line-height: 1.15;

    color: var(--white);

    white-space: nowrap;
}


/* ============================================================
   08. BUTTONS
   ============================================================ */

.btn {

    display: inline-flex;

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

    gap: 11px;

    min-height: 52px;

    padding: 0 23px;

    border: 1px solid transparent;
    border-radius: var(--radius-sm);

    font-size: 14px;
    font-weight: 750;

    line-height: 1;
    text-decoration: none;

    cursor: pointer;

    transition:
        transform var(--transition),
        background var(--transition),
        color var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

.btn:hover {
    transform: translateY(-2px);
}


/* ============================================================
   08.1 PRIMARY BUTTON
   ============================================================ */

.btn-primary {

    background: var(--white);
    color: var(--primary-dark);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.14);
}

.btn-primary:hover {
    background: #f5f2ff;
}


/* ============================================================
   08.2 SECONDARY BUTTON
   ============================================================ */

.btn-secondary {

    background: var(--primary);
    color: var(--white);

    box-shadow:
        0 10px 25px rgba(109, 40, 217, 0.22);
}

.btn-secondary:hover {
    background: var(--primary-dark);
}


/* ============================================================
   08.3 OUTLINE LIGHT BUTTON
   ============================================================ */

.btn-outline-light {

    border-color:
        rgba(255, 255, 255, 0.55);

    background:
        rgba(255, 255, 255, 0.06);

    color: var(--white);

    backdrop-filter: blur(5px);
}

.btn-outline-light:hover {

    border-color: var(--white);

    background:
        rgba(255, 255, 255, 0.14);
}


/* ============================================================
   08.4 LIGHT BUTTON
   ============================================================ */

.btn-light {

    background: var(--white);
    color: var(--primary-dark);
}

.btn-light:hover {
    background: var(--primary-soft);
}


/* ============================================================
   09. HOME — HERO
   ============================================================ */

.hero-section {

    position: relative;

    min-height: 820px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background: var(--primary-deep);

    color: var(--white);
}

.hero-background {

    position: absolute;

    inset: 0;

    z-index: 0;
}

.hero-background picture,
.hero-background img {

    width: 100%;
    height: 100%;
}

.hero-background img {

    object-fit: cover;

    object-position: center;
}

.hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(38,8,91,0.98) 0%,
            rgba(72,16,145,0.91) 35%,
            rgba(91,33,182,0.65) 55%,
            rgba(16,8,30,0.22) 100%
        );
}

.hero-container {

    position: relative;

    z-index: 2;

    padding-top: 110px;
    padding-bottom: 70px;
}

.hero-content {

    width: min(700px, 100%);
}

.hero-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 22px;

    color: rgba(255,255,255,0.76);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 2px;
}

.hero-eyebrow::before {

    content: '';

    width: 34px;
    height: 2px;

    background:
        rgba(255,255,255,0.75);
}

.hero-content h1 {

    margin-bottom: 25px;

    font-family:
        'Plus Jakarta Sans',
        sans-serif;

    font-size:
        clamp(46px,5.2vw,76px);

    line-height: 1.06;

    letter-spacing: -3px;

    font-weight: 800;

    color: var(--white);
}

.hero-content h1 span {

    display: block;

    font-weight: 500;

    opacity: 0.96;
}

.hero-description {

    max-width: 630px;

    margin-bottom: 34px;

    color:
        rgba(255,255,255,0.82);

    font-size: 17px;
    line-height: 1.75;
}

.hero-actions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 14px;

    margin-bottom: 55px;
}


/* ============================================================
   10. HOME — HERO TRUST
   ============================================================ */

.hero-trust {

    display: grid;

    grid-template-columns:
        1fr auto 1fr auto 1fr;

    align-items: center;

    width: min(670px,100%);

    border-top:
        1px solid rgba(255,255,255,0.20);

    padding-top: 25px;
}

.hero-trust-item {
    padding-right: 20px;
}

.hero-trust-item strong {

    display: block;

    margin-bottom: 3px;

    font-family:
        'Plus Jakarta Sans',
        sans-serif;

    font-size: 23px;

    line-height: 1.2;

    color: var(--white);
}

.hero-trust-item span {

    display: block;

    color:
        rgba(255,255,255,0.64);

    font-size: 11px;
    font-weight: 600;
}

.hero-trust-divider {

    width: 1px;
    height: 35px;

    background:
        rgba(255,255,255,0.20);
}


/* ============================================================
   11. HOME — INTRO
   ============================================================ */

.intro-section {

    padding: 75px 0;

    background: var(--white);

    border-bottom:
        1px solid var(--border);
}

.intro-grid {

    display: grid;

    grid-template-columns:
        0.85fr 1.15fr;

    gap: 80px;

    align-items: center;
}

.intro-grid > * {
    min-width: 0;
}

.intro-heading h2 {

    margin: 0;

    font-family:
        'Plus Jakarta Sans',
        sans-serif;

    font-size:
        clamp(31px,3.5vw,45px);

    line-height: 1.15;

    letter-spacing: -1.8px;
}

.intro-heading h2 span {
    color: var(--primary);
}

.intro-text p {

    margin-bottom: 14px;

    color: var(--text-light);

    font-size: 15px;
}

.intro-text p:last-child {
    margin-bottom: 0;
}


/* ============================================================
   12. GLOBAL SECTION SPACING
   ============================================================ */

.section-padding {

    padding-top: 110px;
    padding-bottom: 110px;
}


/* ============================================================
   13. HOME — ABOUT
   ============================================================ */

.about-home-section {
    background: var(--surface);
}

.about-home-grid {

    display: grid;

    grid-template-columns:
        0.95fr 1.05fr;

    gap: 90px;

    align-items: center;
}

.about-home-grid > * {
    min-width: 0;
}

.about-home-visual {

    position: relative;

    padding:
        0 30px 30px 0;
}

.about-image-card {

    position: relative;

    overflow: hidden;

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-lg);
}

.about-image-card img {

    width: 100%;

    aspect-ratio: 1 / 0.82;

    object-fit: cover;
}

.experience-badge {

    position: absolute;

    right: 0;
    bottom: 0;

    min-width: 145px;

    padding: 20px 22px;

    border-radius: var(--radius-md);

    background: var(--primary);

    color: var(--white);

    box-shadow: var(--shadow-md);
}

.experience-badge strong {

    display: block;

    margin-bottom: 3px;

    font-family:
        'Plus Jakarta Sans',
        sans-serif;

    font-size: 32px;

    line-height: 1;
}

.experience-badge span {

    display: block;

    color:
        rgba(255,255,255,0.72);

    font-size: 11px;
    font-weight: 600;

    line-height: 1.45;
}

.about-home-content .lead-text {

    color: var(--text);

    font-size: 18px;
    font-weight: 600;

    line-height: 1.7;
}

.about-home-content > p {

    color: var(--text-light);

    font-size: 15px;

    line-height: 1.8;
}

.text-link {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: 15px;

    color: var(--primary);

    font-size: 14px;
    font-weight: 750;
}

.text-link:hover {
    color: var(--primary-dark);
}


/* ============================================================
   14. HOME — SERVICES
   ============================================================ */

.services-section {
    background: var(--white);
}

.services-grid {

    display: grid;

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

    gap: 20px;
}

.service-card {

    position: relative;

    min-height: 330px;

    display: flex;

    flex-direction: column;

    padding: 31px;

    overflow: hidden;

    border: 1px solid var(--border);

    border-radius: var(--radius-md);

    background: var(--white);

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}

.service-card:hover {

    transform: translateY(-7px);

    border-color:
        rgba(109,40,217,0.22);

    box-shadow: var(--shadow-md);
}

.service-number {

    position: absolute;

    top: 22px;
    right: 24px;

    color:
        rgba(109,40,217,0.10);

    font-family:
        'Plus Jakarta Sans',
        sans-serif;

    font-size: 42px;
    font-weight: 800;

    line-height: 1;
}

.service-icon {

    width: 50px;
    height: 50px;

    display: flex;

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

    margin-bottom: 25px;

    border-radius: 13px;

    background: var(--primary-soft);

    font-size: 22px;
}

.service-card h3 {

    margin-bottom: 11px;

    font-size: 20px;

    line-height: 1.3;
}

.service-card p {

    margin-bottom: 20px;

    color: var(--text-light);

    font-size: 14px;

    line-height: 1.75;
}

.service-card > a {

    margin-top: auto;

    color: var(--primary);

    font-size: 13px;
    font-weight: 750;
}

.service-card > a:hover {
    color: var(--primary-dark);
}

.section-action {

    display: flex;

    justify-content: center;

    margin-top: 45px;
}


/* ============================================================
   15. HOME — TENDERING / EXPERTISE
   ============================================================ */

.expertise-section {

    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 8% 15%,
            rgba(105,55,220,0.08),
            transparent 30%
        ),
        radial-gradient(
            circle at 92% 85%,
            rgba(105,55,220,0.05),
            transparent 30%
        ),
        #faf9fd;
}

.expertise-header {

    display: grid;

    grid-template-columns:
        minmax(280px,0.75fr)
        minmax(450px,1.25fr);

    align-items: end;

    gap: 70px;

    margin-bottom: 48px;
}

.expertise-header > * {
    min-width: 0;
}

.expertise-header h2 {

    margin: 0;

    font-size:
        clamp(38px,4vw,56px);

    line-height: 1.05;

    font-weight: 700;

    letter-spacing: -2px;
}

.expertise-header p {

    margin: 0;

    max-width: 760px;

    color: var(--text-muted);

    font-size: 16px;

    line-height: 1.75;
}

.expertise-list {

    display: grid;

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

    gap: 22px;
}

.expertise-item {

    position: relative;

    min-height: 150px;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    padding: 28px;

    overflow: hidden;

    border:
        1px solid rgba(70,45,110,0.10);

    border-radius: 16px;

    background:
        rgba(255,255,255,0.94);

    box-shadow:
        0 8px 25px rgba(30,20,60,0.045);

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}

.expertise-item:hover {

    transform: translateY(-5px);

    border-color:
        rgba(100,40,215,0.22);

    box-shadow:
        0 18px 40px rgba(70,35,150,0.10);
}

.expertise-item strong {

    position: relative;

    z-index: 3;

    display: block;

    max-width: 92%;

    margin: 0 0 12px;

    color: var(--text);

    font-size: 19px;

    line-height: 1.3;

    font-weight: 700;

    letter-spacing: -0.45px;
}

.expertise-item::after {

    content: attr(data-number);

    position: absolute;

    z-index: 1;

    left: 18px;
    bottom: -24px;

    color:
        rgba(102,40,215,0.07);

    font-size: 145px;

    line-height: 0.8;

    font-weight: 800;

    letter-spacing: -8px;

    pointer-events: none;
}

.expertise-item::before {

    content: "";

    position: absolute;

    left: 28px;
    bottom: 21px;

    width: 46px;
    height: 2px;

    z-index: 4;

    background:
        linear-gradient(
            90deg,
            var(--primary),
            rgba(100,40,215,0.15)
        );

    opacity: 0.75;

    transition: width var(--transition);
}

.expertise-item:hover::before {
    width: 70px;
}


/* ============================================================
   16. WORKPLACE / ORGANISATION SLIDER
   ============================================================ */


/* ------------------------------------------------------------
   SLIDER WINDOW
   ------------------------------------------------------------ */

.workplace-slider-window {

    width: 100%;

    overflow: hidden;

    position: relative;

    box-sizing: border-box;

}


/* ------------------------------------------------------------
   SLIDER TRACK
   ------------------------------------------------------------ */

.workplace-slider-track {

    display: flex;

    width: 100%;

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    transition:
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);

    will-change: transform;

}


/* ------------------------------------------------------------
   INDIVIDUAL SLIDE
   ------------------------------------------------------------ */

.workplace-slide {

    flex: 0 0 100%;

    width: 100%;

    min-width: 100%;

    box-sizing: border-box;

    min-height: 190px;

    padding: 28px;

    border-radius: 20px;

    background: #ffffff;

    border: 1px solid rgba(91, 43, 214, 0.12);

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    position: relative;

}


/* ------------------------------------------------------------
   NUMBER
   ------------------------------------------------------------ */

.workplace-number {

    display: block;

    font-size: 14px;

    font-weight: 700;

    color: #cdb5ff;

    line-height: 1;

}


/* ------------------------------------------------------------
   TITLE
   ------------------------------------------------------------ */

.workplace-slide strong {

    display: block;

    font-size: clamp(28px, 2.4vw, 38px);

    line-height: 1.15;

    font-weight: 700;

    color: #171321;

}


/* ------------------------------------------------------------
   SLIDER FOOTER
   ------------------------------------------------------------ */

.workplace-slider-footer {

    display: flex;

    align-items: center;

    gap: 20px;

    margin-top: 28px;

    width: 100%;

    box-sizing: border-box;

}


/* ------------------------------------------------------------
   PROGRESS CONTAINER
   ------------------------------------------------------------ */

.workplace-slider-progress {

    position: relative;

    flex: 1 1 auto;

    width: 100%;

    height: 3px;

    background: rgba(23, 19, 33, 0.08);

    overflow: hidden;

}


/* ------------------------------------------------------------
   ACTIVE PROGRESS
   ------------------------------------------------------------ */

.workplace-progress-active {

    position: absolute;

    top: 0;

    left: 0;

    display: block;

    width: 7.142857%;

    height: 100%;

    background: #6d28d9;

    transform: translateX(0);

    transition:
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);

}


/* ------------------------------------------------------------
   SLIDER COUNT
   ------------------------------------------------------------ */

.workplace-slider-count {

    flex: 0 0 auto;

    display: flex;

    align-items: center;

    gap: 4px;

    font-size: 12px;

    font-weight: 700;

    color: #6d28d9;

    white-space: nowrap;

}


/* ------------------------------------------------------------
   RESPONSIVE — TABLET
   ------------------------------------------------------------ */

@media (max-width: 900px) {

    .workplace-slide {

        min-height: 170px;

        padding: 24px;

    }


    .workplace-slide strong {

        font-size: 30px;

    }

}


/* ------------------------------------------------------------
   RESPONSIVE — MOBILE
   ------------------------------------------------------------ */

@media (max-width: 600px) {

    .workplace-slider-footer {

        gap: 14px;

        margin-top: 20px;

    }


    .workplace-slide {

        min-height: 150px;

        padding: 22px;

        border-radius: 16px;

    }


    .workplace-slide strong {

        font-size: 25px;

    }


    .workplace-number {

        font-size: 12px;

    }

}


/* ============================================================
   17. COMMON PAGE LAYOUT
   ============================================================ */

.page {

    background: var(--white);

    min-width: 0;
}

.page-layout {

    width:
        min(
            calc(100% - 0px),
            var(--container)
        );

    margin-inline: auto;

    display: grid;

    grid-template-columns:
        minmax(150px,0.22fr)
        minmax(0,1fr)
        minmax(190px,0.28fr);

    gap: 28px;

    align-items: start;

    padding-top: 45px;
    padding-bottom: 80px;

    min-width: 0;
}

.page-main {

    min-width: 0;

    max-width: 100%;
}

.page-sidebar {

    min-width: 0;

    max-width: 100%;
}

.page-sidebar-left,
.page-sidebar-right {

    position: sticky;

    top: 110px;

}


/* ============================================================
   21. COMMON PAGE HEADER
   ============================================================ */

.page-header {

    padding:
        calc(var(--header-height) + )
        0
        55px;

    border-bottom:
        1px solid var(--border);
}

.page-header .section-label {
    margin-bottom: 14px;
}

.page-header h1 {

    margin-bottom: 20px;

    font-family:
        'Plus Jakarta Sans',
        sans-serif;

    font-size:
        clamp(42px,5vw,68px);

    line-height: 1.05;

    letter-spacing: -2.8px;

    font-weight: 800;
}

.page-header h1 span {
    color: var(--primary);
}

.page-header > p {

    max-width: 720px;

    margin: 0;

    color: var(--text-light);

    font-size: 17px;

    line-height: 1.8;
}


/* ============================================================
   22. COMMON PAGE CONTENT
   ============================================================ */

.page-content {

    padding: 65px 0;
}

.page-content h2 {

    margin-bottom: 18px;

    font-family:
        'Plus Jakarta Sans',
        sans-serif;

    font-size:
        clamp(28px,3vw,42px);

    line-height: 1.15;

    letter-spacing: -1.5px;
}

.page-content h3 {

    margin-top: 38px;
    margin-bottom: 12px;

    font-family:
        'Plus Jakarta Sans',
        sans-serif;

    font-size: 22px;

    line-height: 1.3;
}

.page-content p {

    margin-bottom: 18px;

    color: var(--text-light);

    font-size: 15px;

    line-height: 1.8;
}

.page-content p:last-child {
    margin-bottom: 0;
}


/* ============================================================
   23. COMMON PAGE SECTIONS
   ============================================================ */

.page-section {

    padding: 70px 0;
}

.page-section + .page-section {

    border-top:
        1px solid var(--border);
}

.page-section-title {
    margin-bottom: 35px;
}

.page-section-title h2 {

    margin-bottom: 14px;

    font-family:
        'Plus Jakarta Sans',
        sans-serif;

    font-size:
        clamp(30px,3.5vw,45px);

    line-height: 1.12;

    letter-spacing: -1.7px;
}

.page-section-title p {

    max-width: 700px;

    margin: 0;

    color: var(--text-light);

    font-size: 15px;

    line-height: 1.75;
}


/* ============================================================
   24. COMMON CONTENT BLOCK
   ============================================================ */

.content-block {
    margin-bottom: 40px;
}

.content-block:last-child {
    margin-bottom: 0;
}

.content-block h2,
.content-block h3 {
    color: var(--text);
}

.content-block p {
    color: var(--text-light);
}

.content-block .lead {

    color: var(--text);

    font-size: 18px;
    font-weight: 600;

    line-height: 1.7;
}


/* ============================================================
   25. COMMON FEATURE LIST
   ============================================================ */

.feature-list {

    display: grid;

    gap: 13px;

    margin: 25px 0;
}

.feature-list li {

    position: relative;

    padding:
        14px 16px 14px 43px;

    border:
        1px solid var(--border);

    border-radius: var(--radius-sm);

    background: var(--surface);

    color: var(--text-light);

    font-size: 14px;

    line-height: 1.6;
}

.feature-list li::before {

    content: '✓';

    position: absolute;

    left: 16px;
    top: 50%;

    width: 20px;
    height: 20px;

    display: flex;

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

    transform: translateY(-50%);

    border-radius: 50%;

    background: var(--primary-soft);

    color: var(--primary);

    font-size: 11px;
    font-weight: 800;
}


/* ============================================================
   26. COMMON INFO GRID
   ============================================================ */

.info-grid {

    display: grid;

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

    gap: 20px;

    margin-top: 40px;
}

.info-card {

    padding: 28px;

    border:
        1px solid var(--border);

    border-radius: var(--radius-md);

    background: var(--surface);

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}

.info-card:hover {

    transform: translateY(-4px);

    border-color:
        rgba(109,40,217,0.20);

    box-shadow: var(--shadow-sm);
}

.info-card h3 {

    margin: 0 0 10px;

    font-size: 18px;
}

.info-card p {

    margin: 0;

    font-size: 14px;
}


/* ============================================================
   27. COMMON STATS SECTION
   ============================================================ */

.stats-section {

    padding: 65px 0;

    background: var(--surface);
}

.stats-grid {

    display: grid;

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

    gap: 18px;
}

.stat-card {

    padding: 30px;

    border:
        1px solid var(--border);

    border-radius: var(--radius-md);

    background: var(--white);

    box-shadow: var(--shadow-xs);

    text-align: center;
}

.stat-card strong {

    display: block;

    margin-bottom: 5px;

    color: var(--primary);

    font-family:
        'Plus Jakarta Sans',
        sans-serif;

    font-size:
        clamp(30px,4vw,46px);

    line-height: 1;

    font-weight: 800;
}

.stat-card span {

    display: block;

    color: var(--text-light);

    font-size: 12px;
    font-weight: 600;
}


/* ============================================================
   28. COMMON HIGHLIGHT BOX
   ============================================================ */

.highlight-box {

    margin: 45px 0;

    padding: 30px 32px;

    border-left:
        4px solid var(--primary);

    border-radius:
        0 var(--radius-md)
        var(--radius-md) 0;

    background: var(--primary-soft);
}

.highlight-box p {

    margin: 0;

    color: var(--primary-dark);

    font-size: 17px;
    font-weight: 600;

    line-height: 1.7;
}


/* ============================================================
   29. COMMON CARDS GRID
   ============================================================ */

.cards-grid {

    display: grid;

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

    gap: 20px;
}

.card {

    padding: 30px;

    border:
        1px solid var(--border);

    border-radius: var(--radius-md);

    background: var(--white);

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}

.card:hover {

    transform: translateY(-5px);

    border-color:
        rgba(109,40,217,0.20);

    box-shadow: var(--shadow-md);
}

.card h3 {

    margin-bottom: 12px;

    font-size: 19px;
}

.card p {

    margin: 0;

    color: var(--text-light);

    font-size: 14px;

    line-height: 1.75;
}


/* ============================================================
   30. COMMON TABLE
   ============================================================ */

.table-wrapper {

    width: 100%;

    overflow-x: auto;

    margin: 30px 0;

    border:
        1px solid var(--border);

    border-radius: var(--radius-md);
}

.table {

    width: 100%;

    border-collapse: collapse;

    min-width: 650px;
}

.table th {

    padding: 15px 18px;

    background: var(--primary-deep);

    color: var(--white);

    font-size: 12px;
    font-weight: 700;

    text-align: left;
}

.table td {

    padding: 14px 18px;

    border-top:
        1px solid var(--border);

    color: var(--text-light);

    font-size: 13px;
}

.table tbody tr:hover {
    background: var(--surface);
}


/* ============================================================
   31. COMMON PAGE CTA
   ============================================================ */

.page-cta {

    margin-top: 55px;

    padding: 35px;

    border-radius: var(--radius-md);

    background:
        linear-gradient(
            135deg,
            var(--primary-deep),
            var(--primary)
        );

    color: var(--white);
}

.page-cta h2 {

    margin-bottom: 12px;

    color: var(--white);
}

.page-cta p {

    max-width: 700px;

    margin-bottom: 22px;

    color:
        rgba(255,255,255,0.72);
}


/* ============================================================
   32. SIDEBAR BLOCKS
   ============================================================ */

.sidebar-block {

    width: 100%;

    margin-bottom: 24px;
}

.sidebar-block:last-child {
    margin-bottom: 0;
}


/* ============================================================
   33. ADS
   ============================================================ */

.ad-container {

    width: 100%;

    padding: 20px 0;

    text-align: center;
}

.ad-label {

    margin-bottom: 8px;

    color: #aaa;

    font-size: 9px;

    letter-spacing: 1px;

    text-transform: uppercase;
}

.ad-slot {
    min-height: 90px;
}

.ad-content-placeholder {

    position: relative;

    min-height: 260px;

    display: flex;

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

    overflow: hidden;

    border:
        1px dashed rgba(150,120,0,0.35);

    border-radius: var(--radius-md);

    background: #fff9c9;

    color:
        rgba(90,75,0,0.55);
}

.ad-content-placeholder::before {

    content: '';

    position: absolute;

    inset: 12px;

    border:
        1px dashed rgba(150,120,0,0.18);

    border-radius: 12px;
}

.ad-content-placeholder span {

    position: relative;

    z-index: 2;

    font-size:
        clamp(22px,3vw,36px);

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;

    opacity: 0.65;
}


/* ============================================================
   34. BLOG PLACEHOLDER
   ============================================================ */

.blogs-placeholder {

    position: relative;

    min-height: 330px;

    display: flex;

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

    overflow: hidden;

    border:
        1px dashed rgba(150,40,110,0.28);

    border-radius: var(--radius-md);

    background: #f8dff1;

    color:
        rgba(130,30,95,0.40);
}

.blogs-placeholder::before {

    content: '';

    position: absolute;

    inset: 14px;

    border:
        1px dashed rgba(130,30,95,0.16);

    border-radius: 12px;
}

.blogs-placeholder span {

    position: relative;

    z-index: 2;

    font-size:
        clamp(24px,3vw,40px);

    font-weight: 800;

    letter-spacing: 3px;

    text-transform: uppercase;

    opacity: 0.65;
}


/* ============================================================
   35. FORMS — COMMON
   ============================================================ */

.form-grid {

    display: grid;

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

    gap: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group.full {
    grid-column: 1 / -1;
}

.form-label {

    display: block;

    margin-bottom: 7px;

    color: var(--text);

    font-size: 13px;
    font-weight: 700;
}

.form-control {

    width: 100%;

    min-height: 48px;

    padding: 11px 14px;

    border:
        1px solid var(--border-dark);

    border-radius: var(--radius-sm);

    outline: none;

    background: var(--white);

    color: var(--text);

    font-size: 14px;

    transition:
        border-color var(--transition),
        box-shadow var(--transition);
}

.form-control:focus {

    border-color: var(--primary);

    box-shadow:
        0 0 0 3px rgba(109,40,217,0.10);
}

textarea.form-control {

    min-height: 140px;

    resize: vertical;
}


/* ============================================================
   36. FOOTER
   ============================================================ */

.site-footer {

    position: relative;

    width: 100%;

    margin: 0;

    padding: 70px 0 0;

    overflow: hidden;

    background: var(--primary-deep);

    color: rgba(255,255,255,0.72);

}


/* ------------------------------------------------------------
   FOOTER DECORATIVE BACKGROUND
   ------------------------------------------------------------ */

.site-footer::before {

    content: '';

    position: absolute;

    top: -180px;

    right: -120px;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    background: rgba(139,92,246,0.12);

    pointer-events: none;

}


.site-footer::after {

    content: '';

    position: absolute;

    left: -150px;

    bottom: -220px;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    background: rgba(109,40,217,0.16);

    pointer-events: none;

}


/* ------------------------------------------------------------
   FOOTER CONTAINER
   ------------------------------------------------------------ */

.site-footer > .container {

    position: relative;

    z-index: 2;

}


/* ============================================================
   FOOTER GRID
   ============================================================ */

.footer-grid {

    width: 100%;

    display: grid !important;

    grid-template-columns:
        minmax(0, 1.8fr)
        minmax(130px, 0.8fr)
        minmax(130px, 0.8fr)
        minmax(220px, 1.1fr);

    align-items: start;

    column-gap: 55px;

    row-gap: 40px;

    padding: 0 0 55px;

}


/*
   IMPORTANT:
   Every footer column must remain inside its own grid cell.
*/

.footer-grid > .footer-column {

    min-width: 0;

    width: 100%;

}


/*
   Remove any old rule that makes the first column
   occupy the entire row.
*/

.footer-grid > :first-child {

    grid-column: auto !important;

}


/* ------------------------------------------------------------
   FOOTER BRAND
   ------------------------------------------------------------ */

.footer-brand {

    display: inline-flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 7px;

    margin: 0 0 20px;

    color: var(--white);

}


.footer-brand-logo {

    display: block;

    font-family:
        'SoftLine',
        sans-serif;

    font-size: 50px;

    font-weight: 400;

    letter-spacing: -14px;

    line-height: 0.72;

    color: var(--white);

    white-space: nowrap;

    transform: scaleX(0.92);

    transform-origin: left center;

}


.footer-brand-name {

    display: block;

    color: var(--white);

    font-family:
        'Plus Jakarta Sans',
        sans-serif;

    font-size: 15px;

    font-weight: 600;

    line-height: 1.2;

}


.footer-description {

    max-width: 410px;

    margin: 0;

    color: rgba(255,255,255,0.60);

    font-size: 14px;

    line-height: 1.8;

}


/* ------------------------------------------------------------
   FOOTER HEADINGS
   ------------------------------------------------------------ */

.footer-heading {

    margin: 4px 0 20px;

    color: var(--white);

    font-family:
        'Plus Jakarta Sans',
        sans-serif;

    font-size: 18px;

    font-weight: 750;

    line-height: 1.3;

}


/* ------------------------------------------------------------
   FOOTER LINKS
   ------------------------------------------------------------ */

.footer-links {

    display: grid;

    gap: 9px;

    margin: 0;

    padding: 0;

    list-style: none;

}


.footer-links li {

    margin: 0;

    padding: 0;

}


.footer-links a {

    display: inline-flex;

    align-items: center;

    min-height: 28px;

    color: rgba(255,255,255,0.60);

    font-size: 14px;

    line-height: 1.5;

    transition:
        color var(--transition),
        transform var(--transition);

}


.footer-links a:hover {

    color: var(--white);

    transform: translateX(3px);

}


/* ------------------------------------------------------------
   FOOTER CONTACT
   ------------------------------------------------------------ */

.footer-contact {

    display: grid;

    gap: 13px;

    margin: 0;

    padding: 0;

}


.footer-contact-item {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    color: rgba(255,255,255,0.62);

    font-size: 13px;

    line-height: 1.6;

}


.footer-contact-item strong {

    display: block;

    color: var(--white);

    font-weight: 650;

}


.footer-contact-item a {

    color: inherit;

    transition: color var(--transition);

}


.footer-contact-item a:hover {

    color: var(--white);

}


/* ------------------------------------------------------------
   FOOTER SOCIAL
   ------------------------------------------------------------ */

.footer-social {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 9px;

    margin-top: 22px;

}


.footer-social a {

    width: 36px;

    height: 36px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(255,255,255,0.14);

    border-radius: 50%;

    background: rgba(255,255,255,0.05);

    color: rgba(255,255,255,0.78);

    font-size: 13px;

    transition:
        transform var(--transition),
        background var(--transition),
        border-color var(--transition),
        color var(--transition);

}


.footer-social a:hover {

    transform: translateY(-3px);

    border-color: rgba(255,255,255,0.35);

    background: rgba(255,255,255,0.12);

    color: var(--white);

}


/* ============================================================
   FOOTER BOTTOM
   ============================================================ */

.footer-bottom {

    position: relative;

    z-index: 2;

    width: 100%;

    min-height: 72px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    border-top: 1px solid rgba(255,255,255,0.10);

}


.footer-copyright {

    margin: 0;

    color: rgba(255,255,255,0.46);

    font-size: 11px;

    line-height: 1.6;

}


.footer-legal {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    flex-wrap: wrap;

    gap: 20px;

}


.footer-legal a {

    color: rgba(255,255,255,0.50);

    font-size: 11px;

    transition: color var(--transition);

}


.footer-legal a:hover {

    color: var(--white);

}


/* ============================================================
   ALTERNATIVE FOOTER CLASSES
   ============================================================ */

.footer-inner {

    position: relative;

    z-index: 2;

    width: min(
        calc(100% - 48px),
        var(--container)
    );

    margin-inline: auto;

}


.footer-content {

    width: 100%;

    display: grid !important;

    grid-template-columns:
        minmax(0, 1.8fr)
        minmax(130px, 0.8fr)
        minmax(130px, 0.8fr)
        minmax(220px, 1.1fr);

    align-items: start;

    column-gap: 55px;

    row-gap: 40px;

}


.footer-content > * {

    min-width: 0;

}


.footer-title {

    color: var(--white);

    font-family:
        'Plus Jakarta Sans',
        sans-serif;

}


.footer-text {

    color: rgba(255,255,255,0.60);

    font-size: 14px;

    line-height: 1.8;

}


/* ============================================================
   FOOTER RESPONSIVE — 1100PX
   ============================================================ */

@media (max-width: 1100px) {

    .footer-grid,
    .footer-content {

        grid-template-columns:
            minmax(0, 1.5fr)
            minmax(120px, 0.8fr)
            minmax(120px, 0.8fr)
            minmax(190px, 1fr);

        column-gap: 30px;

    }

}


/* ============================================================
   FOOTER RESPONSIVE — 900PX
   ============================================================ */

@media (max-width: 900px) {

    .footer-grid,
    .footer-content {

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

        column-gap: 35px;

        row-gap: 40px;

    }


    /*
       Brand takes full first row only on tablet.
    */

    .footer-grid > :first-child,
    .footer-content > :first-child {

        grid-column: 1 / -1 !important;

    }


    .footer-description {

        max-width: 600px;

    }

}


/* ============================================================
   FOOTER RESPONSIVE — 820PX
   ============================================================ */

@media (max-width: 820px) {

    .footer-bottom {

        align-items: flex-start;

        flex-direction: column;

        justify-content: center;

        gap: 10px;

        padding: 18px 0;

    }


    .footer-legal {

        justify-content: flex-start;

    }

}


/* ============================================================
   FOOTER RESPONSIVE — 600PX
   ============================================================ */

@media (max-width: 600px) {

    .site-footer {

        padding: 55px 0 0;

    }


    .footer-grid,
    .footer-content {

        grid-template-columns: 1fr;

        gap: 32px;

        padding-bottom: 38px;

    }


    .footer-grid > :first-child,
    .footer-content > :first-child {

        grid-column: auto !important;

    }


    .footer-brand-logo {

        font-size: 42px;

        letter-spacing: -17px;

    }


    .footer-description {

        max-width: 100%;

        font-size: 13px;

    }


    .footer-heading {

        margin-bottom: 14px;

        font-size: 17px;

    }


    .footer-links {

        gap: 8px;

    }


    .footer-links a {

        font-size: 13px;

    }


    .footer-bottom {

        min-height: auto;

        padding: 18px 0;

    }


    .footer-copyright {

        font-size: 10px;

    }


    .footer-legal {

        gap: 12px;

    }


    .footer-legal a {

        font-size: 10px;

    }

}


/* ============================================================
   FOOTER RESPONSIVE — 420PX
   ============================================================ */

@media (max-width: 420px) {

    .footer-grid,
    .footer-content {

        gap: 28px;

    }

}


/* ============================================================
   37. BACK TO TOP
   ============================================================ */

.back-to-top {

    position: fixed;

    right: 25px;
    bottom: 25px;

    z-index: 900;

    width: 45px;
    height: 45px;

    display: flex;

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

    border: 0;

    border-radius: 50%;

    background: var(--primary);

    color: var(--white);

    box-shadow: var(--shadow-md);

    opacity: 0;

    visibility: hidden;

    transform: translateY(10px);

    transition:
        opacity var(--transition),
        visibility var(--transition),
        transform var(--transition),
        background var(--transition);
}

.back-to-top.visible {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--primary-dark);
}


/* ============================================================
   38. RESPONSIVE — 1100PX
   ============================================================ */

@media (max-width: 1100px) {

    .nav-list {
        gap: 20px;
    }

    .services-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .expertise-list {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .cards-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .stats-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .page-layout {

        grid-template-columns:
            160px
            minmax(0,1fr)
            190px;

        gap: 20px;
    }

    .workplaces-inner {

        grid-template-columns:
            minmax(0,0.8fr)
            minmax(0,1.2fr);

        gap: 50px;
    }

    .footer-grid {

        grid-template-columns:
            1.2fr
            repeat(3,minmax(120px,0.8fr));

        gap: 35px;
    }

    .footer-content {

        grid-template-columns:
            1.2fr
            repeat(3,minmax(120px,0.8fr));

        gap: 35px;
    }
}


/* ============================================================
   39. RESPONSIVE — 900PX
   ============================================================ */

@media (max-width: 900px) {

    .container {

        width:
            min(
                calc(100% - 36px),
                var(--container)
            );
    }

    .page-layout {

        grid-template-columns: 1fr;

        gap: 30px;

        padding-top: 35px;
    }

    .page-sidebar-left,
    .page-sidebar-right {

        position: static;
    }

    .page-sidebar-left {
        order: 2;
    }

    .page-main {
        order: 1;
    }

    .page-sidebar-right {
        order: 3;
    }

    .page-sidebar-left,
    .page-sidebar-right {

        display: grid;

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

        gap: 20px;
    }

    .sidebar-block {
        margin-bottom: 0;
    }

    .intro-grid,
    .about-home-grid,
    .workplaces-inner {

        grid-template-columns: 1fr;

        gap: 50px;
    }

    .workplaces-slider {
        width: 100%;
    }

    .expertise-header {

        grid-template-columns: 1fr;

        gap: 24px;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-group.full {
        grid-column: auto;
    }

    /* Footer tablet */

    .footer-grid {

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

        gap: 40px;
    }

    .footer-grid > :first-child {
        grid-column: 1 / -1;
    }

    .footer-content {

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

        gap: 40px;
    }

    .footer-content > :first-child {
        grid-column: 1 / -1;
    }
}


/* ============================================================
   40. MOBILE NAV — 820PX
   ============================================================ */

@media (max-width: 820px) {

    :root {
        --header-height: 76px;
    }

    .header-container {
        min-height: 76px;
    }

    .mobile-menu-toggle {
        display: block;
    }

    .primary-navigation {

        position: absolute;

        top: calc(100% - 1px);

        left: 18px;
        right: 18px;

        display: none;

        padding: 12px;

        border-radius: 16px;

        background:
            rgba(20,8,42,0.98);

        box-shadow:
            0 25px 60px rgba(0,0,0,0.25);
    }

    .primary-navigation.mobile-open {
        display: block;
    }

    .nav-list {

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 3px;
    }

    .nav-item {
        width: 100%;
    }

    .nav-link {

        width: 100%;

        min-height: 46px;

        padding: 0 13px;

        border-radius: 9px;
    }

    .nav-link::after {
        display: none;
    }

    .nav-link:hover,
    .nav-link.active {

        background:
            rgba(255,255,255,0.08);
    }

    .hero-section {
        min-height: 760px;
    }

    .hero-container {

        padding-top: 120px;

        padding-bottom: 55px;
    }

    .hero-content h1 {

        font-size:
            clamp(40px,9vw,58px);

        letter-spacing: -2px;
    }

    .hero-description {
        font-size: 15px;
    }

    .hero-trust {

        grid-template-columns: 1fr;

        gap: 15px;
    }

    .hero-trust-divider {
        display: none;
    }

    .hero-trust-item {
        padding: 0;
    }

    .expertise-header h2 {
        font-size: 42px;
    }

    .page-header {

        padding:
            calc(var(--header-height) + 52px)
            0
            40px;
    }

    .page-content {
        padding: 50px 0;
    }

    .page-section {
        padding: 55px 0;
    }

    .page-sidebar-left,
    .page-sidebar-right {

        display: grid;

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

    .cta-inner {

        flex-direction: column;

        align-items: flex-start;
    }

    /* --------------------------------------------------------
       FOOTER — TABLET / MOBILE
       -------------------------------------------------------- */

    .site-footer {
        padding: 60px 0 0;
    }

    .footer-grid {

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

        gap: 35px;

        padding-bottom: 42px;
    }

    .footer-grid > :first-child {
        grid-column: 1 / -1;
    }

    .footer-bottom {

        min-height: auto;

        align-items: flex-start;

        flex-direction: column;

        justify-content: center;

        gap: 12px;

        padding: 18px 0;
    }

    .footer-legal {

        justify-content: flex-start;
    }

    .footer-content {

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

        gap: 35px;
    }

    .footer-content > :first-child {
        grid-column: 1 / -1;
    }
}


/* ============================================================
   41. MOBILE — 600PX
   ============================================================ */

@media (max-width: 600px) {

    .container {
        width: calc(100% - 30px);
    }

    .section-padding {

        padding-top: 75px;

        padding-bottom: 75px;
    }

    .site-brand-logo {

        font-size: 40px;

        letter-spacing: -21px;
    }

    .site-brand-name {
        font-size: 13px;
    }

    .hero-section {
        min-height: 820px;
    }

    .hero-content h1 {

        font-size: 42px;

        line-height: 1.08;
    }

    .hero-eyebrow {

        font-size: 9px;

        letter-spacing: 1.4px;
    }

    .hero-description {

        font-size: 14px;

        line-height: 1.65;
    }

    .hero-actions {

        align-items: stretch;

        flex-direction: column;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .hero-trust-item strong {
        font-size: 19px;
    }

    .hero-trust-item span {
        font-size: 9px;
    }

    .intro-section {
        padding: 55px 0;
    }

    .section-heading {
        margin-bottom: 35px;
    }

    .services-grid,
    .expertise-list,
    .cards-grid,
    .info-grid {

        grid-template-columns: 1fr;
    }

    .service-card {
        min-height: auto;
    }

    .expertise-item {
        min-height: 190px;
    }

    .experience-badge {

        min-width: 125px;

        padding: 16px 18px;
    }

    .experience-badge strong {
        font-size: 27px;
    }

    .workplaces-section {
        padding: 75px 0;
    }

    .workplaces-slider {

        width: 100%;

        padding: 20px;

        border-radius: 22px;
    }

    .workplaces-slider-label {
        margin-bottom: 17px;
    }

    .workplace-slider-window {

        width: 100%;

        overflow: hidden;
    }

    .workplace-slide {

        width: 100%;

        min-height: 180px;

        padding: 20px;
    }

    .workplace-slide strong {

        max-width: 100%;

        font-size: 25px;
    }

    .workplace-slider-footer {

        gap: 12px;

        margin-top: 20px;
    }

    .workplace-slider-progress {
        min-width: 0;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .stat-card {
        padding: 22px 15px;
    }

    .stat-card strong {
        font-size: 30px;
    }

    .page-layout {

        width: calc(100% - 30px);

        padding-top: 25px;

        padding-bottom: 55px;
    }

    .page-sidebar-left,
    .page-sidebar-right {
        display: block;
    }

    .sidebar-block {
        margin-bottom: 18px;
    }

    .ad-content-placeholder {
        min-height: 180px;
    }

    .blogs-placeholder {
        min-height: 230px;
    }

    .page-header {

        padding:
            calc(var(--header-height) + 40px)
            0
            35px;
    }

    .page-header h1 {

        font-size: 42px;

        letter-spacing: -2px;
    }

    .page-header > p {
        font-size: 15px;
    }

    .page-content {
        padding: 45px 0;
    }

    .page-content h2 {
        font-size: 30px;
    }

    .page-section {
        padding: 45px 0;
    }

    .highlight-box {
        padding: 24px;
    }

    .page-cta {
        padding: 25px;
    }


    /* --------------------------------------------------------
       FOOTER — MOBILE
       -------------------------------------------------------- */

    .site-footer {

        width: 100%;

        padding: 55px 0 0;
    }

    .site-footer > .container {

        width: calc(100% - 30px);

        margin-inline: auto;
    }

    .footer-grid {

        grid-template-columns: 1fr;

        gap: 32px;

        padding-bottom: 38px;
    }

    .footer-grid > :first-child {
        grid-column: auto;
    }

    .footer-brand-logo {

        font-size: 42px;

        letter-spacing: -17px;
    }

    .footer-description {

        max-width: 100%;

        font-size: 13px;
    }

    .footer-heading {
        margin-bottom: 14px;
    }

    .footer-links {
        gap: 8px;
    }

    .footer-links a {
        font-size: 13px;
    }

    .footer-bottom {

        width: 100%;

        min-height: auto;

        padding: 18px 0;
    }

    .footer-copyright {

        font-size: 10px;

        max-width: 100%;
    }

    .footer-legal {

        width: 100%;

        justify-content: flex-start;

        gap: 12px;
    }

    .footer-legal a {
        font-size: 10px;
    }

    .footer-content {

        grid-template-columns: 1fr;

        gap: 28px;
    }

    .footer-content > :first-child {
        grid-column: auto;
    }

    .back-to-top {

        right: 15px;

        bottom: 15px;

        width: 40px;

        height: 40px;
    }
}


/* ============================================================
   42. EXTRA SMALL — 420PX
   ============================================================ */

@media (max-width: 420px) {

    .container {
        width: calc(100% - 24px);
    }

    .site-brand-logo {
        font-size: 36px;
    }

    .site-brand-name {
        font-size: 12px;
    }

    .header-container {
        gap: 15px;
    }

    .mobile-menu-toggle {

        width: 40px;

        height: 40px;
    }

    .hero-content h1 {
        font-size: 38px;
    }

    .page-header {

        padding:
            calc(var(--header-height) + 34px)
            0
            30px;
    }

    .page-header h1 {
        font-size: 38px;
    }

    .workplaces-slider {
        padding: 16px;
    }

    .workplace-slide {

        padding: 18px;

        min-height: 165px;
    }

    .workplace-slide strong {
        font-size: 23px;
    }

    .footer-grid {
        gap: 28px;
    }

    .footer-brand-logo {
        font-size: 38px;
    }

    .footer-contact-item {
        font-size: 12px;
    }
}


/* ============================================================
   43. REDUCED MOTION
   ============================================================ */

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

    *,
    *::before,
    *::after {

        scroll-behavior: auto !important;

        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;
    }
}