@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&family=Open+Sans:wght@400;600;700&family=Instrument+Serif&display=swap");

.container {
    text-align: center;
    /*animation: reveal 2s;*/
}

.content {
    padding-inline: var(--content-inline-padding);
    position: relative;
    max-inline-size: var(--page-inline-size);
    margin-inline: auto;
    text-align: left;
}

.content-50 {
    margin: 0;
    border: 0;
    vertical-align: top;
    display: block;
    width: 100%;
    text-align: left;
}

.content-100 {
    display: block;
    text-align: left;
}

.content-75 {
    vertical-align: top;
    display: inline-block;
    width: 75%;
    text-align: left;
}

.content-25 {
    vertical-align: top;
    display: block;
    text-align: left;
}

.content-team {
    overflow-x: hidden;
}


.tiles {
    text-align: center;
}

.tiles table {
    margin-inline: auto;
}

.tiles td {
    padding: 0;
    background-image: var(--gradient-tile);
    font: 700 14px var(--font-ui);
    border: var(--gutter) solid var(--color-dark);
    /*border-radius: 50%;*/
    border-collapse: separate;
    inline-size: 180px;
    block-size: 180px;
    /*background: #1c2b31;*/
    color: var(--color-white);
    text-align: center;
    position: relative;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    cursor: default;

    &:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }
}

.monitor {
    display: none;
}


:is(a.mobile, span.mobile) {
    display: inline;
}

table.mobile {
    display: table;
}

:is(nav.mobile, div.mobile, li.mobile) {
    display: block;
}

table.mobile td {
    inline-size: 140px;
    block-size: 140px;
}

.screen-7.tiles td {
    border: var(--gutter) solid var(--color-darkest);
}


.screen {
    padding-block: var(--section-block) 70px;
}

.screen-fragment {
    padding-block: 1px var(--gap-lg);
}

.screen-1 {
    background: var(--color-surface-bright);
    color: var(--color-text)
}

.screen-fragment-0 {
    background: var(--color-surface);
    color: var(--color-text);
}

.screen-fragment-2 {
    background: var(--color-surface-soft);
    color: var(--color-text);
}

.screen-fragment-1 {
    background: var(--color-surface-softest);
    color: var(--color-text);
}



.screen-1 a {
    font-weight: bold;
}

.screen-2 {
    background: var(--color-dark) !important;
    color: var(--color-white);
}

.screen-6 {
    background-image: var(--gradient-orange) !important;
    font-weight: lighter !important;
    /*color: black !important;*/
    /*background: darkorange;*/
}

.screen-6-pastel {
    background: #99C24D;
    color: var(--color-white) !important;
    /*background: darkorange;*/
}

.screen-7-pastel {
    background: #384243;
    color: var(--color-white) !important;
    /*background: darkorange;*/
}

.screen-18 {
    background: var(--color-white);
    color: var(--color-text)
}

.screen-18 a {
    color: var(--color-brand-blue) !important;
    font-weight: bold;
}

.screen-3 {
    background-image: var(--gradient-brand);
    background: transparent !important;
}

.screen-9 {
    background-image: var(--gradient-brand) !important;
    color: var(--color-white);
}

.screen-10 {
    background-image: var(--gradient-magenta) !important;
}

.screen-11 {
    background-image: var(--gradient-purple) !important;
}

.screen-12 {
    background-image: var(--gradient-violet) !important;
}

.screen-13 {
    background-image: var(--gradient-warm) !important;
}

.screen-14 {
    background-image: var(--gradient-blue) !important;
}

.screen-15 {
    background-image: var(--gradient-gray) !important;
}

.screen-16 {
    background-image: var(--gradient-red) !important;
}

.screen-17 {
    background-image: var(--gradient-link) !important;
}

.screen-transparent {
    background: transparent !important;
    border: 0;
}

.screen-3-inv {
    background-image: var(--gradient-brand-inverse) !important;
}

.screen-3-inv .button, .screen-3-inv button {
    color: var(--color-white) !important;
    background-image: var(--gradient-button-dark);
}

.screen-7 {
    background-image: var(--gradient-screen-dark);
    background: var(--color-darkest);
    color: var(--color-white);
    /*background: #343a40;*/
}

.screen-8 {
    background-image: var(--gradient-screen-darker);
    /*background: #343a40;*/
}

.screen-w {
    color: var(--color-text);
    background: var(--color-white);
}

.screen-black {
    color: var(--color-white);
    background: var(--color-text);
}

.half-screen {
    min-height: 63vh;
    text-align: left;
}

.fa-envelope {
    color: var(--color-brand-green);
    animation: reveal 2s;
}

.blue {
    color: var(--color-brand-blue);
}

.green {
    color: var(--color-brand-green);
}

.orange {
    color: var(--color-link);
}

.left {
    text-align: left !important;
}

.tiles td.left {
    text-align: left;
    vertical-align: bottom;
    padding-inline-start: var(--gap-sm) !important;
    padding-block-end: var(--gap-sm) !important;
    color: var(--color-white);
}


