/* ==========================================================================
   BIRITEX TECHNOLOGIES
   Main Stylesheet
   Version: 2.0
   ========================================================================== */


/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */

:root {

    /* Brand */
    --color-primary: #3bad9a;
    --color-primary-dark: #07473d;

    --color-dark: #001a3a;
    --color-dark-deep: #001227;
    --color-dark-soft: #002552;

    --color-white: #ffffff;
    --color-black: #001024;

    --color-surface: #5ec3b209;
    --color-surface-soft: #FAFAF8;

    --color-line: #E1E4E2;
    --color-line-dark: rgba(47, 53, 59, .15);

    --color-text: #2F353B;
    --color-text-soft: #687078;
    --color-text-light: #8B9298;

    --color-success: #29996D;
    --color-warning: #D99A27;
    --color-danger: #C94844;

    /* Compatibility aliases */
    --ink: #2F353B;
    --muted: #687078;
    --line: #E1E4E2;
    --soft: #F5F6F4;
    --teal: #D6534D;
    --teal2: #b9443f;
    --green: #29996D;
    --color: #2F353B;

    /* Layout */
    --header-height: 72px;

    --content-padding: clamp(18px, 5vw, 76px);

    --content-max-width: 1440px;

    /* Radius */
    --radius-sm: 0px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 26px;
    --radius-pill: 999px;

    /* Shadows */
    --shadow-xs:
        0 2px 8px rgba(47, 53, 59, .05);

    --shadow-card:
        0 14px 40px rgba(47, 53, 59, .07);

    --shadow-card-hover:
        0 24px 60px rgba(47, 53, 59, .12);

    --shadow-modal:
        0 30px 80px rgba(0, 0, 0, .25);

    /* Motion */
    --ease:
        cubic-bezier(.22, 1, .36, 1);

    --transition-fast:
        .2s var(--ease);

    --transition:
        .35s var(--ease);

    --transition-slow:
        .6s var(--ease);
}

.logout {
    display: block;
    margin-top: 10px;
    padding: 9px 12px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 10px;
    background: rgba(214,83,77,.9);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.logout:hover {
    background: #b9433d;
}


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

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

.os-shell {
    display: block;
    min-height: 100vh;
}

.os-sidebar {
    position: relative;
    width: 100%;
    min-width: 0;
    height: auto;
    overflow: visible;
}

.os-brand {
    padding: 14px 16px;
}

.os-nav {
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
    padding: 10px 12px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.os-nav-label {
    display: none;
}

.os-nav button {
    flex: 0 0 auto;
    width: auto;
    min-width: 92px;
    min-height: 42px;
    justify-content: center;
    padding: 8px 11px;
    text-align: center;
}

.os-nav button span:not(.os-nav-icon) {
    font-size: 11px;
}

.os-sidebar-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
}

.os-sidebar-footer .os-system-status {
    flex: 1;
}

.os-sidebar-footer .logout {
    flex: 0 0 auto;
    min-width: 82px;
    margin-top: 0;
}

.os-workspace {
    padding: 0 12px 32px;
}

html {
    width: 100%;
    max-width: 100%;

    scroll-behavior: smooth;

    overflow-x: clip;
}

body {
    width: 100%;
    max-width: 100%;

    margin: 0;

    background: var(--color-surface);

    color: var(--color-text);

    font-family:
        Poppins,
        Arial,
        Helvetica,
        sans-serif;

    line-height: 1.5;

    overflow-x: clip;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body,
button,
input,
textarea,
select {
    font-family:
        Poppins,
        Arial,
        Helvetica,
        sans-serif;
}

img,
video,
svg,
canvas {
    display: block;

    max-width: 100%;
}

img {
    height: auto;
}

video {
    max-width: none;
}

iframe {
    max-width: 100%;
}

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

button {
    cursor: pointer;
}

a {
    color: inherit;

    text-decoration: none;

    overflow-wrap: anywhere;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

p {
    margin-top: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--color-dark);
}

::selection {
    background: var(--color-primary);
    color: #fff;
}



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

:focus-visible {
    outline:
        3px solid rgba(214, 83, 77, .35);

    outline-offset: 3px;
}

button:disabled {
    cursor: not-allowed;

    opacity: .55;
}


/* ==========================================================================
   04. GLOBAL COMPONENTS
   ========================================================================== */

.primary-btn,
.secondary-btn,
.menu-toggle,
.icon-btn,
.mini-btn {

    display: inline-flex;

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

    border: 1px solid transparent;

    font-weight: 700;

    text-decoration: none;

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


/* Buttons */

.primary-btn,
.secondary-btn,
.menu-toggle {

    min-height: 44px;

    padding:
        0 17px;

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

.primary-btn {

    background:
        var(--color-primary);

    color:
        #fff;

    box-shadow:
        0 8px 20px rgba(214, 83, 77, .18);
}

.primary-btn:hover {

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

    transform:
        translateY(-3px);

    box-shadow:
        0 14px 28px rgba(214, 83, 77, .24);
}


.secondary-btn {

    background:
        rgba(255,255,255,.92);

    border-color:
        var(--color-line);

    color:
        var(--color-dark);
}

.secondary-btn:hover {

    border-color:
        var(--color-primary);

    color:
        var(--color-primary);

    transform:
        translateY(-3px);
}


.primary-btn:active,
.secondary-btn:active {

    transform:
        translateY(-1px);
}


/* Icon buttons */

.icon-btn {

    width: 40px;
    min-height: 40px;

    padding: 0;

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

    background:
        var(--color-surface);

    border-color:
        var(--color-line);
}

.icon-btn:hover {

    background:
        var(--color-primary);

    border-color:
        var(--color-primary);

    color:
        #fff;

    transform:
        translateY(-2px);
}


/* Mini button */

.mini-btn {

    min-height: 32px;

    padding:
        0 10px;

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

    background:
        #fff;

    border-color:
        var(--color-line);

    font-size:
        12px;
}


/* Button groups */

.button-row,
.link-row {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

    max-width: 100%;
}


/* ==========================================================================
   05. PAGE CONTAINER
   ========================================================================== */

.page-band {

    width: 100%;
    max-width: 100%;

    padding:
        clamp(60px, 7vw, 100px)
        var(--content-padding);

    min-width: 0;
}

.page-band.slim {

    padding-top:
        0;

    padding-bottom:
        clamp(35px, 5vw, 65px);
}

.page-band > * {

    max-width:
        var(--content-max-width);

    margin-left:
        auto;

    margin-right:
        auto;

    min-width:
        0;
}


/* ==========================================================================
   06. TYPOGRAPHY
   ========================================================================== */

.eyebrow {

    margin:
        0 0 12px;

    color:
        var(--color-primary);

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        .12em;

    line-height:
        1.4;

    text-transform:
        uppercase;
}


.section-head {

    max-width:
        780px;

    margin-bottom:
        35px;
}

.section-head.centered {

    margin-left:
        auto;

    margin-right:
        auto;

    text-align:
        center;
}

.section-head h2,
.subhero h1,
.contact-page h1 {

    margin:
        0 0 18px;

    font-size:
        clamp(34px, 5vw, 60px);

    line-height:
        1.04;

    letter-spacing:
        -.035em;
}

.section-head p {

    color:
        var(--color-text-soft);

    line-height:
        1.75;
}


/* ==========================================================================
   07. SHARED CARDS
   ========================================================================== */

.feature-grid article,
.story-panels article,
.image-card-grid article,
.process-grid article,
.contact-form,
.panel,
.metric-grid article,
.proof-grid article {

    background:
        var(--color-white);

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

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

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



.search-icon:hover{
    color: var(--color-primary);
}

/* ==========================================================================
   08. HEADER
   ========================================================================== */

.site-header {

    position:
        sticky;

    top:
        0;

    z-index:
        100;

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

    width:
        100%;

    padding:
        10px var(--content-padding);

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    background:
        rgba(255,255,255,.94);

    border-bottom:
        1px solid rgba(225,228,226,.85);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);
}


/* Brand */

.brand-mark {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    min-width:
        0;

    font-size:
        20px;

    font-weight:
        600;
}

.brand-mark img {

    width:
        46px;

    height:
        46px;

    object-fit:
        contain;

    flex:
        0 0 auto;
}

.finance-reconciliation {
    margin-top: 1rem;
    padding: .75rem 1rem;
    border-radius: 8px;
    background: #f3f5f6;
    color: #425466;
    font-size: .9rem;
}

.finance-reconciliation.is-balanced {
    background: #e8f7ef;
    color: #176b42;
}

.finance-reconciliation.is-unbalanced {
    background: #fff0ed;
    color: #a33a2b;
}

.finance-reconciliation.is-unavailable {
    background: #fff8e6;
    color: #855d00;
}

.finance-account-balances {
    margin-top: 1rem;
    border-top: 1px solid rgba(0, 18, 39, .1);
}

.finance-account-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .65rem 0;
    border-bottom: 1px solid rgba(0, 18, 39, .08);
}

.finance-account-row small {
    color: #6b7785;
    text-transform: capitalize;
}

.finance-page-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    border: 1px solid rgba(0, 18, 39, .08);
    border-radius: 18px;
    background: linear-gradient(135deg, #071d31 0%, #123d55 100%);
    color: #fff;
    box-shadow: 0 14px 30px rgba(7, 29, 49, .12);
}

.finance-tab-panel.is-hidden {
    display: none;
}

.finance-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1.25rem 0;
    padding: .4rem;
    border: 1px solid rgba(0, 18, 39, .08);
    border-radius: 12px;
    background: #f8fafb;
}

.finance-tab {
    min-height: 40px;
    padding: .55rem .85rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #536272;
    cursor: pointer;
    font-weight: 700;
}

.finance-tab:hover,
.finance-tab.is-active {
    background: #071d31;
    color: #fff;
}

.finance-page-heading h2 {
    max-width: 680px;
    margin: 0 0 .5rem;
    font-size: clamp(1.5rem, 2.5vw, 2.15rem);
}

.finance-page-heading p:not(.eyebrow) {
    max-width: 700px;
    margin: 0;
    color: rgba(255,255,255,.72);
}

.finance-page-heading h2 {
    color: #fff;
}

.finance-page-heading .eyebrow {
    color: #ffb3a1;
}

.finance-page-heading .finance-reconciliation {
    min-width: 280px;
    margin-top: .25rem;
}

.finance-kpi {
    min-height: 126px;
    position: relative;
    overflow: hidden;
    border-top: 3px solid var(--color-primary);
    box-shadow: 0 8px 20px rgba(0, 18, 39, .06);
}

.finance-kpi strong {
    display: block;
    margin: .45rem 0 .3rem;
    font-size: 1.5rem;
}

.finance-kpi small,
.form-help {
    color: #6b7785;
    font-size: .82rem;
    line-height: 1.5;
}

.finance-panel {
    margin-top: 1.25rem;
}

.finance-category-form {
    display: grid;
    grid-template-columns: minmax(180px, 1.3fr) minmax(130px, .7fr) minmax(200px, 1fr) auto;
    gap: 1rem;
    align-items: end;
    padding: 1rem;
    margin: 1.25rem 0;
    border: 1px solid rgba(0, 18, 39, .08);
    border-radius: 12px;
    background: #f8fafb;
}

.finance-category-form label {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    color: #344454;
    font-size: .83rem;
    font-weight: 600;
}

.finance-category-form button {
    min-height: 44px;
}

.finance-workspace-grid {
    display: grid;
    grid-template-columns: minmax(320px, .9fr) minmax(0, 1.1fr);
    gap: 1.25rem;
    margin-top: 1.25rem;
}

.finance-workspace-grid .panel {
    min-width: 0;
}

.finance-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.25rem 0;
}

.finance-form-grid label,
.finance-transaction-form label,
.finance-date-filter label {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    color: #344454;
    font-size: .83rem;
    font-weight: 600;
}

.finance-form-grid input,
.finance-form-grid select,
.finance-transaction-form input,
.finance-transaction-form select,
.finance-date-filter input {
    min-height: 44px;
}

.finance-transaction-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    align-items: end;
    padding: 1rem;
    margin: 1.25rem 0;
    border: 1px solid rgba(0, 18, 39, .08);
    border-radius: 12px;
    background: #f8fafb;
}

.finance-transaction-form button {
    min-height: 44px;
}

.finance-date-filter {
    display: flex;
    align-items: end;
    gap: .65rem;
}

.finance-date-filter button {
    min-height: 42px;
}

.optional {
    color: #8793a0;
    font-weight: 400;
}

