/* ============================================================================
   Tecology brand sign-in (Option C: split screen) — scoped to body.signin-page.
   Left (~30%): white column, form in a bordered white card (brand card recipe).
   Right (~70%): navy panel, dot-field only (no teal glow), brand statement +
   the four service cards, with the site's stagger-rise entrance motion.
   Collapses to a single clean column under 992px.
   Brand v2.0: navy #0E1924 · border #D7DCE0 · text #5B6B7A / #3A4654 ·
   teal #4AD7D1 (kicker on navy) · teal-ink #0C6E6A (kicker on white).
   ==========================================================================*/

@font-face { font-family: 'Graphie'; src: url('fonts/Graphie-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Graphie'; src: url('fonts/Graphie-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Graphie'; src: url('fonts/Graphie-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* ---- page frame ---------------------------------------------------------*/
body.signin-page {
    /* navy panel takes ~70% but never squeezes the form column below 430px */
    --tec-si-panel: min(68vw, calc(100vw - 430px));
    background: #FFFFFF !important;
    background-image: none !important;   /* kill the particle background image */
    font-family: Graphie, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* form column = the space left of the brand panel */
body.signin-page .scrollable-page {
    margin-right: var(--tec-si-panel);
    /* neutralise Rise's initScrollbar (fixed height + custom rail) — the page
       fits, so no inner scrollbar; the window scrolls naturally if ever needed */
    height: auto !important; position: static !important; overflow: visible !important;
}
/* if the custom-scrollbar plugin did wrap the column, flatten its wrappers */
body.signin-page .mCSB_scrollTools { display: none !important; }
body.signin-page .mCustomScrollBox,
body.signin-page .mCSB_container {
    position: static !important; height: auto !important;
    overflow: visible !important; margin: 0 !important; width: 100% !important;
}
body.signin-page .ps__rail-x, body.signin-page .ps__rail-y { display: none !important; }

body.signin-page .form-signin {
    /* core custom-style.css sets margin-left/top 5%/15% !important — beat it */
    width: 400px;
    max-width: 90% !important;
    margin: 0 auto !important;
    /* vertically centre the whole block in the white column (footer = 48px) */
    display: flex; flex-direction: column; justify-content: center;
    min-height: calc(100vh - 48px); padding: 30px 0 60px; box-sizing: border-box;
}

/* ---- form card: white, subtle border, brand radius/shadow ----------------*/
body.signin-page .form-signin .card {
    background: #FFFFFF !important;
    border: 1px solid #D7DCE0 !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 22px rgba(14,25,36,0.07) !important;
}
body.signin-page .form-signin .card-header { display: none !important; }
body.signin-page .form-signin .card-body { padding: 28px 28px 24px !important; background: transparent !important; }

/* ---- injected header: wordmark above the card; kicker+title inside -------*/
.tec-si-logo { width: 148px; height: auto; display: block; margin: 0 0 30px 2px; }
.tec-si-kicker {
    font-size: 12.5px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase;
    color: #0C6E6A; margin-bottom: 10px;
}
.tec-si-title {
    font-size: 27px; font-weight: 600; letter-spacing: -0.025em;
    color: #0E1924; margin: 0 0 6px; line-height: 1.2;
}
.tec-si-subtitle {
    font-size: 14.5px; color: #5B6B7A; line-height: 1.55; margin: 0 0 22px;
}

/* ---- fields --------------------------------------------------------------*/
.tec-si-label {
    display: block; font-size: 13.5px; font-weight: 600; color: #3A4654;
    margin: 0 0 6px;
}
/* label row: field name left, optional link (Forgot password?) right */
.tec-si-label-row {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 6px;
}
.tec-si-label-row .tec-si-label { margin: 0; }
body.signin-page .form-signin a.tec-si-forgot {
    font-size: 13px; color: #5B6B7A; text-decoration: none;
}
body.signin-page .form-signin a.tec-si-forgot:hover { color: #0E1924; text-decoration: underline; }
body.signin-page .form-signin .form-group { margin-bottom: 16px; }
body.signin-page .form-signin .form-control {
    height: 46px; padding: 10px 14px; width: 100%; box-sizing: border-box;
    background: #FFFFFF !important; color: #3A4654 !important;
    border: 1px solid #D7DCE0 !important; border-radius: 8px !important;
    font-size: 15px; box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
body.signin-page .form-signin .form-control:focus {
    border-color: #0E1924 !important;
    box-shadow: 0 0 0 3px rgba(14,25,36,0.08) !important;
}
body.signin-page .form-signin .form-control::placeholder { color: #9AA7B2; }

/* ---- button + links ------------------------------------------------------*/
body.signin-page .form-signin .btn-primary {
    background: #0E1924 !important; border-color: #0E1924 !important; color: #fff !important;
    border-radius: 8px !important; height: 48px; font-weight: 600; font-size: 15px;
    margin-top: 6px; transition: background .15s ease;
}
body.signin-page .form-signin .btn-primary:hover,
body.signin-page .form-signin .btn-primary:focus { background: #1D2C3B !important; border-color: #1D2C3B !important; }

body.signin-page .form-signin a { color: #3A4654; text-decoration: none; font-size: 14px; }
body.signin-page .form-signin a:hover { text-decoration: underline; color: #0E1924; }
body.signin-page .form-signin .mt5 { margin-top: 14px !important; }

body.signin-page .form-signin .alert-danger { border-radius: 8px; font-size: 13.5px; }

/* prospect CTA under the card — link sizes carry .form-signin specificity so
   Rise's own `.form-signin a { 14px }` can't skew them */
.tec-si-cta {
    text-align: center; margin-top: 18px; font-size: 13.5px; color: #5B6B7A;
    animation: tecRise .5s cubic-bezier(0.16, 1, 0.3, 1) both .22s;
}
body.signin-page .form-signin .tec-si-cta a { color: #0E1924; font-weight: 600; text-decoration: none; font-size: 13.5px; }
body.signin-page .form-signin .tec-si-cta a:hover { text-decoration: underline; }

/* legal agreement line (xAI-style, bottom of the form column) */
.tec-si-legal {
    text-align: center; margin-top: 26px; font-size: 12px; line-height: 1.6;
    color: #9AA7B2;
    animation: tecRise .5s cubic-bezier(0.16, 1, 0.3, 1) both .3s;
}
body.signin-page .form-signin .tec-si-legal a { color: #5B6B7A; font-size: 12px; text-decoration: underline; text-underline-offset: 2px; }
body.signin-page .form-signin .tec-si-legal a:hover { color: #0E1924; }

/* ---- right brand panel (injected) ----------------------------------------*/
#tec-signin-brand-panel {
    position: fixed; top: 0; right: 0; bottom: 0; width: var(--tec-si-panel);
    background-color: #0E1924;
    /* static dot grid (same registration as the website hero); replaced by the
       interactive canvas on fine pointers — .dots-live removes this layer */
    background-image: radial-gradient(rgba(255,255,255,0.16) 1px, transparent 1px);
    background-size: 24px 24px;
    display: flex; align-items: center;
    padding: 0 5vw; overflow: hidden;
}
#tec-signin-brand-panel.dots-live { background-image: none; }
.tec-si-panel-inner { width: 100%; max-width: 660px; margin: 0 auto; position: relative; z-index: 1; }
.tec-si-panel-kicker {
    font-size: 12.5px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase;
    color: #4AD7D1; margin-bottom: 14px;
}
.tec-si-panel-title {
    color: #FFFFFF; font-weight: 600; letter-spacing: -0.02em;
    font-size: clamp(26px, 2.7vw, 38px); line-height: 1.25; max-width: 520px; margin: 0 0 14px;
}
.tec-si-panel-sub {
    color: #9AA7B2; font-size: 15.5px; line-height: 1.6; max-width: 460px;
}

/* workspace capability pills (from the Workspace resource page) */
.tec-si-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; max-width: 560px; }
.tec-si-pill {
    display: inline-block; padding: 6px 13px; border-radius: 999px;
    font-size: 12px; font-weight: 600; letter-spacing: 0.01em;
    color: #C9D3DB; background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.13);
    white-space: nowrap;
}

/* ---- service cards (mirrors the website's "What we do") ------------------*/
.tec-si-svc-head {
    font-size: 12.5px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase;
    color: #4AD7D1; margin: 40px 0 14px;
}
.tec-si-svc-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.tec-si-svc {
    display: block; text-decoration: none; cursor: pointer;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 12px; padding: 18px 18px 16px;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
/* hover: soft lift + the card border takes the service's colour, matching the
   icon chip's own border tint (brand hover recipe, on-navy variant) */
.tec-si-svc:hover { transform: translateY(-3px); background: rgba(255,255,255,0.055); text-decoration: none; }
.tec-si-svc-c-dev:hover   { border-color: rgba(133,183,235,0.32); }
.tec-si-svc-c-care:hover  { border-color: rgba(240,153,123,0.32); }
.tec-si-svc-c-cloud:hover { border-color: rgba(250,199,117,0.32); }
.tec-si-svc-c-ai:hover    { border-color: rgba(175,169,236,0.32); }
@media (prefers-reduced-motion: reduce) { .tec-si-svc:hover { transform: none; } }
.tec-si-svc-chip {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 10px; margin-bottom: 12px;
    line-height: 0; box-sizing: border-box; padding: 0;
}
.tec-si-svc-chip svg { display: block; margin: 0; flex: 0 0 auto; }
.tec-si-svc-dev   { color: #85B7EB; background: rgba(133,183,235,0.13); border: 1px solid rgba(133,183,235,0.32); }
.tec-si-svc-care  { color: #F0997B; background: rgba(240,153,123,0.13); border: 1px solid rgba(240,153,123,0.32); }
.tec-si-svc-cloud { color: #FAC775; background: rgba(250,199,117,0.13); border: 1px solid rgba(250,199,117,0.32); }
.tec-si-svc-ai    { color: #AFA9EC; background: rgba(175,169,236,0.13); border: 1px solid rgba(175,169,236,0.32); }
.tec-si-svc-title { color: #FFFFFF; font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 5px; }
.tec-si-svc-desc  { color: #9AA7B2; font-size: 12.5px; line-height: 1.55; }

/* referral CTA — a card matching the service-card recipe, teal (brand) chip */
.tec-si-referral {
    display: flex; align-items: center; gap: 15px;
    margin-top: 14px; padding: 16px 18px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 12px; text-decoration: none; cursor: pointer;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.tec-si-referral:hover {
    transform: translateY(-3px); background: rgba(255,255,255,0.055);
    border-color: rgba(74,215,209,0.32); text-decoration: none;
}
.tec-si-referral-chip {
    display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 40px; height: 40px; border-radius: 10px; line-height: 0;
    color: #4AD7D1; background: rgba(74,215,209,0.13); border: 1px solid rgba(74,215,209,0.32);
}
.tec-si-referral-chip svg { display: block; }
.tec-si-referral-body { display: block; }
.tec-si-referral-title { display: block; color: #FFFFFF; font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 3px; }
.tec-si-referral-text { display: block; color: #9AA7B2; font-size: 12.5px; line-height: 1.55; }
@media (prefers-reduced-motion: reduce) { .tec-si-referral:hover { transform: none; } }

/* ---- entrance motion (site hero: stagger-rise, pure deceleration) --------*/
@keyframes tecRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.tec-si-logo,
.tec-si-form-rise { animation: tecRise .5s cubic-bezier(0.16, 1, 0.3, 1) both; }
.tec-si-form-rise { animation-delay: .08s; }
.tec-si-panel-kicker, .tec-si-panel-title, .tec-si-panel-sub { animation: tecRise .55s cubic-bezier(0.16, 1, 0.3, 1) both .1s; }
/* capability pills ripple in one after another */
.tec-si-pill { animation: tecRise .45s cubic-bezier(0.16, 1, 0.3, 1) both; }
.tec-si-pill:nth-child(1) { animation-delay: .30s; }
.tec-si-pill:nth-child(2) { animation-delay: .36s; }
.tec-si-pill:nth-child(3) { animation-delay: .42s; }
.tec-si-pill:nth-child(4) { animation-delay: .48s; }
.tec-si-pill:nth-child(5) { animation-delay: .54s; }
.tec-si-pill:nth-child(6) { animation-delay: .60s; }
.tec-si-pill:nth-child(7) { animation-delay: .66s; }
.tec-si-pill:nth-child(8) { animation-delay: .72s; }
.tec-si-pill:nth-child(9) { animation-delay: .78s; }
.tec-si-svc-head { animation: tecRise .5s cubic-bezier(0.16, 1, 0.3, 1) both .5s; }
.tec-si-svc:nth-child(1) { animation: tecRise .55s cubic-bezier(0.16, 1, 0.3, 1) both .55s; }
.tec-si-svc:nth-child(2) { animation: tecRise .55s cubic-bezier(0.16, 1, 0.3, 1) both .72s; }
.tec-si-svc:nth-child(3) { animation: tecRise .55s cubic-bezier(0.16, 1, 0.3, 1) both .89s; }
.tec-si-svc:nth-child(4) { animation: tecRise .55s cubic-bezier(0.16, 1, 0.3, 1) both 1.06s; }
.tec-si-referral { animation: tecRise .5s cubic-bezier(0.16, 1, 0.3, 1) both 1.2s; }
@media (prefers-reduced-motion: reduce) {
    .tec-si-logo, .tec-si-form-rise, .tec-si-cta, .tec-si-legal, .tec-si-panel-kicker,
    .tec-si-panel-title, .tec-si-panel-sub, .tec-si-pill, .tec-si-svc-head, .tec-si-svc,
    .tec-si-referral { animation: none !important; }
}

/* ---- footer: slim full-width navy bar, ABOVE the panel so it's never hidden */
body.signin-page .footer {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: #0B141D !important; border: 0 !important;
    padding: 13px 24px; font-size: 12px; color: #9AA7B2;
}
body.signin-page .footer a { color: #9AA7B2; margin-left: 16px; text-decoration: none; }
body.signin-page .footer a:hover { color: #FFFFFF; text-decoration: underline; }
/* keep the panel's centred content clear of the footer bar */
#tec-signin-brand-panel { padding-bottom: 48px; }

/* ---- responsive ----------------------------------------------------------*/
@media (max-width: 991px) {
    #tec-signin-brand-panel { display: none; }
    body.signin-page .scrollable-page { margin-right: 0; }
    body.signin-page .footer { position: static; right: auto; padding: 18px 22px; }
    body.signin-page .form-signin {
        width: 100%; max-width: 480px !important;
        margin: 0 auto !important;
        padding: 7vh 22px 30px; box-sizing: border-box;
        min-height: 0;
    }
}
@media (max-width: 480px) {
    body.signin-page .form-signin { padding-top: 5vh; }
    body.signin-page .form-signin .card-body { padding: 22px 20px 20px !important; }
    .tec-si-logo { width: 132px; margin-bottom: 24px; }
    .tec-si-title { font-size: 24px; }
}
/* short laptop screens: keep the form fully visible; trim the panel extras */
@media (max-height: 700px) {
    body.signin-page .form-signin { padding-top: 4vh; }
    .tec-si-logo { margin-bottom: 20px; }
}
@media (max-height: 640px) {
    .tec-si-pills, .tec-si-referral { display: none; }
}
@media (max-height: 760px) {
    .tec-si-svc-head { margin-top: 26px; }
    .tec-si-svc { padding: 14px 14px 12px; }
}