.tech-stack {
    font-size: 18px;
    text-align: justify;

    & a {
        color: inherit;
    }

    & span {
        color: #e5eff5;
        display: inline-block;
        margin-block: var(--gutter);
        margin-inline: 2px;
        padding-block: var(--gutter);
        padding-inline: var(--gap-sm);
        border: 1px solid #333;
        font-size: 14px;
        background-image: var(--gradient-tech-stack);
    }

    & a.active span,
    & .backend:hover {
        background-image: linear-gradient(to bottom, var(--color-brand-green) 0%, #404040 100%);
    }

    & .frontend:hover {
        background-image: linear-gradient(to bottom, var(--color-brand-blue) 0%, #404040 100%);
    }

    & .full-stack:hover {
        background-image: linear-gradient(to bottom, #E3006B 0%, #404040 100%);
    }

    & .s15 {
        font-size: 19px;
    }

    & .s20 {
        font-size: 20px;
    }

    & .s30 {
        font-size: 22px;
    }

    & .s35 {
        font-size: 24px;
    }
}

.uppercase {
    text-transform: uppercase;
}

.slogan {
    font-size: 32px;
    padding-block-start: 0;
    text-align: center;
    font-weight: normal;
}

.content-main {
    overflow-x: hidden;

    & h2 {
        font-size: 32px;
        padding-block-start: 0;
        text-align: center;
        text-transform: uppercase;
        font-weight: normal;
        letter-spacing: 3px;
        margin-block-end: 0;
    }

    & h3 {
        font-size: 24px;
        margin-block: 1.5em 0.5em;
    }
}


.services-flex {
    display: flex;
    flex-wrap: wrap;
    padding-block-end: var(--gap-lg);
    gap: var(--gap-md) 0;

    & div {
        display: flow-root;
        flex: 1 1 500px;
    }
}


.fa-ul li {
    margin-block-end: var(--sp-6);
}

.fa-li.relative {
    left: auto;
}

.relative {
    position: relative;
}

.button, button {
    -webkit-tap-highlight-color: transparent;
    text-align: left;
    line-height: 1.7em;
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    box-sizing: border-box;
    margin: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    transition:
        background-image var(--transition-base),
        box-shadow var(--transition-base),
        transform var(--transition-base);
    position: relative;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding-block: var(--gap-sm);
    padding-inline: var(--gap-md);
    display: inline-block;
    border-radius: var(--radius-pill);
    color: var(--color-text) !important;
    background-image: var(--gradient-button);
    text-decoration: none;
    outline: none !important;
}

.button:focus, button:focus {
    transform: scale(0.95) translateX(1px) translateY(1px);
}

.button.disabled, button.disabled {
    background-image: var(--gradient-button-disabled);
    cursor: not-allowed;
}

input.button, a.button.rectangle, button {
    margin-block: var(--gap-sm);
    margin-inline: 0;
    padding-block: var(--gutter);
    padding-inline: var(--gap-md);
    border-radius: var(--radius-small);
}

button.smallButton {
    padding-block: 1px;
    padding-inline: var(--gap-md);
    margin-block: 0;
    margin-inline: var(--gutter);
}

.button:not(.disabled):hover, button:not(.disabled):hover {
    box-shadow: 0 6px 20px -4px rgba(255, 140, 0, 0.3), 0 2px 6px rgba(255, 140, 0, 0.1);
    background-image: var(--gradient-button-hover);
    transform: translateY(-1px);
}

.button a {
    color: var(--color-white) !important;
}

input.cool {
    border: 1px solid silver;
    padding-block: var(--gap-sm);
    padding-inline: var(--gap-md);
    font-family: var(--font-body);
    font-size: 16px;
}

input.valid {
    border: 1px solid silver;
}

input.invalid {
    border: 1px solid red;
}

.form-panel {
    --form-accent: var(--color-brand-blue);
    --form-accent-alt: var(--color-brand-green);
    --form-panel-background: rgba(255, 255, 255, .88);
    --form-panel-border: rgba(255, 255, 255, .96);
    --form-panel-shadow:
        0 20px 44px -24px rgba(15, 26, 43, .26),
        0 12px 22px -18px rgba(25, 144, 217, .24);
    --form-field-border: #d6e7f4;
    --form-field-background: rgba(255, 255, 255, .94);
    --form-label-color: #294966;
    --form-copy-color: #10263c;
    --form-muted-color: #385673;
    --form-error-color: #bf2840;
    --form-error-surface: rgba(223, 70, 90, .12);
    --form-info-color: #0f4c81;
    --form-info-surface: rgba(36, 152, 227, .12);
    --form-success-color: #3a7d08;
    --form-focus-border: rgba(36, 152, 227, .7);
    --form-focus-ring: rgba(36, 152, 227, .12);
    --form-invalid-border: #df465a;
    --form-invalid-ring: rgba(223, 70, 90, .12);
    --form-secondary-background: #e6f4ff;
    --form-secondary-border: rgba(36, 152, 227, .34);
    --form-secondary-color: #183956;
    --form-primary-shadow: 0 14px 22px -14px rgba(5, 118, 108, .6);
    --form-hover-shadow: 0 14px 22px -14px rgba(8, 91, 162, .44);
    border-radius: 26px;
    border: 1px solid var(--form-panel-border);
    background: var(--form-panel-background);
    box-shadow: var(--form-panel-shadow);
    backdrop-filter: blur(9px);
}

.form-stack {
    display: grid;
    gap: var(--sp-4);
}

.form-honeypot {
    position: absolute;
    left: -100000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-field {
    display: grid;
    gap: var(--sp-2);
}

.form-label {
    color: var(--form-label-color);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

:is(.form-input, input.cool) {
    inline-size: 100%;
    box-sizing: border-box;
    border-radius: 14px;
    border: 1px solid var(--form-field-border);
    background: var(--form-field-background);
    color: var(--form-copy-color);
    font: 16px/1.4 var(--font-reading);
    padding-block: 14px;
    padding-inline: var(--sp-4);
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

textarea.form-input {
    min-height: 140px;
    resize: vertical;
}

:is(.form-input, input.cool):focus {
    outline: none;
    transform: translateY(-1px);
    border-color: var(--form-focus-border);
    box-shadow: 0 0 0 4px var(--form-focus-ring);
}

:is(.form-input, input.cool).is-invalid,
:is(.form-input, input.cool).invalid {
    border-color: var(--form-invalid-border);
    box-shadow: 0 0 0 4px var(--form-invalid-ring);
}

:is(.form-input, input.cool).is-valid,
:is(.form-input, input.cool).valid {
    border-color: var(--form-success-color);
}

.field-error {
    display: block;
    min-height: 18px;
    margin-block-start: 2px;
    color: var(--form-error-color);
    font-size: 12px;
    font-weight: 700;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-sm);
}

:is(.form-button-primary, .form-button-secondary) {
    border: none;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-block: var(--sp-3);
    padding-inline: 22px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .25s ease, filter .25s ease;
}

.form-button-primary {
    color: #fff !important;
    background: linear-gradient(110deg, var(--form-accent) 0%, var(--form-accent-alt) 100%);
    box-shadow: var(--form-primary-shadow);
}

.form-button-secondary {
    color: var(--form-secondary-color);
    background: var(--form-secondary-background);
    border: 1px solid var(--form-secondary-border);
}

:is(.form-button-primary, .form-button-secondary):hover {
    transform: translateY(-2px);
    box-shadow: var(--form-hover-shadow);
    filter: saturate(1.08);
}

.form-button-primary:disabled {
    opacity: .72;
    cursor: not-allowed;
    transform: none;
    filter: none;
}

.form-note {
    margin: 0;
    color: var(--form-muted-color);
    font-size: 13px;
}

.form-alert {
    border-radius: var(--sp-4);
    padding-block: 14px;
    padding-inline: var(--sp-4);
    font-size: 14px;
    font-weight: 700;
}

.form-alert-error {
    color: var(--form-error-color);
    background: var(--form-error-surface);
    border: 1px solid rgba(223, 70, 90, .2);
}

.form-alert-info {
    color: var(--form-info-color);
    background: var(--form-info-surface);
    border: 1px solid rgba(36, 152, 227, .18);
}

.content-login {
    max-width: none;
    padding-inline: 0;
}

.content-login .login-page {
    position: relative;
    overflow: clip;
    min-height: calc(100vh - 220px);
    padding-block: 128px var(--sp-20);
    padding-inline: var(--sp-6);
    background:
        radial-gradient(circle at 12% 12%, rgba(36, 152, 227, .15), transparent 32%),
        radial-gradient(circle at 86% 18%, rgba(144, 196, 4, .14), transparent 34%),
        linear-gradient(180deg, #f7fcff 0%, #f3f9ff 52%, #f8fff5 100%);
}

.content-login .login-layout {
    position: relative;
    z-index: 1;
    max-width: 1040px;
    margin-inline: auto;
    display: grid;
    gap: var(--sp-7);
    align-items: start;
}

.content-login .login-copy {
    max-width: 540px;
}

.content-login .login-copy .title-and-breadcrumb {
    margin-block-end: var(--gap-md);
}

.content-login .login-copy .title-and-breadcrumb h3 {
    margin-block-start: var(--sp-3);
    text-align: left;
    color: #0f1a2b;
    font-family: var(--font-display-serif);
    font-size: clamp(42px, 6vw, 68px);
    line-height: .96;
    letter-spacing: -.6px;
}

.content-login .login-kicker {
    margin: 0;
    color: #1990d9;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3.5px;
    text-transform: uppercase;
}

.content-login .login-panel {
    max-width: 520px;
    padding-block: var(--gap-lg) var(--sp-6);
    padding-inline: var(--sp-6);
}

.content-login .login-panel-title {
    margin: 0;
    text-align: left;
    color: #12314c;
    font-family: var(--font-display-serif);
    font-size: clamp(28px, 3vw, 36px);
    text-transform: none;
    letter-spacing: -.2px;
    display: none;
}

.content-login .login-form {
    margin-block-start: var(--sp-6);
}

.content-login .login-submit {
    min-width: 160px;
}

.content-login .login-bg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    pointer-events: none;
    animation: ccFloat 9s ease-in-out infinite;
}

.content-login .login-bg-orb-1 {
    width: 290px;
    aspect-ratio: 1;
    left: -70px;
    top: 88px;
    background: radial-gradient(circle, rgba(36, 152, 227, .24), rgba(36, 152, 227, 0));
}

.content-login .login-bg-orb-2 {
    width: 320px;
    aspect-ratio: 1;
    right: -110px;
    top: 240px;
    background: radial-gradient(circle, rgba(144, 196, 4, .22), rgba(144, 196, 4, 0));
    animation-delay: 1.1s;
}

.main-footer {
    opacity: 1;
    position: relative;
    background: var(--color-footer-bg);
    margin-block-start: var(--footer-offset);
    color: var(--color-white);
    border-block-start: 1px solid rgba(255, 255, 255, .06);

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

    & .container .content {
        /*text-align: right;*/
        padding-block: var(--section-block-lg) var(--section-block);
    }

    & img {
        padding-block-end: var(--section-block-lg);
    }
}

.key-members {
    float: none;
    inline-size: 100%;
}

.key-member-name {
    text-align: center;
    padding-block: var(--gutter);
}

.key-members img {
    max-inline-size: 100%;
    object-fit: cover;
    border-radius: var(--radius-round);
}

.key-member {
    display: inline-block;
    text-align: center;
    inline-size: 49%;
    padding-block: 25px;
    font-size: 16px;
}

.team-members ul {
    display: block;
    margin: 0;
    inline-size: 100%;
}

.team-members li {
    margin: 0;
    float: left;
    inline-size: 180px;
}

.team-members li a {
    display: block;
    padding-block: var(--gap-lg);
}

.team-member-role {
    font-size: initial;
    color: gray;
    font-weight: normal;
}

.team-member-photo-and-data {
    margin-block: var(--gap-md);
}

.team-member-photo-and-data img {
    margin-block-end: var(--gap-md);
    max-inline-size: 100%;
    border: 1px solid #222;
    max-block-size: 500px;
}


.team-flex {
    display: flex;
    wrap-option: wrap;
    flex-direction: column;
}

.team-ceos {
    flex: 1 1 100%;
    order: 1;
}

.team-employees {
    text-align: center;
    flex: 1 1 100%;
    order: 3;
    margin-block-start: var(--gap-lg);
}

.team-circles {
    flex: 0 0 150px;
    text-align: center;
    margin-inline: auto;
    order: 2;
}

.team-employees li {
    text-align: left;
}

.team-pix div {
    margin-block: 0 -50px;
    margin-inline: -30px 30px;
    border: 5px solid var(--color-page-bg);
}

.team-pix div:nth-child(2n) {
    margin-inline: var(--gap-lg) -30px;
}


.title-and-breadcrumb {
    border-block-end: 1px solid var(--color-border-muted);
}

.title-and-breadcrumb h3 {
    margin-block-end: 0;
}

.breadcrumb {
    margin-block-start: 55px;
    font-size: 14px;
}

/* ── individual post view (keep for post.view.php) ── */
.content-posts .posts.post {
    display: block;
}

.content-posts .posts .post-item {
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-soft);
    background-color: var(--color-surface);
    margin-block: 15px;
    padding-block: 0 18px;
    padding-inline: var(--sp-9);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-soft);
    transition: box-shadow var(--transition-base), transform var(--transition-base);

    &:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-1px);
    }
}

/* ═══════════════════════════════════════════════════════
   POSTS LISTING PAGE – editorial redesign
   ═══════════════════════════════════════════════════════ */

/* break out of .content container */
.content.content-posts.content-executeIndex {
    max-width: none;
    padding: 0;
}

/* ── hero ── */
.posts-hero {
    position: relative;
    background: linear-gradient(170deg, #f0faf7 0%, ghostwhite 60%, #eef1f8 100%);
    padding-block: 0 56px;
    padding-inline: 0;
    overflow: hidden;
    border-block-end: 1px solid #e0e4e8;
    margin-inline: var(--gap-lg);
}

.posts-hero-dots {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(rgba(0,184,148,.045) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
}

.posts-hero::before {
    content: "";
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #00b894, #00cec9, #0984e3);
}

.posts-hero-inner {
    position: relative;
    max-width: 1000px;
    margin-inline: auto;
    padding: 0;
}

.posts-hero .title-and-breadcrumb h3 {
    color: #1a1d23;
}

.posts-hero-label {
    display: inline-block;
    margin-block-start: var(--sp-6);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #00b894;
}

.posts-hero-title {
    font-family: 'Instrument Serif', Georgia, serif;
    font-weight: 400;
    font-size: 44px;
    line-height: 1.15;
    color: #1a1d23;
    margin-block: 14px 0;
    max-width: 560px;
    text-align: left;
}

.posts-hero-sub {
    font-size: 15px;
    line-height: 1.65;
    color: #5f6368;
    margin-block: var(--sp-4) 0;
    max-width: 480px;
    font-weight: 400;
}

/* ── body wrapper ── */
.posts-body {
    max-width: 1060px;
    margin-inline: auto;
    padding-inline: var(--gap-lg);
}

/* ── filter pills ── */
.posts-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    justify-content: space-between;
    align-items: center;
    padding-block: var(--sp-9) var(--sp-7);
    border-block-end: 1px solid #e4e6e9;
    margin-block-end: var(--sp-7);
}

.posts-filters-main,
.posts-filters-sort {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.posts-filters-sort {
    margin-inline-start: auto;
}

.pf-pill {
    display: inline-flex;
    align-items: center;
    padding-block: var(--gutter);
    padding-inline: 15px;
    font-size: 13px;
    font-weight: 600;
    color: #5f6368;
    background: transparent;
    border: 1.5px solid #dadce0;
    border-radius: 100px;
    transition: all .2s ease;
}

.pf-pill:hover {
    color: #1a1a1a;
    border-color: #1a1a1a;
    background: rgba(0,0,0,.02);
}

.pf-pill.is-active {
    color: #fff;
    background: #1a1d23;
    border-color: #1a1d23;
}

.pf-pill--sort {
    font-weight: 500;
    border-style: dotted;
    border-color: #d5d7dc;
}

/* ── card grid ── */
.posts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    padding-block-end: var(--sp-20);
}

.posts-empty {
    font-size: 13px;
    color: #7a7f85;
    margin-block: var(--sp-2) var(--sp-1);
}

/* ── card ── */
.pc {
    --accent: #5f6368;
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base),
        border-color var(--transition-base);
    animation: pcIn .45s ease both;
    animation-delay: calc(var(--i, 0) * 55ms);
}

@keyframes pcIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pc::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--accent);
    border-radius: 12px 0 0 12px;
    transition: width .2s ease;
}