@media (max-width: 900px) {
    .finance-page-heading,
    .finance-date-filter {
        align-items: stretch;
        flex-direction: column;
    }

    .finance-page-heading .finance-reconciliation {
        min-width: 0;
    }

    .finance-workspace-grid {
        grid-template-columns: 1fr;
    }

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

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

@media (max-width: 560px) {
    .finance-form-grid,
    .finance-transaction-form,
    .finance-category-form {
        grid-template-columns: 1fr;
    }
}

.brand-mark span {

    display:
        block;

    color:
        var(--color-dark);

    font-size:
        clamp(20px, 2vw, 28px);

    font-weight:
        400;

    line-height:
        1;
}


/* Navigation */

.site-nav {

    display:
        flex;

    align-items:
        center;

    gap:
        clamp(14px, 2vw, 24px);

    color:
        var(--color-text-soft);

    font-size:
        14px;

    font-weight:
        600;
}

.site-nav a {

    position:
        relative;

    padding:
        9px 2px;

    white-space:
        nowrap;

    transition:
        color var(--transition-fast);
}

.site-nav a::after {

    content:
        "";

    position:
        absolute;

    right:
        0;

    bottom:
        0;

    left:
        0;

    height:
        2px;

    background:
        var(--color-primary);

    transform:
        scaleX(0);

    transform-origin:
        right;

    transition:
        transform var(--transition-fast);
}

.site-nav a:hover,
.site-nav a.is-active {

    color:
        var(--color-dark);
}

.site-nav a:hover::after,
.site-nav a.is-active::after {

    transform:
        scaleX(1);

    transform-origin:
        left;
}


/* Mobile menu */

.menu-toggle {

    display:
        none;

    flex:
        0 0 auto;
}


/* ==========================================================================
   09. HERO
   ========================================================================== */

.hero {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(300px, .92fr);

    align-items:
        center;

    gap:
        clamp(35px, 6vw, 90px);

    min-height:
        min(820px, calc(100svh - var(--header-height)));

    overflow:
        hidden;

    isolation:
        isolate;

    color:
        #fff;
}


/* Video */

.hero-video {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    max-width:
        none;

    object-fit:
        cover;

    object-position:
        center;

    z-index:
        -3;

    transform:
        scale(1.04);

    animation:
        heroVideoZoom 14s ease-out forwards;
}

@keyframes heroVideoZoom {

    from {
        transform: scale(1.09);
    }

    to {
        transform: scale(1.04);
    }
}


/* Video overlay */

.hero-overlay {

    position:
        absolute;

    inset:
        0;

    z-index:
        -2;

    background:
        linear-gradient(
            90deg,
            rgba(24,28,32,.90) 0%,
            rgba(24,28,32,.72) 48%,
            rgba(24,28,32,.48) 100%
        );
}


/* Hero content */

.hero-copy {

    position:
        relative;

    z-index:
        2;

    width:
        100%;

    max-width:
        760px;

    min-width:
        0;

    animation:
        heroContentReveal .9s var(--ease) both;
}

.hero-copy h1 {

    margin:
        0 0 22px;

    max-width:
        780px;

    color:
        #fff;

    font-size:
        clamp(42px, 6vw, 76px);

    line-height:
        .98;

    letter-spacing:
        -.045em;
}

.hero-copy p {

    max-width:
        700px;

    color:
        rgba(255,255,255,.76);

    font-size:
        clamp(15px, 1.5vw, 18px);

    line-height:
        1.75;
}

.hero-copy .eyebrow {

    color:
        var(--color-primary);
}

.hero-copy .button-row {

    margin-top:
        28px;
}


@keyframes heroContentReveal {

    from {
        opacity: 0;
        transform: translateY(35px);
    }

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


/* Hero trust */

.hero-trust {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin-top:
        28px;
}

.hero-trust span {

    padding:
        8px 12px;

    border:
        1px solid rgba(255,255,255,.18);

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

    background:
        rgba(255,255,255,.07);

    color:
        rgba(255,255,255,.78);

    font-size:
        12px;

    backdrop-filter:
        blur(8px);

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

.hero-trust span:hover {

    transform:
        translateY(-3px);

    background:
        rgba(255,255,255,.13);

    border-color:
        rgba(255,255,255,.35);
}


/* ==========================================================================
   10. HERO ANNOUNCEMENT CARD
   ========================================================================== */

.hero-announcement {

    position:
        relative;

    z-index:
        3;

    width:
        100%;

    max-width:
        520px;

    min-width:
        0;

    min-height:
        470px;

    margin-left:
        auto;

    padding:
        28px;

    overflow:
        hidden;

    border:
        1px solid rgba(255,255,255,.18);

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

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.15),
            rgba(255,255,255,.055)
        );

    color:
        #fff;

    box-shadow:
        0 30px 80px rgba(0,0,0,.28);

    backdrop-filter:
        blur(20px);

    -webkit-backdrop-filter:
        blur(20px);

    animation:
        heroCardReveal 1s .15s var(--ease) both;
}

@keyframes heroCardReveal {

    from {
        opacity: 0;
        transform:
            translateY(45px)
            scale(.96);
    }

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


/* Decorative glow */

.hero-announcement::before {

    content:
        "";

    position:
        absolute;

    width:
        240px;

    height:
        240px;

    top:
        -110px;

    right:
        -90px;

    border-radius:
        50%;

    background:
        rgba(214,83,77,.34);

    filter:
        blur(55px);

    pointer-events:
        none;
}

.hero-announcement::after {

    content:
        "";

    position:
        absolute;

    width:
        180px;

    height:
        180px;

    bottom:
        -110px;

    left:
        -80px;

    border-radius:
        50%;

    background:
        rgba(255,255,255,.10);

    filter:
        blur(45px);

    pointer-events:
        none;
}


/* Announcement top */

.announcement-top {

    position:
        relative;

    z-index:
        5;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    padding-bottom:
        20px;

    border-bottom:
        1px solid rgba(255,255,255,.13);
}

.announcement-status {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .14em;
}

.announcement-status i {

    display:
        block;

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--color-primary);

    box-shadow:
        0 0 0 5px rgba(214,83,77,.12);

    animation:
        statusPulse 2s infinite;
}

@keyframes statusPulse {

    0%,
    100% {
        box-shadow:
            0 0 0 4px rgba(214,83,77,.10);
    }

    50% {
        box-shadow:
            0 0 0 9px rgba(214,83,77,.02);
    }
}

.announcement-counter {

    color:
        rgba(255,255,255,.55);

    font-size:
        11px;
}


/* Slides */

.announcement-slides {

    position:
        relative;

    min-height:
        430px;
}

.announcement-slide {

    position:
        absolute;

    inset:
        0;

    z-index:
        1;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateX(25px);

    transition:
        opacity .6s ease,
        transform .6s var(--ease),
        visibility .6s ease;
}

.announcement-slide.is-active {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translateX(0);

    z-index:
        2;
}

.announcement-meta {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    margin-bottom:
        22px;
}

.announcement-meta span {

    color:
        var(--color-primary);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .13em;

    text-transform:
        uppercase;
}

.announcement-meta time {

    color:
        rgba(255,255,255,.48);

    font-size:
        10px;
}

.announcement-content > p:first-child {

    margin-bottom:
        10px;

    color:
        rgba(255,255,255,.55);

    font-size:
        12px;
}

.announcement-content h2 {

    margin:
        0 0 17px;

    color:
        #fff;

    font-size:
        clamp(27px, 4vw, 43px);

    line-height:
        1.05;

    letter-spacing:
        -.035em;
}

.announcement-content > p:last-of-type {

    max-width:
        420px;

    margin-bottom:
        25px;

    color:
        rgba(255,255,255,.68);

    font-size:
        14px;

    line-height:
        1.7;
}

.announcement-content a {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    color:
        #fff;

    font-size:
        13px;

    font-weight:
        700;
}

.announcement-content a span {

    transition:
        transform var(--transition-fast);
}

.announcement-content a:hover span {

    transform:
        translate(4px,-4px);
}


/* Announcement controls */

.announcement-navigation {

    position:
        relative;

    z-index:
        5;

    display:
        flex;

    align-items:
        center;

    gap:
        15px;
}

.announcement-progress {

    flex:
        1;

    height:
        2px;

    overflow:
        hidden;

    background:
        rgba(255,255,255,.14);
}

.announcement-progress span {

    display:
        block;

    width:
        0;

    height:
        100%;

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

@keyframes announcementProgress {

    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

.announcement-controls {

    display:
        flex;

    gap:
        7px;
}

.announcement-controls button {

    display:
        grid;

    place-items:
        center;

    width:
        38px;

    height:
        38px;

    padding:
        0;

    border:
        1px solid rgba(255,255,255,.18);

    border-radius:
        50%;

    background:
        rgba(255,255,255,.06);

    color:
        #fff;

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

.announcement-controls button:hover {

    background:
        rgba(255,255,255,.14);

    border-color:
        rgba(255,255,255,.35);

    transform:
        translateY(-2px);
}

.announcement-content img{
    
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    object-fit: cover;
    max-width: 90%;
    margin: auto;
    height: auto;
}


/* ==========================================================================
   11. PROOF GRID
   ========================================================================== */

.proof-grid {

    display:
        grid;

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

    gap:
        1px;

    background:
        var(--color-primary);


    
}

.proof-grid article {

    padding:
        24px;

    border:
        0;

    border-radius:
        0;

    box-shadow:
        none;

    margin-top: 50px; 
    border-radius: 10px;
}

.proof-grid strong {

    display:
        block;

    color:
        var(--color-dark);

    font-size:
        15px;
}

.proof-grid span {

    display:
        block;

    margin-top:
        5px;

    color:
        var(--color-text-soft);

    font-size:
        12px;
}


/* ==========================================================================
   12. FEATURE GRIDS
   ========================================================================== */

.feature-grid {

    display:
        grid;

    gap:
        18px;

    min-width:
        0;
}

.feature-grid.four {

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

.feature-grid.two {

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

.feature-grid article {

    min-width:
        0;

    min-height:
        220px;

    padding:
        26px;

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

.feature-grid article:hover {

    transform:
        translateY(-7px);

    box-shadow:
        var(--shadow-card-hover);

    border-color:
        rgba(214,83,77,.25);
}

.feature-grid article > span {

    display:
        grid;

    place-items:
        center;

    width:
        40px;

    height:
        40px;

    margin-bottom:
        22px;

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

    background:
        rgba(214,83,77,.09);

    color:
        var(--color-primary);

    font-size:
        12px;

    font-weight:
        800;

    transition:
        transform var(--transition);
}

.feature-grid article:hover > span {

    transform:
        translateX(5px);
}

.feature-grid h3 {

    margin:
        0 0 10px;

    font-size:
        20px;

    line-height:
        1.3;
    color: var(--color-dark);
}

.feature-grid p {

    margin:
        0;

    color:
        var(--color-text-soft);

    line-height:
        1.7;

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

.discovery-card h3{
    color: var(--color-primary-dark) !important;
}

.discovery-card p{
    color: var(--color) !important;
}


/* ==========================================================================
   13. SPLIT SECTIONS
   ========================================================================== */

.split-section,
.split-story,
.service-layout,
.academy-band,
.contact-page {

    display:
        grid;

    grid-template-columns:
        minmax(0, .9fr)
        minmax(0, 1.1fr);

    gap:
        clamp(35px, 6vw, 80px);

    align-items:
        start;

    min-width:
        0;
}

.section-copy,
.academy-content {

    max-width:
        760px;

    min-width:
        0;
}

.section-copy p {

    line-height:
        1.75;
}

.split-story > img,
.service-layout > img,
.academy-band > img {

    width:
        100%;

    min-width:
        0;

    min-height:
        430px;

    height:
        100%;

    object-fit:
        cover;

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

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

.story-panels {

    display:
        grid;

    gap:
        16px;
}

.story-panels article {

    padding:
        26px;
}

.story-panels p {

    color:
        var(--color-text-soft);

    line-height:
        1.7;
}


/* ==========================================================================
   14. IMAGE CARD GRID
   ========================================================================== */

.image-card-grid {

    display:
        grid;

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

    gap:
        18px;
}

.image-card-grid article {

    overflow:
        hidden;

    min-width:
        0;

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

.image-card-grid article:hover {

    transform:
        translateY(-6px);

    box-shadow:
        var(--shadow-card-hover);
}

.image-card-grid img {

    width:
        100%;

    height:
        220px;

    object-fit:
        cover;
}

.image-card-grid div {

    padding:
        20px;
}

.image-card-grid span {

    color:
        var(--color-primary);

    font-size:
        12px;

    font-weight:
        800;
}

.image-card-grid h3 {

    margin:
        8px 0 0;

    font-size:
        19px;

    line-height:
        1.35;
}


/* ==========================================================================
   15. PILLS
   ========================================================================== */

.pill-cloud {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        9px;
}

.pill-cloud span,
.link-row a {

    display:
        inline-flex;

    align-items:
        center;

    max-width:
        100%;

    padding:
        10px 14px;

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

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

    background:
        #fff;

    font-size:
        12px;

    font-weight:
        700;

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

.pill-cloud span:hover,
.link-row a:hover {

    transform:
        translateY(-2px);

    border-color:
        var(--color-primary);
}


/* ==========================================================================
   16. SERVICE LIST
   ========================================================================== */

.service-list {

    display:
        grid;

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

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

.service-list article {

    display:
        grid;

    grid-template-columns:
        45px minmax(0,1fr) auto;

    gap:
        18px;

    align-items:
        start;

    min-width:
        0;

    padding:
        30px 0;

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

.service-list article:nth-child(odd) {

    padding-right:
        40px;

    border-right:
        1px solid var(--color-line-dark);
}

.service-list article:nth-child(even) {

    padding-left:
        40px;
}

.service-list article > span {

    color:
        var(--color-primary);

    font-size:
        12px;

    font-weight:
        800;
}

.service-list article h3 {

    margin:
        0 0 7px;

    font-size:
        18px;
}

.service-list article p {

    margin:
        0;

    color:
        var(--color-text-soft);

    line-height:
        1.65;
}

.service-list article a {

    color:
        var(--color-primary);

    font-size:
        12px;

    font-weight:
        700;

    white-space:
        nowrap;
}

.service-list article a:hover{
    color: var(--color-danger);
}

.bottom-btn-primary{
    background: var(--color-warning);
}

/* ==========================================================================
   17. DARK SECTIONS
   ========================================================================== */

.dark-band {

    background:
        var(--color-dark);

    color:
        #fff;
}

.dark-band h2,
.dark-band h3 {

    color:
        #fff;
}

.dark-band .eyebrow {

    color:
        var(--color-primary);
}

.dark-band p {

    color:
        rgba(255,255,255,.72);
}


/* ==========================================================================
   18. INDUSTRIES
   ========================================================================== */

.industry-grid {

    display:
        grid;

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

    border-top:
        1px solid var(--color-line-dark);

    border-left:
        1px solid var(--color-line-dark);
}

.industry-grid article {

    min-width:
        0;

    padding:
        28px;

    border-right:
        1px solid var(--color-line-dark);

    border-bottom:
        1px solid var(--color-line-dark);

    transition:
        background var(--transition-fast),
        transform var(--transition-fast);
}

.industry-grid article:hover {

    background:
        rgba(214,83,77,.035);

    transform:
        translateY(-3px);
}

.industry-grid strong {

    display:
        block;

    margin-bottom:
        8px;

    font-size:
        16px;
}

.industry-grid span {

    display:
        block;

    color:
        var(--color-text-soft);

    line-height:
        1.65;
}


/* ==========================================================================
   19. PROCESS
   ========================================================================== */

.process-grid {

    display:
        grid;

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

    gap:
        1px;

    margin-top:
        45px;

    background:
        rgba(255,255,255,.12);
}

.process-grid article {

    min-width:
        0;

    padding:
        30px;

    border:
        0;

    border-radius:
        0;

    background:
        var(--color-dark);

    color:
        #fff;

    box-shadow:
        none;

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

.process-grid article:hover {

    background:
        #353D43;

    transform:
        translateY(-4px);
}

.process-grid span {

    display:
        inline-flex;

    margin-bottom:
        32px;

    color:
        var(--color-primary);

    font-size:
        12px;

    font-weight:
        800;
}

.process-grid h3 {

    margin:
        0 0 10px;

    color:
        #fff;
}

.process-grid p {

    margin:
        0;

    color:
        rgba(255,255,255,.68);
}


/* ==========================================================================
   20. PRODUCT SECTION
   ========================================================================== */

.product-highlight {

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(214,83,77,.14),
            transparent 30%
        ),
        #F4F4F2;
}

.product-grid {

    display:
        grid;

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

    gap:
        20px;

    margin-top:
        40px;
}

.product-grid article {

    min-width:
        0;

    padding:
        32px;

    background:
        #fff;

    border:
        1px solid rgba(47,53,59,.10);

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

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

.product-grid article:hover {

    transform:
        translateY(-7px);

    box-shadow:
        var(--shadow-card-hover);

    border-color:
        rgba(214,83,77,.22);
}

.product-grid article > span {

    display:
        block;

    margin-bottom:
        35px;

    color:
        var(--color-primary);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .13em;
}

.product-grid h3 {

    margin:
        0 0 10px;
}

.product-grid p {

    color:
        var(--color-text-soft);

    line-height:
        1.7;
}


/* ==========================================================================
   21. ACADEMY
   ========================================================================== */

.academy-section {

    display:
        grid;

    gap:
        clamp(35px,6vw,80px);

    align-items:
        center;
}

.academy-content {

    max-width:
        760px;
}

.academy-points {

    display:
        grid;

    gap:
        1px;

    background:
        var(--color-line-dark);
}

.academy-points article {

    padding:
        24px;

    background:
        #fff;
}

.academy-points strong,
.academy-points span {

    display:
        block;
}

.academy-points strong {

    margin-bottom:
        6px;
}

.academy-points span {

    color:
        var(--color-text-soft);

    line-height:
        1.6;
}


/* ==========================================================================
   22. ACADEMY HERO
   ========================================================================== */

.academy-hero {

    background:
        var(--soft);
}

.academy-hero-content {

    max-width:
        900px;

    margin:
        0 auto;

    text-align:
        center;
}

.academy-hero h1 {

    max-width:
        900px;

    margin:
        0 auto 24px;

    color:
        var(--color-dark);

    font-size:
        clamp(44px,7vw,82px);

    line-height:
        1;

    letter-spacing:
        -.045em;
}

.academy-hero-description {

    max-width:
        720px;

    margin:
        0 auto 28px;

    color:
        var(--color-text-soft);

    font-size:
        18px;

    line-height:
        1.75;
}

.academy-hero .button-row {

    justify-content:
        center;
}


/* Academy filters */

.academy-filters {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        10px;

    margin-bottom:
        28px;
}

.academy-filter {

    min-height:
        42px;

    padding:
        0 18px;

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

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

    background:
        #fff;

    color:
        var(--color-text-soft);

    font-size:
        13px;

    font-weight:
        700;

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

.academy-filter:hover {

    transform:
        translateY(-2px);

    border-color:
        var(--color-primary);

    color:
        var(--color-primary);
}

.academy-filter.is-active {

    border-color:
        var(--color-dark);

    background:
        var(--color-dark);

    color:
        #fff;
}


/* Academy path */

.academy-path-grid {

    display:
        grid;

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

    gap:
        18px;
}

.academy-path-card {

    min-width:
        0;

    min-height:
        320px;

    padding:
        25px;

    display:
        flex;

    flex-direction:
        column;

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

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

    background:
        #fff;

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

.academy-path-card:hover {

    transform:
        translateY(-6px);

    border-color:
        rgba(214,83,77,.22);

    box-shadow:
        var(--shadow-card-hover);
}

.academy-path-icon {

    display:
        grid;

    place-items:
        center;

    width:
        48px;

    height:
        48px;

    margin-bottom:
        22px;

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

    background:
        rgba(214,83,77,.08);

    color:
        var(--color-primary);

    font-size:
        14px;

    font-weight:
        900;
}

.academy-path-category {

    display:
        block;

    margin-bottom:
        7px;

    color:
        var(--color-primary);

    font-size:
        11px;

    font-weight:
        800;

    text-transform:
        uppercase;
}

.academy-path-card h3 {

    margin:
        0 0 10px;

    font-size:
        21px;

    line-height:
        1.3;
}

.academy-path-card p {

    margin:
        0;

    color:
        var(--color-text-soft);

    line-height:
        1.65;
}

.academy-path-meta {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;

    margin-top:
        auto;

    padding-top:
        22px;
}

.academy-path-meta span,
.academy-program-details span {

    padding:
        6px 9px;

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

    background:
        #F3F5F4;

    color:
        var(--color-text-soft);

    font-size:
        10px;

    font-weight:
        700;
}

.academy-path-link {

    display:
        inline-flex;

    margin-top:
        18px;

    color:
        var(--color-dark);

    font-size:
        13px;

    font-weight:
        800;
}

.academy-path-link:hover {

    color:
        var(--color-primary);
}


/* Academy purpose */

.academy-purpose {

    background:
        var(--soft);
}

.academy-purpose-grid {

    display:
        grid;

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

    gap:
        18px;
}

.academy-purpose-card {

    padding:
        25px;

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

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

    background:
        #fff;

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

.academy-purpose-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        var(--shadow-card-hover);
}

.academy-purpose-number {

    display:
        block;

    margin-bottom:
        26px;

    color:
        var(--color-primary);

    font-size:
        12px;

    font-weight:
        900;
}

.academy-purpose-card h3 {

    margin:
        0 0 10px;

    font-size:
        19px;
}

.academy-purpose-card p {

    margin:
        0;

    color:
        var(--color-text-soft);

    line-height:
        1.65;
}

.academy-purpose-card strong {

    display:
        inline-block;

    margin-top:
        20px;

    font-size:
        12px;
}


/* Academy programs */

.academy-program-grid {

    display:
        grid;

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

    gap:
        18px;
}

.academy-program-card {

    display:
        grid;

    grid-template-columns:
        minmax(0,.9fr)
        minmax(0,1.1fr);

    min-width:
        0;

    overflow:
        hidden;

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

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

    background:
        #fff;

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

.academy-program-image {

    min-height:
        330px;

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

.academy-program-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}

.academy-program-content {

    padding:
        28px;
}

.academy-program-content h3 {

    margin:
        0 0 12px;

    font-size:
        24px;

    line-height:
        1.3;
}

.academy-program-content p {

    color:
        var(--color-text-soft);

    line-height:
        1.65;
}

.academy-program-details {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;

    margin-top:
        22px;
}


/* Academy resources */

.academy-resources {

    background:
        var(--soft);
}

.academy-resource-grid {

    display:
        grid;

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

    gap:
        18px;
}

.academy-resource-card {

    padding:
        26px;

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

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

    background:
        #fff;
}

.academy-resource-card > span {

    display:
        block;

    margin-bottom:
        25px;

    color:
        var(--color-primary);

    font-size:
        12px;

    font-weight:
        900;
}

.academy-resource-card h3 {

    margin:
        0 0 10px;

    font-size:
        20px;
}

.academy-resource-card p {

    margin:
        0;

    color:
        var(--color-text-soft);

    line-height:
        1.65;
}

.academy-resource-card a {

    display:
        inline-flex;

    margin-top:
        20px;

    color:
        var(--color-dark);

    font-size:
        13px;

    font-weight:
        800;
}

.academy-resource-card a:hover {

    color:
        var(--color-primary);
}


/* Academy search */

.academy-search-section {

    padding:
        0 var(--content-padding) 60px;

    background:
        var(--soft);
}

.academy-search {

    max-width:
        1000px;

    margin:
        0 auto;

    padding:
        34px;

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

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

    background:
        #fff;

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

.academy-search-heading {

    text-align:
        center;
}

.academy-search-heading h2 {

    margin:
        0 0 22px;

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

    line-height:
        1.2;
}

.academy-search-input {

    display:
        grid;

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

    align-items:
        center;

    gap:
        10px;

    min-height:
        60px;

    padding:
        7px 7px 7px 18px;

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

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

    background:
        #fff;

    box-shadow:
        0 6px 20px rgba(47,53,59,.05);
}

.academy-search-input > span {

    color:
        var(--color-text-soft);

    font-size:
        25px;
}

.academy-search-input input {

    min-height:
        44px;

    padding:
        0;

    border:
        0;

    outline:
        0;

    background:
        transparent;

    box-shadow:
        none;
}

.academy-search-input input:focus {

    border:
        0;

    outline:
        0;

    box-shadow:
        none;
}

.academy-search-popular,
.academy-popular-searches {

    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        8px;

    margin-top:
        16px;

    color:
        var(--color-text-soft);

    font-size:
        12px;
}

.academy-popular-searches span {

    font-weight:
        800;
}

.academy-popular-searches a {

    padding:
        6px 10px;

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

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

    background:
        #F8FAF9;

    font-weight:
        700;
}

.academy-popular-searches a:hover {

    border-color:
        var(--color-primary);

    color:
        var(--color-primary);
}


/* ==========================================================================
   23. WORK / PORTFOLIO
   ========================================================================== */

.work-grid {

    display:
        grid;

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

    gap:
        20px;
}

.work-card {

    overflow:
        hidden;

    min-width:
        0;

    border:
        1px solid rgba(47,53,59,.12);

    background:
        #fff;

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

.work-card:hover {

    transform:
        translateY(-7px);

    box-shadow:
        var(--shadow-card-hover);
}

.featured-work {

    grid-row:
        span 2;
}

.work-visual {

    min-height:
        220px;

    display:
        flex;

    align-items:
        flex-end;

    padding:
        24px;

    background:
        linear-gradient(
            135deg,
            #2F353B,
            #525B63
        );

    color:
        #fff;
}

.featured-work .work-visual {

    min-height:
        430px;
}

.work-visual span {

    padding:
        7px 10px;

    background:
        var(--color-primary);

    font-size:
        10px;

    font-weight:
        800;
}

.work-content {

    padding:
        28px;
}

.work-content p {

    color:
        var(--color-text-soft);

    line-height:
        1.7;
}


/* ==========================================================================
   24. FAQ
   ========================================================================== */

.faq-list {

    max-width:
        900px;

    margin:
        45px auto 0;
}

.faq-list details {

    padding:
        23px 0;

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

.faq-list details:last-child {

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

.faq-list summary {

    position:
        relative;

    cursor:
        pointer;

    list-style:
        none;

    padding-right:
        35px;

    font-weight:
        600;
}

.faq-list summary::-webkit-details-marker {

    display:
        none;
}

.faq-list summary::after {

    content:
        "+";

    position:
        absolute;

    top:
        -2px;

    right:
        0;

    color:
        var(--color-primary);

    font-size:
        20px;

    transition:
        transform var(--transition-fast);
}

.faq-list details[open] summary::after {

    transform:
        rotate(45deg);
}

.faq-list p {

    max-width:
        760px;

    margin:
        18px 0 0;

    color:
        var(--color-text-soft);

    line-height:
        1.7;
}


/* ==========================================================================
   25. FINAL CTA
   ========================================================================== */

.final-cta {

    background:
        var(--color-primary);

    color:
        #fff;
}

.final-cta h2 {

    color:
        #fff;
}

.final-cta .eyebrow {

    color:
        rgba(255,255,255,.75);
}

.final-cta p {

    color:
        rgba(255,255,255,.85);
}

.final-cta .secondary-btn {

    border-color:
        rgba(255,255,255,.5);

    background:
        transparent;

    color:
        #fff;
}

.final-cta .secondary-btn:hover {

    background:
        #fff;

    border-color:
        #fff;

    color:
        var(--color-primary);
}


/* ==========================================================================
   26. CONTACT / FORMS
   ========================================================================== */

.contact-form {

    display:
        grid;

    gap:
        14px;

    padding:
        26px;
}

.form-note {

    margin:
        0;

    color:
        var(--color-success);

    font-size:
        13px;
}

label {

    display:
        grid;

    gap:
        7px;

    color:
        var(--color-text-soft);

    font-size:
        13px;

    font-weight:
        700;
}

input,
select,
textarea {

    width:
        100%;

    min-width:
        0;

    min-height:
        44px;

    padding:
        10px 12px;

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

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

    background:
        #fff;

    color:
        var(--color-text);

    outline:
        none;

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

input:focus,
select:focus,
textarea:focus {

    border-color:
        var(--color-primary);

    box-shadow:
        0 0 0 3px rgba(214,83,77,.10);
}

textarea {

    min-height:
        140px;

    resize:
        vertical;
}

.form-panel {

    display:
        grid;

    gap:
        13px;
}

.form-row {

    display:
        grid;

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

    gap:
        12px;
}

.checkbox {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;
}

.checkbox input {

    width:
        18px;

    min-height:
        18px;

    flex:
        0 0 auto;
}

.split-layout {

    display:
        grid;

    grid-template-columns:
        minmax(290px,420px)
        minmax(0,1fr);

    gap:
        18px;
}


/* ==========================================================================
   27. DASHBOARD / BIRITEX OS
   ========================================================================== */

.os-shell {

    display:
        grid;

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

    min-height:
        calc(100vh - var(--header-height));

    padding:
        0;

    background:
        #EEF2F1;
}

.os-sidebar {

    padding:
        22px;

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

    color:
        #fff;
}

.os-brand {

    display:
        grid;

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

    gap:
        12px;

    align-items:
        center;

    margin-bottom:
        24px;
}

.os-brand img {

    width:
        44px;

    height:
        44px;

    padding:
        6px;

    object-fit:
        contain;

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

    background:
        rgba(255,255,255,.08);
}

.os-brand span {

    display:
        block;

    color:
        var(--color-surface-soft);

    font-size:
        12px;
}

.os-nav {

    display:
        grid;

    gap:
        7px;
}

.os-nav button {

    width:
        100%;

    height:
        42px;

    padding:
        0 12px;

    border:
        0;

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

    background:
        transparent;

    color:
        #C7D0D6;

    text-align:
        left;

    font-weight:
        700;

    transition:
        background var(--transition-fast),
        color var(--transition-fast);
}

.os-nav button:hover,
.os-nav button.is-active {

    background:
        var(--color-primary);

    color:
        #fff;
}

.os-workspace {

    min-width:
        0;

    padding:
        24px;
}

.os-topbar,
.tool-row,
.panel-head {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        14px;

    margin-bottom:
        18px;
}

.os-view {

    display:
        none;
}

.os-view.is-active {

    display:
        block;
}

.finance-summary-cards {
    margin-bottom: 24px;
}

.finance-statement-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}

.finance-statement-grid > div {
    padding: 16px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.finance-statement-grid span,
.finance-statement-grid strong {
    display: block;
}

.finance-statement-grid span {
    color: var(--color-text-soft);
    font-size: 12px;
}

.finance-statement-grid strong {
    margin-top: 6px;
    font-size: 20px;
}


/* Dashboard metrics */

.metric-grid {

    display:
        grid;

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

    gap:
        14px;

    margin-bottom:
        16px;
}

.metric-grid article {

    padding:
        20px;
}

.metric-grid span {

    display:
        block;

    color:
        var(--color-text-soft);

    font-size:
        12px;

    font-weight:
        700;
}

.metric-grid strong {

    display:
        block;

    margin-top:
        5px;

    font-size:
        34px;
}


/* Dashboard grid */

.os-grid {

    display:
        grid;

    grid-template-columns:
        minmax(0,1.5fr)
        minmax(280px,1fr);

    gap:
        16px;

    min-width:
        0;
}

.panel {

    min-width:
        0;

    overflow:
        hidden;

    padding:
        18px;
}

.wide {

    grid-row:
        span 2;
}


/* Pipeline */

.pipeline,
.kanban {

    display:
        grid;

    grid-auto-flow:
        column;

    grid-auto-columns:
        minmax(190px,1fr);

    gap:
        12px;

    overflow-x:
        auto;

    padding-bottom:
        5px;

    scrollbar-width:
        thin;
}

.pipeline-stage,
.kanban-column {

    min-height:
        280px;

    padding:
        12px;

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

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

    background:
        #F8FAF9;
}

.stage-title,
.column-head {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    margin-bottom:
        10px;

    color:
        var(--color-text-soft);

    font-size:
        12px;

    font-weight:
        800;
}

.stack {

    display:
        grid;

    gap:
        8px;
}

.record,
.empty {

    min-width:
        0;

    padding:
        12px;

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

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

    background:
        #fff;
}

.record strong {

    display:
        block;

    margin-bottom:
        6px;

    font-size:
        14px;
}

.record p,
.empty {

    color:
        var(--color-text-soft);

    font-size:
        13px;

    line-height:
        1.5;
}

.tag {

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        24px;

    padding:
        0 8px;

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

    background:
        rgba(214,83,77,.09);

    color:
        var(--color-primary);

    font-size:
        11px;

    font-weight:
        800;
}

.tag.gold {

    background:
        #FFF4DC;

    color:
        #956614;
}

.tag.green {

    background:
        #E8F7EF;

    color:
        #17704C;
}

.tag.red {

    background:
        #FFE8E6;

    color:
        #A73431;
}


/* ==========================================================================
   28. TABLES
   ========================================================================== */

.table-wrap {

    width:
        100%;

    overflow-x:
        auto;

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

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

    background:
        #fff;

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

table {

    width:
        100%;

    border-collapse:
        collapse;
}

th,
td {

    padding:
        14px;

    border-bottom:
        1px solid var(--color-line);

    text-align:
        left;

    vertical-align:
        top;
}

th {

    color:
        var(--color-text-soft);

    font-size:
        11px;

    text-transform:
        uppercase;
}


/* ==========================================================================
   29. MODALS
   ========================================================================== */

.modal {

    width:
        min(620px, calc(100vw - 28px));

    max-width:
        100%;

    padding:
        0;

    border:
        0;

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

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

.modal::backdrop {

    background:
        rgba(24,28,32,.68);
}

.modal form {

    display:
        grid;

    gap:
        13px;

    padding:
        22px;
}

.modal-head,
.modal-actions {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;
}

.modal-actions {

    justify-content:
        flex-end;
}


/* ==========================================================================
   30. STANDARD TECH FOOTER
   ========================================================================== */

.site-footer {

    width:
        100%;

    background:
        var(--color-dark-deep);

    color:
        #fff;

    overflow:
        hidden;
}


/* Footer main */

.footer-main {

    display:
        grid;

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

    gap:
        45px;

    width:
        100%;

    max-width:
        1440px;

    margin:
        0 auto;

    padding:
        75px var(--content-padding);
}


/* Brand */

.footer-brand {

    max-width:
        390px;

    min-width:
        0;
}

.footer-logo {

    display:
        inline-block;

    margin-bottom:
        20px;

    color:
        #fff;

    font-size:
        21px;

    font-weight:
        800;

    letter-spacing:
        -.03em;
}

.footer-brand > p {

    max-width:
        360px;

    margin:
        0 0 25px;

    color:
        rgba(255,255,255,.58);

    font-size:
        13px;

    line-height:
        1.75;
}

.footer-location {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    color:
        rgba(255,255,255,.68);

    font-size:
        12px;
}

.footer-dot {

    width:
        7px;

    height:
        7px;

    flex:
        0 0 auto;

    border-radius:
        50%;

    background:
        var(--color-primary);

    box-shadow:
        0 0 0 5px rgba(214,83,77,.10);
}


/* Footer columns */

.footer-column {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        11px;

    min-width:
        0;
}

.footer-column h3 {

    margin:
        0 0 10px;

    color:
        #fff;

    font-size:
        11px;

    letter-spacing:
        .10em;

    text-transform:
        uppercase;
}

.footer-column a {

    max-width:
        100%;

    color:
        rgba(255,255,255,.54);

    font-size:
        12px;

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

.footer-column a:hover {

    color:
        #fff;

    transform:
        translateX(4px);
}


/* Footer CTA */

.footer-cta {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        35px;

    width:
        100%;

    max-width:
        1440px;

    margin:
        0 auto;

    padding:
        52px var(--content-padding);

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

    border-bottom:
        1px solid rgba(255,255,255,.09);
}

.footer-cta h2 {

    margin:
        0;

    color:
        #fff;

    font-size:
        clamp(26px,4vw,44px);

    line-height:
        1.05;

    letter-spacing:
        -.035em;
}

.footer-cta .eyebrow {

    margin-bottom:
        9px;

    color:
        var(--color-primary);
}

.footer-cta-button {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        13px;

    flex:
        0 0 auto;

    padding:
        14px 19px;

    border:
        1px solid rgba(255,255,255,.20);

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

    color:
        #fff;

    font-size:
        13px;

    font-weight:
        700;

    white-space:
        nowrap;

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

.footer-cta-button:hover {

    background:
        var(--color-primary);

    border-color:
        var(--color-primary);

    transform:
        translateY(-3px);
}


/* Footer bottom */

.footer-bottom {

    display:
        grid;

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

    align-items:
        center;

    gap:
        25px;

    width:
        100%;

    max-width:
        1440px;

    margin:
        0 auto;

    padding:
        24px var(--content-padding);

    color:
        rgba(255,255,255,.38);

    font-size:
        10px;
}

.footer-socials,
.footer-legal {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        18px;
}

.footer-socials a,
.footer-legal a {

    color:
        rgba(255,255,255,.45);

    transition:
        color var(--transition-fast);
}

.footer-socials a:hover,
.footer-legal a:hover {

    color:
        #fff;
}

.site-footer img {

    max-width:
        40px;
}

.site-footer p {

    margin:
        0;
}

.page-os .site-footer {

    display:
        none;
}


/* ==========================================================================
   31. SCROLL / REVEAL ANIMATIONS
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

    .page-band:not(.hero) {

        animation:
            sectionReveal linear both;

        animation-timeline:
            view();

        animation-range:
            entry 0% cover 25%;
    }

}

@keyframes sectionReveal {

    from {
        opacity: .35;
        transform: translateY(28px);
    }

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


/* ==========================================================================
   32. RESPONSIVE — TABLET / SMALL DESKTOP
   ========================================================================== */

@media (max-width: 1100px) {

    /* Header */

    .site-nav {

        display:
            none;
    }

    .menu-toggle {

        display:
            inline-flex;
    }

    .site-nav.is-open {

        position:
            absolute;

        top:
            calc(100% + 8px);

        right:
            var(--content-padding);

        left:
            var(--content-padding);

        display:
            grid;

        gap:
            4px;

        padding:
            10px;

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

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

        background:
            #fff;

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

    .site-nav.is-open a {

        padding:
            13px;

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

    .site-nav.is-open a:hover {

        background:
            var(--color-surface);
    }

    .site-nav.is-open a::after {

        display:
            none;
    }


    /* Hero */

    .hero {

        grid-template-columns:
            1fr;

        min-height:
            auto;

        padding-top:
            90px;

        padding-bottom:
            70px;
    }

    .hero-copy {

        max-width:
            800px;
    }

    .hero-announcement {

        max-width:
            650px;

        margin-left:
            0;
    }


    /* Grids */

    .feature-grid.four,
    .feature-grid.two,
    .image-card-grid,
    .proof-grid,
    .metric-grid {

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

    .industry-grid {

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

    .academy-path-grid {

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

    .academy-purpose-grid {

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

    .academy-program-grid {

        grid-template-columns:
            1fr;
    }

    .academy-resource-grid {

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


    /* Dashboard */

    .os-shell {

        grid-template-columns:
            220px minmax(0,1fr);
    }

    .os-grid {

        grid-template-columns:
            1fr;
    }


    /* Footer */

    .footer-main {

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

    .footer-brand {

        grid-column:
            1 / -1;

        max-width:
            650px;
    }
}


/* ==========================================================================
   33. RESPONSIVE — TABLET
   ========================================================================== */

@media (max-width: 900px) {

    .split-section,
    .split-story,
    .service-layout,
    .academy-band,
    .academy-section,
    .contact-page,
    .split-layout {

        grid-template-columns:
            1fr;
    }

    .service-list,
    .product-grid,
    .work-grid {

        grid-template-columns:
            1fr;
    }

    .service-list article:nth-child(odd) {

        padding-right:
            0;

        border-right:
            0;
    }

    .service-list article:nth-child(even) {

        padding-left:
            0;
    }

    .featured-work {

        grid-row:
            auto;
    }

    .featured-work .work-visual {

        min-height:
            300px;
    }

    .split-story > img,
    .service-layout > img,
    .academy-band > img {

        min-height:
            300px;

        max-height:
            500px;
    }

    .footer-cta {

        align-items:
            flex-start;

        flex-direction:
            column;
    }
}


/* ==========================================================================
   34. RESPONSIVE — MOBILE
   ========================================================================== */

@media (max-width: 680px) {

    /* Global */

    html,
    body {

        width:
            100%;

        max-width:
            100%;

        overflow-x:
            clip;
    }

    .page-band {

        padding:
            52px 16px;
    }

    .page-band.slim {

        padding-top:
            0;

        padding-bottom:
            35px;
    }


    /* Header */

    .site-header {

        min-height:
            64px;

        padding:
            8px 16px;
    }

    .brand-mark img {

        width:
            40px;

        height:
            40px;
    }

    .brand-mark span {

        font-size:
            21px;
    }

    .site-nav.is-open {

        right:
            16px;

        left:
            16px;
    }


    /* Hero */

    .hero {

        gap:
            34px;

        min-height:
            calc(100svh - 64px);

        padding:
            85px 16px 50px;
    }

    .hero-overlay {

        background:
            linear-gradient(
                180deg,
                rgba(24,28,32,.88),
                rgba(24,28,32,.78)
            );
    }

    .hero-copy h1 {

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

        line-height:
            1;

        letter-spacing:
            -.045em;
    }

    .hero-copy p {

        font-size:
            14px;

        line-height:
            1.7;
    }

    .hero-copy .button-row {

        margin-top:
            22px;
    }

    .button-row {

        align-items:
            stretch;

        flex-direction:
            column;

        width:
            100%;
    }

    .button-row a {

        width:
            100%;

        max-width:
            100%;
    }


    /* Trust */

    .hero-trust {

        margin-top:
            20px;
    }

    .hero-trust span {

        padding:
            7px 10px;

        font-size:
            10px;
    }


    /* Announcement */

    .hero-announcement {

        width:
            100%;

        max-width:
            100%;

        min-height:
            390px;

        padding:
            20px;

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

    .announcement-slides {

        min-height:
            265px;
    }

    .announcement-content h2 {

        font-size:
            clamp(25px,8vw,35px);
    }

    .announcement-content > p:last-of-type {

        font-size:
            13px;

        line-height:
            1.6;
    }

    .announcement-controls button {

        width:
            34px;

        height:
            34px;
    }


    /* Section headings */

    .section-head h2,
    .subhero h1,
    .contact-page h1 {

        font-size:
            clamp(32px,9vw,45px);
    }


    /* Grids */

    .feature-grid.four,
    .feature-grid.two,
    .image-card-grid,
    .proof-grid,
    .industry-grid,
    .process-grid,
    .product-grid,
    .work-grid,
    .academy-path-grid,
    .academy-purpose-grid,
    .academy-program-grid,
    .academy-resource-grid,
    .metric-grid {

        grid-template-columns:
            1fr;
    }


    /* Proof */

    .proof-grid {

        gap:
            1px;
    }

    .proof-grid article {

        padding:
            19px;
    }


    /* Cards */

    .feature-grid article {

        min-height:
            auto;

        padding:
            23px;
    }

    .industry-grid {

        border-left:
            0;
    }

    .industry-grid article {

        padding:
            22px;

        border-left:
            1px solid var(--color-line-dark);
    }


    /* Service list */

    .service-list article {

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

        gap:
            13px;

        padding:
            25px 0;
    }

    .service-list article a {

        grid-column:
            2;

        width:
            fit-content;

        white-space:
            normal;
    }


    /* Process */

    .process-grid {

        gap:
            1px;

        margin-top:
            30px;
    }

    .process-grid article {

        padding:
            25px;
    }


    /* Work */

    .work-content {

        padding:
            23px;
    }

    .featured-work .work-visual {

        min-height:
            260px;
    }


    /* Academy */

    .academy-hero h1 {

        font-size:
            clamp(40px,11vw,56px);
    }

    .academy-hero-description {

        font-size:
            15px;
    }

    .academy-filters {

        flex-wrap:
            nowrap;

        overflow-x:
            auto;

        padding-bottom:
            5px;

        scrollbar-width:
            none;
    }

    .academy-filter {

        flex:
            0 0 auto;
    }

    .academy-program-card {

        grid-template-columns:
            1fr;
    }

    .academy-program-image {

        min-height:
            240px;
    }

    .academy-program-content {

        padding:
            23px;
    }


    /* Academy search */

    .academy-search-section {

        padding:
            0 16px 40px;
    }

    .academy-search {

        padding:
            23px 16px;
    }

    .academy-search-input {

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

    .academy-search-input .primary-btn {

        grid-column:
            1 / -1;

        width:
            100%;
    }

    .academy-popular-searches {

        align-items:
            flex-start;
    }


    /* Forms */

    .form-row {

        grid-template-columns:
            1fr;
    }

    .contact-form {

        padding:
            20px;
    }


    /* Dashboard */

    .os-shell {

        grid-template-columns:
            1fr;

        min-height:
            auto;
    }

    .os-sidebar {

        padding:
            16px;
    }

    .os-brand {

        margin-bottom:
            15px;
    }

    .os-nav {

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

    .os-nav button {

        text-align:
            center;
    }

    .os-workspace {

        padding:
            16px;
    }

    .os-topbar,
    .tool-row,
    .panel-head {

        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .metric-grid {

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

    .os-grid {

        grid-template-columns:
            1fr;
    }

    .split-layout {

        grid-template-columns:
            1fr;
    }


    /* Footer */

    .footer-main {

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

        gap:
            35px 22px;

        padding-top:
            55px;

        padding-bottom:
            55px;
    }

    .footer-brand {

        grid-column:
            1 ;
    }

    .footer-cta {

        padding-top:
            42px;

        padding-bottom:
            42px;
    }

    .footer-cta h2 {

        font-size:
            clamp(27px,8vw,38px);
    }

    .footer-bottom {

        grid-template-columns:
            1fr;

        align-items:
            flex-start;

        gap:
            17px;
    }

    .footer-socials,
    .footer-legal {

        gap:
            14px;
    }
}


/* ==========================================================================
   35. VERY SMALL PHONES
   ========================================================================== */

@media (max-width: 420px) {

    .page-band {

        padding-left:
            14px;

        padding-right:
            14px;
    }

    .site-header {

        padding-left:
            14px;

        padding-right:
            14px;
    }

    .brand-mark span {

        font-size:
            19px;
    }

    .hero {

        padding-left:
            14px;

        padding-right:
            14px;
    }

    .hero-announcement {

        min-height:
            365px;

        padding:
            17px;
    }

    .announcement-slides {

        min-height:
            245px;
    }

    .announcement-content h2 {

        font-size:
            25px;
    }

    .announcement-content > p:last-of-type {

        margin-bottom:
            18px;
    }

    .announcement-meta {

        margin-bottom:
            17px;
    }

    .footer-main {

        grid-template-columns:
            1fr;
    }

    .footer-brand {

        grid-column:
            auto;
    }

    .metric-grid {

        grid-template-columns:
            1fr;
    }
}


/* ==========================================================================
   36. REDUCED MOTION
   ========================================================================== */

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

    html {

        scroll-behavior:
            auto;
    }

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

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

        animation-delay:
            0ms !important;
    }
}


/* ==========================================================================
   END OF BIRITEX TECHNOLOGIES STYLESHEET
   ========================================================================== */



   /* =========================================================
   ABOUT PAGE — MODERN COMPONENTS
========================================================= */


/* =========================================================
   INTRODUCTION
========================================================= */

.about-introduction {
    display: grid;
    grid-template-columns: .35fr 1fr;
    gap: 80px;
}

.story-content {
    max-width: 850px;
}

.story-content h2 {
    font-size: clamp(2rem, 4vw, 4rem);
    line-height: 1.05;
    margin-bottom: 35px;
}

.story-content p {
    max-width: 760px;
    font-size: 1.05rem;
    line-height: 1.85;
}


/* =========================================================
   STATS
========================================================= */

.about-stats {
    padding-top: 20px;
    padding-bottom: 80px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid rgba(0,0,0,.12);
    border-bottom: 1px solid rgba(0,0,0,.12);
}

.stats-grid article {
    padding: 35px 25px;
    border-right: 1px solid rgba(0,0,0,.12);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform .35s ease;
}

.stats-grid article:last-child {
    border-right: 0;
}

.stats-grid article:hover {
    transform: translateY(-5px);
}

.stats-grid strong {
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1;
}

.stats-grid span {
    opacity: .65;
    line-height: 1.5;
}


/* =========================================================
   DIRECTION
========================================================= */

.direction-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.direction-card {
    padding: 35px;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    transition:
        transform .45s ease,
        box-shadow .45s ease,
        border-color .45s ease;
}

.direction-card::before {
    content: "";
    position: absolute;
    width: 130px;
    height: 130px;
    right: -65px;
    top: -65px;
    border-radius: 50%;
    background: rgba(214,83,77,.08);
    transition: transform .5s ease;
}

.direction-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 60px rgba(0,0,0,.12);
}

.direction-card:hover::before {
    transform: scale(1.5);
}

.direction-number {
    margin-bottom: 50px;
}

.direction-number span {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
}

.direction-card h3 {
    font-size: 1.45rem;
    line-height: 1.3;
}

.direction-card p:last-child {
    opacity: .7;
    line-height: 1.7;
}


/* =========================================================
   VALUES
========================================================= */

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.value-card {
    padding: 32px;
    background: #fff;
    border-radius: 18px;
    border: 1px solid rgba(0,0,0,.07);
    transition:
        transform .4s ease,
        box-shadow .4s ease;
    animation-delay: var(--animation-delay);
}

.value-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 60px rgba(0,0,0,.09);
}

.value-number {
    display: block;
    margin-bottom: 35px;
    font-size: .75rem;
    font-weight: 700;
}

.value-card h3 {
    margin-bottom: 12px;
}

.value-card p {
    line-height: 1.7;
    opacity: .7;
}


/* =========================================================
   APPROACH TIMELINE
========================================================= */

.about-timeline {
    max-width: 900px;
    margin: 70px auto 0;
    position: relative;
}

.about-timeline::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 27px;
    width: 1px;
    background: rgba(255,255,255,.18);
}

.timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 55px 1fr;
    gap: 30px;
    padding-bottom: 50px;
}

.timeline-marker {
    width: 55px;
    height: 55px;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    font-weight: 700;
    background: #2F353B;
    position: relative;
    z-index: 2;
    transition:
        transform .35s ease,
        background .35s ease;
}

.timeline-item:hover .timeline-marker {
    transform: scale(1.12);
}

.timeline-content h3 {
    margin-top: 8px;
    font-size: 1.4rem;
}

.timeline-content p {
    max-width: 650px;
    opacity: .7;
    line-height: 1.75;
}


/* =========================================================
   ECOSYSTEM
========================================================= */

.ecosystem-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.ecosystem-card {
    padding: 30px;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 18px;
    transition:
        transform .4s ease,
        background .4s ease,
        box-shadow .4s ease;
}

.ecosystem-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 55px rgba(0,0,0,.1);
}

.ecosystem-card > span {
    display: block;
    margin-bottom: 50px;
    font-size: .72rem;
    font-weight: 700;
}

.ecosystem-card h3 {
    margin-bottom: 12px;
}

.ecosystem-card p {
    line-height: 1.7;
    opacity: .7;
    min-height: 100px;
}


/* =========================================================
   GROWTH FLOW
========================================================= */

.growth-flow {
    display: flex;
    align-items: stretch;
    gap: 12px;
}

.growth-step {
    flex: 1;
    padding: 28px;
    background: #fff;
    border-radius: 18px;
    border: 1px solid rgba(0,0,0,.08);
    transition:
        transform .4s ease,
        box-shadow .4s ease;
}

.growth-step:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 50px rgba(0,0,0,.09);
}

.growth-number {
    font-size: .7rem;
    font-weight: 700;
    display: block;
    margin-bottom: 35px;
}

.growth-step h3 {
    margin-bottom: 12px;
}

.growth-step p {
    line-height: 1.65;
    opacity: .7;
}

.growth-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .35;
    font-size: 1.4rem;
}


/* =========================================================
   FUTURE
========================================================= */

.about-future {
    display: grid;
    grid-template-columns: 1fr .8fr;
    gap: 70px;
    align-items: center;
    overflow: hidden;
}

.future-content {
    max-width: 700px;
}

.future-content h2 {
    font-size: clamp(2.3rem, 5vw, 5rem);
    line-height: 1;
    margin-bottom: 30px;
}

.future-content p {
    line-height: 1.8;
}

.future-visual {
    min-height: 400px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.future-orbit {
    position: absolute;
    border: 1px solid rgba(214,83,77,.35);
    border-radius: 50%;
    animation: orbitRotate 14s linear infinite;
}

.orbit-one {
    width: 280px;
    height: 280px;
}

.orbit-two {
    width: 190px;
    height: 190px;
    animation-direction: reverse;
    animation-duration: 9s;
}

.future-core {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: #2F353B;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    box-shadow: 0 20px 70px rgba(0,0,0,.25);
    animation: corePulse 3s ease-in-out infinite;
}

.future-core span {
    font-size: .6rem;
    letter-spacing: .2em;
}

.future-core strong {
    font-size: 1.3rem;
}

.future-core small {
    font-size: .65rem;
    opacity: .65;
}


/* =========================================================
   SCROLL REVEAL
========================================================= */

.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity .75s ease,
        transform .75s cubic-bezier(.2,.7,.2,1);
    transition-delay: var(--animation-delay, 0ms);
}

.scroll-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes aboutFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

}

@keyframes orbitRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}

@keyframes corePulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 900px) {

    .about-hero,
    .about-future {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .about-hero {
        padding-top: 70px;
    }

    .subhero-visual {
        min-height: 360px;
    }

    .about-introduction {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .direction-grid,
    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

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

    .stats-grid article:nth-child(2) {
        border-right: 0;
    }

    .stats-grid article:nth-child(-n+2) {
        border-bottom: 1px solid rgba(0,0,0,.12);
    }

    .growth-flow {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .growth-arrow {
        display: none;
    }

}


@media (max-width: 600px) {

    .about-hero {
        min-height: auto;
        padding-top: 50px;
        padding-bottom: 60px;
    }

    .subhero-description {
        font-size: 1rem;
    }

    .subhero-visual {
        min-height: 300px;
    }

    .about-floating-card {
        right: 10px;
        bottom: 15px;
        padding: 17px;
    }

    .stats-grid,
    .direction-grid,
    .values-grid,
    .ecosystem-grid,
    .growth-flow {
        grid-template-columns: 1fr;
    }

    .stats-grid article {
        border-right: 0;
        border-bottom: 1px solid rgba(0,0,0,.12);
    }

    .stats-grid article:last-child {
        border-bottom: 0;
    }

    .direction-card,
    .value-card,
    .ecosystem-card,
    .growth-step {
        padding: 25px;
    }

    .about-timeline {
        margin-top: 45px;
    }

    .timeline-item {
        grid-template-columns: 45px 1fr;
        gap: 18px;
    }

    .timeline-marker {
        width: 45px;
        height: 45px;
    }

    .about-timeline::before {
        left: 22px;
    }

    .future-visual {
        min-height: 300px;
    }

    .orbit-one {
        width: 220px;
        height: 220px;
    }

    .orbit-two {
        width: 150px;
        height: 150px;
    }

}



/* =========================================================
   BIRITEX SERVICES PAGE
========================================================= */



/* =========================================================
   SERVICE CATEGORIES
========================================================= */

.service-category-grid {
    display: grid;

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

    gap: 18px;
}

.service-category-card {
    padding: 30px;

    min-height: 210px;

    border:
        1px solid rgba(0,0,0,.1);

    border-radius: 20px;

    transition:
        transform .4s ease,
        box-shadow .4s ease,
        border-color .4s ease;
}

.service-category-card:hover {
    transform:
        translateY(-8px);

    box-shadow:
        0 25px 60px rgba(0,0,0,.1);

    border-color:
        rgba(214,83,77,.35);
}

.category-number {
    display: block;

    margin-bottom: 55px;

    font-size: .7rem;

    font-weight: 700;
}

.service-category-card h3 {
    margin-bottom: 10px;
}

.service-category-card p {
    line-height: 1.65;

    opacity: .65;
}


/* =========================================================
   FEATURED SERVICES
========================================================= */

.featured-service-list {
    display: flex;

    flex-direction: column;

    gap: 25px;
}

.featured-service-card {
    display: grid;

    grid-template-columns:
        minmax(300px, .85fr)
        minmax(0, 1.15fr);

    min-height: 480px;

    overflow: hidden;

    border-radius: 25px;

    background: #fff;

    border:
        1px solid rgba(0,0,0,.08);

    box-shadow:
        0 15px 50px rgba(0,0,0,.06);

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

.featured-service-card:hover {
    transform:
        translateY(-7px);

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

.featured-service-image {
    position: relative;

    overflow: hidden;

    min-height: 350px;
}

.featured-service-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .8s
        cubic-bezier(.2,.7,.2,1);
}

.featured-service-card:hover
.featured-service-image img {
    transform: scale(1.06);
}

.featured-service-image > span {
    position: absolute;

    left: 25px;
    top: 25px;

    width: 50px;
    height: 50px;

    display: flex;

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

    border-radius: 50%;

    background:
        rgba(255,255,255,.9);

    backdrop-filter: blur(10px);

    font-size: .7rem;

    font-weight: 700;
}

.featured-service-content {
    padding: 55px;

    display: flex;

    flex-direction: column;

    justify-content: center;
}

.featured-service-content h3 {
    font-size:
        clamp(2rem, 4vw, 3.5rem);

    line-height: 1;

    margin-bottom: 20px;
}

.featured-service-description {
    line-height: 1.8;

    max-width: 650px;

    opacity: .72;
}

.service-feature-list {
    margin:
        25px 0 30px;

    padding: 0;

    display: grid;

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

    gap: 10px 20px;

    list-style: none;
}

.service-feature-list li {
    display: flex;

    align-items: center;

    gap: 8px;

    font-size: .9rem;
}

.service-feature-list li span {
    font-weight: 700;
}


/* =========================================================
   ALL SERVICES
========================================================= */

.services-grid {
    display: grid;

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

    gap: 18px;
}

.service-card {
    padding: 32px;

    min-height: 380px;

    display: flex;

    flex-direction: column;

    border:
        1px solid rgba(0,0,0,.08);

    background: #fff;

    border-radius: 20px;

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

.service-card:hover {
    transform:
        translateY(-8px);

    box-shadow:
        0 25px 65px rgba(0,0,0,.1);
}

.service-card-top {
    display: flex;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 55px;
}

.service-number {
    font-size: .7rem;

    font-weight: 700;
}

.service-category {
    font-size: .65rem;

    opacity: .55;

    text-align: right;
}

.service-card h3 {
    font-size: 1.4rem;

    margin-bottom: 12px;
}

.service-card > p {
    line-height: 1.7;

    opacity: .7;
}

.service-card ul {
    padding: 0;

    margin:
        20px 0;

    list-style: none;
}

.service-card li {
    padding:
        6px 0;

    font-size: .85rem;

    opacity: .7;
}

.service-card li::before {
    content: "— ";

    opacity: .5;
}

.service-card .text-link {
    margin-top: auto;
}

.text-link {
    font-size: .9rem;

    font-weight: 700;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    transition:
        transform .3s ease;
}

.text-link:hover {
    transform:
        translateX(3px);
    
    color: 
        var(--color-primary);
}


/* =========================================================
   PROCESS
========================================================= */

.service-process-grid {
    max-width: 1100px;

    margin:
        70px auto 0;

    display: grid;

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

    gap: 0;
}

.service-process-step {
    position: relative;

    padding:
        35px;

    border:
        1px solid rgba(255,255,255,.12);

    min-height: 260px;

    transition:
        background .4s ease,
        transform .4s ease;
}

.service-process-step:hover {
    background:
        rgba(255,255,255,.04);

    transform:
        translateY(-5px);
}

.process-number {
    display: block;

    font-size: .7rem;

    font-weight: 700;

    margin-bottom: 50px;
}

.process-line {
    width: 45px;

    height: 1px;

    background:
        rgba(255,255,255,.4);

    margin-bottom: 25px;
}

.service-process-step h3 {
    font-size: 1.3rem;
}

.service-process-step p {
    line-height: 1.7;

    opacity: .65;
}


/* =========================================================
   WHY BIRITEX
========================================================= */

.why-biritex {
    display: grid;

    grid-template-columns:
        .8fr 1.2fr;

    gap: 80px;

    align-items: start;
}

.why-biritex .section-head {
    position: sticky;

    top: 100px;
}

.why-biritex-grid {
    display: grid;

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

    gap: 18px;
}

.why-biritex-grid article {
    padding: 30px;

    border:
        1px solid rgba(0,0,0,.1);

    border-radius: 18px;

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

.why-biritex-grid article:hover {
    transform:
        translateY(-7px);

    box-shadow:
        0 20px 55px rgba(0,0,0,.09);
}

.why-biritex-grid article > span {
    display: block;

    font-size: .7rem;

    font-weight: 700;

    margin-bottom: 50px;
}

.why-biritex-grid article h3 {
    margin-bottom: 10px;
}

.why-biritex-grid article p {
    line-height: 1.7;

    opacity: .68;
}


/* =========================================================
   FAQ
========================================================= */

.services-faq {
    max-width: 1100px;
}

.faq-list {
    max-width: 900px;

    margin:
        60px auto 0;
}

.faq-item {
    border-top:
        1px solid rgba(0,0,0,.12);
}

.faq-item:last-child {
    border-bottom:
        1px solid rgba(0,0,0,.12);
}

.faq-item summary {
    list-style: none;

    cursor: pointer;

    padding:
        28px 0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    font-size: 1.05rem;

    font-weight: 600;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary b {
    width: 35px;
    height: 35px;

    flex-shrink: 0;

    border-radius: 50%;

    display: flex;

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

    border:
        1px solid rgba(0,0,0,.15);

    font-size: 1.2rem;

    font-weight: 400;

    transition:
        transform .3s ease;
}

.faq-item[open] summary b {
    transform:
        rotate(45deg);
}

.faq-answer {
    padding:
        0 65px 30px 0;
}

.faq-answer p {
    max-width: 750px;

    line-height: 1.8;

    opacity: .7;
}


/* =========================================================
   FINAL CTA
========================================================= */

.services-final-cta {
    padding-top: 110px;

    padding-bottom: 110px;

    text-align: center;

    overflow: hidden;
}

.services-cta-inner {
    max-width: 850px;

    margin: 0 auto;
}

.services-cta-inner h2 {
    font-size:
        clamp(2.5rem, 6vw, 6rem);

    line-height: .98;

    letter-spacing: -.045em;

    margin-bottom: 25px;
}

.services-cta-inner > p:not(.eyebrow) {
    max-width: 650px;

    margin:
        0 auto 30px;

    line-height: 1.8;

    opacity: .7;
}

.services-cta-inner .button-row {
    justify-content: center;
}


/* =========================================================
   SCROLL ANIMATION
========================================================= */

.service-scroll-reveal {
    opacity: 0;

    transform:
        translateY(30px);

    transition:
        opacity .75s ease,
        transform .75s
        cubic-bezier(.2,.7,.2,1);

    transition-delay:
        var(--service-delay, 0ms);
}

.service-scroll-reveal.is-visible {
    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================================
   FLOATING HERO ANIMATION
========================================================= */

@keyframes servicesFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-10px);
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .services-hero {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .services-hero-content {
        max-width: 850px;
    }

    .services-hero-visual {
        min-height: 400px;
    }

    .service-category-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

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

    .service-process-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .why-biritex {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .why-biritex .section-head {
        position: static;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .services-hero {
        min-height: auto;

        padding-top: 55px;
        padding-bottom: 65px;
    }

    .services-hero-content h1 {
        font-size:
            clamp(2.5rem, 12vw, 4rem);
    }

    .services-hero-description {
        font-size: 1rem;
    }

    .services-hero-visual {
        min-height: 320px;
    }

    .services-hero-badge {
        right: 10px;

        bottom: 15px;

        padding:
            16px 18px;
    }


    .services-introduction {
        grid-template-columns: 1fr;

        gap: 30px;
    }


    .service-category-grid,
    .services-grid,
    .service-process-grid,
    .why-biritex-grid {
        grid-template-columns: 1fr;
    }


    .featured-service-card {
        grid-template-columns: 1fr;
    }

    .featured-service-image {
        min-height: 280px;
    }

    .featured-service-content {
        padding: 30px;
    }

    .featured-service-content h3 {
        font-size: 2rem;
    }

    .service-feature-list {
        grid-template-columns: 1fr;
    }


    .service-card {
        min-height: 330px;
    }


    .service-process-step {
        min-height: auto;

        padding: 28px;
    }


    .why-biritex-grid {
        gap: 12px;
    }


    .faq-item summary {
        font-size: .95rem;

        padding:
            23px 0;
    }

    .faq-answer {
        padding-right: 0;
    }


    .services-final-cta {
        padding-top: 80px;

        padding-bottom: 80px;
    }

}



/* =========================================================
   BIRITEX SOLUTIONS PAGE
========================================================= */


/* =========================================================
   HERO
========================================================= */

.solutions-hero {
    min-height: 650px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(320px, .95fr);

    align-items: center;

    gap: 70px;

    overflow: hidden;
}

.solutions-hero-content {
    max-width: 800px;
}

.solutions-hero-content h1 {
    max-width: 850px;

    font-size:
        clamp(2.8rem, 6vw, 6rem);

    line-height: .97;

    letter-spacing: -.045em;
}

.solutions-hero-description {
    max-width: 680px;

    font-size: 1.08rem;

    line-height: 1.8;

    opacity: .75;
}

.solutions-hero-visual {
    min-height: 460px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;
}

.solutions-hero-image {
    width: min(100%, 520px);

    aspect-ratio: 4 / 5;

    overflow: hidden;

    border-radius: 25px;

    box-shadow:
        0 30px 90px rgba(0,0,0,.18);
}

.solutions-hero-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .8s
        cubic-bezier(.2,.7,.2,1);
}

.solutions-hero-image:hover img {
    transform: scale(1.05);
}

.solutions-floating-card {
    position: absolute;

    right: 0;

    bottom: 35px;

    max-width: 240px;

    padding: 22px 25px;

    display: flex;

    flex-direction: column;

    gap: 6px;

    background:
        rgba(255,255,255,.94);

    backdrop-filter: blur(15px);

    border-radius: 17px;

    box-shadow:
        0 20px 60px rgba(0,0,0,.15);

    animation:
        solutionFloat 4s
        ease-in-out
        infinite;
}

.solutions-floating-card span {
    font-size: .65rem;

    letter-spacing: .18em;

    font-weight: 700;
}

.solutions-floating-card strong {
    font-size: 1rem;
}

.solutions-floating-card small {
    line-height: 1.5;

    opacity: .6;
}


/* =========================================================
   INTRODUCTION
========================================================= */

.solutions-introduction {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(300px, .8fr);

    gap: 80px;

    align-items: end;
}

.solutions-introduction h2 {
    max-width: 850px;

    font-size:
        clamp(2.3rem, 4.5vw, 4.5rem);

    line-height: 1;

    letter-spacing: -.04em;
}

.solutions-introduction-copy {
    max-width: 600px;
}

.solutions-introduction-copy p {
    line-height: 1.8;

    opacity: .72;
}


/* =========================================================
   MARKET SOLUTIONS
========================================================= */

.solution-market-section {
    overflow: hidden;
}

.solution-market-section
.section-head {
    max-width: 850px;

    margin-left: auto;
    margin-right: auto;

    text-align: center;
}

.solution-market-section
.section-head > p:last-child {
    max-width: 650px;

    margin-left: auto;
    margin-right: auto;

    line-height: 1.8;

    opacity: .7;
}

.solution-market-grid {
    display: grid;

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

    gap: 22px;

    margin-top: 65px;
}

.solution-market-card {
    min-height: 580px;

    overflow: hidden;

    position: relative;

    border-radius: 24px;

    background: #fff;

    border:
        1px solid rgba(0,0,0,.08);

    box-shadow:
        0 15px 50px rgba(0,0,0,.05);

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

.solution-market-card:hover {
    transform:
        translateY(-9px);

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

.solution-market-image {
    height: 270px;

    position: relative;

    overflow: hidden;
}

.solution-market-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .8s
        cubic-bezier(.2,.7,.2,1);
}

.solution-market-card:hover
.solution-market-image img {
    transform: scale(1.07);
}

.solution-number {
    position: absolute;

    left: 25px;
    top: 25px;

    width: 48px;
    height: 48px;

    display: flex;

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

    border-radius: 50%;

    background:
        rgba(255,255,255,.92);

    backdrop-filter: blur(10px);

    font-size: .7rem;

    font-weight: 700;
}

.solution-market-content {
    padding: 35px;
}

.solution-market-content h3 {
    font-size:
        clamp(1.7rem, 3vw, 2.4rem);

    line-height: 1;

    margin-bottom: 15px;
}

.solution-short-description {
    font-size: 1rem;

    line-height: 1.7;

    font-weight: 600;
}

.solution-body {
    line-height: 1.7;

    opacity: .65;

    margin-bottom: 25px;
}


/* =========================================================
   SOLUTION DETAILS
========================================================= */

.solution-detail-list {
    max-width: 1150px;

    margin:
        60px auto 0;

    display: flex;

    flex-direction: column;

    gap: 2px;
}

.solution-detail {
    padding:
        55px 0;

    border-top:
        1px solid rgba(0,0,0,.12);

    display: grid;

    grid-template-columns:
        .7fr 1.3fr;

    gap: 70px;
}

.solution-detail:last-child {
    border-bottom:
        1px solid rgba(0,0,0,.12);
}

.solution-detail-heading {
    display: flex;

    gap: 30px;

    align-items: flex-start;
}

.solution-detail-heading > span {
    font-size: .7rem;

    font-weight: 700;

    padding-top: 7px;
}

.solution-detail-heading h3 {
    font-size:
        clamp(1.8rem, 3vw, 3rem);

    line-height: 1;

    margin-top: 10px;
}

.solution-detail-body > div:first-child p {
    line-height: 1.8;

    opacity: .72;
}

.solution-detail-columns {
    display: grid;

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

    gap: 35px;

    margin-top: 35px;
}

.solution-detail-columns h4 {
    font-size: .9rem;

    margin-bottom: 15px;
}

.solution-detail-columns ul {
    margin: 0;

    padding: 0;

    list-style: none;
}

.solution-detail-columns li {
    display: flex;

    gap: 10px;

    padding: 7px 0;

    font-size: .85rem;

    line-height: 1.5;

    opacity: .7;
}

.solution-detail-columns li span {
    font-weight: 700;

    flex-shrink: 0;
}


/* =========================================================
   SOLUTION TYPES
========================================================= */

.solution-type-grid {
    display: grid;

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

    gap: 18px;

    margin-top: 60px;
}

.solution-type-card {
    min-height: 280px;

    padding: 30px;

    border:
        1px solid rgba(0,0,0,.1);

    border-radius: 20px;

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

.solution-type-card:hover {
    transform:
        translateY(-8px);

    box-shadow:
        0 25px 65px rgba(0,0,0,.1);
}

.solution-type-number {
    display: block;

    font-size: .7rem;

    font-weight: 700;

    margin-bottom: 80px;
}

.solution-type-card h3 {
    margin-bottom: 12px;
}

.solution-type-card p {
    line-height: 1.7;

    opacity: .68;
}


/* =========================================================
   APPROACH
========================================================= */

.solution-approach-grid {
    max-width: 1150px;

    margin:
        70px auto 0;

    display: grid;

    grid-template-columns:
        repeat(5, 1fr);
}

.solution-approach-grid article {
    min-height: 300px;

    padding: 30px;

    border:
        1px solid rgba(255,255,255,.12);

    transition:
        background .4s ease,
        transform .4s ease;
}

.solution-approach-grid article:hover {
    background:
        rgba(255,255,255,.04);

    transform:
        translateY(-6px);
}

.approach-number {
    display: block;

    font-size: .7rem;

    font-weight: 700;

    margin-bottom: 55px;
}

.approach-line {
    width: 45px;

    height: 1px;

    background:
        rgba(255,255,255,.4);

    margin-bottom: 25px;
}

.solution-approach-grid h3 {
    font-size: 1.2rem;
}

.solution-approach-grid p {
    line-height: 1.7;

    font-size: .88rem;

    opacity: .62;
}


/* =========================================================
   FAQ
========================================================= */

.solutions-faq-list {
    max-width: 900px;

    margin:
        60px auto 0;
}

.solution-faq-item {
    border-top:
        1px solid rgba(0,0,0,.12);
}

.solution-faq-item:last-child {
    border-bottom:
        1px solid rgba(0,0,0,.12);
}

.solution-faq-item summary {
    list-style: none;

    cursor: pointer;

    padding:
        28px 0;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 30px;

    font-weight: 600;
}

.solution-faq-item
summary::-webkit-details-marker {
    display: none;
}

.solution-faq-item summary b {
    width: 35px;
    height: 35px;

    display: flex;

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

    flex-shrink: 0;

    border:
        1px solid rgba(0,0,0,.15);

    border-radius: 50%;

    font-size: 1.2rem;

    font-weight: 400;

    transition:
        transform .3s ease;
}

.solution-faq-item[open]
summary b {
    transform:
        rotate(45deg);
}

.solution-faq-answer {
    padding:
        0 60px 30px 0;
}

.solution-faq-answer p {
    max-width: 750px;

    line-height: 1.8;

    opacity: .68;
}


/* =========================================================
   FINAL CTA
========================================================= */

.solutions-final-cta {
    padding-top: 110px;

    padding-bottom: 110px;

    text-align: center;

    overflow: hidden;
}

.solutions-cta-inner {
    max-width: 850px;

    margin: 0 auto;
}

.solutions-cta-inner h2 {
    font-size:
        clamp(2.6rem, 6vw, 6rem);

    line-height: .98;

    letter-spacing: -.045em;

    margin-bottom: 25px;
}

.solutions-cta-inner
> p:not(.eyebrow) {
    max-width: 650px;

    margin:
        0 auto 30px;

    line-height: 1.8;

    opacity: .7;
}

.solutions-cta-inner
.button-row {
    justify-content: center;
}


/* =========================================================
   SCROLL REVEAL
========================================================= */

.solution-scroll-reveal {
    opacity: 0;

    transform:
        translateY(35px);

    transition:
        opacity .75s ease,
        transform .75s
        cubic-bezier(.2,.7,.2,1);

    transition-delay:
        var(--solution-delay, 0ms);
}

.solution-scroll-reveal.is-visible {
    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================================
   HERO FLOAT
========================================================= */

@keyframes solutionFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-10px);
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .solutions-hero {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .solutions-hero-content {
        max-width: 850px;
    }

    .solution-type-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .solution-approach-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .solutions-hero {
        min-height: auto;

        padding-top: 55px;

        padding-bottom: 65px;
    }

    .solutions-hero-content h1 {
        font-size:
            clamp(2.5rem, 12vw, 4rem);
    }

    .solutions-hero-description {
        font-size: 1rem;
    }

    .solutions-hero-visual {
        min-height: 330px;
    }

    .solutions-floating-card {
        right: 10px;

        bottom: 15px;

        max-width: 210px;

        padding:
            16px 18px;
    }


    .solutions-introduction {
        grid-template-columns: 1fr;

        gap: 30px;
    }


    .solution-market-grid {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .solution-market-card {
        min-height: auto;
    }

    .solution-market-image {
        height: 230px;
    }

    .solution-market-content {
        padding: 28px;
    }


    .solution-detail {
        grid-template-columns: 1fr;

        gap: 30px;

        padding:
            40px 0;
    }

    .solution-detail-columns {
        grid-template-columns: 1fr;

        gap: 25px;
    }


    .solution-type-grid {
        grid-template-columns: 1fr;
    }

    .solution-type-card {
        min-height: auto;
    }

    .solution-type-number {
        margin-bottom: 45px;
    }


    .solution-approach-grid {
        grid-template-columns: 1fr;

        margin-top: 45px;
    }

    .solution-approach-grid article {
        min-height: auto;

        padding: 28px;
    }


    .solution-faq-item summary {
        font-size: .95rem;

        padding:
            23px 0;
    }

    .solution-faq-answer {
        padding-right: 0;
    }


    .solutions-final-cta {
        padding-top: 80px;

        padding-bottom: 80px;
    }

}




/* ==========================================================================
   BIRITEX ACADEMY
   E-learning platform interface
   ========================================================================== */

/* --------------------------------------------------------------------------
   Academy shared variables
   -------------------------------------------------------------------------- */

.academy-header,
.academy-section,
.academy-project-section,
.academy-cta-section {
    position: relative;
}


/* --------------------------------------------------------------------------
   Academy introduction
   -------------------------------------------------------------------------- */

.academy-header {
    overflow: hidden;
    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(92, 207, 191, 0.12),
            transparent 32%
        ),
        var(--color-white);

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


.academy-header::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;

    right: -180px;
    top: -180px;

    border-radius: 50%;
    border: 1px solid rgba(92, 207, 191, 0.14);

    pointer-events: none;
}


.academy-header-content {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns:
        minmax(0, 1.4fr)
        minmax(280px, 0.6fr);

    gap: clamp(35px, 7vw, 100px);
    align-items: end;

    max-width: 1400px;
    margin: 0 auto;
}


.academy-intro {
    max-width: 850px;
}


.academy-intro h1 {
    margin: 0 0 22px;

    max-width: 850px;

    font-size: clamp(42px, 6vw, 76px);
    line-height: 1.02;
    letter-spacing: -2.5px;
}


.academy-intro-text {
    max-width: 760px;

    margin: 0;

    color: var(--color-muted);

    font-size: clamp(16px, 1.5vw, 19px);
    line-height: 1.8;
}


/* --------------------------------------------------------------------------
   Academy statistics
   -------------------------------------------------------------------------- */

.academy-header-stats {
    display: grid;
    grid-template-columns: 1fr;

    border-left: 1px solid var(--color-line);
}


.academy-stat {
    padding: 20px 0 20px 28px;

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


.academy-stat:last-child {
    border-bottom: 0;
}


.academy-stat strong {
    display: block;

    color: var(--color-ink);

    font-size: clamp(24px, 3vw, 38px);
    line-height: 1;

    letter-spacing: -1px;
}


.academy-stat span {
    display: block;

    margin-top: 8px;

    color: var(--color-muted);

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

    text-transform: uppercase;
    letter-spacing: .05em;
}


/* --------------------------------------------------------------------------
   Academy search
   -------------------------------------------------------------------------- */

.academy-search-wrapper {
    position: relative;
    z-index: 3;

    max-width: 1000px;

    margin: 42px auto 0;
}


.academy-search-form {
    margin: 0;
}


.academy-search-input {
    display: flex;
    align-items: center;

    min-height: 64px;

    padding: 7px 7px 7px 20px;

    border: 1px solid var(--color-line);
    border-radius: 12px;

    background: var(--color-white);

    box-shadow:
        0 20px 50px rgba(11, 31, 58, 0.10);

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}


.academy-search-input:focus-within {
    border-color: var(--color-teal);

    box-shadow:
        0 20px 55px rgba(11, 31, 58, 0.13),
        0 0 0 4px rgba(92, 207, 191, 0.10);

    transform: translateY(-2px);
}


.academy-search-input > span {
    flex: 0 0 auto;

    margin-right: 12px;

    color: var(--color-muted);

    font-size: 25px;
    line-height: 1;
}


.academy-search-input input {
    flex: 1;

    min-width: 0;
    min-height: 48px;

    padding: 8px 12px;

    border: 0;
    outline: 0;

    background: transparent;

    font-size: 15px;
}


.academy-search-input input:focus {
    outline: 0;
}


.academy-search-input .primary-btn {
    flex: 0 0 auto;

    min-height: 50px;

    padding: 0 24px;

    border-radius: 8px;
}


.academy-popular-searches {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 8px;

    margin-top: 14px;

    color: var(--color-muted);

    font-size: 12px;
}


.academy-popular-searches > span {
    margin-right: 4px;

    font-weight: 700;
}


.academy-popular-searches a {
    padding: 6px 10px;

    border: 1px solid var(--color-line);
    border-radius: var(--radius-pill);

    background: var(--color-white);

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


.academy-popular-searches a:hover {
    color: var(--color-ink);

    border-color: var(--color-teal);

    background: #eefaf8;

    transform: translateY(-1px);
}


/* --------------------------------------------------------------------------
   Academy sections
   -------------------------------------------------------------------------- */

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


.academy-section:nth-of-type(even) {
    background: var(--color-surface);
}


.academy-section .section-head {
    margin-bottom: 34px;
}


.academy-section .section-head h2 {
    margin-bottom: 12px;
}


.academy-section .section-head > p:last-child {
    max-width: 720px;

    color: var(--color-muted);

    line-height: 1.75;
}


/* --------------------------------------------------------------------------
   Academy categories
   -------------------------------------------------------------------------- */

.academy-category-grid {
    display: grid;

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

    gap: 14px;
}


.academy-category-card {
    position: relative;

    min-height: 150px;

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

    gap: 18px;
    align-items: start;

    padding: 24px;

    border: 1px solid var(--color-line);
    border-radius: 10px;

    background: var(--color-white);

    overflow: hidden;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}


.academy-category-card::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 3px;

    background: var(--color-teal);

    transition: width .35s ease;
}


.academy-category-card:hover {
    transform: translateY(-5px);

    border-color: rgba(92, 207, 191, 0.55);

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


.academy-category-card:hover::after {
    width: 100%;
}


.academy-category-icon {
    width: 50px;
    height: 50px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    background: #e9faf7;

    color: var(--color-teal-dark);

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


.academy-category-card h3 {
    margin: 2px 0 8px;

    font-size: 18px;
    line-height: 1.3;
}


.academy-category-card p {
    margin: 0;

    color: var(--color-muted);

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


.academy-card-arrow {
    color: var(--color-muted);

    font-size: 20px;

    transition:
        transform .25s ease,
        color .25s ease;
}


.academy-category-card:hover .academy-card-arrow {
    color: var(--color-teal-dark);

    transform: translateX(4px);
}


/* --------------------------------------------------------------------------
   Academy filters
   -------------------------------------------------------------------------- */

.academy-filters {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 28px;

    padding-bottom: 2px;
}


.academy-filter {
    min-height: 40px;

    padding: 0 16px;

    border: 1px solid var(--color-line);
    border-radius: var(--radius-pill);

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

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

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}


.academy-filter:hover {
    color: var(--color-ink);

    border-color: var(--color-teal);

    transform: translateY(-1px);
}


.academy-filter.is-active {
    border-color: var(--color-ink);

    background: var(--color-ink);

    color: var(--color-primary);

    box-shadow: 0 7px 18px rgba(11, 31, 58, 0.14);
}


/* --------------------------------------------------------------------------
   Learning paths
   -------------------------------------------------------------------------- */

.academy-path-grid {
    display: grid;

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

    gap: 16px;
}


.academy-path-card {
    position: relative;

    min-height: 330px;

    display: flex;
    flex-direction: column;

    padding: 25px;

    border: 1px solid var(--color-line);
    border-radius: 10px;

    background: var(--color-white);

    overflow: hidden;

    opacity: 1;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease,
        opacity .25s ease;
}


.academy-path-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background: var(--color-teal);

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

    transition: transform .35s ease;
}


.academy-path-card:hover {
    transform: translateY(-5px);

    border-color: rgba(92, 207, 191, 0.55);

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


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


.academy-path-card.is-filtered-out {
    opacity: 0;

    transform: translateY(8px) scale(.98);
}


.academy-path-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 22px;
}


.academy-path-icon {
    width: 50px;
    height: 50px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    background: #e9faf7;

    color: var(--color-teal-dark);

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


.academy-path-category {
    display: inline-flex;

    color: var(--color-teal-dark);

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

    text-transform: uppercase;
    letter-spacing: 0.06em;
}


.academy-path-card h3 {
    margin: 0 0 11px;

    font-size: 21px;
    line-height: 1.3;
}


.academy-path-card > p {
    margin: 0;

    color: var(--color-muted);

    font-size: 14px;
    line-height: 1.7;
}


.academy-path-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-top: auto;
    padding-top: 24px;
}


.academy-path-meta span,
.academy-course-meta span {
    display: inline-flex;
    align-items: center;

    padding: 6px 9px;

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

    background: #f3f7f8;

    color: var(--color-muted);

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


.academy-path-link {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    margin-top: 18px;

    color: var(--color-ink);

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

    transition:
        color .2s ease,
        transform .2s ease;
}


.academy-path-link:hover {
    color: var(--color-primary);

    transform: translateX(3px);
}


/* --------------------------------------------------------------------------
   Featured courses
   -------------------------------------------------------------------------- */

.academy-section-heading-row {
    display: flex;

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

    gap: 30px;
}


.academy-view-all {
    flex: 0 0 auto;

    white-space: nowrap;
}


.academy-course-grid {
    display: grid;

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

    gap: 18px;
}


.academy-course-card {
    display: grid;

    grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr);

    overflow: hidden;

    border: 1px solid var(--color-line);
    border-radius: 10px;

    background: var(--color-white);

    box-shadow: 0 10px 35px rgba(11, 31, 58, 0.05);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}


.academy-course-card:hover {
    transform: translateY(-5px);

    border-color: rgba(92, 207, 191, 0.55);

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


.academy-course-image {
    position: relative;

    min-height: 280px;

    overflow: hidden;

    background: #dfe9ec;
}


.academy-course-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .5s ease;
}


.academy-course-card:hover .academy-course-image img {
    transform: scale(1.05);
}


.academy-course-badge {
    position: absolute;

    top: 14px;
    left: 14px;

    padding: 6px 9px;

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

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

    color: var(--color-ink);

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

    text-transform: uppercase;
}


.academy-course-content {
    display: flex;
    flex-direction: column;

    padding: 25px;
}


.academy-course-content h3 {
    margin: 3px 0 10px;

    font-size: 21px;
    line-height: 1.3;
}


.academy-course-content > p {
    margin: 0;

    color: var(--color-muted);

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


.academy-course-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-top: auto;
    padding-top: 22px;
}


.academy-course-footer {
    display: flex;

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

    gap: 15px;

    margin-top: 18px;
    padding-top: 17px;

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


.academy-course-footer strong {
    font-size: 13px;
}


.academy-course-footer .academy-path-link {
    margin-top: 0;
}


/* --------------------------------------------------------------------------
   Learning goals
   -------------------------------------------------------------------------- */

.academy-goals-section {
    background: var(--color-surface);
}


.academy-goals-grid {
    display: grid;

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

    gap: 14px;
}


.academy-goal-card {
    position: relative;

    min-height: 285px;

    display: flex;
    flex-direction: column;

    padding: 25px;

    border: 1px solid var(--color-line);
    border-radius: 10px;

    background: var(--color-white);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}


.academy-goal-card:hover {
    transform: translateY(-5px);

    border-color: rgba(92, 207, 191, 0.55);

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


.academy-goal-number {
    display: block;

    margin-bottom: 38px;

    color: var(--color-teal-dark);

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


.academy-goal-card h3 {
    margin: 0 0 10px;

    font-size: 19px;
    line-height: 1.35;
}


.academy-goal-card p {
    margin: 0;

    color: var(--color-muted);

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


.academy-goal-card strong {
    margin-top: auto;
    padding-top: 22px;

    font-size: 14px;
}


/* --------------------------------------------------------------------------
   Academy benefits
   -------------------------------------------------------------------------- */

.academy-benefits-section {
    background: var(--color-white);
}


.academy-benefits-layout {
    display: grid;

    grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);

    gap: clamp(35px, 7vw, 90px);

    align-items: start;
}


.academy-benefits-intro {
    position: sticky;

    top: calc(var(--header-height) + 30px);
}


.academy-benefits-intro h2 {
    margin: 0 0 15px;

    max-width: 520px;

    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.05;

    letter-spacing: -1.5px;
}


.academy-benefits-intro > p:last-child {
    max-width: 520px;

    margin: 0;

    color: var(--color-muted);

    line-height: 1.75;
}


.academy-benefits-grid {
    display: grid;

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

    gap: 14px;
}


.academy-benefit-card {
    padding: 25px;

    border: 1px solid var(--color-line);
    border-radius: 10px;

    background: var(--color-white);

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


.academy-benefit-card:hover {
    transform: translateY(-4px);

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


.academy-benefit-card > span {
    display: block;

    margin-bottom: 30px;

    color: var(--color-teal-dark);

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


.academy-benefit-card h3 {
    margin: 0 0 9px;

    font-size: 18px;
}


.academy-benefit-card p {
    margin: 0;

    color: var(--color-muted);

    font-size: 14px;
    line-height: 1.7;
}


/* --------------------------------------------------------------------------
   Project-based learning
   -------------------------------------------------------------------------- */

.academy-project-section {
    display: grid;

    grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);

    gap: clamp(40px, 8vw, 110px);

    align-items: center;

    background: var(--color-ink);

    color: var(--color-white);
}


.academy-project-content {
    max-width: 760px;
}


.academy-project-content h2 {
    margin: 0 0 18px;

    font-size: clamp(34px, 5vw, 58px);
    line-height: 1.05;

    letter-spacing: -1.5px;
}


.academy-project-content > p:not(.eyebrow) {
    max-width: 690px;

    margin: 0;

    color: var(--color);

    line-height: 1.8;
}


.academy-project-section .eyebrow {
    color: var(--color-teal);
}


.academy-project-points {
    display: grid;

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

    gap: 14px;

    margin-top: 34px;
}


.academy-project-points > div {
    padding: 17px;

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

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

    transition:
        background .25s ease,
        transform .25s ease;
}


.academy-project-points > div:hover {
    background: rgba(255, 255, 255, 0.08);

    transform: translateY(-3px);
}


.academy-project-points span {
    display: block;

    margin-bottom: 10px;

    color: var(--color-teal);

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


.academy-project-points strong {
    display: block;

    margin-bottom: 5px;
}


.academy-project-points p {
    margin: 0;

    color: var(--color);

    font-size: 15px;
    line-height: 1.5;
}


/* --------------------------------------------------------------------------
   Project visual
   -------------------------------------------------------------------------- */

.academy-project-visual {
    display: flex;

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

    min-height: 350px;
}


.academy-project-window {
    width: min(100%, 480px);

    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;

    background: #0d2946;

    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.25);

    overflow: hidden;

    transform: perspective(1000px) rotateY(-5deg);

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


.academy-project-window:hover {
    transform: perspective(1000px) rotateY(0deg) translateY(-5px);

    box-shadow:
        0 35px 80px rgba(0, 0, 0, 0.35);
}


.academy-window-header {
    display: flex;

    align-items: center;

    gap: 6px;

    padding: 13px 16px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}


.academy-window-header span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

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


.academy-code-lines {
    display: grid;

    gap: 13px;

    padding: 30px;
}


.academy-code-lines i {
    display: block;

    height: 9px;

    border-radius: 4px;

    background: rgba(92, 207, 191, 0.22);
}


.academy-code-lines i:nth-child(1) {
    width: 55%;
}


.academy-code-lines i:nth-child(2) {
    width: 82%;
}


.academy-code-lines i:nth-child(3) {
    width: 67%;
}


.academy-code-lines i:nth-child(4) {
    width: 91%;
}


.academy-code-lines i:nth-child(5) {
    width: 46%;
}


.academy-code-lines i:nth-child(6) {
    width: 75%;
}


.academy-code-lines i:nth-child(7) {
    width: 60%;
}


/* --------------------------------------------------------------------------
   Career resources
   -------------------------------------------------------------------------- */

.academy-resources-section {
    background: var(--color-surface);
}


.academy-resource-grid {
    display: grid;

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

    gap: 14px;
}


.academy-resource-card {
    min-height: 270px;

    display: flex;
    flex-direction: column;

    padding: 25px;

    border: 1px solid var(--color-line);
    border-radius: 10px;

    background: var(--color-white);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}


.academy-resource-card:hover {
    transform: translateY(-5px);

    border-color: rgba(92, 207, 191, 0.55);

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


.academy-resource-card > span {
    margin-bottom: 36px;

    color: var(--color-teal-dark);

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


.academy-resource-card h3 {
    margin: 0 0 10px;

    font-size: 19px;
    line-height: 1.35;
}


.academy-resource-card p {
    margin: 0;

    color: var(--color-muted);

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


.academy-resource-card a {
    margin-top: auto;
    padding-top: 22px;

    color: var(--color-ink);

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

    transition:
        color .2s ease,
        transform .2s ease;
}


.academy-resource-card a:hover {
    color: var(--color-teal-dark);

    transform: translateX(3px);
}


/* --------------------------------------------------------------------------
   Academy CTA
   -------------------------------------------------------------------------- */

.academy-cta-section {
    background: var(--color-white);
}


.academy-cta {
    position: relative;

    display: flex;

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

    gap: 40px;

    padding: clamp(30px, 5vw, 60px);

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #071a30,
            #102f4e
        );

    color: var(--color-white);

    overflow: hidden;
}


.academy-cta::before {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    right: -130px;
    top: -170px;

    border: 1px solid rgba(92, 207, 191, 0.18);

    border-radius: 50%;
}


.academy-cta > * {
    position: relative;
    z-index: 1;
}


.academy-cta h2 {
    max-width: 720px;

    margin: 0 0 13px;

    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.08;

    letter-spacing: -1px;
    color:  var(--color-white);
}


.academy-cta p:not(.eyebrow) {
    max-width: 650px;

    margin: 0;

    color: #b9c8d6;

    line-height: 1.7;
}


.academy-cta .secondary-btn {
    border-color: rgba(255, 255, 255, 0.2);

    background: transparent;

    color: var(--color-white);
}


.academy-cta .secondary-btn:hover {
    background: var(--color-white);

    color: var(--color-ink);
}


/* --------------------------------------------------------------------------
   Academy entrance animations
   -------------------------------------------------------------------------- */

.academy-header-content,
.academy-search-wrapper,
.academy-category-card,
.academy-path-card,
.academy-course-card,
.academy-goal-card,
.academy-benefit-card,
.academy-resource-card,
.academy-cta {
    animation: academyFadeUp .7s ease both;
}


.academy-category-card:nth-child(2),
.academy-path-card:nth-child(2),
.academy-course-card:nth-child(2),
.academy-goal-card:nth-child(2),
.academy-benefit-card:nth-child(2),
.academy-resource-card:nth-child(2) {
    animation-delay: .08s;
}


.academy-category-card:nth-child(3),
.academy-path-card:nth-child(3),
.academy-course-card:nth-child(3),
.academy-goal-card:nth-child(3),
.academy-benefit-card:nth-child(3),
.academy-resource-card:nth-child(3) {
    animation-delay: .16s;
}


.academy-category-card:nth-child(4),
.academy-path-card:nth-child(4),
.academy-course-card:nth-child(4),
.academy-goal-card:nth-child(4),
.academy-benefit-card:nth-child(4),
.academy-resource-card:nth-child(4) {
    animation-delay: .24s;
}


@keyframes academyFadeUp {

    from {
        opacity: 0;

        transform:
            translateY(18px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/* --------------------------------------------------------------------------
   Academy responsive - tablets
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {

    .academy-header-content {
        grid-template-columns: 1fr;
        gap: 35px;
    }


    .academy-header-stats {
        grid-template-columns: repeat(3, 1fr);

        border-left: 0;
        border-top: 1px solid var(--color-line);
    }


    .academy-stat {
        padding: 20px;

        border-bottom: 0;
        border-right: 1px solid var(--color-line);
    }


    .academy-stat:last-child {
        border-right: 0;
    }


    .academy-category-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    .academy-path-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    .academy-goals-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    .academy-resource-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    .academy-course-grid {
        grid-template-columns: 1fr;
    }


    .academy-benefits-layout {
        grid-template-columns: 1fr;
    }


    .academy-benefits-intro {
        position: static;
    }


    .academy-project-section {
        grid-template-columns: 1fr;
    }


    .academy-project-visual {
        min-height: 280px;
    }

}


/* --------------------------------------------------------------------------
   Academy responsive - mobile
   -------------------------------------------------------------------------- */

@media (max-width: 680px) {

    .academy-header {
        padding-top: 42px;
    }


    .academy-header-content {
        gap: 30px;
    }


    .academy-intro h1 {
        font-size: clamp(36px, 11vw, 52px);

        letter-spacing: -1.5px;
    }


    .academy-intro-text {
        font-size: 15px;

        line-height: 1.7;
    }


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


    .academy-stat {
        padding: 15px 0;

        border-right: 0;
        border-bottom: 1px solid var(--color-line);
    }


    .academy-stat:last-child {
        border-bottom: 0;
    }


    .academy-stat strong {
        font-size: 27px;
    }


    .academy-search-wrapper {
        margin-top: 30px;
    }


    .academy-search-input {
        align-items: stretch;

        flex-wrap: wrap;

        padding: 8px;
    }


    .academy-search-input > span {
        display: none;
    }


    .academy-search-input input {
        flex: 1 1 100%;

        min-height: 48px;

        padding: 8px 12px;
    }


    .academy-search-input .primary-btn {
        width: 100%;
    }


    .academy-popular-searches {
        align-items: flex-start;
    }


    .academy-category-grid,
    .academy-path-grid,
    .academy-goals-grid,
    .academy-resource-grid,
    .academy-benefits-grid {
        grid-template-columns: 1fr;
    }


    .academy-category-card {
        min-height: auto;

        padding: 20px;
    }


    .academy-path-card {
        min-height: 290px;

        padding: 21px;
    }


    .academy-filters {
        flex-wrap: nowrap;

        overflow-x: auto;

        padding-bottom: 8px;

        scrollbar-width: none;
    }


    .academy-filters::-webkit-scrollbar {
        display: none;
    }


    .academy-filter {
        flex: 0 0 auto;
    }


    .academy-section-heading-row {
        align-items: flex-start;

        flex-direction: column;
    }


    .academy-view-all {
        width: 100%;
    }


    .academy-course-card {
        grid-template-columns: 1fr;
    }


    .academy-course-image {
        min-height: 210px;
        height: 210px;
    }


    .academy-course-content {
        padding: 21px;
    }


    .academy-course-footer {
        align-items: flex-start;

        flex-direction: column;
    }


    .academy-benefits-intro h2 {
        font-size: 34px;
    }


    .academy-project-points {
        grid-template-columns: 1fr;
    }


    .academy-project-window {
        transform: none;
    }


    .academy-project-window:hover {
        transform: translateY(-4px);
    }


    .academy-cta {
        align-items: flex-start;

        flex-direction: column;

        padding: 30px 22px;
    }


    .academy-cta .button-row {
        width: 100%;
    }


    .academy-cta .button-row a {
        width: 100%;
    }

}


/* --------------------------------------------------------------------------
   Reduced motion accessibility
   -------------------------------------------------------------------------- */

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

    .academy-header-content,
    .academy-search-wrapper,
    .academy-category-card,
    .academy-path-card,
    .academy-course-card,
    .academy-goal-card,
    .academy-benefit-card,
    .academy-resource-card,
    .academy-cta {
        animation: none;
        transition: none;
    }


    .academy-category-card:hover,
    .academy-path-card:hover,
    .academy-course-card:hover,
    .academy-goal-card:hover,
    .academy-benefit-card:hover,
    .academy-resource-card:hover {
        transform: none;
    }


    .academy-course-image img,
    .academy-project-window {
        transition: none;
    }

}


/* ============================================================
   PRODUCTS
   ============================================================ */

.products-page {
    overflow: hidden;
}

.products-intro {
    padding-top: clamp(60px, 8vw, 110px);
    padding-bottom: clamp(45px, 6vw, 80px);
}

.products-intro .section-head {
    max-width: 850px;
}


/* ============================================================
   TOOLBAR
   ============================================================ */

.products-toolbar-section {
    padding-top: 0;
    padding-bottom: 30px;
}

.products-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    padding: 24px 0;
    border-top: 1px solid rgba(47, 53, 59, 0.12);
    border-bottom: 1px solid rgba(47, 53, 59, 0.12);
}

.products-toolbar-heading h2 {
    margin: 5px 0 0;
}

.products-count {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.55;
}

.products-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.product-filter {
    border: 1px solid rgba(47, 53, 59, 0.16);
    background: transparent;
    padding: 10px 16px;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-size: 0.88rem;
    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}

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

.product-filter.is-active {
    background: var(--brand-dark, #2F353B);
    color: #fff;
    border-color: var(--brand-dark, #2F353B);
}


/* ============================================================
   PRODUCT GRID
   ============================================================ */

.products-list-section {
    padding-top: 20px;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}


/* ============================================================
   PRODUCT CARD
   ============================================================ */

.product-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(47, 53, 59, 0.11);
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 12px 35px rgba(47, 53, 59, 0.06);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.product-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 22px 50px rgba(47, 53, 59, 0.12);
}

.product-card[hidden] {
    display: none;
}


/* ============================================================
   PRODUCT IMAGE
   ============================================================ */

.product-card-image {
    position: relative;
    display: block;
    height: 230px;
    overflow: hidden;
    background: #eef0f1;
}

.product-card-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.product-card:hover .product-card-image img {
    transform: scale(1.05);
}


/* ============================================================
   STATUS
   ============================================================ */

.product-status {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.status-coming-soon {
    color: #8a5b00;
}

.status-beta {
    color: #315c8a;
}

.status-maintenance {
    color: #8a3d36;
}


/* ============================================================
   PRODUCT CONTENT
   ============================================================ */

.product-card-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 24px;
}

.product-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
    color: #777;
    font-size: 0.78rem;
}

.product-type {
    color: var(--brand-red, #D6534D);
    font-weight: 700;
}

.product-card-content h3 {
    margin: 0 0 12px;
    font-size: 1.3rem;
    line-height: 1.2;
}

.product-card-content > p {
    margin: 0;
    color: #666;
    line-height: 1.7;
}


/* ============================================================
   PLATFORMS
   ============================================================ */

.product-platforms {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 18px;
}

.product-platforms span {
    padding: 6px 9px;
    border-radius: 7px;
    background: #f2f3f3;
    font-size: 0.75rem;
}


/* ============================================================
   CARD FOOTER
   ============================================================ */

.product-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: auto;
    padding-top: 24px;
}

.product-view-link,
.product-action-link {
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
}

.product-view-link {
    color: var(--brand-dark, #2F353B);
}

.product-view-link span {
    display: inline-block;
    margin-left: 5px;
    transition: transform 0.25s ease;
}

.product-view-link:hover span {
    transform: translateX(4px);
}

.product-action-link {
    color: var(--brand-red, #D6534D);
}


/* ============================================================
   EMPTY STATE
   ============================================================ */

.products-empty {
    max-width: 650px;
    margin: 30px auto;
    padding: 60px 25px;
    text-align: center;
    border: 1px dashed rgba(47, 53, 59, 0.2);
    border-radius: 18px;
}

.products-empty h2,
.products-empty h3 {
    margin-top: 0;
}

.products-empty p {
    color: #666;
}


/* ============================================================
   PROCESS
   ============================================================ */

.products-process {
    margin-top: 50px;
}

.products-process .section-head {
    max-width: 750px;
}

.products-process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 40px;
}

.products-process-card {
    padding: 28px;
    border: 1px solid rgba(47, 53, 59, 0.1);
    border-radius: 16px;
    background: #fff;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.products-process-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(47, 53, 59, 0.08);
}

.products-process-card > span {
    display: block;
    margin-bottom: 30px;
    color: var(--brand-red, #D6534D);
    font-size: 0.8rem;
    font-weight: 800;
}

.products-process-card h3 {
    margin-bottom: 10px;
}

.products-process-card p {
    margin: 0;
    color: #666;
    line-height: 1.7;
}


/* ============================================================
   CTA
   ============================================================ */

.products-cta {
    margin-top: 50px;
}

.products-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: clamp(30px, 5vw, 55px);
    border-radius: 22px;
    background: var(--brand-dark, #2F353B);
    color: #fff;
}

.products-cta-inner > div:first-child {
    max-width: 700px;
}

.products-cta-inner .eyebrow {
    color: #fff;
    opacity: 0.7;
}

.products-cta-inner h2 {
    margin: 8px 0 15px;
}

.products-cta-inner p {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.7;
}

.products-cta-inner .secondary-btn {
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1000px) {

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

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

    .products-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .products-cta-inner {
        flex-direction: column;
        align-items: flex-start;
    }

}


@media (max-width: 680px) {

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

    .products-process-grid {
        grid-template-columns: 1fr;
    }

    .products-filters {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 5px;
    }

    .product-filter {
        flex: 0 0 auto;
    }

    .product-card-image {
        height: 210px;
    }

    .product-card-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .products-cta-inner .button-row {
        width: 100%;
        flex-direction: column;
    }

    .products-cta-inner .button-row a {
        width: 100%;
        text-align: center;
    }

}


/* ============================================================
   BIRITEX CONTACT PAGE
   ============================================================ */


/* ============================================================
   CONTACT INTRO
   ============================================================ */

.contact-intro {
    padding-top: clamp(60px, 8vw, 110px);
    padding-bottom: clamp(55px, 7vw, 100px);
}

.contact-intro-content {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
    gap: clamp(40px, 7vw, 100px);
    align-items: end;
}

.contact-intro h1 {
    max-width: 850px;
    margin: 0;
    font-size: clamp(44px, 6vw, 82px);
    line-height: .98;
    letter-spacing: -.045em;
}

.contact-intro-description {
    max-width: 500px;
}

.contact-intro-description p {
    margin: 0 0 25px;
    font-size: clamp(16px, 1.5vw, 19px);
    line-height: 1.75;
    opacity: .75;
}


/* ============================================================
   CONTACT CHANNELS
   ============================================================ */

.contact-channels {
    padding-top: clamp(70px, 9vw, 120px);
    padding-bottom: clamp(70px, 9vw, 120px);
}

.contact-channel-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 55px;
}

.contact-channel-card {
    position: relative;
    min-width: 0;
    min-height: 310px;
    padding: 30px;
    overflow: hidden;
    border: 1px solid rgba(47, 53, 59, .12);
    border-radius: 20px;
    background: #fff;
    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.contact-channel-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 50px rgba(47, 53, 59, .10);
}

.contact-channel-number {
    display: block;
    margin-bottom: 30px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    opacity: .4;
}

.contact-channel-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin-bottom: 25px;
    border: 1px solid rgba(47, 53, 59, .14);
    border-radius: 14px;
    font-weight: 800;
    transition:
        background-color .3s ease,
        color .3s ease,
        transform .3s ease;
}

.contact-channel-card:hover .contact-channel-icon {
    transform: translateY(-3px) rotate(5deg);
    background: #2F353B;
    color: #fff;
}

.contact-channel-card h3 {
    margin: 0 0 12px;
    font-size: 21px;
}

.contact-channel-card p {
    margin: 0 0 22px;
    font-size: 14px;
    line-height: 1.7;
    opacity: .68;
}

.contact-channel-card > a {
    color: #2F353B;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.contact-channel-card > a:hover {
    color: #D6534D;
}


/* ============================================================
   MAIN CONTACT FORM
   ============================================================ */

.contact-form-section {
    padding-top: clamp(75px, 9vw, 125px);
    padding-bottom: clamp(75px, 9vw, 125px);
}

.contact-form-layout {
    display: grid;
    grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
    gap: clamp(50px, 8vw, 120px);
    align-items: start;
}

.contact-form-info {
    position: sticky;
    top: 100px;
}

.contact-form-info h2 {
    max-width: 620px;
}

.contact-form-info > p:not(.eyebrow) {
    max-width: 560px;
    line-height: 1.8;
    opacity: .72;
}

.contact-form-points {
    margin-top: 45px;
}

.contact-form-points > div {
    display: grid;
    grid-template-columns: 35px 1fr;
    gap: 18px;
    padding: 20px 0;
    border-top: 1px solid rgba(47, 53, 59, .12);
}

.contact-form-points > div:last-child {
    border-bottom: 1px solid rgba(47, 53, 59, .12);
}

.contact-form-points span {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    color: #D6534D;
}

.contact-form-points strong {
    display: block;
    margin-bottom: 6px;
    font-size: 15px;
}

.contact-form-points p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    opacity: .65;
}


/* ============================================================
   CONTACT FORM WRAPPER
   ============================================================ */

.contact-form-wrapper {
    padding: clamp(25px, 4vw, 45px);
    border: 1px solid rgba(47, 53, 59, .12);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 20px 60px rgba(47, 53, 59, .06);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.contact-form label {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.contact-form label > span {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(47, 53, 59, .15);
    border-radius: 12px;
    background: #fafafa;
    color: #2F353B;
    font: inherit;
    font-size: 14px;
    outline: none;
    transition:
        border-color .25s ease,
        background-color .25s ease,
        box-shadow .25s ease;
}

.contact-form input,
.contact-form select {
    height: 52px;
    padding: 0 15px;
}

.contact-form textarea {
    min-height: 150px;
    padding: 15px;
    resize: vertical;
    line-height: 1.6;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #2F353B;
    opacity: .4;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    border-color: #D6534D;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(214, 83, 77, .08);
}

.contact-form-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-top: 5px;
}

.contact-form-bottom p {
    max-width: 420px;
    margin: 0;
    font-size: 11px;
    line-height: 1.6;
    opacity: .5;
}

.contact-form-bottom .primary-btn {
    flex-shrink: 0;
}

.form-note {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
}


/* ============================================================
   PROJECT TYPES
   ============================================================ */

.contact-project-types {
    padding-top: clamp(70px, 9vw, 120px);
    padding-bottom: clamp(70px, 9vw, 120px);
}

.contact-project-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 50px;
}

.contact-project-card {
    position: relative;
    min-height: 270px;
    padding: 30px;
    border: 1px solid rgba(47, 53, 59, .12);
    border-radius: 20px;
    background: #fff;
    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.contact-project-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 50px rgba(47, 53, 59, .09);
}

.contact-project-card > span {
    display: block;
    margin-bottom: 50px;
    color: #D6534D;
    font-size: 12px;
    font-weight: 800;
}

.contact-project-card h3 {
    margin: 0 0 13px;
    font-size: 20px;
}

.contact-project-card p {
    margin: 0 0 25px;
    font-size: 14px;
    line-height: 1.7;
    opacity: .68;
}

.contact-project-card a {
    color: #2F353B;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.contact-project-card a:hover {
    color: #D6534D;
}


/* ============================================================
   CONTACT FAQ
   ============================================================ */

.contact-faq {
    padding-top: clamp(70px, 9vw, 120px);
    padding-bottom: clamp(70px, 9vw, 120px);
}
.contact-extra-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.contact-extra-links a{
    color: #2F353B;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.contact-direct{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-direct a{
    color: var(--color-primary-dark);
}

.contact-direct a:hover{
    color: var(--color-warning);
}

.contact-faq-layout {
    display: grid;
    grid-template-columns: minmax(250px, .7fr) minmax(0, 1.3fr);
    gap: clamp(50px, 8vw, 120px);
    align-items: start;
}

.contact-faq-list {
    border-top: 1px solid rgba(47, 53, 59, .14);
}

.contact-faq-item {
    border-bottom: 1px solid rgba(47, 53, 59, .14);
}

.contact-faq-item summary {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 5px;
    cursor: pointer;
    list-style: none;
    font-size: 16px;
    font-weight: 700;
}

.contact-faq-item summary::-webkit-details-marker {
    display: none;
}

.contact-faq-item summary::after {
    content: "+";
    flex-shrink: 0;
    font-size: 22px;
    font-weight: 400;
    transition: transform .3s ease;
}

.contact-faq-item[open] summary::after {
    transform: rotate(45deg);
}

.contact-faq-item > div {
    max-width: 750px;
    padding: 0 40px 25px 5px;
    animation: contactFaqOpen .3s ease both;
}

.contact-faq-item p {
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
    opacity: .68;
}

@keyframes contactFaqOpen {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

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


/* ============================================================
   FINAL CTA
   ============================================================ */

.contact-final-cta {
    padding-top: clamp(50px, 7vw, 90px);
    padding-bottom: clamp(70px, 8vw, 110px);
}

.contact-final-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: clamp(35px, 5vw, 65px);
    border-radius: 26px;
    background: #2F353B;
    color: #fff;
}

.contact-final-cta .eyebrow {
    color: rgba(255, 255, 255, .6);
}

.contact-final-cta h2 {
    margin: 0;
    color: #fff;
}

.contact-final-cta .primary-btn {
    flex-shrink: 0;
}


/* ============================================================
   CONTACT ANIMATIONS
   ============================================================ */

@keyframes contactFadeUp {

    from {
        opacity: 0;
        transform: translateY(25px);
    }

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

}

.contact-intro-content {
    animation: contactFadeUp .7s ease both;
}

.contact-channel-card,
.contact-project-card,
.contact-form-wrapper {
    animation: contactFadeUp .7s ease both;
}


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

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

    .contact-intro-content,
    .contact-channel-card,
    .contact-project-card,
    .contact-form-wrapper {
        animation: none;
    }

    .contact-channel-card,
    .contact-channel-icon,
    .contact-project-card,
    .contact-faq-item summary::after {
        transition: none;
    }

}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1100px) {

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

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

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

    .contact-form-info {
        position: static;
    }

    .contact-faq-layout {
        grid-template-columns: 1fr;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 760px) {

    .contact-intro {
        padding-top: 50px;
        padding-bottom: 55px;
    }

    .contact-intro-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .contact-intro h1 {
        font-size: clamp(42px, 12vw, 60px);
    }

    .contact-channel-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 40px;
    }

    .contact-channel-card {
        min-height: auto;
        padding: 25px;
    }

    .contact-channel-number {
        margin-bottom: 25px;
    }

    .contact-form-layout {
        gap: 45px;
    }

    .contact-form-wrapper {
        padding: 22px;
        border-radius: 18px;
    }

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

    .contact-form-bottom {
        align-items: stretch;
        flex-direction: column;
    }

    .contact-form-bottom .primary-btn {
        width: 100%;
        justify-content: center;
    }

    .contact-project-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 40px;
    }

    .contact-project-card {
        min-height: auto;
        padding: 25px;
    }

    .contact-faq-layout {
        gap: 40px;
    }

    .contact-faq-item summary {
        padding: 20px 2px;
        font-size: 15px;
    }

    .contact-faq-item > div {
        padding-left: 2px;
        padding-right: 15px;
    }

    .contact-final-cta-inner {
        align-items: stretch;
        flex-direction: column;
        padding: 32px 25px;
        border-radius: 20px;
    }

    .contact-final-cta .primary-btn {
        width: 100%;
        justify-content: center;
    }

}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

    .contact-intro h1 {
        font-size: 41px;
    }

    .contact-form-wrapper {
        padding: 18px;
    }

    .contact-form input,
    .contact-form select {
        height: 50px;
    }

    .contact-form textarea {
        min-height: 130px;
    }

    .contact-final-cta-inner {
        padding: 28px 20px;
    }

}



/* ============================================================
   BIRITEX OS
   Operations & Website Management Interface
   ============================================================ */

/* ------------------------------------------------------------
   ROOT / VARIABLES
   ------------------------------------------------------------ */

:root {
    --os-bg: #f5f6f7;
    --os-surface: #ffffff;
    --os-surface-soft: #f8f9fa;

    --os-border: #e5e7e9;
    --os-border-dark: #d5d8db;

    --os-text: #20252a;
    --os-text-soft: #687078;
    --os-text-muted: #9299a0;

    --os-primary: #2f353b;
    --os-primary-dark: #20252a;

    --os-accent: #d6534d;
    --os-accent-dark: #b9433d;

    --os-success: #26845b;
    --os-warning: #b7791f;
    --os-danger: #c0392b;
    --os-info: #3478b8;

    --os-radius: 16px;
    --os-radius-sm: 10px;

    --os-sidebar-width: 260px;

    --os-shadow:
        0 8px 30px rgba(32, 37, 42, 0.06);

    --os-shadow-hover:
        0 16px 40px rgba(32, 37, 42, 0.10);

    --os-transition:
        180ms ease;

    --os-transition-slow:
        350ms cubic-bezier(.2,.7,.2,1);
}


/* ------------------------------------------------------------
   MAIN SHELL
   ------------------------------------------------------------ */

.os-shell {
    min-height: 100vh;
    width: 100%;
    display: flex;
    background: var(--os-bg);
    color: var(--os-text);
    overflow-x: hidden;
}

.os-mobile-menu,
.os-mobile-overlay,
.os-sidebar-close {
    display: none;
}


/* ------------------------------------------------------------
   SIDEBAR
   ------------------------------------------------------------ */

.os-sidebar {
    position: sticky;
    top: 0;
    left: 0;

    width: var(--os-sidebar-width);
    min-width: var(--os-sidebar-width);
    height: 100vh;

    display: flex;
    flex-direction: column;

    background: var(--os-primary);
    color: #fff;

    border-right: 1px solid rgba(255,255,255,.06);

    z-index: 100;

    overflow-y: auto;
    overflow-x: hidden;
}


.os-sidebar::-webkit-scrollbar {
    width: 5px;
}

.os-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.14);
    border-radius: 20px;
}


/* ------------------------------------------------------------
   OS BRAND
   ------------------------------------------------------------ */

.os-brand {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 25px 20px;

    border-bottom: 1px solid rgba(255,255,255,.08);
}


.os-brand img {
    width: 42px;
    height: 42px;

    object-fit: contain;

    border-radius: 10px;
}


.os-brand div {
    min-width: 0;
}


.os-brand strong {
    display: block;

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

    white-space: nowrap;
}


.os-brand span {
    display: block;

    margin-top: 3px;

    font-size: 10px;
    line-height: 1.4;

    color: rgba(255,255,255,.55);

    white-space: nowrap;
}


/* ------------------------------------------------------------
   NAVIGATION
   ------------------------------------------------------------ */

.os-nav {
    display: flex;
    flex-direction: column;

    padding: 16px 12px 20px;

    gap: 3px;
}


.os-nav-label {
    margin: 18px 9px 7px;

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

    letter-spacing: .14em;
    text-transform: uppercase;

    color: rgba(255,255,255,.35);
}


.os-nav button {
    width: 100%;

    min-height: 44px;

    display: flex;
    align-items: center;
    gap: 11px;

    padding: 10px 11px;

    border: 0;
    border-radius: 10px;

    background: transparent;
    color: rgba(255,255,255,.66);

    text-align: left;

    cursor: pointer;

    transition:
        background var(--os-transition),
        color var(--os-transition),
        transform var(--os-transition);
}


.os-nav button:hover {
    background: rgba(255,255,255,.07);
    color: #fff;

    transform: translateX(2px);
}


.os-nav button.is-active {
    background: rgba(255,255,255,.12);
    color: #fff;
}


.os-nav-icon {
    width: 21px;
    min-width: 21px;

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

    font-size: 14px;

    opacity: .8;
}


.os-nav button.is-active .os-nav-icon {
    color: #fff;
    opacity: 1;
}


.os-nav button span:not(.os-nav-icon) {
    flex: 1;

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


.os-nav button em {
    min-width: 20px;
    height: 20px;

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

    padding: 0 5px;

    border-radius: 999px;

    background: rgba(255,255,255,.08);

    color: rgba(255,255,255,.65);

    font-size: 10px;
    font-style: normal;
}


/* ------------------------------------------------------------
   SIDEBAR FOOTER
   ------------------------------------------------------------ */

.os-sidebar-footer {
    margin-top: auto;

    padding: 15px;

    border-top: 1px solid rgba(255,255,255,.08);
}


.os-system-status {
    display: flex;
    align-items: center;
    gap: 9px;

    padding: 10px;

    border-radius: 10px;

    background: rgba(255,255,255,.05);
}


.status-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #48b47a;

    box-shadow:
        0 0 0 4px rgba(72,180,122,.10);

    animation: osPulse 2.5s infinite;
}


.os-system-status strong {
    display: block;

    font-size: 11px;
}


.os-system-status small {
    display: block;

    margin-top: 2px;

    font-size: 9px;

    color: rgba(255,255,255,.42);
}


/* ------------------------------------------------------------
   WORKSPACE
   ------------------------------------------------------------ */

.os-workspace {
    flex: 1;
    min-width: 0;

    padding: 0 34px 50px;

    overflow-x: hidden;
}


/* ------------------------------------------------------------
   TOP BAR
   ------------------------------------------------------------ */

.os-topbar {
    min-height: 108px;

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

    gap: 25px;

    padding: 24px 0;

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

    margin-bottom: 30px;
}


.os-page-heading {
    min-width: 0;
}


.os-page-heading .eyebrow {
    margin-bottom: 5px;
}


.os-page-heading h1 {
    margin: 0;

    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.1;

    letter-spacing: -.03em;
}


.os-breadcrumb {
    margin: 5px 0 0;

    color: var(--os-text-muted);

    font-size: 12px;
}


.os-topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;

    flex-wrap: wrap;
}


/* ------------------------------------------------------------
   BUTTONS
   ------------------------------------------------------------ */

.os-shell button,
.os-shell input,
.os-shell select,
.os-shell textarea {
    font: inherit;
}


.os-shell .primary-btn,
.os-shell .secondary-btn {
    min-height: 42px;

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

    padding: 10px 17px;

    border-radius: 9px;

    cursor: pointer;

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


.os-shell .primary-btn {
    border: 1px solid var(--os-primary);

    background: var(--os-primary);
    color: #fff;
}


.os-shell .primary-btn:hover {
    background: var(--os-primary-dark);

    transform: translateY(-1px);

    box-shadow:
        0 7px 20px rgba(32,37,42,.14);
}


.os-shell .secondary-btn {
    border: 1px solid var(--os-border-dark);

    background: #fff;
    color: var(--os-text);
}


.os-shell .secondary-btn:hover {
    border-color: var(--os-primary);

    transform: translateY(-1px);
}


.text-btn {
    border: 0;

    background: transparent;
    color: var(--os-accent);

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

    cursor: pointer;
}


.text-btn:hover {
    color: var(--os-accent-dark);
}


/* ------------------------------------------------------------
   EYEBROW
   ------------------------------------------------------------ */

.os-shell .eyebrow {
    margin: 0 0 8px;

    color: var(--os-accent);

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

    letter-spacing: .12em;
    text-transform: uppercase;
}


/* ------------------------------------------------------------
   VIEWS
   ------------------------------------------------------------ */

.os-view {
    display: none;

    animation: osViewIn .35s ease both;
}


.os-view.is-active {
    display: block;
}


/* ------------------------------------------------------------
   METRIC CARDS
   ------------------------------------------------------------ */

.metric-grid {
    display: grid;

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

    gap: 16px;

    margin-bottom: 20px;
}


.metric-card {
    position: relative;

    padding: 22px;

    background: var(--os-surface);

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

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

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

    overflow: hidden;

    transition:
        transform var(--os-transition-slow),
        box-shadow var(--os-transition-slow);
}


.metric-card::after {
    content: "";

    position: absolute;

    right: -30px;
    bottom: -40px;

    width: 110px;
    height: 110px;

    border-radius: 50%;

    background: rgba(214,83,77,.05);
}


.metric-card:hover {
    transform: translateY(-4px);

    box-shadow: var(--os-shadow-hover);
}


.metric-card > span {
    display: block;

    color: var(--os-text-soft);

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


.metric-card strong {
    display: block;

    margin-top: 10px;

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

    letter-spacing: -.04em;
}


.metric-card small {
    display: block;

    margin-top: 10px;

    color: var(--os-text-muted);

    font-size: 10px;
}


/* ------------------------------------------------------------
   GENERAL OS GRID
   ------------------------------------------------------------ */

.os-grid {
    display: grid;

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

    gap: 18px;
}


.os-grid .wide {
    grid-column: span 2;
}


/* ------------------------------------------------------------
   PANELS
   ------------------------------------------------------------ */

.panel {
    min-width: 0;

    background: var(--os-surface);

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

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

    padding: 23px;

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

    transition:
        box-shadow var(--os-transition-slow),
        transform var(--os-transition-slow);
}


.panel:hover {
    box-shadow:
        0 12px 35px rgba(32,37,42,.075);
}


.panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 20px;
}


.panel-head h2 {
    margin: 0;

    font-size: 18px;
    letter-spacing: -.025em;
}


.panel-head .eyebrow {
    margin-bottom: 4px;
}


/* ------------------------------------------------------------
   PIPELINE
   ------------------------------------------------------------ */

.pipeline {
    display: grid;

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

    gap: 12px;
}


.pipeline-column {
    min-width: 0;

    padding: 12px;

    background: var(--os-surface-soft);

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

    border-radius: 12px;
}


.pipeline-column-head {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 12px;
}


.pipeline-column-head strong {
    font-size: 11px;
}


.pipeline-column-head span {
    width: 22px;
    height: 22px;

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

    border-radius: 50%;

    background: #fff;

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

    font-size: 9px;
    color: var(--os-text-muted);
}


.pipeline-card {
    padding: 12px;

    margin-bottom: 8px;

    background: #fff;

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

    border-radius: 9px;

    cursor: pointer;

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


.pipeline-card:hover {
    transform: translateY(-2px);

    border-color: var(--os-border-dark);
}


.pipeline-card strong {
    display: block;

    font-size: 11px;
}


.pipeline-card span {
    display: block;

    margin-top: 4px;

    color: var(--os-text-muted);

    font-size: 9px;
}


/* ------------------------------------------------------------
   STACK / ACTIVITY
   ------------------------------------------------------------ */

.stack {
    display: flex;
    flex-direction: column;

    gap: 9px;
}


.stack-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;

    padding: 11px;

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

    border-radius: 10px;

    background: var(--os-surface-soft);

    transition:
        background var(--os-transition),
        transform var(--os-transition);
}


.stack-item:hover {
    background: #fff;

    transform: translateX(2px);
}


.stack-item-icon {
    width: 30px;
    min-width: 30px;
    height: 30px;

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

    border-radius: 8px;

    background: rgba(214,83,77,.09);

    color: var(--os-accent);

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


.stack-item-content {
    min-width: 0;
    flex: 1;
}


.stack-item-content strong {
    display: block;

    font-size: 11px;
}


.stack-item-content p {
    margin: 3px 0 0;

    color: var(--os-text-soft);

    font-size: 10px;
    line-height: 1.5;
}


.stack-item-content small {
    display: block;

    margin-top: 4px;

    color: var(--os-text-muted);

    font-size: 9px;
}


/* ------------------------------------------------------------
   TOOL ROW
   ------------------------------------------------------------ */

.tool-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 24px;
}


.tool-row h2 {
    margin: 0;

    font-size: 25px;

    letter-spacing: -.03em;
}


.tool-row p:not(.eyebrow) {
    max-width: 650px;

    margin: 7px 0 0;

    color: var(--os-text-soft);

    font-size: 12px;
    line-height: 1.6;
}


.tool-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}


.tool-row > input,
.tool-actions input {
    min-width: 220px;
}


/* ------------------------------------------------------------
   FORM CONTROLS
   ------------------------------------------------------------ */

.os-shell label {
    display: flex;
    flex-direction: column;

    gap: 7px;

    color: var(--os-text-soft);

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


.os-shell input,
.os-shell select,
.os-shell textarea {
    width: 100%;

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

    border-radius: 9px;

    background: #fff;

    color: var(--os-text);

    padding: 11px 12px;

    outline: none;

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


.os-shell input:focus,
.os-shell select:focus,
.os-shell textarea:focus {
    border-color: var(--os-accent);

    box-shadow:
        0 0 0 3px rgba(214,83,77,.09);
}


.os-shell textarea {
    resize: vertical;

    min-height: 90px;
}


.form-panel {
    display: flex;
    flex-direction: column;

    gap: 16px;
}


.form-panel h2 {
    margin: -4px 0 0;

    font-size: 21px;
}


.form-panel > p:not(.eyebrow) {
    margin: -8px 0 3px;

    color: var(--os-text-soft);

    font-size: 11px;
    line-height: 1.6;
}


.form-row {
    display: grid;

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

    gap: 12px;
}


.checkbox {
    flex-direction: row !important;
    align-items: center;

    cursor: pointer;
}


.checkbox input {
    width: 16px;
    height: 16px;

    margin: 0;
}


/* ------------------------------------------------------------
   TABLES
   ------------------------------------------------------------ */

.table-wrap {
    width: 100%;

    overflow-x: auto;

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

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

    background: #fff;
}


.table-wrap table {
    width: 100%;

    border-collapse: collapse;

    min-width: 750px;
}


.table-wrap th {
    padding: 13px 15px;

    background: var(--os-surface-soft);

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

    color: var(--os-text-muted);

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

    text-align: left;

    text-transform: uppercase;
    letter-spacing: .06em;
}


.table-wrap td {
    padding: 14px 15px;

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

    color: var(--os-text-soft);

    font-size: 11px;
}


.table-wrap tr:last-child td {
    border-bottom: 0;
}


.table-wrap tbody tr {
    transition:
        background var(--os-transition);
}


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


/* ------------------------------------------------------------
   STATUS BADGES
   ------------------------------------------------------------ */

.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 5px 8px;

    border-radius: 999px;

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

    background: var(--os-surface-soft);

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


.status-badge.success {
    color: var(--os-success);
    background: rgba(38,132,91,.08);
}


.status-badge.warning {
    color: var(--os-warning);
    background: rgba(183,121,31,.08);
}


.status-badge.danger {
    color: var(--os-danger);
    background: rgba(192,57,43,.08);
}


.status-badge.info {
    color: var(--os-info);
    background: rgba(52,120,184,.08);
}


/* ------------------------------------------------------------
   KANBAN
   ------------------------------------------------------------ */

.kanban {
    display: grid;

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

    gap: 13px;

    overflow-x: auto;

    padding-bottom: 5px;
}


.kanban-column {
    min-width: 220px;

    padding: 13px;

    border-radius: 13px;

    background: var(--os-surface-soft);

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


.kanban-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 13px;
}


.kanban-column-header strong {
    font-size: 11px;
}


.kanban-column-header span {
    width: 22px;
    height: 22px;

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

    border-radius: 50%;

    background: #fff;

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

    color: var(--os-text-muted);

    font-size: 9px;
}


.kanban-card {
    padding: 14px;

    margin-bottom: 9px;

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

    border-radius: 10px;

    background: #fff;

    box-shadow: 0 3px 10px rgba(32,37,42,.03);

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


.kanban-card:hover {
    transform: translateY(-2px);

    box-shadow: 0 7px 18px rgba(32,37,42,.07);
}


.kanban-card strong {
    display: block;

    font-size: 11px;
}


.kanban-card p {
    margin: 6px 0;

    color: var(--os-text-soft);

    font-size: 10px;

    line-height: 1.5;
}


/* ------------------------------------------------------------
   ADMIN CARD GRID
   ------------------------------------------------------------ */

.admin-card-grid {
    display: grid;

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

    gap: 16px;
}


.admin-card {
    position: relative;

    padding: 20px;

    background: #fff;

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

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

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

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


.admin-card:hover {
    transform: translateY(-4px);

    box-shadow: var(--os-shadow-hover);

    border-color: var(--os-border-dark);
}


.admin-card-image {
    width: 100%;
    height: 145px;

    object-fit: cover;

    border-radius: 10px;

    margin-bottom: 15px;
}


.admin-card .eyebrow {
    margin-bottom: 6px;
}


.admin-card h3 {
    margin: 0;

    font-size: 16px;
}


.admin-card p {
    margin: 8px 0 0;

    color: var(--os-text-soft);

    font-size: 11px;
    line-height: 1.6;
}


.admin-card-actions {
    display: flex;
    align-items: center;

    gap: 7px;

    margin-top: 16px;
}


.admin-card-actions button {
    flex: 1;

    min-height: 35px;

    border-radius: 8px;

    cursor: pointer;

    font-size: 10px;
}


/* ------------------------------------------------------------
   ADMIN MODULE CARDS
   ------------------------------------------------------------ */

.admin-module-card {
    min-height: 175px;

    display: flex;
    flex-direction: column;

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

    padding: 21px;

    text-align: left;

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

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

    background: #fff;

    cursor: pointer;

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

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

.admin-card-grid .admin-module-card {
    cursor: default;
    justify-content: flex-start;
}

.admin-card-grid .admin-module-card strong {
    margin-top: 18px;
}

.admin-card-grid .admin-module-card .table-actions {
    display: flex;
    gap: 8px;
    width: 100%;
    margin-top: 18px;
}

.admin-card-grid .admin-module-card .mini-btn {
    flex: 1;
}

.content-image-preview {
    display: block;
    width: 100%;
    max-height: 180px;
    object-fit: contain;
    margin: 10px 0;
    border: 1px solid var(--os-border);
    border-radius: 10px;
    background: var(--os-surface-soft);
}


.admin-module-card:hover {
    transform: translateY(-4px);

    border-color: var(--os-accent);

    box-shadow: var(--os-shadow-hover);
}


.admin-module-card span {
    margin-bottom: auto;

    color: var(--os-accent);

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


.admin-module-card strong {
    font-size: 17px;
}


.admin-module-card small {
    margin-top: 6px;

    color: var(--os-text-soft);

    font-size: 10px;
    line-height: 1.5;
}


/* ------------------------------------------------------------
   SETTINGS
   ------------------------------------------------------------ */
.settings-workspace-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--os-border);
}

.settings-subtext {
    font-size: 13px;
    color: var(--os-text-muted);
    max-width: 680px;
    margin-top: 6px;
    line-height: 1.5;
}

.settings-tabs-nav {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.settings-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--os-text-muted);
    background: var(--os-surface);
    border: 1px solid var(--os-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.settings-tab-btn:hover {
    color: var(--os-text);
    border-color: var(--os-primary, #001227);
    background: var(--os-surface-soft);
}

.settings-tab-btn.is-active {
    color: #fff;
    background: var(--os-primary, #001227);
    border-color: var(--os-primary, #001227);
}

.settings-tab-panel {
    display: none;
}

.settings-tab-panel.is-active {
    display: block;
    animation: fadeIn 0.25s ease-out;
}

.settings-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.settings-form-grid label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--os-text);
}

.settings-form-grid label span {
    color: var(--os-text-muted);
    font-size: 12px;
}

.settings-form-grid label.grid-full {
    grid-column: span 2;
}

.settings-form-grid input,
.settings-form-grid textarea,
.settings-form-grid select {
    width: 100%;
    padding: 10px 12px;
    font-size: 13px;
    font-family: inherit;
    color: var(--os-text);
    background: var(--os-surface-soft, #f8fafc);
    border: 1px solid var(--os-border);
    border-radius: 6px;
    transition: border-color 0.2s ease;
}

.settings-form-grid input:focus,
.settings-form-grid textarea:focus,
.settings-form-grid select:focus {
    outline: none;
    border-color: #0d9488;
    background: #fff;
}

@media (max-width: 768px) {
    .settings-workspace-header {
        flex-direction: column;
    }
    .settings-form-grid {
        grid-template-columns: 1fr;
    }
    .settings-form-grid label.grid-full {
        grid-column: span 1;
    }
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.settings-grid .panel:last-child {
    grid-column: span 2;
}


.settings-list {
    display: flex;
    flex-direction: column;

    gap: 0;
}


.settings-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 14px 0;

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


.settings-list > div:last-child {
    border-bottom: 0;
}


.settings-list span {
    color: var(--os-text-muted);

    font-size: 11px;
}


.settings-list strong {
    font-size: 11px;

    text-align: right;
}


.settings-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}


.architecture-status {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 13px;

    padding: 20px 0;
}


.architecture-node {
    min-width: 150px;

    padding: 15px;

    text-align: center;

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

    border-radius: 11px;

    background: var(--os-surface-soft);
}


.architecture-node strong {
    display: block;

    font-size: 12px;
}


.architecture-node span {
    display: block;

    margin-top: 4px;

    color: var(--os-text-muted);

    font-size: 9px;
}

/* ------------------------------------------------------------
   OS USER PROFILE & MENU
   ------------------------------------------------------------ */
.os-user-menu {
    position: relative;
    display: inline-block;
}

.os-user-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 8px;
    background: var(--os-surface);
    border: 1px solid var(--os-border);
    border-radius: 9999px;
    cursor: pointer;
    font-size: 13px;
    color: var(--os-text);
    transition: all 0.2s ease;
}

.os-user-btn:hover {
    border-color: #0d9488;
    background: var(--os-surface-soft);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.os-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0f172a, #0d9488);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.5px;
}

.os-user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
    text-align: left;
}

.os-user-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--os-text);
}

.os-user-role {
    font-size: 10px;
    font-weight: 500;
    color: #0d9488;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.os-user-caret {
    font-size: 10px;
    color: var(--os-text-muted);
    transition: transform 0.2s ease;
}

.os-user-menu.is-open .os-user-caret {
    transform: rotate(180deg);
}

.os-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 230px;
    background: #fff;
    border: 1px solid var(--os-border);
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
    padding: 6px;
    z-index: 100;
    display: none;
    animation: fadeIn 0.18s ease-out;
}

.os-user-menu.is-open .os-dropdown {
    display: block;
}

.os-dropdown-header {
    padding: 10px 12px;
    border-bottom: 1px solid var(--os-border);
    margin-bottom: 4px;
}

.os-dropdown-header strong {
    display: block;
    font-size: 13px;
    color: var(--os-text);
}

.os-dropdown-header small {
    display: block;
    font-size: 11px;
    color: var(--os-text-muted);
    word-break: break-all;
}

.os-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: var(--os-text);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease, color 0.15s ease;
}

.os-dropdown-item:hover {
    background: var(--os-surface-soft, #f8fafc);
    color: #0d9488;
}

.os-dropdown-item.is-danger:hover {
    background: #fef2f2;
    color: #ef4444;
}

.os-dropdown-divider {
    height: 1px;
    background: var(--os-border);
    margin: 4px 0;
}

/* ------------------------------------------------------------
   IN-OS MODAL DIALOGS
   ------------------------------------------------------------ */
.os-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 18, 39, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.os-modal-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
}

.os-modal-card {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--os-border);
    overflow: hidden;
    transform: translateY(12px) scale(0.98);
    transition: transform 0.2s ease;
}

.os-modal-backdrop.is-visible .os-modal-card {
    transform: translateY(0) scale(1);
}

.os-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--os-border);
    background: var(--os-surface-soft, #f8fafc);
}

.os-modal-head h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--os-text);
}

.os-modal-close-btn {
    border: none;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    color: var(--os-text-muted);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
}

.os-modal-close-btn:hover {
    color: var(--os-text);
    background: rgba(0, 0, 0, 0.05);
}

.os-modal-body {
    padding: 24px;
}

.os-modal-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--os-border);
    background: var(--os-surface-soft, #f8fafc);
}

/* Pulsing Online Status Indicator */
.status-dot.is-online {
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
    animation: statusPulse 2s infinite;
}

@keyframes statusPulse {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
    70% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}


.architecture-arrow {
    color: var(--os-text-muted);

    font-size: 18px;
}


/* ------------------------------------------------------------
   EMPTY STATES
   ------------------------------------------------------------ */

.os-empty {
    padding: 35px 20px;

    text-align: center;

    color: var(--os-text-muted);

    border: 1px dashed var(--os-border-dark);

    border-radius: 12px;

    background: var(--os-surface-soft);
}


.os-empty strong {
    display: block;

    margin-bottom: 5px;

    color: var(--os-text-soft);

    font-size: 12px;
}


.os-empty p {
    margin: 0;

    font-size: 10px;
    line-height: 1.5;
}


/* ------------------------------------------------------------
   FORM NOTE
   ------------------------------------------------------------ */

.form-note {
    margin: 0;

    color: var(--os-text-muted);

    font-size: 10px;

    line-height: 1.6;
}


/* ------------------------------------------------------------
   MODAL SUPPORT
   ------------------------------------------------------------ */

.os-modal {
    position: fixed;

    inset: 0;

    z-index: 1000;

    display: none;

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

    padding: 20px;

    background: rgba(20,24,27,.60);

    backdrop-filter: blur(5px);
}


.os-modal.is-open {
    display: flex;

    animation: osFadeIn .2s ease both;
}


.os-modal-content {
    width: min(600px, 100%);

    max-height: calc(100vh - 40px);

    overflow-y: auto;

    padding: 25px;

    border-radius: 17px;

    background: #fff;

    box-shadow:
        0 25px 80px rgba(0,0,0,.20);

    animation:
        osModalIn .3s cubic-bezier(.2,.7,.2,1) both;
}


.os-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 20px;
}


.os-modal-header h2 {
    margin: 0;

    font-size: 21px;
}


.os-modal-close {
    width: 32px;
    height: 32px;

    border: 0;

    border-radius: 50%;

    background: var(--os-surface-soft);

    color: var(--os-text-soft);

    cursor: pointer;

    transition:
        background var(--os-transition),
        transform var(--os-transition);
}


.os-modal-close:hover {
    background: var(--os-border);

    transform: rotate(90deg);
}


/* ------------------------------------------------------------
   ANIMATIONS
   ------------------------------------------------------------ */

@keyframes osViewIn {

    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

}


@keyframes osFadeIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}


@keyframes osModalIn {

    from {
        opacity: 0;
        transform: translateY(15px) scale(.98);
    }

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

}


@keyframes osPulse {

    0%,
    100% {
        box-shadow:
            0 0 0 4px rgba(72,180,122,.10);
    }

    50% {
        box-shadow:
            0 0 0 7px rgba(72,180,122,.03);
    }

}


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

@media (max-width: 1100px) {

    :root {
        --os-sidebar-width: 225px;
    }


    .os-workspace {
        padding-left: 24px;
        padding-right: 24px;
    }


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


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


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

}


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

@media (max-width: 850px) {

    .os-sidebar {
        width: 72px;
        min-width: 72px;
    }


    .os-brand {
        justify-content: center;

        padding: 18px 10px;
    }


    .os-brand img {
        width: 38px;
        height: 38px;
    }


    .os-brand div {
        display: none;
    }


    .os-nav {
        padding: 12px 8px;
    }


    .os-nav-label {
        display: none;
    }


    .os-nav button {
        justify-content: center;

        padding: 11px;
    }


    .os-nav button span:not(.os-nav-icon),
    .os-nav button em {
        display: none;
    }


    .os-nav-icon {
        width: 24px;
    }


    .os-sidebar-footer {
        padding: 8px;
    }


    .os-system-status {
        justify-content: center;
    }


    .os-system-status div {
        display: none;
    }


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


    .os-grid .wide {
        grid-column: auto;
    }


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


    .settings-grid .panel:last-child {
        grid-column: auto;
    }


    .split-layout {
        display: grid;
        grid-template-columns: 1fr !important;
    }

}


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

@media (max-width: 650px) {
    .os-mobile-menu {
        position: fixed;
        top: 14px;
        left: 14px;
        z-index: 120;
        display: grid;
        width: 44px;
        height: 44px;
        place-content: center;
        gap: 4px;
        border: 1px solid rgba(255,255,255,.12);
        border-radius: 13px;
        background: #20252a;
        box-shadow: 0 10px 24px rgba(0,0,0,.18);
    }

    .os-mobile-menu span {
        display: block;
        width: 18px;
        height: 2px;
        border-radius: 2px;
        background: #fff;
    }

    .os-mobile-overlay {
        position: fixed;
        inset: 0;
        z-index: 130;
        display: block;
        visibility: hidden;
        background: rgba(5,12,19,.55);
        opacity: 0;
        transition: opacity .2s ease, visibility .2s ease;
    }

    .os-mobile-overlay.is-visible {
        visibility: visible;
        opacity: 1;
    }

    .os-shell {
        display: block;
    }


    .os-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 140;
        width: min(86vw, 320px);
        min-width: 0;
        height: 100dvh;
        transform: translateX(-105%);
        transition: transform .28s cubic-bezier(.2,.7,.2,1);
        box-shadow: 18px 0 40px rgba(0,0,0,.2);
    }

    .os-sidebar.is-open {
        transform: translateX(0);
    }

    .os-sidebar-close {
        position: absolute;
        top: 14px;
        right: 14px;
        z-index: 1;
        display: grid;
        width: 36px;
        height: 36px;
        place-items: center;
        border: 1px solid rgba(255,255,255,.12);
        border-radius: 10px;
        background: rgba(255,255,255,.08);
        color: #fff;
        font-size: 24px;
        line-height: 1;
    }

    .os-nav {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        padding: 14px 12px 20px;
    }

    .os-brand {
        display: flex;
        padding: 22px 20px;
    }

    .os-sidebar-footer {
        display: block;
        padding: 15px;
    }

    .os-workspace {
        padding: 0 15px 32px;
    }

    .os-topbar {
        padding-left: 58px;
    }

    body.os-menu-open {
        overflow: hidden;
    }


    .os-topbar {
        min-height: auto;

        align-items: flex-start;

        flex-direction: column;

        gap: 15px;

        padding: 20px 0;
    }


    .os-topbar-actions {
        width: 100%;
    }


    .os-topbar-actions .secondary-btn:first-child {
        display: none;
    }


    .os-topbar-actions .secondary-btn,
    .os-topbar-actions .primary-btn {
        flex: 1;
    }


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

        gap: 9px;
    }


    .metric-card {
        padding: 16px;
    }


    .metric-card strong {
        font-size: 23px;
    }


    .metric-card small {
        font-size: 9px;
    }


    .panel {
        padding: 17px;
    }


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


    .tool-row {
        align-items: stretch;

        flex-direction: column;
    }


    .tool-actions {
        width: 100%;

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


    .tool-actions input {
        min-width: 0;
    }


    .tool-row > input {
        min-width: 0;
        width: 100%;
    }


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


    .admin-card-grid {
        grid-template-columns: 1fr;
    }


    .architecture-status {
        flex-direction: column;
    }


    .architecture-arrow {
        transform: rotate(90deg);
    }


    .architecture-node {
        width: 100%;
    }


    .settings-list > div {
        align-items: flex-start;

        flex-direction: column;

        gap: 5px;
    }


    .settings-list strong {
        text-align: left;
    }


    .settings-actions {
        flex-direction: column;
    }


    .settings-actions button {
        width: 100%;
    }


    .kanban {
        grid-template-columns:
            repeat(4, 245px);
    }


    .os-modal {
        align-items: flex-end;

        padding: 0;
    }


    .os-modal-content {
        max-height: 92vh;

        border-radius:
            18px 18px 0 0;

        padding: 20px;
    }

}


/* ------------------------------------------------------------
   RESPONSIVE — VERY SMALL PHONES
   ------------------------------------------------------------ */

@media (max-width: 390px) {

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


    .metric-card {
        min-height: 115px;
    }


    .os-topbar-actions {
        flex-direction: column;
    }


    .os-topbar-actions .secondary-btn,
    .os-topbar-actions .primary-btn {
        width: 100%;
    }

}


/* ------------------------------------------------------------
   ACCESSIBILITY
   ------------------------------------------------------------ */

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

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

}


/* ------------------------------------------------------------
   PREVENT HORIZONTAL OVERFLOW
   ------------------------------------------------------------ */

.os-shell,
.os-shell * {
    box-sizing: border-box;
}


html {
    overflow-x: hidden;
}


body {
    overflow-x: hidden;
}


/* ------------------------------------------------------------
   PRINT
   ------------------------------------------------------------ */

@media print {

    .os-sidebar,
    .os-topbar-actions,
    .tool-actions,
    .os-nav {
        display: none !important;
    }


    .os-workspace {
        padding: 0;
    }


    .os-shell {
        display: block;
    }


    .os-view {
        display: block !important;
    }


    .panel,
    .metric-card,
    .admin-card {
        box-shadow: none;
    }

}


/* ============================================================
   BIRITEX INSIGHTS
   Editorial / Publication Layout
   ============================================================ */

.insights-page {
    width: 100%;
    overflow: hidden;
}


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

.insights-header {
    padding-top: clamp(60px, 8vw, 105px);
    padding-bottom: clamp(45px, 7vw, 75px);
}

.insights-header-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
    align-items: end;
    gap: 50px;
}

.insights-heading {
    max-width: 850px;
}

.insights-heading h1 {
    max-width: 820px;
    margin: 12px 0 20px;
    font-size: clamp(2.4rem, 5vw, 4.8rem);
    line-height: 0.98;
    letter-spacing: -0.045em;
}

.insights-heading > p:last-child {
    max-width: 720px;
    margin: 0;
    color: var(--muted, #737b82);
    font-size: 1.05rem;
    line-height: 1.8;
}


/* ============================================================
   SEARCH
   ============================================================ */

.insights-search {
    width: 100%;
}

.insights-search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 58px;
    padding: 6px;
    border: 1px solid var(--border, rgba(47, 53, 59, 0.14));
    border-radius: 12px;
    background: var(--surface, #ffffff);
    box-shadow: 0 10px 30px rgba(47, 53, 59, 0.05);
}

.insights-search-box > span {
    padding-left: 12px;
    color: var(--muted, #737b82);
    font-size: 1.3rem;
}

.insights-search-box input {
    min-width: 0;
    flex: 1;
    height: 44px;
    padding: 0 8px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text, #2f353b);
    font: inherit;
}

.insights-search-box input::placeholder {
    color: var(--muted, #737b82);
}

.insights-search-box .primary-btn {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 20px;
}


/* ============================================================
   CATEGORIES
   ============================================================ */

.insights-categories {
    padding-top: 0;
    padding-bottom: 35px;
}

.insights-category-list {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 0 10px;
    scrollbar-width: thin;
}

.insight-category-btn {
    flex: 0 0 auto;
    border: 0;
    border-radius: 7px;
    padding: 10px 15px;
    background: transparent;
    color: var(--muted, #737b82);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition:
        color 0.25s ease,
        background 0.25s ease,
        transform 0.25s ease;
}

.insight-category-btn:hover {
    color: var(--text, #2f353b);
    background: rgba(47, 53, 59, 0.05);
}

.insight-category-btn.is-active {
    background: var(--text, #2f353b);
    color: #ffffff;
}

.insight-category-btn:active {
    transform: scale(0.97);
}


/* ============================================================
   FEATURED
   ============================================================ */

.insights-featured {
    padding-top: 10px;
    padding-bottom: 75px;
}

.insights-feature-label {
    margin-bottom: 14px;
}

.insights-feature-label span {
    display: inline-block;
    color: var(--accent, #d6534d);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.featured-insight {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    min-height: 460px;
    border-top: 1px solid var(--border, rgba(47, 53, 59, 0.14));
    border-bottom: 1px solid var(--border, rgba(47, 53, 59, 0.14));
}

.featured-insight-image {
    display: block;
    min-height: 460px;
    overflow: hidden;
    background: #e9eaeb;
}

.featured-insight-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.featured-insight-image:hover img {
    transform: scale(1.035);
}

.featured-insight-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(30px, 5vw, 65px);
}

.insight-post-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    color: var(--muted, #737b82);
    font-size: 0.78rem;
}

.insight-post-meta > span + span::before {
    content: "•";
    margin-right: 10px;
}

.insight-post-category {
    color: var(--accent, #d6534d);
    font-weight: 800;
}

.featured-insight-content h2 {
    margin: 18px 0;
    font-size: clamp(1.9rem, 3.2vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: -0.025em;
}

.featured-insight-content h2 a {
    color: inherit;
    text-decoration: none;
}

.featured-insight-content h2 a:hover {
    color: var(--accent, #d6534d);
}

.featured-excerpt {
    max-width: 620px;
    margin: 0;
    color: var(--muted, #737b82);
    line-height: 1.75;
}

.insight-post-details {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 24px;
    color: var(--muted, #737b82);
    font-size: 0.78rem;
}

.insight-post-details span + span::before {
    content: "•";
    margin-right: 16px;
}

.insight-read-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin-top: 28px;
    color: var(--text, #2f353b);
    font-weight: 800;
    text-decoration: none;
    transition:
        color 0.25s ease,
        gap 0.25s ease;
}

.insight-read-link:hover {
    gap: 13px;
    color: var(--accent, #d6534d);
}


/* ============================================================
   LATEST
   ============================================================ */

.insights-latest {
    padding-top: 10px;
    padding-bottom: 80px;
}

.insights-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 35px;
    border-bottom: 1px solid var(--border, rgba(47, 53, 59, 0.14));
    padding-bottom: 20px;
}

.insights-section-heading h2 {
    margin: 8px 0 0;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
}

.insights-result-count {
    color: var(--muted, #737b82);
    font-size: 0.82rem;
}


/* ============================================================
   ARTICLE GRID
   ============================================================ */

.insights-post-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 42px 24px;
}

.insight-post {
    min-width: 0;
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.insight-post.is-hidden {
    display: none;
}

.insight-post-image {
    display: block;
    width: 100%;
    height: 235px;
    overflow: hidden;
    background: #e9eaeb;
}

.insight-post-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.insight-post:hover .insight-post-image img {
    transform: scale(1.04);
}

.insight-post-content {
    padding-top: 20px;
}

.insight-post-content h3 {
    margin: 12px 0;
    font-size: 1.35rem;
    line-height: 1.2;
    letter-spacing: -0.015em;
}

.insight-post-content h3 a {
    color: var(--text, #2f353b);
    text-decoration: none;
}

.insight-post-content h3 a:hover {
    color: var(--accent, #d6534d);
}

.insight-post-content > p {
    margin: 0;
    color: var(--muted, #737b82);
    line-height: 1.7;
    font-size: 0.93rem;
}

.insight-post-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 20px;
}

.insight-post-footer .insight-post-details {
    margin-top: 0;
}

.insight-arrow {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border: 1px solid var(--border, rgba(47, 53, 59, 0.14));
    border-radius: 50%;
    color: var(--text, #2f353b);
    text-decoration: none;
    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

.insight-arrow:hover {
    background: var(--accent, #d6534d);
    border-color: var(--accent, #d6534d);
    color: #ffffff;
    transform: translateX(3px);
}


/* ============================================================
   IMAGE PLACEHOLDER
   ============================================================ */

.insight-placeholder {
    display: flex;
    align-items: flex-end;
    width: 100%;
    height: 100%;
    padding: 25px;
    background:
        linear-gradient(
            135deg,
            #2f353b,
            #596168
        );
}

.insight-placeholder span {
    color: #ffffff;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


/* ============================================================
   EMPTY STATE
   ============================================================ */

.insights-empty {
    max-width: 650px;
    margin: 50px auto 0;
    padding: 55px 30px;
    text-align: center;
    border: 1px dashed var(--border, rgba(47, 53, 59, 0.2));
    border-radius: 15px;
}

.insights-empty[hidden] {
    display: none;
}

.insights-empty-icon {
    display: grid;
    place-items: center;
    width: 45px;
    height: 45px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: rgba(214, 83, 77, 0.1);
    color: var(--accent, #d6534d);
}

.insights-empty h3 {
    margin: 0 0 10px;
}

.insights-empty p {
    margin: 0 0 22px;
    color: var(--muted, #737b82);
}


/* ============================================================
   SUBSCRIBE
   ============================================================ */

.insights-subscribe {
    padding-top: 20px;
    padding-bottom: 90px;
}

.insights-subscribe-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 500px);
    align-items: center;
    gap: 50px;
    padding: clamp(35px, 5vw, 60px);
    background: var(--text, #2f353b);
    color: #ffffff;
    border-radius: 18px;
}

.insights-subscribe-inner h2 {
    margin: 10px 0 12px;
    color: #ffffff;
    font-size: clamp(1.8rem, 3vw, 2.7rem);
}

.insights-subscribe-inner > div > p:last-child {
    max-width: 650px;
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
}

.insights-subscribe-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.insights-subscribe-form input {
    width: 100%;
    height: 50px;
    padding: 0 15px;
    border: 0;
    border-radius: 8px;
    outline: 0;
    background: #ffffff;
    color: var(--text, #2f353b);
    font: inherit;
}

.insights-subscribe-form .primary-btn {
    min-height: 50px;
}

.insights-subscribe-note {
    grid-column: 1 / -1;
    min-height: 18px;
    margin: 5px 0 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.78rem;
}


/* ============================================================
   SCREEN-READER TEXT
   ============================================================ */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ============================================================
   ANIMATION
   ============================================================ */

.insights-heading,
.insights-search,
.featured-insight,
.insight-post {
    animation: insightReveal 0.65s ease both;
}

.insight-post:nth-child(2) {
    animation-delay: 0.06s;
}

.insight-post:nth-child(3) {
    animation-delay: 0.12s;
}

.insight-post:nth-child(4) {
    animation-delay: 0.18s;
}

.insight-post:nth-child(5) {
    animation-delay: 0.24s;
}

.insight-post:nth-child(6) {
    animation-delay: 0.30s;
}

@keyframes insightReveal {

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

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

}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1000px) {

    .insights-header-inner {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .featured-insight {
        grid-template-columns: 1fr;
    }

    .featured-insight-image {
        min-height: 360px;
    }

    .featured-insight-content {
        padding: 40px;
    }

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

    .insights-subscribe-inner {
        grid-template-columns: 1fr;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 700px) {

    .insights-header {
        padding-top: 45px;
        padding-bottom: 35px;
    }

    .insights-heading h1 {
        font-size: clamp(2.2rem, 11vw, 3.3rem);
    }

    .insights-heading > p:last-child {
        font-size: 0.98rem;
    }

    .insights-search-box {
        min-height: 54px;
    }

    .insights-search-box .primary-btn {
        padding: 0 14px;
    }

    .insights-featured {
        padding-bottom: 55px;
    }

    .featured-insight-image {
        min-height: 250px;
    }

    .featured-insight-content {
        padding: 28px 20px;
    }

    .featured-insight-content h2 {
        font-size: 1.9rem;
    }

    .insight-post-details {
        gap: 7px 12px;
    }

    .insight-post-details span + span::before {
        margin-right: 12px;
    }

    .insights-section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .insights-post-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .insight-post-image {
        height: 220px;
    }

    .insights-subscribe {
        padding-bottom: 55px;
    }

    .insights-subscribe-inner {
        padding: 30px 22px;
        border-radius: 14px;
    }

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

    .insights-subscribe-form .primary-btn {
        width: 100%;
    }

}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 430px) {

    .insights-search-box {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        padding: 5px;
    }

    .insights-search-box .primary-btn {
        grid-column: 1 / -1;
        width: 100%;
    }

    .insight-post-image {
        height: 195px;
    }

    .featured-insight-image {
        min-height: 210px;
    }

}


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

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

    .insights-heading,
    .insights-search,
    .featured-insight,
    .insight-post {
        animation: none;
    }

    .featured-insight-image img,
    .insight-post-image img,
    .insight-category-btn,
    .insight-read-link,
    .insight-arrow {
        transition: none;
    }

}



/* ============================================================
   BIRITEX TECHNOLOGIES
   PRIVACY PAGE
   ============================================================ */

.privacy-page {
    padding-top: clamp(55px, 7vw, 95px);
    padding-bottom: clamp(70px, 9vw, 120px);
}


/* ============================================================
   INTRODUCTION
   ============================================================ */

.privacy-intro {
    max-width: 900px;
    margin-bottom: clamp(40px, 6vw, 70px);
}

.privacy-intro h1 {
    max-width: 850px;
    margin-top: 10px;
    margin-bottom: 20px;
}

.privacy-intro > p:last-of-type {
    max-width: 760px;
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    line-height: 1.8;
}

.privacy-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 25px;
    margin-top: 22px;
}

.privacy-meta span {
    font-size: .82rem;
    opacity: .55;
}


/* ============================================================
   QUICK NAVIGATION
   ============================================================ */

.privacy-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: clamp(45px, 7vw, 80px);
    padding: 15px;
    border: 1px solid var(--border-color, rgba(0,0,0,.08));
    border-radius: var(--radius-lg, 18px);
    background: var(--surface-soft, rgba(0,0,0,.025));
}

.privacy-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 7px 13px;
    border-radius: 999px;
    color: inherit;
    text-decoration: none;
    font-size: .82rem;
    font-weight: 500;
    transition:
        background .25s ease,
        transform .25s ease,
        opacity .25s ease;
}

.privacy-nav a:hover {
    background: rgba(0,0,0,.07);
    transform: translateY(-2px);
}


/* ============================================================
   CONTENT
   ============================================================ */

.privacy-content {
    max-width: 1050px;
}

.privacy-section {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 30px;
    padding: clamp(30px, 5vw, 55px) 0;
    border-top: 1px solid var(--border-color, rgba(0,0,0,.08));
    scroll-margin-top: 30px;

    animation: privacyReveal .65s ease both;
}

.privacy-section:first-child {
    border-top: 0;
}

.privacy-number {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 5px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    opacity: .4;
}

.privacy-section h2 {
    margin: 0 0 18px;
    font-size: clamp(1.45rem, 2.7vw, 2.15rem);
    line-height: 1.15;
    letter-spacing: -.025em;
}

.privacy-section h3 {
    margin: 28px 0 10px;
    font-size: 1rem;
}

.privacy-section p {
    max-width: 760px;
    margin: 0 0 18px;
    font-size: .96rem;
    line-height: 1.85;
    opacity: .75;
}

.privacy-section ul {
    max-width: 760px;
    margin: 15px 0 25px;
    padding-left: 20px;
}

.privacy-section li {
    margin-bottom: 9px;
    line-height: 1.7;
    opacity: .75;
}


/* ============================================================
   CONTACT SECTION
   ============================================================ */

.privacy-contact {
    padding-bottom: 0;
}

.privacy-contact-card {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    max-width: 800px;
    margin-top: 30px;
    overflow: hidden;
    border: 1px solid var(--border-color, rgba(0,0,0,.08));
    border-radius: var(--radius-lg, 18px);
    background: var(--border-color, rgba(0,0,0,.08));
}

.privacy-contact-card > div {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 20px;
    background: var(--surface, #fff);
}

.privacy-contact-card span {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .45;
}

.privacy-contact-card strong,
.privacy-contact-card a {
    font-size: .88rem;
    color: inherit;
    text-decoration: none;
}

.privacy-contact-card a:hover {
    text-decoration: underline;
}

.privacy-actions {
    margin-top: 28px;
}


/* ============================================================
   ANIMATION
   ============================================================ */

@keyframes privacyReveal {

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

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

}


/* ============================================================
   HOVER DETAILS
   ============================================================ */

.privacy-section {
    transition:
        border-color .25s ease,
        transform .25s ease;
}

.privacy-section:hover {
    border-color: rgba(214,83,77,.22);
}

.privacy-number {
    transition:
        color .25s ease,
        opacity .25s ease,
        transform .25s ease;
}

.privacy-section:hover .privacy-number {
    opacity: 1;
    transform: translateX(3px);
}


/* ============================================================
   DARK MODE
   ============================================================ */

[data-theme="dark"] .privacy-nav {
    background: rgba(255,255,255,.035);
}

[data-theme="dark"] .privacy-nav a:hover {
    background: rgba(255,255,255,.07);
}

[data-theme="dark"] .privacy-contact-card {
    background: rgba(255,255,255,.08);
}

[data-theme="dark"] .privacy-contact-card > div {
    background: var(--surface, #111);
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 800px) {

    .privacy-section {
        grid-template-columns: 45px minmax(0, 1fr);
        gap: 20px;
    }

    .privacy-contact-card {
        grid-template-columns: 1fr;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 600px) {

    .privacy-page {
        padding-top: 42px;
        padding-bottom: 65px;
    }

    .privacy-intro {
        margin-bottom: 35px;
    }

    .privacy-meta {
        flex-direction: column;
        gap: 6px;
    }

    .privacy-nav {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5px;
        padding: 10px;
    }

    .privacy-nav a {
        justify-content: center;
        text-align: center;
        font-size: .76rem;
    }

    .privacy-section {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 35px 0;
    }

    .privacy-number {
        justify-content: flex-start;
        padding-top: 0;
        margin-bottom: 5px;
    }

    .privacy-section h2 {
        font-size: 1.45rem;
    }

    .privacy-section p {
        font-size: .92rem;
        line-height: 1.75;
    }

    .privacy-section ul {
        padding-left: 18px;
    }

    .privacy-section li {
        font-size: .9rem;
    }

    .privacy-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .privacy-actions a {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

}


/* ============================================================
   BIRITEX TECHNOLOGIES
   TERMS & CONDITIONS PAGE
   ============================================================ */

.terms-page {
    padding-top: clamp(55px, 7vw, 95px);
    padding-bottom: clamp(70px, 9vw, 120px);
}


/* ============================================================
   INTRODUCTION
   ============================================================ */

.terms-intro {
    max-width: 900px;
    margin-bottom: clamp(40px, 6vw, 70px);
}

.terms-intro h1 {
    max-width: 850px;
    margin-top: 10px;
    margin-bottom: 20px;
}

.terms-intro > p:last-of-type {
    max-width: 760px;
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    line-height: 1.8;
}

.terms-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 25px;
    margin-top: 22px;
}

.terms-meta span {
    font-size: .82rem;
    opacity: .55;
}


/* ============================================================
   QUICK NAVIGATION
   ============================================================ */

.terms-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: clamp(45px, 7vw, 80px);
    padding: 15px;
    border: 1px solid var(--border-color, rgba(0,0,0,.08));
    border-radius: var(--radius-lg, 18px);
    background: var(--surface-soft, rgba(0,0,0,.025));
}

.terms-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 7px 13px;
    border-radius: 999px;
    color: inherit;
    text-decoration: none;
    font-size: .82rem;
    font-weight: 500;
    transition:
        background .25s ease,
        transform .25s ease,
        opacity .25s ease;
}

.terms-nav a:hover {
    background: rgba(0,0,0,.07);
    transform: translateY(-2px);
}


/* ============================================================
   CONTENT
   ============================================================ */

.terms-content {
    max-width: 1050px;
}

.terms-section {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 30px;
    padding: clamp(30px, 5vw, 55px) 0;
    border-top: 1px solid var(--border-color, rgba(0,0,0,.08));
    scroll-margin-top: 30px;

    animation: termsReveal .65s ease both;
}

.terms-section:first-child {
    border-top: 0;
}

.terms-number {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 5px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    opacity: .4;
}

.terms-section h2 {
    margin: 0 0 18px;
    font-size: clamp(1.45rem, 2.7vw, 2.15rem);
    line-height: 1.15;
    letter-spacing: -.025em;
}

.terms-section p {
    max-width: 760px;
    margin: 0 0 18px;
    font-size: .96rem;
    line-height: 1.85;
    opacity: .75;
}

.terms-section ul {
    max-width: 760px;
    margin: 15px 0 25px;
    padding-left: 20px;
}

.terms-section li {
    margin-bottom: 9px;
    line-height: 1.7;
    opacity: .75;
}


/* ============================================================
   CONTACT
   ============================================================ */

.terms-contact {
    padding-bottom: 0;
}

.terms-contact-card {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    max-width: 800px;
    margin-top: 30px;
    overflow: hidden;
    border: 1px solid var(--border-color, rgba(0,0,0,.08));
    border-radius: var(--radius-lg, 18px);
    background: var(--border-color, rgba(0,0,0,.08));
}

.terms-contact-card > div {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 20px;
    background: var(--surface, #fff);
}

.terms-contact-card span {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .45;
}

.terms-contact-card strong,
.terms-contact-card a {
    font-size: .88rem;
    color: inherit;
    text-decoration: none;
}

.terms-contact-card a:hover {
    text-decoration: underline;
}

.terms-actions {
    margin-top: 28px;
}


/* ============================================================
   ANIMATION
   ============================================================ */

@keyframes termsReveal {

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

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

}


/* ============================================================
   INTERACTION
   ============================================================ */

.terms-section {
    transition: border-color .25s ease;
}

.terms-section:hover {
    border-color: rgba(214,83,77,.22);
}

.terms-number {
    transition:
        opacity .25s ease,
        transform .25s ease;
}

.terms-section:hover .terms-number {
    opacity: 1;
    transform: translateX(3px);
}


/* ============================================================
   DARK MODE
   ============================================================ */

[data-theme="dark"] .terms-nav {
    background: rgba(255,255,255,.035);
}

[data-theme="dark"] .terms-nav a:hover {
    background: rgba(255,255,255,.07);
}

[data-theme="dark"] .terms-contact-card {
    background: rgba(255,255,255,.08);
}

[data-theme="dark"] .terms-contact-card > div {
    background: var(--surface, #111);
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 800px) {

    .terms-section {
        grid-template-columns: 45px minmax(0, 1fr);
        gap: 20px;
    }

    .terms-contact-card {
        grid-template-columns: 1fr;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 600px) {

    .terms-page {
        padding-top: 42px;
        padding-bottom: 65px;
    }

    .terms-intro {
        margin-bottom: 35px;
    }

    .terms-meta {
        flex-direction: column;
        gap: 6px;
    }

    .terms-nav {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5px;
        padding: 10px;
    }

    .terms-nav a {
        justify-content: center;
        text-align: center;
        font-size: .76rem;
    }

    .terms-section {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 35px 0;
    }

    .terms-number {
        justify-content: flex-start;
        padding-top: 0;
        margin-bottom: 5px;
    }

    .terms-section h2 {
        font-size: 1.45rem;
    }

    .terms-section p {
        font-size: .92rem;
        line-height: 1.75;
    }

    .terms-section ul {
        padding-left: 18px;
    }

    .terms-section li {
        font-size: .9rem;
    }

    .terms-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .terms-actions a {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

}

/* ============================================================
   Biritex Academy Search
   ============================================================ */

.academy-search-page {
    position: relative;
    overflow: hidden;
}


/* ============================================================
   Header
   ============================================================ */

.academy-search-page-header {
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
    padding: 50px 0 34px;
}

.academy-search-page-header h1 {
    margin: 10px 0 18px;
    font-size: clamp(2.1rem, 5vw, 4rem);
    line-height: 1.05;
    letter-spacing: -0.04em;
}

.academy-search-page-header p:not(.eyebrow) {
    max-width: 680px;
    margin: 0 auto;
    font-size: 1.05rem;
    line-height: 1.75;
    opacity: .78;
}


/* ============================================================
   Search Box
   ============================================================ */

.academy-results-search {
    max-width: 950px;
    margin: 0 auto 38px;
}

.academy-results-search-box {
    display: flex;
    align-items: center;
    gap: 12px;

    min-height: 68px;
    padding: 8px 8px 8px 20px;

    border: 1px solid rgba(47, 53, 59, .12);
    border-radius: 18px;

    background: rgba(255, 255, 255, .92);

    box-shadow:
        0 18px 50px rgba(0, 0, 0, .08);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.academy-results-search-box:focus-within {
    transform: translateY(-2px);

    border-color: rgba(214, 83, 77, .45);

    box-shadow:
        0 24px 60px rgba(0, 0, 0, .11);
}

.academy-results-search-box > span {
    font-size: 1.6rem;
    opacity: .55;
}

.academy-results-search-box input {
    flex: 1;
    min-width: 0;

    border: 0;
    outline: 0;

    background: transparent;

    font: inherit;
    font-size: 1rem;
    color: inherit;
}

.academy-results-search-box input::placeholder {
    opacity: .55;
}

.academy-results-search-box .primary-btn {
    flex-shrink: 0;
}

.academy-clear-search {
    display: grid;
    place-items: center;

    width: 34px;
    height: 34px;

    border-radius: 50%;

    font-size: 1.4rem;
    text-decoration: none;

    opacity: .55;

    transition:
        opacity .2s ease,
        background .2s ease,
        transform .2s ease;
}

.academy-clear-search:hover {
    opacity: 1;
    background: rgba(0, 0, 0, .06);
    transform: rotate(90deg);
}


/* ============================================================
   Results Summary
   ============================================================ */

.academy-results-summary {
    max-width: 1100px;
    margin: 0 auto 28px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding-bottom: 18px;

    border-bottom: 1px solid rgba(47, 53, 59, .1);
}

.academy-results-summary > div {
    display: flex;
    align-items: baseline;
    gap: 7px;
}

.academy-results-summary strong {
    font-size: 1rem;
}

.academy-results-summary span {
    opacity: .6;
}

.academy-results-summary a {
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
}


/* ============================================================
   Results Grid
   ============================================================ */

.academy-results-grid {
    max-width: 1100px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}


/* ============================================================
   Result Card
   ============================================================ */

.academy-result-card {
    position: relative;

    padding: 28px;

    min-width: 0;

    border: 1px solid rgba(47, 53, 59, .1);
    border-radius: 20px;

    background: #fff;

    box-shadow:
        0 10px 35px rgba(0, 0, 0, .045);

    display: flex;
    flex-direction: column;

    transition:
        transform .3s cubic-bezier(.2,.8,.2,1),
        box-shadow .3s ease,
        border-color .3s ease;

    animation: academyResultReveal .55s ease both;
    animation-delay: calc(var(--result-index) * 70ms);
}

.academy-result-card:hover {
    transform: translateY(-7px);

    border-color: rgba(214, 83, 77, .25);

    box-shadow:
        0 24px 55px rgba(0, 0, 0, .1);
}

.academy-result-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 20px;
}

.academy-result-icon {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    border-radius: 13px;

    background: rgba(214, 83, 77, .09);

    font-weight: 800;
    font-size: .95rem;

    transition:
        transform .3s ease,
        border-radius .3s ease;
}

.academy-result-card:hover .academy-result-icon {
    transform: rotate(-5deg) scale(1.06);
    border-radius: 16px;
}

.academy-result-type {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;

    opacity: .55;
}

.academy-result-category {
    display: inline-block;

    margin-bottom: 9px;

    font-size: .78rem;
    font-weight: 700;

    opacity: .65;
}

.academy-result-card h2 {
    margin: 0 0 12px;

    font-size: 1.25rem;
    line-height: 1.25;
    letter-spacing: -.025em;
}

.academy-result-card p {
    margin: 0 0 20px;

    font-size: .92rem;
    line-height: 1.65;

    opacity: .72;
}

.academy-result-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;

    margin-top: auto;
    margin-bottom: 22px;
}

.academy-result-meta span {
    padding: 6px 9px;

    border-radius: 7px;

    background: rgba(47, 53, 59, .055);

    font-size: .72rem;
    line-height: 1.3;
}

.academy-result-link {
    display: inline-flex;
    align-items: center;

    font-size: .9rem;
    font-weight: 700;

    text-decoration: none;

    transition:
        gap .25s ease,
        opacity .2s ease;
}

.academy-result-link:hover {
    opacity: .7;
}


/* ============================================================
   Empty / Initial State
   ============================================================ */

.academy-search-empty {
    max-width: 850px;
    margin: 60px auto;

    padding: 60px 30px;

    text-align: center;

    border: 1px solid rgba(47, 53, 59, .1);
    border-radius: 24px;

    background: rgba(255, 255, 255, .7);

    box-shadow:
        0 15px 45px rgba(0, 0, 0, .045);

    animation: academyEmptyReveal .5s ease both;
}

.academy-search-empty-icon {
    width: 64px;
    height: 64px;

    margin: 0 auto 20px;

    display: grid;
    place-items: center;

    border-radius: 18px;

    background: rgba(214, 83, 77, .09);

    font-size: 1.5rem;
    font-weight: 800;
}

.academy-search-empty h2 {
    margin: 0 0 12px;

    font-size: clamp(1.5rem, 3vw, 2rem);
}

.academy-search-empty p {
    max-width: 620px;
    margin: 0 auto 25px;

    line-height: 1.7;
    opacity: .7;
}


/* ============================================================
   Search Suggestions
   ============================================================ */

.academy-search-suggestions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    gap: 9px;

    margin-top: 25px;
}

.academy-search-suggestions span {
    font-size: .8rem;
    font-weight: 700;
    opacity: .55;
}

.academy-search-suggestions a {
    padding: 8px 12px;

    border: 1px solid rgba(47, 53, 59, .1);
    border-radius: 100px;

    background: rgba(255, 255, 255, .8);

    font-size: .78rem;
    font-weight: 600;

    text-decoration: none;

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

.academy-search-suggestions a:hover {
    transform: translateY(-2px);

    border-color: rgba(214, 83, 77, .3);

    background: rgba(214, 83, 77, .06);
}

.academy-empty-button {
    display: inline-flex;
    margin-top: 28px;
}


/* ============================================================
   CTA
   ============================================================ */

.academy-search-cta {
    max-width: 1100px;

    margin: 70px auto 0;

    padding: 42px;

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

    gap: 40px;

    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            rgba(47, 53, 59, .055),
            rgba(214, 83, 77, .09)
        );

    border: 1px solid rgba(47, 53, 59, .08);
}

.academy-search-cta > div:first-child {
    max-width: 650px;
}

.academy-search-cta h2 {
    margin: 8px 0 12px;

    font-size: clamp(1.6rem, 3vw, 2.3rem);
    letter-spacing: -.03em;
}

.academy-search-cta p:not(.eyebrow) {
    margin: 0;

    line-height: 1.7;
    opacity: .7;
}

.academy-search-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    flex-shrink: 0;
}


/* ============================================================
   Animations
   ============================================================ */

@keyframes academyResultReveal {

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

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

}

@keyframes academyEmptyReveal {

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

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

}


/* ============================================================
   Mobile
   ============================================================ */

@media (max-width: 900px) {

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

    .academy-search-cta {
        flex-direction: column;
        align-items: flex-start;
    }

}


@media (max-width: 650px) {

    .academy-search-page-header {
        padding-top: 30px;
    }

    .academy-results-search-box {
        min-height: 60px;
        padding-left: 15px;
        border-radius: 15px;
    }

    .academy-results-search-box .primary-btn {
        padding-inline: 14px;
    }

    .academy-results-search-box input {
        font-size: .9rem;
    }

    .academy-results-summary {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .academy-results-grid {
        grid-template-columns: 1fr;
    }

    .academy-result-card {
        padding: 23px;
    }

    .academy-search-empty {
        margin: 35px auto;
        padding: 45px 20px;
        border-radius: 18px;
    }

    .academy-search-cta {
        padding: 28px 22px;
        border-radius: 18px;
    }

    .academy-search-cta-actions {
        width: 100%;
        flex-direction: column;
    }

    .academy-search-cta-actions a {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

}


@media (max-width: 430px) {

    .academy-results-search-box {
        flex-wrap: wrap;
        padding: 10px;
    }

    .academy-results-search-box > span {
        display: none;
    }

    .academy-results-search-box input {
        width: calc(100% - 45px);
        flex: none;
        padding: 5px;
    }

    .academy-results-search-box .primary-btn {
        width: 100%;
    }

    .academy-clear-search {
        margin-left: auto;
    }

}