.pc:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
    border-color: rgba(0,0,0,.12);
}

.pc:hover::before { width: 5px; }

/* category accents */
.pc.cat--engineering { --accent: #00b894; }
.pc.cat--case-study  { --accent: #6c5ce7; }
.pc.cat--delivery    { --accent: #e17055; }
.pc.cat--company     { --accent: #0984e3; }

/* featured card */
.pc--feat {
    border-color: rgba(108,92,231,.22);
    box-shadow: 0 4px 24px rgba(108,92,231,.07);
}

.pc--feat:hover {
    border-color: rgba(108,92,231,.38);
    box-shadow:
        0 18px 48px rgba(108,92,231,.11),
        var(--shadow-soft);
}

/* card inner */
.pc-inner {
    padding-block: var(--sp-6) 26px;
    padding-inline: 26px;
    display: flex;
    flex-direction: column;
    min-height: 190px;
}

.pc-head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-block-end: 14px;
}

.pc-cat {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    padding-block: 3px;
    padding-inline: 9px;
    border-radius: 4px;
    color: var(--accent);
    border: 1px solid;
    background: rgba(0,0,0,.025);
}

.pc-feat {
    font-size: 10.5px;
    font-weight: 700;
    color: #6c5ce7;
    background: rgba(108,92,231,.07);
    border: 1px solid rgba(108,92,231,.28);
    padding-block: 3px;
    padding-inline: var(--sp-2);
    border-radius: 4px;
}

.pc-date {
    font-size: 12px;
    color: #9aa0a6;
    margin-inline-start: auto;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.pc-title {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
    margin-block: 0 var(--gap-sm);
    text-align: left;
}

.pc-title a {
    color: #1a1d23;
    transition: color .15s ease;
}

.pc-title a:hover { color: #00b894; }

.pc-intro {
    font-size: 13.5px;
    line-height: 1.65;
    color: #5f6368;
    font-weight: 400;
    margin: 0;
    flex-grow: 1;
}

.pc-intro strong {
    color: #1a1d23;
    font-weight: 600;
}

.pc-read {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    margin-block-start: var(--sp-4);
    font-size: 13px;
    font-weight: 600;
    color: #00b894;
    transition: gap .2s ease;
}

.pc-read:hover { gap: 8px; }

.pc-arrow {
    transition: transform .2s ease;
    font-weight: 400;
}

.pc-read:hover .pc-arrow { transform: translateX(3px); }


.content-posts .stock-right {
    margin-block: var(--gap-sm);
    text-align: center;
}

.content-posts .stock-right img {
    margin-inline: auto;
    max-width: 100%;
    border: 1px solid black;
}

.content-posts .post {
    max-width: 860px;
    margin-inline: auto;
    /* ===== Base Typography ===== */
    .case-study {
    line-height: 1.65;
    color: #1a1a1a;
    }

    /* ===== Headings ===== */

    .case-study h1 {
    font-size: 2.4rem;
    font-weight: 700;
    margin-block-end: var(--gap-sm);
    letter-spacing: -0.5px;
    }

    .case-study h2 {
    margin-block-start: 60px;
    font-size: 1.6rem;
    font-weight: 600;
    position: relative;
    }

    .case-study h2::after {
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    background: #00b894; /* subtle accent */
    margin-block-start: var(--sp-3);
    border-radius: 2px;
    }

    .case-study h3 {
    margin-block-start: var(--sp-10);
    font-size: 1.25rem;
    font-weight: 600;
    }

    /* ===== Paragraphs ===== */

    .case-study p {
    margin-block-start: var(--sp-4);
    font-size: 1.05rem;
    color: #333;
    }

    /* ===== Lists ===== */

    .case-study ul {
    margin-block-start: var(--sp-4);
    padding-inline-start: 22px;
    }

    .case-study li {
    margin-block-end: var(--sp-2);
    }

    /* ===== Strong Highlights ===== */

    .case-study strong {
    color: #111;
    font-weight: 600;
    }

    /* ===== Section Spacing ===== */

    .case-study section {
    margin-block-start: var(--sp-10);
    }

    /* ===== Impact Section Highlight ===== */

    .case-study section:nth-of-type(4) {
    background: #f8f9fb;
    padding: var(--gap-lg);
    border-radius: var(--gap-sm);
    }

    /* ===== Footer CTA ===== */

    .case-study footer {
    margin-block-start: 60px;
    padding: var(--gap-lg);
    background: linear-gradient(135deg, #00b894, #00cec9);
    color: white;
    border-radius: 12px;
    text-align: center;
    }

    .case-study footer strong {
    color: white;
    font-weight: 700;
    }

    /* ===== Subtle Links ===== */

    .case-study a {
    color: #00b894;
    text-decoration: none;
    font-weight: 500;
    }

    .case-study a:hover {
    text-decoration: underline;
    }

}

.clear {
    clear: both;
}

.mobile-clear-fix:after {
    content: '';
    display: table;
    clear: both;
}

.clear-fix:after {
    content: '';
    display: table;
    clear: both;
}

.join-us ul {
    text-transform: capitalize;
}

.content-not-translated, .error {
    font-style: italic;
    font-weight: bold;
    border-inline-start: var(--gutter) solid #f44;
    margin-block: 35px;
    padding: var(--gutter);
    padding-inline-start: 15px;
}

.content-accountsreceivables li span {
    float: right;
}

.accountsreceivables {
    display: flex;
    flex-wrap: wrap;
}

.accountsreceivables .company {
    border-block-end: 1px solid #eef;
    flex: 1 1 100%;
    padding: 15px;
}

/*.accountsreceivables .company:nth-child(2n) {*/
/*    background: #f5f5ff;*/
/*}*/

.content-accountsreceivables ol.expired {
    color: red;
}

.content-accountsreceivables ol.not-expired {
    color: green;
}

.box-n a {
    font-weight: bold;
}

.box-1 {
    background-image: linear-gradient(to right, #007bff 0%, #2498e3 100%) !important;
}

.box-2 {
    background-image: linear-gradient(to right, rgba(0, 182, 195, 1) 0%, rgba(74, 194, 63, 1) 100%) !important;;
    color: white;
}

.box-3 {
    background-image: linear-gradient(to right, orange 0%, #dd6f00 100%) !important;;
    font-weight: lighter !important;
}

.box-4 {
    background-image: linear-gradient(to right, #c02f2f 0%, red 100%) !important;
}


.box-5 {
    background-image: linear-gradient(to right, dimgray 0%, lightslategray 100%) !important;
}

.box-6 {
    background-image: linear-gradient(to right, darkorchid 0%, #ff0ccd 100%) !important;;
}

.box-7 {
    background-image: linear-gradient(to right, darkorchid 0%, #8330cc 100%) !important;;
}

.box-8 {
    background-image: linear-gradient(to right, mediumvioletred 0%, darkorchid 100%) !important;;
}

.box-9 {
    background-image: linear-gradient(to right, orangered 0%, orange 100%) !important;;
}

.box-10 {
    background-image: linear-gradient(to right, dodgerblue 0%, blue 100%) !important;;
}

.box-11 {
    background-image: linear-gradient(to right, dimgray 0%, lightslategray 100%) !important;;
}


/** sheetr **/

.content-sheetr.content,
.content-contributr.content,
.content-money.content,
.content-visitorlog.content,
.content-worklog.content,
.content-sitechecker.content,
.content-notes.content,
.content-playground.content,

.header-sheetr #header-content-container,
.header-contributr #header-content-container,
.header-money #header-content-container,
.header-visitorlog #header-content-container,
.header-worklog #header-content-container,
.header-notes #header-content-container,
.header-playground #header-content-container,
.header-sitechecker #header-content-container {
    max-width: 1400px;
}

.content-sheetr td a {
    text-align: left; white-space: nowrap;
}

.content-sheetr td {
    text-align: justify;
}

.content-sheetr h4 {
    /*margin-top: 75px;*/
}
.content-sheetr h5 {
    /*margin-top: 65px;*/
}

.content-sheetr .invoice-estimation h5 {
    margin: var(--gutter);
}

.content-sheetr table {
    border-collapse: collapse;
}

.content-sheetr .summary a {
    color: inherit;
    font-weight: inherit;
}

.content-sheetr .summary {
    margin-block-start: var(--gap-lg);
}

.content-sheetr {
    --sheetr-overview-focus-color: rgba(0, 0, 0, 0.8);
}

.content-sheetr .summary tr td, .content-sheetr .summary tr th {
    font-size: 11px;
    min-width: 28px;
    width: 28px;
    height: 28px;
}

.content-sheetr .summary tr td, .content-sheetr .summary tr th {
    overflow: hidden;
}

.content-sheetr .summary tr td {
    color: white;
    border: 2px solid white;
}

.content-sheetr .summary td {
    text-align: center;
}

.content-sheetr .summary td.current-date-range {
    box-shadow: inset 0 0 0 1px var(--sheetr-overview-focus-color);
    position: relative;
}

.content-sheetr .excluded-people {
    color: gray;
    font-size: 11px;
    margin-block: 6px 3px;
}
.content-sheetr .excluded-people .only-hover, .content-sheetr .excluded-people .only-hover a {
    color: transparent; font-weight: normal;
}
.content-sheetr .excluded-people:hover, .content-sheetr .excluded-people:hover * {
    color: black !important;
}

.content-sheetr table th {
    color: black;
}

.content-sheetr .selected span, .minimal-flex .selected span {
    background-image: linear-gradient(to bottom, var(--color-brand-green) 0%, #404040 100%);
}

.content-sheetr svg .current-date-range-outline {
    stroke: var(--sheetr-overview-focus-color);
    stroke-width: 1px;
    shape-rendering: crispEdges;
    pointer-events: none;
}

.content-sheetr .worklogs {
    margin-block-start: var(--gap-lg);
    inline-size: 100%;

    &.longshort > tbody > tr {
        > th:nth-child(1) {
            width: 8%;
        }
        > td:nth-child(3) {
            width: 4%;
        }
        > td:nth-child(4) {
            width: 8%;
        }
        > td:nth-child(5) {
            width: 11%;
        }
    }
}

.content-sheetr .worklogs a {
    display: block;
}

.content-sheetr .notes-flex-full-width {
    grid-template-columns: minmax(0, 1fr);
}

.content-sheetr .notes-flex-full-width > div {
    margin-inline: 0;
    inline-size: 100%;
}

.content-sheetr .worklogs .worklogs-sort-row th {
    background: var(--color-surface-softest);
}

.content-sheetr .worklogs .worklogs-sort-link {
    color: var(--color-link);
    text-decoration: underline;
}

.content-sheetr .worklogs .worklogs-sort-link:hover {
    color: var(--color-link-hover);
}

.content-sheetr .worklogs .worklogs-sort-direction {
    font-size: 11px;
}

.content-work .worklogs {
    inline-size: 100%;
    border-collapse: collapse;
    margin-block-start: var(--gap-lg);
}

.content-work .worklogs .worklogs-sort-row th {
    background: var(--color-surface-softest);
}

.content-work .worklogs td,
.content-work .worklogs th {
    border-block-end: 1px solid #dde;
    padding-block: 6px;
    padding-inline: var(--gutter);
    text-align: left;
}

.content-sheetr .worklogs td, .content-sheetr .worklogs th {
    color: inherit;
    border-block-end: 1px solid #dde;
    font-size: 13px;
    padding-block: var(--sp-2);
    padding-inline: var(--gutter);
}

.content-sheetr .worklogs th {
    white-space: nowrap
}

.content-sheetr .worklogs .bigHr th {
    white-space: initial
}

.content-sheetr .worklogs .wrapIt th {
    white-space: initial
}

.content-sheetr .worklogs .empty {
    background: #faa;
}

.content-sheetr .worklogs hr {
    border-block-end: var(--gutter) solid darkorange;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
    display: inline-block;
}

.content-sheetr .worklogs .bigHr hr {
    border-block-end: 15px solid darkorange;
}

.content-sheetr .worklogs td.overflowhidden {
    overflow: hidden !important;
    white-space: nowrap;
    max-width: 500px;
}

.content-sheetr .invoice-estimation {
    margin-block-start: var(--gap-lg);
    background: white;
    border: 1px solid yellowgreen;
    box-shadow: 3px 3px yellowgreen;
    padding-block: var(--gap-lg);
    padding-inline: var(--gap-sm);
}

.content-sheetr .invoice-estimation h5 {
    margin-block-start: var(--gap-lg);
}

.content-sheetr .invoice-estimation h6 {
    font-size: 16px;
    margin-block: 1rem 0.5rem;
}

.content-sheetr .invoice-estimation .invoice-flex {
    display: flex;
    flex-wrap: wrap;
}

.content-sheetr .invoice-estimation .invoice-flex>div {
    padding-inline: var(--gutter);
}

.content-sheetr .invoice-rough-estimation {
    border-color: gold;
    box-shadow: 3px 3px gold;
}

.content-sheetr .invoice-estimation table {
    width: 100%;
}

.content-sheetr .invoice-estimation th, .content-sheetr .invoice-estimation td {
    padding-block: var(--gutter);
    padding-inline: var(--gap-sm);
    text-align: left;
}

.content-sheetr .invoice-estimation .subject {
    flex: 1 1 100%;
}

.nowrap>*>* {
    white-space: normal;
}
.nowrap>*, .nowrap {
    white-space: nowrap;
}

.wrap *, .wrap {
    white-space: normal;
}

.content-wrapper {
    margin: 0;
}
.content-wrapper > div {
    flex: 1 1 150px;
    background: var(--color-surface);
    margin-block: var(--gap-md);
    padding-block: 35px var(--gap-md);
    padding-inline: var(--gap-md);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-small);
    box-shadow: var(--shadow-soft);
}

.notes-flex {
    display: grid; /* not so flex anymore */
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}

.notes-flex > div {
    flex: 1 1 150px;
    background: var(--color-surface);
    margin: var(--gap-md);
    padding-block: 35px var(--gap-md);
    padding-inline: var(--gap-md);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-small);
    box-shadow: var(--shadow-soft);
}

.minimal-flex {
    background: var(--color-surface);
    margin-block-start: var(--gap-sm);
    padding: var(--gap-md);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-small);
    box-shadow: var(--shadow-soft);
}

.minimal-flex.noshadow {
    box-shadow: none;
    border: 0;
    padding: 0;
    background: none;
}

.minimal-flex label {
    color: silver;
    padding: 0;
    margin: 0;
    font-size: 11px;
    display: block;
}

.minimal-flex input {
    margin-block-start: var(--gutter);
}

.minimal-flex > div {
    display: flex;
    flex-wrap: wrap;
    vertical-align: baseline;
}
.minimal-flex > div > div {
    flex: 1 1 150px;
    vertical-align: baseline;
}

.notes-flex .todo {
    background: #eef;
    border-bottom-color: #dde;
    border-right-color: #dde;
    box-shadow: 2px 2px 10px #eef;
}

.notes-flex .retro {
    background: #eef;
    border-bottom-color: #dde;
    border-right-color: #dde;
    box-shadow: 2px 2px 10px #eef;
}
.notes-flex .retroG {
    background: #efe;
    border-bottom-color: #ded;
    border-right-color: #ded;
    box-shadow: 2px 2px 10px #efe;
}
.notes-flex .retroB {
    background: #fee;
    border-bottom-color: #edd;
    border-right-color: #edd;
    box-shadow: 2px 2px 10px #fee;
}


/**** ContribCalendar colors ***/
.hours0 { background: rgb(230,230,245); fill: rgb(230,230,245)}
.hours0 a { color: rgb(230,230,245) !important;}
.hoursDeadlineComing { background: rgb(245,200,200);fill:rgb(245,200,200); }
.hoursDeadlineGone { background: rgb(255,70,70);fill:rgb(255,70,70) }
.hoursDeadlineFuckItsToday { background: rgb(255,0,0);fill:rgb(255,0,0) }
.hours0p { background: rgb(200,245,200); fill: rgb(200,245,200)}
.hours2p { background: rgb(150,225,150); fill: rgb(150,225,150) }
.hours4p { background: rgb(100,205,100);fill:rgb(100,205,100)}
.hours6p { background: rgb(50, 185, 50);fill:rgb(50,185,50) }
.hoursExpp { background: rgb(0,145,0);fill:rgb(0,145,0) }
.hours9p { background: rgb(0,70,80);fill:rgb(0,70,80) }
.hours9p .hours-improved, .hoursExpp .hours-improved, .hours6p .hours-improved, .hours4p  .hours-improved{ color: rgb(0,255,0)}
.hours2p .hours-improved, .hours0p .hours-improved { color: rgb(0,180,0)}
.hours-worsened { color: rgb(255,0,0)}


figure.hoursDeadlineComing { background: initial; color: rgb(245,200,200) !important; font-weight: bold;fill:rgb(245,200,200); }
figure.hoursDeadlineGone { background: initial; color: rgb(255,70,70) !important; font-weight: bold;fill:rgb(255,70,70) }
figure.hoursDeadlineFuckItsToday { background: initial; color: rgb(255,0,0) !important; font-weight: bold; fill:rgb(255,0,0) }



table.cool {
    inline-size: 100%;
    border-collapse: collapse;
    margin-block: var(--gap-md);
    font-family: "Arial", sans-serif !important;
    font-size: 0.8em;
}
table.cool tr.lastInserted td:not(.Project) {
    animation: highlighter 5s ease-in-out 1;
}
table.cool td {
    overflow: hidden;
    position: relative;
}

table.cool a {
    cursor: pointer;
}

table.cool tr>* {
    padding-block: 7px;
    padding-inline: var(--gap-sm);
    border-block: 1px solid #efefff;
}
table.cool tr>*:not(:first-child) {
    border-inline-start: 1px solid #fafaff;
}

table.cool tr>* {
    background: white;
}
table.cool tr:nth-child(2n+1)>* {
    background: #fdfdff;
}
table.cool tr:hover>* {
    background: #fafaff;
}

table.cool .User {
    text-transform: capitalize;
}
table.cool .Day {
    width: 20px;
}
table.cool .Status {
    width: 30px;
}
table.cool .Status span, table.cool .Type span, table.cool .Priority span {
    padding-block: 2px;
    padding-inline: 7px;
}
table.cool .URI {
    overflow-wrap: anywhere;
}
table.cool .Time {
    white-space: nowrap;
    width: 65px;
    text-align: center;
}
table.cool .Done, table.cool .Priority, table.cool .Active {
    text-align: center;
}
table.cool .Delete {
    white-space: nowrap;
}
table.cool .Onsite {
    width: 40px;
    text-align: center;
}
table.cool .Project {
    width: 50px;
    text-align: center;
}
table.cool .Task {
    width: 100px;
    white-space: nowrap;
}
table.cool .Hours {
    width: 40px;
}
table.cool td.Hours, table.cool td.Salary {
    text-align: right;
}
table.cool .id {
    display: none;
}




.menu-parent-parent { position: relative; padding: 0; }
.menu-parent { padding: 0; }
.menu-parent div a { padding: 0 !important; }
.menu-parent>div { display: none; }
.menu-parent>div * { color: #4d555e !important; padding: 0; margin: 0; }
.menu-parent:hover>div, .menu-parent.menu-parent-open>div { display: block; position: absolute; top: 20px; right: 0; background: transparent; width: 1000px; }
.menu-parent.menu-parent-open>div { width: 100%; position: relative; }
.menu-parent>div>div { background: white; text-align: left; display: flex; flex-wrap: wrap; margin-top: 20px; padding: 30px 0; box-shadow: 5px 5px 5px rgba(0,0,0,0.1)}
.menu-parent>div>div>div:not(:nth-child(3n+1)) { border-left: 1px solid #eef; }
.menu-parent>div>div>div { flex: 1 0 20%; padding-left: 50px; padding-right: 30px; margin-top: 25px; margin-bottom: 25px; }
.menu-parent>div>div>div ul { list-style: none; padding-top: 10px; }
.menu-parent>div>div>div li { padding-top: 5px; padding-bottom: 5px; }
.menu-parent>div>div>div h4 { padding: 0; }
.menu-parent#menu-userprofile div { }
.menu-parent#menu-userprofile div a { padding: 0; }
.menu-parent-open>div>div {  box-shadow: none; }
.menu-parent-open>div>div>div { font: 14px "Source Sans Pro", "Hiragino Sans GB", "Microsoft JhengHei", arial, helvetica, sans-serif; text-transform: uppercase}







@keyframes highlighter {
    0% {
        opacity: 0;
    }
    4% {
        opacity: 1;
        background: rgb(0, 182, 195);
    }
    20% {
        background: rgb(74, 194, 63);
    }
    40% {
        background: gold;
    }
    70% {
        background: yellowgreen;
    }
    100% {
        background: inherit;
    }
}


/** main page logo animation.. god... **/
.blinker {
    animation: logo-blinker 10s ease-in-out infinite;
    animation-delay: 1s;
}

.blinker-2 {
    animation-delay: 1.1s;
}

.main-logo {
    position: absolute;
}

.main-logo:first-child {
    float: left;
    position: relative;
}

#main-logo-playground {
    position: relative;
    text-align: center;
    animation: slider 16s ease-in-out infinite;
    animation-delay: 3s;
}

#main-logo-playground img {
    max-width: 85%;
}

#m1 img {
    animation: zig2 2.2s ease-in-out alternate-reverse infinite;
    animation-delay: 0.1s;
}

#m2 img {
    animation: zig 2s ease-in-out alternate-reverse infinite;
    animation-delay: 1s;
}

#m3 img {
    animation: zig2 2.4s ease-in-out alternate-reverse infinite;
    animation-delay: 0.6s;
}

#m4 img {
    animation: zig 2s ease-in-out alternate-reverse infinite;
    animation-delay: 0.7s;
}

#m5 img {
    animation: zig 2s ease-in-out alternate-reverse infinite;
    animation-delay: 1.0s;
}

#m6 img {
    animation: zig 2s ease-in-out alternate-reverse infinite;
    animation-delay: 1.1s;
}

#m1 {
    animation: m1 0.8s linear 1;
}

#m2 {
    animation: m1 1s ease-in-out 1;
}

#m3 {
    animation: m2 1.2s ease-out 1;
}

#m4 {
    animation: m1 1.4s ease-out 1;
}

#m5 {
    animation: m2 1.6s ease-in-out 1;
}

#m6 {
    animation: m2 1.8s ease-in-out 1;
}

#m1 .main-logo-inner {
    animation: blinker 5s ease-in-out infinite;
    animation-delay: 0.01s;
}

#m2 .main-logo-inner {
    animation: blinker 5.5s ease-in-out infinite;
    animation-delay: 0.21s;
}

#m3 .main-logo-inner {
    animation: blinker 7s ease-in-out infinite;
    animation-delay: 0.31s;
}

#m4 .main-logo-inner {
    animation: blinker 7.5s ease-in-out infinite;
    animation-delay: 0.41s;
}

#m5 .main-logo-inner {
    animation: blinker 9s ease-in-out infinite;
    animation-delay: 0.51s;
}

#m6 .main-logo-inner {
    animation: blinker 9.5s ease-in-out infinite;
    animation-delay: 0.61s;
}

@keyframes zig {
    0% {
        transform: translate(2px, 3px) rotate(-0.2deg);
    }
    100% {
        transform: translate(-2px, -3px) rotate(0.2deg);
    }
}

@keyframes zig2 {
    0% {
        transform: translate(2px, 5px) rotate(-0.3deg);
    }
    100% {
        transform: translate(-2px, -5px) rotate(0.7deg);
    }
}

@keyframes m1 {
    0% {
        transform: translate(2000px, 0px) rotate(90deg);
    }
    70% {
        transform: translate(10px, 10px) rotate(355deg);
    }
    85% {
        transform: translate(2px, 2px) rotate(358deg);
    }
    98% {
        opacity: 1;
    }
    99% {
        opacity: 0;
    }
    100% {
        transform: translate(0px, 0px) rotate(360deg);
        opacity: 1;
    }
}

@keyframes m2 {
    0% {
        transform: translate(2000px, 0px) rotate(90deg);
    }
    80% {
        transform: translate(-10px, -10px) rotate(365deg);
    }
    94% {
        transform: translate(-5px, -5px) rotate(360deg);
        opacity: 1;
    }
    95% {
        opacity: 0;
        background: transparent;
    }
    96% {
        opacity: 1;
    }
    97% {
        opacity: 0;
        background: transparent;
    }
    98% {
        opacity: 1;
    }
    100% {
        transform: translate(0px, 0px) rotate(360deg);
        opacity: 1;
        background: transparent;
    }
}

@keyframes blinker {
    0% {
        opacity: 1;
    }
    98.5% {
        opacity: 0.8;
    }
    98.8% {
        transform: translate(-10px, 0);
        opacity: 0;
    }
    99% {
        opacity: 1;
        background: transparent;
    }
    99.5% {
        transform: translate(10px, 0);
        opacity: 0;
    }
    100% {
        background: transparent;
        opacity: 1;
    }
}

@keyframes logo-blinker {
    0% {
        opacity: 1;
        transform: translate(0, 0);
    }
    98.5% {
        transform: translate(5px, 5px);
        opacity: 1;
    }
    98.8% {
        opacity: 0;
    }
    99% {
        opacity: 1;
        background: transparent;
        transform: none;
    }
    99.5% {
        transform: translate(10px, 0);
        opacity: 0;
    }
    100% {
        background: transparent;
        opacity: 1;
        transform: translate(0, 0);
    }
}



@keyframes slider {
    0% {
        transform: none;
    }
    45% {
        transform: none;
        opacity: 1;
    }
    50% {
        transform: translate(-2000px, 0px);
        opacity: 0;
    }
    50.1% {
        transform: translate(2000px, 0px);
        opacity: 0;
    }
    50.2% {
        transform: translate(2000px, 0px);
        opacity: 1;
    }
    55% {
        transform: none;
    }
    100% {
        transform: none;
    }
}


/** end: main page logo animation.. god... **/

/* ═══════════════════════════════════════════════════════
   CONTACT PAGE – 2026 visual refresh
   ═══════════════════════════════════════════════════════ */
.content-contact {
    --cc-blue: #2498e3;
    --cc-green: #90C404;
    --cc-cyan: #00b6c3;
    --cc-deep: #0f1a2b;
    --cc-copy: #1e3f5d;
    --cc-muted: #3d576f;
    --cc-border: #d6e7f4;
    --cc-error: #bf2840;
    --cc-success: #3a7d08;
    --cc-radius-card: 26px;
    --cc-radius-field: 14px;
    --cc-space-1: 8px;
    --cc-space-2: 10px;
    --cc-space-3: 16px;
    --cc-space-4: 24px;
    --cc-space-5: 30px;
    --cc-shell: 1020px;
    --form-accent: var(--cc-cyan);
    --form-accent-alt: var(--cc-green);
    --form-panel-background: rgba(255, 255, 255, .84);
    --form-panel-border: rgba(255, 255, 255, .95);
    --form-panel-shadow:
        0 20px 44px -24px rgba(15, 26, 43, .26),
        0 12px 22px -18px rgba(25, 144, 217, .24);
    --form-field-border: var(--cc-border);
    --form-field-background: rgba(255, 255, 255, .92);
    --form-label-color: #2a4968;
    --form-copy-color: #10263c;
    --form-muted-color: #385673;
    --form-error-color: var(--cc-error);
    --form-success-color: var(--cc-success);
    --form-focus-border: rgba(36, 152, 227, .7);
    --form-focus-ring: rgba(36, 152, 227, .12);
    --form-invalid-border: #df465a;
    --form-invalid-ring: rgba(223, 70, 90, .12);
    --form-secondary-background: #e6f4ff;
    --form-secondary-border: rgba(36, 152, 227, .34);
    --form-secondary-color: #183956;
    --form-primary-shadow: 0 14px 22px -14px rgba(5, 118, 108, .6);
    --form-hover-shadow: 0 14px 22px -14px rgba(8, 91, 162, .44);
    max-width: none;
    padding-inline: 0;
    position: relative;
    isolation: isolate;
}

.content-contact .contact-page {
    position: relative;
    overflow: clip;
    min-height: calc(100vh - 220px);
    padding-block: 130px var(--sp-20);
    padding-inline: var(--sp-6);
    background:
        radial-gradient(circle at 15% 12%, rgba(36, 152, 227, 0.13), transparent 35%),
        radial-gradient(circle at 88% 14%, rgba(144, 196, 4, 0.13), transparent 38%),
        linear-gradient(180deg, #f7fcff 0%, #f3faff 48%, #f4fff6 100%);
}

.content-contact :where(.contact-hero, .contact-layout) {
    max-width: var(--cc-shell);
    margin-inline: auto;
}

.content-contact .contact-hero {
    margin-block-end: var(--sp-8);
}

.content-contact .contact-bg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    pointer-events: none;
    animation: ccFloat 9s ease-in-out infinite;
}

.content-contact .contact-bg-orb-1 {
    width: 300px;
    aspect-ratio: 1;
    left: -80px;
    top: 80px;
    background: radial-gradient(circle, rgba(36, 152, 227, 0.26), rgba(36, 152, 227, 0));
}

.content-contact .contact-bg-orb-2 {
    width: 340px;
    aspect-ratio: 1;
    right: -120px;
    top: 220px;
    background: radial-gradient(circle, rgba(144, 196, 4, 0.26), rgba(144, 196, 4, 0));
    animation-delay: 1.2s;
}

.content-contact .contact-kicker {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    color: #1990d9;
    animation: reveal .75s;
}

.content-contact #contact-hero-title {
    margin-block: var(--gap-sm) var(--sp-4);
    text-align: left;
    color: var(--cc-deep);
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: clamp(38px, 6.2vw, 72px);
    line-height: .98;
    letter-spacing: -.6px;
    animation: reveal .95s;
}

.content-contact .contact-lead {
    max-width: 720px;
    margin: 0;
    color: var(--cc-copy);
    font-size: 19px;
    line-height: 1.6;
    animation: reveal 1.15s;
}

.content-contact .contact-layout {
    margin-block-start: 26px;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--cc-space-4);
}

.content-contact .contact-card {
    border-radius: var(--cc-radius-card);
    padding-block: 26px;
    padding-inline: 22px;
}

.content-contact .contact-card :where(h2, h3) {
    margin: 0;
    text-align: left;
    color: #12314c;
}

.content-contact .contact-card h2 {
    text-transform: none;
    letter-spacing: -.2px;
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: clamp(28px, 3vw, 36px);
}

.content-contact .contact-form-intro {
    margin-top: var(--cc-space-1);
    color: var(--cc-muted);
}

.content-contact .contact-form {
    margin-block-start: var(--gap-md);
}

.content-contact .contact-actions {
    margin-top: var(--cc-space-2);
}

.content-contact .contact-submit {
    box-shadow: 0 14px 22px -14px rgba(5, 118, 108, .6);
}

.content-contact .contact-book-call {
    border: 1px solid rgba(36, 152, 227, .34);
}

.content-contact :is(.contact-submit, .contact-book-call):hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 22px -14px rgba(8, 91, 162, .44);
    filter: saturate(1.08);
}

.content-contact .contact-form-note {
    margin: var(--cc-space-2) 0 0;
    color: #385673;
    font-size: 13px;
}

.content-contact .contact-success {
    margin: var(--cc-space-2) 0 0;
    min-height: 18px;
    color: var(--cc-error);
    font-size: 13px;
    font-weight: 700;
}

.content-contact .contact-success.success-ok {
    color: var(--cc-success);
}

.content-contact .contact-add-more {
    margin-top: var(--cc-space-4);
    border-top: 1px solid rgba(34, 71, 97, .12);
    padding-top: var(--cc-space-3);
}

.content-contact .contact-add-more p {
    margin: var(--cc-space-1) 0 var(--cc-space-2);
    color: #385673;
    font-size: 14px;
}

.content-contact .contact-add-more textarea {
    min-height: 110px;
}

.content-contact .contact-submit:disabled {
    opacity: .72;
    cursor: not-allowed;
    transform: none;
    filter: none;
}

.content-contact .contact-side-list {
    list-style: none;
    margin: var(--cc-space-3) 0 0;
    padding: 0;
}

.content-contact .contact-side-list li {
    margin: 0;
    padding-block: 15px;
    border-block-end: 1px solid rgba(34, 71, 97, .12);
}

.content-contact .contact-side-list span {
    display: block;
    margin-block-end: var(--sp-1);
    color: #3a6c94;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.content-contact .contact-side-list :is(strong, a) {
    color: #0f314e;
    font-size: 18px;
    font-weight: 700;
}

.content-contact .contact-side-cta {
    margin-block-start: 22px;
    border-radius: 18px;
    padding: var(--cc-space-3);
    background:
        radial-gradient(circle at 20% 30%, rgba(36, 152, 227, .16), transparent 60%),
        linear-gradient(110deg, rgba(36, 152, 227, .09), rgba(144, 196, 4, .08));
}

.content-contact .contact-side-cta p {
    margin: var(--cc-space-2) 0 var(--cc-space-1);
    color: #355877;
    line-height: 1.6;
}

.content-contact .contact-side-cta .button {
    margin: 0;
}

.content-contact .reveal-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease, transform .7s ease;
    will-change: transform, opacity;
}

.content-contact .reveal-up.reveal-delay {
    transition-delay: .16s;
}

.content-contact .reveal-up.reveal-visible {
    opacity: 1;
    transform: translateY(0);
}













.tableWrap {
  width: 100%;
  overflow-x: auto;
}

.worklogTable {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 14px;
  line-height: 1.4;
}

.worklogTable caption {
  text-align: left;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.worklogTable th,
.worklogTable td {
  border: 1px solid #ddd;
  padding: 0.75rem;
  vertical-align: top;
  text-align: left;
}

.worklogTable thead th {
  background: #f5f5f5;
  font-weight: 600;
}

.worklogTable th:nth-child(1),
.worklogTable td:nth-child(1) {
  width: 120px;
}

.worklogTable th:nth-child(2),
.worklogTable td:nth-child(2) {
  width: 10%;
}

.worklogTable th:nth-child(3),
.worklogTable td:nth-child(3) {
  width: 5%;
}

.worklogTable th:nth-child(4),
.worklogTable td:nth-child(4) {
  width: 50%;
}

.worklogTable th:nth-child(5),
.worklogTable td:nth-child(5) {
  width: 10%;
}

.worklogTable th:nth-child(6),
.worklogTable td:nth-child(6) {
  width: 10%;
}

.worklogTable td:last-child {
  word-break: break-word;
}

/* Mobil */
@media (max-width: 760px) {
  .worklogTable,
  .worklogTable thead,
  .worklogTable tbody,
  .worklogTable th,
  .worklogTable td,
  .worklogTable tr {
    display: block;
  }

  .worklogTable thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .worklogTable tr {
    border: 1px solid #ddd;
    margin-bottom: 1rem;
    background: #fff;
  }

  .worklogTable td {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 0.75rem;
    border: none;
    border-bottom: 1px solid #eee;
    padding: 0.75rem;
  }

  .worklogTable td:last-child {
    border-bottom: none;
  }

  .worklogTable td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #555;
  }
}
















@keyframes ccFloat {
    0% { transform: translateY(0); }
    50% { transform: translateY(14px); }
    100% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .content-login .login-bg-orb {
        animation: none;
    }

    .content-contact .contact-bg-orb {
        animation: none;
    }

    .content-contact .reveal-up {
        transition: none;
        opacity: 1;
        transform: none;
    }
}

@media only screen and (min-width: 1000px) {
    .content-login .login-page {
        padding-block: 150px 92px;
        padding-inline: 34px;
    }

    .content-login .login-layout {
        grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
        gap: 34px;
    }

    .content-login .login-panel {
        padding-block: var(--sp-8) var(--sp-7);
        padding-inline: var(--gap-lg);
    }

    .content-contact .contact-page {
        padding-block: 152px 90px;
        padding-inline: 34px;
    }

    .content-contact .contact-layout {
        grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
        gap: var(--cc-space-5);
    }

    .content-contact .contact-card {
        padding-block: var(--gap-lg) 26px;
        padding-inline: var(--gap-lg);
    }
}