/*
Theme Name: Pintarnya Career
Theme URI: https://pintarnya.com
Author: PT Pintarnya Solusi Teknologi
Author URI: https://pintarnya.com
Description: Career page theme for Pintarnya
Version: 3.57.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pintarnya-careers
Tags: career, jobs, vacancy, custom-post-type, elementor
*/

/*
 * ─────────────────────────────────────────
 *  CREDITS
 *  Designed & Built by:
 *    Muhamad Fakhri — Product Manager
 *    PT Pintarnya Solusi Teknologi  ·  pintarnya.com
 *
 *  Design System: Pintarnya DS v4.1.0
 *  Built with: WordPress, Plus Jakarta Sans, Elementor
 * ─────────────────────────────────────────
 */

/* Google Fonts are loaded via <link> in header.php — no @import to avoid render-blocking */

/*
 * Plus Jakarta Sans — SELF-HOSTED (variable font, latin subset).
 * The @font-face declarations are injected via PHP (pintarnya_enqueue_assets) with
 * ABSOLUTE URLs, NOT here, so they survive LiteSpeed/CDN CSS-combine relocating the
 * stylesheet (a relative url() would 404 from /wp-content/litespeed/css/). See
 * /assets/fonts/. Only the metrics fallback below (which uses local() Arial, no path)
 * stays in this static file.
 */

/*
 * Font-metrics fallback — eliminates CLS (Cumulative Layout Shift) caused by
 * the Plus Jakarta Sans swap. 'Jakarta Fallback' uses Arial sized & spaced to
 * approximate Plus Jakarta Sans so the layout doesn't reflow when the web font
 * arrives. size-adjust / ascent-override / descent-override are supported in all
 * evergreen browsers (Chrome 92+, Firefox 92+, Safari 17+).
 */
@font-face {
    font-family: 'Jakarta Fallback';
    src: local('Arial'), local('Helvetica Neue'), local('sans-serif');
    size-adjust: 100%;
    ascent-override: 97%;
    descent-override: 23%;
    line-gap-override: 0%;
}

/* ============================================
   Pintarnya Design System — Primitive Tokens
   ============================================ */
:root {
    /* Blue scale */
    --blue-50:  #E6F0FF;
    --blue-100: #DEEBFF;
    --blue-200: #B3D4FF;
    --blue-300: #4C9AFF;
    --blue-400: #2A83FD;
    --blue-500: #0065FF;
    --blue-600: #0052CC;
    --blue-700: #0747A6;
    --blue-800: #003E8A;
    --blue-900: #001833;

    /* Gray scale */
    --gray-50:  #FAFBFC;
    --gray-100: #F4F5F7;
    --gray-200: #DFE1E6;
    --gray-300: #E8EBED;
    --gray-400: #94A0B8;
    --gray-500: #8993A4;
    --gray-600: #545A5F;
    --gray-700: #333638;
    --gray-800: #253858;
    --gray-900: #1D1F20;

    /* Yellow / Alert scale */
    --yellow-300: #FFC400;
    --yellow-400: #FFAB00;
    --yellow-500: #FF991F;
    --yellow-600: #FF8B00;

    /* Green / Success scale */
    --green-400: #36B37E;
    --green-500: #00B050;
    --green-600: #00875A;
    --green-700: #006644;

    /* Red / Danger scale */
    --red-400:  #FF5630;
    --red-500:  #DE350B;
    --red-600:  #BF2600;

    /* ── Semantic aliases ── */
    --navy:          var(--blue-900);
    --navy-mid:      var(--blue-800);
    --navy-light:    var(--blue-600);
    --blue:          var(--blue-500);
    --blue-light:    var(--blue-400);
    --gold:          var(--yellow-400);
    --gold-light:    var(--yellow-300);
    --emerald:       var(--green-500);
    --rose:          var(--red-500);

    --ink:           var(--gray-900);
    --ink-mid:       var(--gray-700);
    --ink-light:     var(--gray-600);
    --ink-muted:     var(--gray-400);
    --border:        var(--gray-200);
    --border-dark:   var(--gray-400);
    --surface:       var(--gray-50);
    --surface-2:     var(--gray-100);
    --white:         #FFFFFF;

    /* Gradients */
    --grad-hero:     linear-gradient(135deg, #001833 0%, #003E8A 40%, #0052CC 100%);
    --grad-brand:    linear-gradient(135deg, #0065FF 0%, #2A83FD 100%);
    --grad-gold:     linear-gradient(135deg, #FFAB00 0%, #FF991F 100%);
    --grad-emerald:  linear-gradient(135deg, #00B050 0%, #00875A 100%);
    --grad-card:     linear-gradient(145deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);

    /* Shadows */
    --shadow-xs:     0 1px 2px rgba(0,0,0,0.05);
    --shadow-sm:     0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md:     0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
    --shadow-lg:     0 10px 15px rgba(0,0,0,0.07), 0 4px 6px rgba(0,0,0,0.05);
    --shadow-xl:     0 20px 25px rgba(0,0,0,0.08), 0 10px 10px rgba(0,0,0,0.04);
    --shadow-glow:   0 0 40px rgba(0,101,255,0.25);

    /* Radii — from DS $radius-* tokens */
    --r-xs:    2px;
    --r-sm:    4px;
    --r-btn:   6px;    /* $radius-md — button, input, chip */
    --r-md:    8px;
    --r-lg:    12px;
    --r-xl:    16px;
    --r-2xl:   24px;
    --r-3xl:   32px;
    --r-pill:  9999px; /* $radius-pill — badge */
    --r-full:  9999px;

    /* Typography — Plus Jakarta Sans */
    --font:  'Plus Jakarta Sans', 'Jakarta Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mono:  'JetBrains Mono', 'Fira Code', monospace;

    /* Type scale */
    --text-h1:     3rem;      /* 48px Bold */
    --text-h2:     2rem;      /* 32px SemiBold */
    --text-h3:     1.5rem;    /* 24px SemiBold */
    --text-h4:     1.25rem;   /* 20px SemiBold */
    --text-body1:  1rem;      /* 16px Regular */
    --text-body2:  0.875rem;  /* 14px Regular */
    --text-label:  0.875rem;  /* 14px SemiBold */
    --text-caption:0.75rem;   /* 12px Medium */

    /* Motion */
    --ease:  cubic-bezier(0.16, 1, 0.3, 1);
    --fast:  0.15s;
    --mid:   0.25s;
    --slow:  0.4s;
}

/* ============================================
   Reset
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font);
    color: var(--ink);
    background: var(--white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* prevent horizontal scroll from hero orbs */
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
button { font-family: var(--font); cursor: pointer; }
ul { list-style: none; }

/* ============================================
   Layout
   ============================================ */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}
.container-sm { max-width: 840px; margin: 0 auto; padding: 0 24px; }

/* ============================================
   Typography — Pintarnya DS (Plus Jakarta Sans)
   ============================================ */

/* — Heading scale — */
h1, .heading-1 {
    font-size: clamp(2rem, 5vw, 3rem);   /* DS: 48px, clamped for responsive */
    font-weight: 700;
    line-height: 1.25;                    /* DS: 60/48 = 1.25 */
    letter-spacing: -0.012em;            /* DS: -0.576px / 48 */
    color: var(--ink);
}
h2, .heading-2 {
    font-size: clamp(1.5rem, 3.5vw, 2.25rem); /* DS: 36px */
    font-weight: 700;
    line-height: 1.33;                         /* DS: 48/36 */
    color: var(--ink);
}
h3, .heading-3 {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem); /* DS: 28px */
    font-weight: 700;
    line-height: 1.29;                          /* DS: 36/28 */
    letter-spacing: -0.006em;                  /* DS: -0.168px / 28 */
    color: var(--ink);
}
h4, .title-1 {
    font-size: 1.25rem;   /* DS: 20px — Title 1, Bold */
    font-weight: 700;
    line-height: 1.6;     /* DS: 32/20 */
    color: var(--ink);
}
h5, .title-2 {
    font-size: 1.125rem;  /* DS: 18px — Title 2, SemiBold */
    font-weight: 600;
    line-height: 1.56;    /* DS: 28/18 */
    color: var(--ink);
}
h6, .subtitle-1 {
    font-size: 1rem;      /* DS: 16px — Subtitle 1, SemiBold */
    font-weight: 600;
    line-height: 1.5;     /* DS: 24/16 */
    color: var(--ink);
}

/* — Body text — */
p, .body-1 {
    font-size: 1rem;      /* DS: 16px — Body 1, Regular */
    font-weight: 400;
    line-height: 1.5;     /* DS: 24/16 */
    color: var(--ink-mid);
}
.body-2 {
    font-size: 0.875rem;  /* DS: 14px — Body 2, Regular */
    font-weight: 400;
    line-height: 1.43;    /* DS: 20/14 */
    color: var(--ink-mid);
}

/* — Subtitle / Label — */
.subtitle-2 {
    font-size: 0.875rem;  /* DS: 14px — Subtitle 2, SemiBold */
    font-weight: 600;
    line-height: 1.43;
    color: var(--ink);
}

/* — Captions — */
.caption-1 {
    font-size: 0.75rem;   /* DS: 12px — Caption 1, SemiBold/16px */
    font-weight: 600;
    line-height: 1.33;
    color: var(--ink-light);
}
.caption-2 {
    font-size: 0.625rem;  /* DS: 10px — Caption 2, SemiBold/12px */
    font-weight: 600;
    line-height: 1.2;
    color: var(--ink-light);
}

/* — Utility — */
.label {
    font-size: 0.75rem;   /* 12px — Caption 1 style */
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--blue-500);
}

.text-gradient {
    background: var(--grad-brand);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gold {
    background: var(--grad-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================
   Buttons — Pintarnya DS v4.1.0
   $subtitle-2: Plus Jakarta Sans 600 14px/22px
   border-radius: $radius-md = 6px (--r-btn)
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;                   /* $space-1 */
    padding: 8px 16px;          /* default size */
    border-radius: var(--r-btn);
    font-family: var(--font);
    font-size: 0.875rem;        /* 14px — $subtitle-2 */
    font-weight: 600;
    line-height: 1.43;          /* 20/14 ≈ 1.43 */
    border: 1.5px solid transparent;
    transition: background var(--fast), border-color var(--fast),
                box-shadow var(--fast), transform var(--fast);
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
}
.btn:disabled,
.btn[aria-disabled="true"] {
    background: #E1E6EF;
    color: var(--ink-muted);
    border-color: transparent;
    pointer-events: none;
    box-shadow: none;
}

/* — Filled / Primary — using --blue-500 (#0065FF) for WCAG AA contrast 4.51:1 with white text — */
.btn-primary {
    background: var(--blue-500);
    color: var(--white);
    border-color: var(--blue-500);
}
.btn-primary:hover {
    background: #014098;           /* $color-primary-hover */
    border-color: #014098;
    box-shadow: 0 4px 12px rgba(0,101,255,0.35);
}
.btn-primary:active { background: var(--blue-700); }

/* — Secondary / Outline — blue-500 text passes AA on white (4.51:1) — */
.btn-outline {
    background: transparent;
    color: var(--blue-500);
    border-color: var(--blue-500);
}
.btn-outline:hover {
    background: var(--blue-50);
    border-color: var(--blue-600);
    color: var(--blue-600);
}
.btn-outline:active { background: var(--blue-100); }

/* — Ghost — */
.btn-ghost {
    background: transparent;
    color: var(--blue-500);
    border-color: transparent;
}
.btn-ghost:hover { background: var(--blue-50); }
.btn-ghost:active { background: var(--blue-100); }

/* — Ghost on dark bg (hero, CTA sections) — */
.btn-ghost-light {
    background: rgba(255,255,255,0.1);
    color: var(--white);
    border: 1.5px solid rgba(255,255,255,0.25);
    backdrop-filter: blur(8px);
}
.btn-ghost-light:hover { background: rgba(255,255,255,0.18); }

/* — Destructive — */
.btn-destructive {
    background: #FF1F1A;           /* $color-danger */
    color: var(--white);
    border-color: #CC0700;         /* $border-danger */
}
.btn-destructive:hover {
    background: #990500;           /* $color-danger-hover */
    border-color: #990500;
}

/* — Gold / Alert (non-DS, kept for Pandai Emas brand) — */
.btn-gold {
    background: var(--yellow-400);
    color: #1a3a8f;  /* navy on gold — WCAG AA (6.3:1); white failed at ~1.8:1. Matches urgent-card CTA. */
    border-color: var(--yellow-400);
}
.btn-gold:hover {
    background: var(--yellow-600);
    border-color: var(--yellow-600);
    box-shadow: 0 4px 12px rgba(255,171,0,0.35);
}

/* — Sizes — */
.btn-sm { padding: 4px 12px;  font-size: 0.75rem; }
.btn-lg { padding: 12px 24px; font-size: 1rem; }

/* ============================================
   Badges — Pintarnya DS v2.6.0
   $caption-2: Plus Jakarta Sans 600 10px/12px
   border-radius: $radius-pill = 9999px (--r-pill)
   ============================================ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    font-family: var(--font);
    font-size: 0.625rem;           /* 10px — $caption-2 */
    font-weight: 600;
    line-height: 1.2;              /* 12px */
    border: 1px solid transparent;
}

/* Status — Info (default blue) — text darkened to #0052CC for WCAG AA (5.9:1 on #E5F0FF) */
.badge-blue,
.badge-info     { background: #E5F0FF; color: #0052CC; border-color: #0052CC; }

/* Status — Success — text darkened to #15803D for AA (5.0:1 on #EBF9EE) */
.badge-emerald,
.badge-success  { background: #EBF9EE; color: #15803D; border-color: #15803D; }

/* Status — Warning — text darkened to #A15C00 for AA (5.5:1 on #FFF5E5) */
.badge-gold,
.badge-warning  { background: #FFF5E5; color: #A15C00; border-color: #A15C00; }

/* Status — Error / Danger — text darkened to #C81E1A for AA (4.8:1 on #FFE6E5) */
.badge-rose,
.badge-error    { background: #FFE6E5; color: #C81E1A; border-color: #C81E1A; }

/* Status — Neutral */
.badge-slate,
.badge-neutral  { background: var(--gray-100); color: var(--gray-800); border-color: var(--gray-400); }

/* Work arrangement (WFO / WFH / Hybrid) — violet, text #6D28D9 for AA (5.3:1 on #EDE9FE) */
.badge-arrange  { background: #EDE9FE; color: #6D28D9; border-color: #6D28D9; }
.badge-arrange svg { width: 12px; height: 12px; }

/* Notification / solid (e.g. unread counts) */
.badge-notify   { background: #FF1F1A; color: var(--white); border-color: transparent; padding: 2px 6px; }

/* Product badge — Pintarnya brand gradient */
.badge-product  {
    background: linear-gradient(90deg, #2A076B, #6E2598);
    color: var(--white);
    border-color: transparent;
}

/* Compatibility aliases (kept for vacancy cards) */
.badge-purple   { background: #E5F0FF; color: var(--blue-400); border-color: var(--blue-400); }

/* ============================================
   Navigation
   ============================================ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-bottom: 1px solid rgba(226,232,240,0.8);
    transition: background var(--mid), box-shadow var(--mid);
}
.site-header.scrolled { box-shadow: var(--shadow-md); }

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    padding: 0 24px;
    max-width: 1200px;
    margin: 0 auto;
    gap: 32px;
}

.site-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.site-logo img { height: 36px; width: auto; } /* generic: custom logos keep natural ratio */
.site-logo .header-logo-img { width: 33px; object-fit: contain; } /* bundled 74×80 logo: fixed width prevents lazy-load CLS */
.site-custom-logo { height: 36px; width: auto; max-width: 220px; object-fit: contain; display: block; } /* customizer header logo — any aspect ratio */
.footer-custom-logo { height: 32px; width: auto; max-width: 200px; object-fit: contain; display: block; } /* customizer footer logo */
.logo-text {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    background: var(--grad-brand);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.logo-sub {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
    display: block;
    margin-top: -2px;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
}
.main-nav a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--r-btn);   /* 6px */
    font-size: 0.875rem;           /* DS Body 2 */
    font-weight: 500;
    color: var(--ink-mid);
    transition: color var(--fast), background var(--fast);
}
.main-nav a:hover, .main-nav a.active { color: var(--blue-500); background: var(--blue-50); }

.header-cta { flex-shrink: 0; }

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    padding: 8px;
    border-radius: var(--r-btn);
    transition: background var(--fast);
}
.mobile-menu-toggle:hover { background: var(--surface-2); }
.mobile-menu-toggle span {
    display: block;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform var(--mid) var(--ease), opacity var(--fast);
}

/* ============================================
   Hero
   ============================================ */
.hero {
    background: var(--grad-hero);
    position: relative;
    overflow: hidden;
    padding: 100px 0 120px;
    min-height: 92vh;     /* fallback for browsers without svh support */
    min-height: 92svh;    /* svh = stable viewport height — no CLS from mobile URL bar show/hide */
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* Prevent auto-margin centering when .container is a flex child */
.hero > .container {
    width: 100%;
}

/* ── Hero scroll hint ── */
.hero-scroll-hint {
    position: absolute;
    bottom: 48px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    color: rgba(255, 255, 255, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    transition: color 0.2s, border-color 0.2s;
    animation: scrollBounce 2s ease-in-out infinite;
}
.hero-scroll-hint:hover {
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.6);
}
@keyframes scrollBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%       { transform: translateX(-50%) translateY(6px); }
}

/* ── Hero: full-bleed background image mode ── */
.hero.has-hero-bg {
    background: var(--hero-bg, var(--grad-hero)) center center / cover no-repeat;
}
/* Dark overlay — left heavy so text stays readable, right opens up to show photo */
.hero.has-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        rgba(0, 10, 40, 0.88) 0%,
        rgba(0, 20, 80, 0.80) 35%,
        rgba(0, 20, 70, 0.60) 60%,
        rgba(0, 10, 40, 0.30) 100%
    );
    z-index: 0;
}
/* Expand content width + hide right-side image box */
.hero.has-hero-bg .hero-inner {
    justify-content: flex-start;
}
.hero.has-hero-bg .hero-content {
    max-width: 640px;
    flex: 0 0 auto;
}
.hero.has-hero-bg .hero-image-wrap {
    display: none;
}
/* Ensure dot grid and orbs sit above overlay */
.hero.has-hero-bg::before { z-index: 1; }
.hero.has-hero-bg .hero-orb { z-index: 1; }
.hero.has-hero-bg .hero-inner { z-index: 2; }

/* Dot grid */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
}

/* Glow orbs */
.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    contain: strict; /* prevent orb overflow from causing layout/paint work */
}
.hero-orb-1 {
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(0,101,255,0.3) 0%, transparent 70%);
    top: -200px; right: -100px;
}
.hero-orb-2 {
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(0,82,204,0.25) 0%, transparent 70%);
    bottom: -100px; left: 10%;
}
.hero-orb-3 {
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(255,171,0,0.15) 0%, transparent 70%);
    top: 20%; right: 30%;
}

/* Two-column hero layout */
.hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 60px;
}

/* ── Left: text content ── */
.hero-content {
    flex: 1 1 520px;
    min-width: 0;
}

.hero h1 {
    color: var(--white);
    font-size: clamp(1.875rem, 3.5vw, 2.875rem);
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin-bottom: 20px;
}
/* Force "Connecting Indonesia to" onto one line so rotating word stays on line 2 */
.hero-h1-line1 { white-space: nowrap; }
@media (max-width: 600px) { .hero-h1-line1 { white-space: normal; } }

.hero-content > p {
    font-size: 1.125rem;
    color: rgba(255,255,255,0.72);
    max-width: 520px;
    margin: 0 0 36px;
    line-height: 1.75;
}

.hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 56px;
}

.hero-stats {
    display: flex;
    gap: 0;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 36px;
}
.hero-stat {
    flex: 1;
    text-align: left;
    padding: 0 24px;
    position: relative;
}
.hero-stat:first-child { padding-left: 0; }
.hero-stat + .hero-stat::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10%;
    height: 80%;
    width: 1px;
    background: rgba(255,255,255,0.1);
}
.hero-stat .num {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    white-space: nowrap;
    background: var(--grad-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
    line-height: 1;
    margin-bottom: 6px;
}
.hero-stat .lbl {
    font-size: 0.8125rem;
    color: rgba(255,255,255,0.55);
    font-weight: 500;
}

/* ── Right: hero image ── */
.hero-image-wrap {
    flex: 0 0 440px;
    position: relative;
}
.hero-photo {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;  /* prevents CLS — browser reserves space before image loads */
    border-radius: var(--r-xl);
    display: block;
    object-fit: cover;
}

/* Placeholder illustration (shown when hero-image.png is missing) */
.hero-image-placeholder {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: var(--r-xl);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hip-blob {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(0,101,255,0.25) 0%, transparent 70%);
}
.hip-card {
    position: absolute;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 14px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 160px;
}
.hip-card-1 { top: 16%; left: 8%; }
.hip-card-2 { top: 44%; right: 6%; }
.hip-card-3 { bottom: 12%; left: 14%; }
.hip-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue-400), var(--blue-500));
    flex-shrink: 0;
}
.hip-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}
.hip-lines { display: flex; flex-direction: column; gap: 6px; }
.hip-lines span {
    display: block;
    height: 8px;
    border-radius: 4px;
    background: rgba(255,255,255,0.2);
}
.hip-lines span:first-child { width: 80px; }
.hip-lines span:last-child  { width: 52px; }

/* Mobile: stack vertically */
@media (max-width: 900px) {
    .hero-inner {
        flex-direction: column;
        gap: 48px;
    }
    .hero-image-wrap {
        flex: 0 0 auto;
        width: 100%;
        max-width: 480px;
        align-self: center;
    }
    .hero-content > p { max-width: 100%; }
    .hero-stat { text-align: center; }
    .hero-stat:first-child { padding-left: 24px; }
}

/* ── Rotating hero word ── */
.hero-rotate-wrap {
    font-style: italic;
    font-family: var(--font);
    color: var(--gold);
    display: inline-block;
    min-width: 5ch; /* prevents CLS when word changes from longer → shorter */
}
.hero-rotate-word {
    display: inline-block;
    will-change: transform, opacity;
    animation: wordReveal 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; /* initial paint */
}
.hero-rotate-word.word-animate {
    animation: wordReveal 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* Composited animation: only transform + opacity (no filter:blur to avoid main-thread paint) */
@keyframes wordReveal {
    from {
        opacity: 0;
        transform: translateY(10px) rotateX(-20deg);
    }
    to {
        opacity: 1;
        transform: translateY(0) rotateX(0deg);
    }
}

/* Search wave */
.hero-wave {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 60px;
    overflow: hidden;
}
.hero-wave svg { display: block; }

/* ============================================
   Search Bar (floated)
   ============================================ */
.search-section {
    padding: 0;
    margin-top: -36px;
    position: relative;
    z-index: 10;
}

.search-card {
    background: var(--white);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-xl), 0 0 0 1px var(--border);
    padding: 28px 32px;
    display: flex;
    gap: 16px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.sf-group {
    flex: 1;
    min-width: 190px;
}
.sf-group label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ink-light);
    margin-bottom: 8px;
}
.sf-group label svg { width: 14px; height: 14px; }

.sf-group input,
.sf-group select {
    width: 100%;
    padding: 10px 14px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--r-btn);    /* 6px — DS $radius-md */
    font-size: 0.875rem;            /* 14px — DS Body 2 */
    font-family: var(--font);
    font-weight: 400;
    line-height: 1.43;
    color: var(--ink);
    transition: border-color var(--fast), box-shadow var(--fast);
    appearance: none;
    -webkit-appearance: none;
}
.sf-group input:focus,
.sf-group select:focus {
    outline: none;
    border-color: var(--blue-400);  /* $color-primary on focus */
    box-shadow: 0 0 0 3px #E5F0FF; /* info badge bg as focus ring */
    background: var(--white);
}
.sf-group input::placeholder { color: var(--ink-muted); font-size: 0.875rem; }

/* ============================================
   Section Scaffolding
   ============================================ */
.section { padding: 96px 0; }
.section-sm { padding: 64px 0; }

.section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 16px;
}
.section-label::before {
    content: '';
    display: block;
    width: 20px;
    height: 2px;
    background: var(--grad-brand);
    border-radius: 2px;
}

.section-head { text-align: center; max-width: 640px; margin: 0 auto 56px; }
.section-head h2 { margin-bottom: 16px; }
.section-head p  { font-size: 1.0625rem; color: var(--ink-light); line-height: 1.75; }

/* ============================================
   Business Lines / Companies
   ============================================ */
.companies-section { background: var(--surface); }

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

.company-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 40px 32px 36px;
    position: relative;
    overflow: hidden;
    transition: transform var(--mid) var(--ease), box-shadow var(--mid) var(--ease), border-color var(--mid);
    cursor: default;
}
.company-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--grad);
    opacity: 0;
    transition: opacity var(--mid);
}
.company-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); border-color: transparent; }
.company-card:hover::before { opacity: 1; }

.company-card[data-grad="brand"]  { --grad: var(--grad-brand); }
.company-card[data-grad="gold"]   { --grad: var(--grad-gold); }
.company-card[data-grad="emerald"]{ --grad: var(--grad-emerald); }

.company-icon {
    width: 56px; height: 56px;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 20px;
    background: var(--icon-bg);
}
.company-card[data-grad="brand"]   .company-icon { background: var(--blue-50); }
.company-card[data-grad="gold"]    .company-icon { background: rgba(255,171,0,0.1); }
.company-card[data-grad="emerald"] .company-icon { background: rgba(0,176,80,0.1); }

.company-card h3 { font-size: 1.25rem; margin-bottom: 8px; }
.company-card p  { font-size: 0.9375rem; color: var(--ink-light); line-height: 1.65; margin-bottom: 24px; }

.company-stats {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}
.company-stat-item { font-size: 0.8125rem; font-weight: 600; color: var(--ink-mid); }
.company-stat-item span { color: var(--ink-muted); font-weight: 400; }

/* ============================================
   Vacancy Listings
   ============================================ */
.vacancies-section {
    background:
        radial-gradient(50% 40% at 92% 2%, rgba(0,101,255,0.05) 0%, transparent 60%),
        radial-gradient(45% 38% at 4% 100%, rgba(255,171,0,0.04) 0%, transparent 58%),
        var(--white);
}

.vacancies-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    flex-wrap: wrap;
    gap: 16px;
}
.vacancies-count { font-size: 0.9375rem; color: var(--ink-light); }
.vacancies-count strong { color: var(--ink); }

.filter-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    background: var(--surface);
    padding: 4px;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
}
.filter-tab {
    padding: 10px 16px;
    min-height: 44px;
    border-radius: var(--r-btn);       /* 6px — DS $radius-md */
    font-size: 0.875rem;               /* DS Subtitle 2 */
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink-light);
    font-family: var(--font);
    transition: all var(--fast);
}
.filter-tab:hover  { color: var(--ink); background: var(--gray-100); }
.filter-tab.active {
    background: var(--white);
    color: var(--blue-400);
    border-color: var(--blue-400);
    box-shadow: var(--shadow-sm);
}

.vacancy-list { display: flex; flex-direction: column; gap: 12px; }

/* — Job Alert subscription card (below the job list) — */
.job-alert-card {
    margin-top: 36px;
    padding: 28px 32px;
    background: var(--grad-brand);
    border-radius: var(--r-xl);
    color: var(--white);
    text-align: center;
}
.job-alert-card h3 { color: var(--white); margin: 0 0 4px; }
.job-alert-card p  { color: rgba(255,255,255,0.75); font-size: 0.9rem; margin: 0 0 18px; }
.job-alert-form { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.job-alert-input {
    padding: 12px 16px;
    border: 1.5px solid rgba(255,255,255,0.3);
    border-radius: var(--r-md);
    background: rgba(255,255,255,0.12);
    color: var(--white);
    font-size: 0.9rem;
    min-width: 220px;
}
.job-alert-input::placeholder { color: rgba(255,255,255,0.6); }
.job-alert-input option { color: var(--ink); }
.job-alert-input:focus { outline: 2px solid var(--gold); border-color: transparent; }
/* Custom white chevron with breathing room from the border (native arrow sat flush) */
select.job-alert-input {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 42px;
}
.job-alert-msg { margin: 16px auto 0; font-size: 0.85rem; background: var(--white); display: table; padding: 7px 16px; border-radius: 999px; }
.job-alert-msg[hidden] { display: none; } /* keep the hidden attribute working despite the display override */
@media ( max-width: 640px ) {
    .job-alert-card { padding: 24px 18px; }
    .job-alert-form { flex-direction: column; }
    .job-alert-input { min-width: 0; width: 100%; }
}

.vacancy-card {
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: var(--r-lg);
    padding: 24px 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all var(--mid) var(--ease);
    position: relative;
    overflow: hidden;
}
.vacancy-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--grad-brand);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform var(--mid) var(--ease);
    border-radius: 0 2px 2px 0;
}
.vacancy-card:hover {
    border-color: var(--blue-300);
    box-shadow: var(--shadow-lg), 0 0 0 4px var(--blue-50);
    transform: translateX(4px);
}
.vacancy-card:hover::before { transform: scaleY(1); }

.vc-logo {
    width: 48px; height: 48px;
    min-width: 48px; /* prevent shrinking — CLS guard */
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    overflow: hidden;
}
.vc-logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }

.vc-body { flex: 1; min-width: 0; }
.vc-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
.vc-title:hover { color: var(--blue-500); }
.vc-title::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
}

.vc-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
}
.vc-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.875rem;
    color: var(--ink-light);
}
.vc-meta-item svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.6; }
/* Salary — high-value info, emphasized (dark + bold) */
.vc-meta-salary { color: var(--ink); font-weight: 700; }
.vc-meta-salary svg { opacity: 0.8; }
/* Apply count — social proof. Green (not link-blue) so it doesn't read as a clickable link. */
.vc-meta-applied { color: #15803d; font-weight: 600; }
.vc-meta-applied svg { opacity: 0.9; }

/* Whole card clickable — stretched link via the title (kept position:static so the
   ::after is positioned against .vacancy-card, covering the entire card). */
.vc-title::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;          /* a click anywhere on the card opens the role */
}
.vc-actions { position: relative; z-index: 2; }   /* keep Apply button clickable above the overlay */

/* Urgent Hire card — gold filled CTA to drive action (vs. outline on normal cards) */
.vacancy-card--priority .vc-actions .btn {
    background: var(--gold);
    border-color: var(--gold);
    color: #1a3a8f;
}
.vacancy-card--priority .vc-actions .btn:hover {
    background: var(--yellow-600, #E08C10);
    border-color: var(--yellow-600, #E08C10);
    color: #1a3a8f;
}
.vacancy-card--priority .vc-actions .btn svg { stroke: #1a3a8f; }

.vc-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.vc-actions { flex-shrink: 0; position: relative; z-index: 1; }

/* ── Job Card Stats (Feature 1) ── */
.vc-stats {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.vc-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--ink-light);
    line-height: 1;
}
.vc-stat svg { opacity: 0.85; flex-shrink: 0; }

/* ── Priority / Urgent Hire Card (Feature 2) ── */
.vacancy-card--priority {
    border-color: var(--gold);
    background: linear-gradient(135deg, #fffbeb 0%, #ffffff 60%);
}
.vacancy-card--priority::before {
    background: var(--gold);
    transform: scaleY(1); /* always visible, not just on hover */
}
.vc-priority-badge {
    position: absolute;
    top: 14px;
    right: 16px;
    background: var(--gold);
    color: #1a3a8f;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 2;
    white-space: nowrap;
    transition: transform 0.25s var(--ease);
}
/* Expanding glow ring — composited (transform + opacity only) → zero paint.
   A 2px gold border ring that scales out from the badge edge and fades. Sits at
   the perimeter so it never covers the centred label. */
.vc-priority-badge::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 2px solid var(--gold);
    pointer-events: none;
    will-change: transform, opacity;
    animation: pintarnya-urgent-ring 2s ease-out infinite;
}
.vc-priority-badge svg {
    stroke: #1a3a8f;
    transform-origin: center;
    will-change: transform;
    animation: pintarnya-urgent-zap 2.4s ease-in-out infinite;
}
.vacancy-card:hover .vc-priority-badge { transform: scale(1.07); }

/* Composited: only transform + opacity animate (GPU, no repaint) */
@keyframes pintarnya-urgent-ring {
    0%   { transform: scale(1);    opacity: 0.7; }
    100% { transform: scale(1.65); opacity: 0; }
}
/* The lightning bolt "zaps" briefly each cycle (still most of the time) */
@keyframes pintarnya-urgent-zap {
    0%, 82%, 100% { transform: scale(1) rotate(0deg); }
    86% { transform: scale(1.3) rotate(-8deg); }
    90% { transform: scale(0.85) rotate(4deg); }
    94% { transform: scale(1.15) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
    .vc-priority-badge svg { animation: none !important; }
    .vc-priority-badge::before { animation: none !important; opacity: 0; }
}

/* ── Recruiter Card (Feature 5) ── */
.vs-recruiter {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 4px 0 8px;
}
.vs-recruiter-avatar {
    width: 48px;
    height: 48px;
    aspect-ratio: 1 / 1;   /* enforces square regardless of source image dimensions */
    border-radius: 50%;
    object-fit: cover;     /* crops to fill — no letterbox, no stretch */
    object-position: center;
    flex-shrink: 0;
    border: 2px solid var(--border);
    display: block;
}
/* Initials placeholder when no photo is uploaded (no Gravatar) */
.vs-recruiter-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--blue-50);
    color: var(--blue-700);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.02em;
    object-fit: unset;
}
.vs-recruiter-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.vs-recruiter-name {
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vs-recruiter-role {
    font-size: 0.8125rem;
    color: var(--ink-light);
    display: block;
    margin-top: 2px;
}
.vs-recruiter-link {
    font-size: 0.8125rem;
    color: var(--blue-500);
    margin-top: 6px;
    display: inline-block;
    font-weight: 500;
}
.vs-recruiter-link:hover { color: var(--blue-600); text-decoration: underline; }

/* ============================================
   Perks / Why Join
   ============================================ */
.perks-section { background: var(--navy); overflow: hidden; position: relative; }
.perks-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 28px 28px;
}

.perks-section .section-head h2 { color: var(--white); }
.perks-section .section-head p  { color: rgba(255,255,255,0.55); }
.perks-section .section-label   { color: var(--gold); }
.perks-section .section-label::before { background: var(--grad-gold); }

.perks-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    position: relative;
    z-index: 1;
}

.perk-card {
    background: var(--grad-card);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--r-xl);
    padding: 32px 24px;
    backdrop-filter: blur(12px);
    transition: transform var(--mid) var(--ease), border-color var(--mid), background var(--mid);
}
.perk-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.07);
}
.perk-icon {
    width: 52px; height: 52px;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--white);   /* SVGs use currentColor */
}

/* Shared icon baseline — keeps inline SVG flowing with text in chips/labels */
.pca-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.gallery-empty-icon,
.no-results-icon,
.testimonials-empty .pca-icon {
    color: var(--ink-light);
    opacity: 0.4;
    display: inline-block;
}
.perk-card h3  { color: var(--white); margin-bottom: 8px; font-size: 1rem; font-weight: 700; line-height: 1.6; letter-spacing: normal; }
.perk-card p   { font-size: 0.9rem; color: rgba(255,255,255,0.5); line-height: 1.65; }

/* ============================================
   Culture / Team
   ============================================ */
.culture-section {
    background:
        radial-gradient(50% 42% at 97% 96%, rgba(0,101,255,0.045) 0%, transparent 60%),
        var(--surface);
}

.culture-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}
.culture-content .section-label { margin-bottom: 12px; }
.culture-content h2 { margin-bottom: 20px; }
.culture-content p  { font-size: 1.0625rem; color: var(--ink-light); line-height: 1.8; margin-bottom: 16px; }

.culture-vision-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--blue-400);
    margin-bottom: 6px;
}
.culture-list { margin: 14px 0 36px; display: flex; flex-direction: column; gap: 14px; }
.culture-list-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 0.9375rem;
    color: var(--ink-mid);
}
.culture-check {
    width: 22px; height: 22px;
    border-radius: var(--r-full);
    background: var(--blue-50);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
    font-size: 0.7rem;
    color: var(--blue-500);
}

.culture-visual {
    position: relative;
}
.culture-img-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 12px;
}
.culture-img-grid > div {
    border-radius: var(--r-lg);
    background: var(--surface-2);
    border: 1px solid var(--border);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    font-size: 3rem;
}
.culture-img-grid > div:first-child {
    grid-column: span 2;
    min-height: 220px;
}

/* ============================================
   Hiring Process
   ============================================ */
.process-section {
    background:
        radial-gradient(48% 40% at 6% 4%, rgba(255,171,0,0.045) 0%, transparent 58%),
        radial-gradient(50% 42% at 96% 100%, rgba(0,101,255,0.045) 0%, transparent 60%),
        var(--white);
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    position: relative;
}
.process-steps::before {
    content: '';
    position: absolute;
    top: 28px;
    left: calc(12.5% + 28px);
    right: calc(12.5% + 28px);
    height: 2px;
    background: linear-gradient(90deg, var(--blue-500) 0%, var(--blue-300) 100%);
    opacity: 0.25;
    z-index: 0;
}

.process-step {
    text-align: center;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}
.step-num {
    width: 56px; height: 56px;
    border-radius: var(--r-full);
    background: var(--grad-brand);
    color: var(--white);
    font-weight: 800;
    font-size: 1.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 4px 12px rgba(0,101,255,0.35);
    position: relative;
}
.step-num::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: var(--r-full);
    border: 2px solid var(--blue-50);
}

.process-step h3  { font-size: 1rem; margin-bottom: 8px; font-weight: 700; line-height: 1.6; letter-spacing: normal; }
.process-step p   { font-size: 0.875rem; color: var(--ink-light); line-height: 1.65; }

/* ============================================
   CTA Banner
   ============================================ */
.cta-section {
    background: var(--navy);
    position: relative;
    overflow: hidden;
}
.cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 20.5V18H0v5h5v5H0v5h20v-5h15v-5H20z' fill='%23ffffff' fill-opacity='0.02'/%3E%3C/svg%3E");
}
.cta-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
}
.cta-orb-1 { width: 500px; height: 500px; background: radial-gradient(circle, rgba(0,101,255,0.25) 0%, transparent 70%); top: -150px; right: -100px; }
.cta-orb-2 { width: 300px; height: 300px; background: radial-gradient(circle, rgba(0,82,204,0.2) 0%, transparent 70%); bottom: -100px; left: 5%; }

.cta-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 680px;
    margin: 0 auto;
    padding: 96px 0;
}
.cta-inner h2  { color: var(--white); margin-bottom: 16px; }
.cta-inner p   { color: rgba(255,255,255,0.6); font-size: 1.125rem; margin-bottom: 40px; }
.cta-actions   { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ============================================
   Footer
   ============================================ */
.site-footer {
    background: var(--ink);
    color: rgba(255,255,255,0.8);
    padding: 72px 0 32px;
}
.footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1.5fr;
    gap: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    margin-bottom: 32px;
}
.footer-brand p {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.7);  /* WCAG AA */
    line-height: 1.75;
    margin-top: 16px;
    margin-bottom: 20px;
    max-width: 360px;  /* wider so the tagline fits in 4 lines instead of 5 */
}
.footer-logo-text {
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: #ffffff;            /* white on the dark footer background */
}

.footer-socials { display: flex; gap: 10px; margin-top: 24px; }
.social-btn {
    width: 44px; height: 44px;
    border-radius: var(--r-btn);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.55);
    transition: all var(--fast);
}
.social-btn svg { width: 18px; height: 18px; fill: currentColor; display: block; }
.social-btn:hover { background: rgba(255,255,255,0.12); color: var(--white); border-color: rgba(255,255,255,0.15); }

.footer-col h2 {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);  /* WCAG AA on dark ink bg */
    margin-bottom: 20px;
    line-height: 1.4;
}
.footer-col li { margin-bottom: 10px; }
.footer-col a {
    font-size: 0.9375rem;
    color: rgba(255,255,255,0.78);  /* WCAG AA on dark ink bg */
    transition: color var(--fast);
}
.footer-col a:hover { color: var(--white); }

/* Footer legal: Equal Opportunity + Recruitment Agencies */
.footer-legal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px 48px;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 32px;
    margin-top: 32px;
}
.footer-legal-col h2 {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);  /* WCAG AA */
    margin-bottom: 10px;
    line-height: 1.4;
}
.footer-legal-col p {
    font-size: 0.8125rem;
    color: rgba(255,255,255,0.68);  /* WCAG AA */
    line-height: 1.65;
    margin: 0;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8125rem;  /* matches Equal Opportunity text size */
    color: rgba(255,255,255,0.68);  /* matches Equal Opportunity text color */
    flex-wrap: wrap;
    gap: 12px;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 24px;
    margin-top: 24px;
}
/* Color MUST be set directly on the <p> — the global `p { color: --ink-mid }` rule
   (a direct element selector) overrides the inherited color from .footer-bottom,
   which is why the copyright looked dark gray. This selector (0,1,1) wins. */
.footer-bottom p { margin: 0; color: rgba(255,255,255,0.68); font-size: 0.8125rem; }  /* same white + size as Equal Opportunity */

/* ============================================
   Single Vacancy
   ============================================ */
.single-hero {
    background: var(--grad-hero);
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}
.single-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 35%, #000 35%, transparent 100%);
            mask-image: radial-gradient(ellipse 80% 80% at 50% 35%, #000 35%, transparent 100%);
    pointer-events: none;
}
/* warm gold accent glow (echoes the gold Apply button) — contained by overflow:hidden */
.single-hero::after {
    content: '';
    position: absolute;
    width: 360px; height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,171,0,0.12) 0%, transparent 70%);
    filter: blur(64px);
    bottom: -150px; right: -30px;
    pointer-events: none;
}
.single-hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}
.single-company-logo {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}
.single-logo-icon {
    width: 56px;
    height: 56px;
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: var(--r-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    flex-shrink: 0;
    overflow: hidden;
}
.single-logo-icon img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.single-company-name {
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    letter-spacing: 0.01em;
}

.single-hero h1 { color: var(--white); font-size: clamp(1.75rem, 3.5vw, 2.5rem); margin: 0 0 20px; }
.single-hero .vc-meta-item { color: rgba(255,255,255,0.65); }
.single-hero .vc-meta-item svg { color: rgba(255,255,255,0.4); }
.single-hero-actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; padding-top: 8px; }

.vacancy-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 40px;
    align-items: start;
    padding: 48px 0;
}

.vacancy-body {
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: var(--r-xl);
    padding: 44px;
}
.vacancy-body h2 {
    font-size: 1.125rem;
    margin: 36px 0 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--surface-2);
    color: var(--ink);
}
.vacancy-body h2:first-child { margin-top: 0; }
.vacancy-body p, .vacancy-body li {
    font-size: 0.9625rem;
    color: var(--ink-mid);
    line-height: 1.85;
    margin-bottom: 10px;
}
.vacancy-body ul { padding-left: 20px; list-style: disc; }
.vacancy-body ul li::marker { color: var(--blue-500); }

.vacancy-sidebar { position: sticky; top: 88px; }

.vs-card {
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: var(--r-xl);
    overflow: hidden;
    margin-bottom: 20px;
}
.vs-card-head {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-light);
}
.vs-card-body { padding: 20px 24px; }

.vs-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 0;
    font-size: 0.9375rem;
    border-bottom: 1px solid var(--surface-2);
    gap: 12px;
}
.vs-detail-row:last-child { border-bottom: none; }
.vs-detail-label { color: var(--ink-light); font-size: 0.875rem; }
.vs-detail-value { color: var(--ink); font-weight: 600; text-align: right; }

.vs-apply-card {
    background: var(--grad-brand);
    border-radius: var(--r-xl);
    padding: 32px 24px;
    text-align: center;
    margin-bottom: 20px;
}
.vs-apply-card h3 { color: var(--white); margin-bottom: 8px; }
.vs-apply-card p  { color: rgba(255,255,255,0.7); font-size: 0.9rem; margin-bottom: 24px; }
.vs-apply-card .btn { width: 100%; justify-content: center; padding: 14px; font-size: 1rem; }

/* ============================================
   Job detail micro-interactions (v3.38)
   ============================================ */
/* Reading progress bar — fixed line that fills as you scroll the job description.
   Composited (transform: scaleX); only updates on user scroll → no idle cost. */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 1001;                 /* just above .site-header (z-index:1000) */
    background: linear-gradient( 90deg, var(--blue-500), var(--gold) );
    transform: scaleX(0);
    transform-origin: left center;
    pointer-events: none;
    will-change: transform;
}

/* Mobile sticky apply bar — slides up when the hero CTA leaves the viewport.
   Composited (transform: translateY); shown on mobile only. */
.vs-sticky-apply {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    display: none;                 /* enabled on mobile via media query below */
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    padding-bottom: calc( 10px + env( safe-area-inset-bottom ) );
    background: var(--white);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 18px rgba(0,0,0,0.10);
    transform: translateY(110%);
    transition: transform var(--mid) var(--ease);
    will-change: transform;
}
.vs-sticky-apply.is-visible { transform: translateY(0); }
.vs-sticky-apply-title {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vs-sticky-apply .btn { flex-shrink: 0; padding: 10px 20px; }
@media ( max-width: 768px ) {
    .vs-sticky-apply { display: flex; }
}
@media ( prefers-reduced-motion: reduce ) {
    .vs-sticky-apply { transition: none; }
}

/* ============================================
   Breadcrumb
   ============================================ */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    margin-bottom: 8px;
}
.breadcrumb a     { color: rgba(255,255,255,0.55); transition: color var(--fast); }
.breadcrumb a:hover { color: var(--white); }
.breadcrumb .sep  { color: rgba(255,255,255,0.3); }
.breadcrumb .current { color: rgba(255,255,255,0.85); }

/* ============================================
   Pagination
   ============================================ */
.pagination {
    display: flex;
    justify-content: center;
    margin-top: 56px;
}
/* Links live inside .nav-links — apply the flex gap HERE so buttons aren't cramped. */
.pagination .nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.pagination a, .pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: var(--r-sm);
    font-size: 0.9rem;
    font-weight: 600;
    border: 1.5px solid var(--border);
    color: var(--ink-mid);
    transition: all var(--fast);
}
.pagination a:hover { background: var(--surface-2); border-color: var(--border-dark); color: var(--ink); }
.pagination .current { background: var(--blue-500); border-color: var(--blue-500); color: var(--white); box-shadow: 0 4px 10px rgba(0,101,255,0.3); }

/* ============================================
   No results
   ============================================ */
.no-results {
    text-align: center;
    padding: 80px 24px;
    color: var(--ink-light);
}
.no-results-icon { font-size: 3rem; margin-bottom: 20px; opacity: 0.4; }
.no-results h3 { margin-bottom: 8px; color: var(--ink); }
.no-results p  { font-size: 0.9375rem; }

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 1024px) {
    .perks-grid { grid-template-columns: repeat(2, 1fr); }
    .companies-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-top { grid-template-columns: 1fr 1fr; }
    .vacancy-layout { grid-template-columns: 1fr; }
    .vacancy-sidebar { position: static; }
    .culture-grid { grid-template-columns: 1fr; }
    .culture-visual { display: none; }
    .process-steps { grid-template-columns: repeat(2, 1fr); gap: 40px; }
    .process-steps::before { display: none; }
    .container { padding: 0 20px; }
}

@media (max-width: 768px) {
    .header-cta { display: none; }
    .main-nav { display: none; position: absolute; top: 64px; left: 0; right: 0; background: var(--white); border-bottom: 1px solid var(--border); flex-direction: column; padding: 16px 24px; gap: 4px; box-shadow: var(--shadow-lg); z-index: 999; }
    .main-nav.open { display: flex; }
    .mobile-menu-toggle { display: flex; }

    .hero { padding: 60px 0 80px; min-height: 92svh; }

    /* Hero stats — 2×2 grid on mobile with proper row spacing + restored
       column divider so the four numbers don't visually collide. */
    .hero-stats {
        flex-wrap: wrap;
        row-gap: 28px;
        padding-top: 32px;
    }
    .hero-stat {
        flex: 0 0 50%;
        padding: 0 12px;
        text-align: center;
    }
    .hero-stat:first-child { padding-left: 12px; }
    /* Hide the default "every-stat-after-first" divider, then restore only
       between col-1 and col-2 of each row (every 2nd item). */
    .hero-stat + .hero-stat::before { display: none; }
    .hero-stat:nth-child(2n)::before {
        content: '';
        position: absolute;
        left: 0;
        top: 10%;
        height: 80%;
        width: 1px;
        background: rgba(255,255,255,0.12);
        display: block;
    }

    .search-card { flex-direction: column; padding: 20px; border-radius: var(--r-lg); }
    .sf-group { min-width: 100%; }

    /* Ensure search inputs/selects are at least 44px tall for tap targets */
    .sf-group input,
    .sf-group select { min-height: 44px; }

    /* Submit button: stacked layout looks awkward right-aligned — go full width */
    #search-submit { align-self: stretch !important; width: 100%; min-height: 48px; }

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

    /* Perks — compact horizontal layout (icon + text side-by-side) on mobile
       so 8 cards don't create a 1200px-tall vertical stack. */
    .perks-grid { grid-template-columns: 1fr; gap: 12px; }
    .perk-card {
        display: grid;
        grid-template-columns: 44px 1fr;
        column-gap: 14px;
        row-gap: 4px;
        align-items: start;
        padding: 16px 18px;
    }
    .perk-icon {
        width: 44px;
        height: 44px;
        font-size: 1.25rem;
        margin: 0;
        grid-row: 1 / span 2;
        grid-column: 1;
    }
    .perk-card h3 {
        grid-column: 2;
        grid-row: 1;
        margin: 4px 0 0;
        font-size: 0.9375rem;
    }
    .perk-card p {
        grid-column: 2;
        grid-row: 2;
        margin: 0;
        font-size: 0.85rem;
        line-height: 1.5;
    }

    /* Process — vertical timeline on mobile (line connects step circles on the left) */
    .process-steps {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .process-steps::before {
        display: block;
        top: 28px;
        bottom: 28px;
        left: 27px;          /* center of 56px step-num (28px) minus half of 2px line */
        right: auto;
        width: 2px;
        height: auto;
        background: linear-gradient(180deg, var(--blue-500) 0%, var(--blue-300) 100%);
        opacity: 0.35;
    }
    /* Explicit grid placement: step-num spans both rows in col 1; h4 + p stack in col 2.
       Without this, p falls back to col 1 (56px wide) and breaks at every word. */
    .process-step {
        display: grid;
        grid-template-columns: 56px 1fr;
        column-gap: 16px;
        row-gap: 6px;
        text-align: left;
        padding: 0;
        align-items: start;
    }
    .step-num {
        grid-column: 1;
        grid-row: 1 / span 2;
        margin: 0;
    }
    .step-num::after { display: none; }  /* drop the outer ring on mobile — keeps the line clean */
    .process-step h3 { grid-column: 2; grid-row: 1; margin: 14px 0 0; }
    .process-step p  { grid-column: 2; grid-row: 2; margin: 0; }

    .footer-top { grid-template-columns: 1fr; gap: 32px; }
    .footer-bottom { flex-direction: column; text-align: center; }

    /* Mobile job card — clean stacked layout (#3, #4):
       [Urgent Hire badge] / [logo + body] / [full-width Apply button] */
    .vacancy-card {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 12px 16px;
        padding: 18px;
    }
    .vc-title { white-space: normal; }
    /* Priority badge: take it OUT of the absolute corner so it never overlaps the title */
    .vacancy-card--priority { padding-top: 18px; }
    .vc-priority-badge {
        position: static;
        order: -1;
        flex-basis: 100%;
        width: -moz-max-content;
        width: max-content;
        margin: 0;
    }
    .vc-logo { width: 44px; height: 44px; min-width: 44px; }
    .vc-body { flex: 1; min-width: 0; }    /* logo + body share one row */
    .vc-stats { margin-top: 6px; }
    .vc-actions { flex-basis: 100%; width: 100%; }
    .vc-actions .btn { width: 100%; justify-content: center; min-height: 46px; }

    .vacancies-toolbar { flex-direction: column; align-items: flex-start; }
    .filter-tabs { width: 100%; overflow-x: auto; border-radius: var(--r-sm); -webkit-overflow-scrolling: touch; }

    .single-hero-actions { align-items: flex-start; width: 100%; }
    .single-hero-actions .btn { width: 100%; justify-content: center; }
    .vacancy-body { padding: 20px; }
    .vacancy-layout { padding: 32px 0; }

    .section { padding: 56px 0; }
    .section-sm { padding: 40px 0; }

    .container { padding: 0 16px; }
}

@media (max-width: 480px) {
    .hero h1 { font-size: 1.875rem; }
    .hero-actions { flex-direction: column; align-items: stretch; }
    .hero-actions .btn { width: 100%; justify-content: center; }
    .cta-actions { flex-direction: column; align-items: stretch; }
    .cta-actions .btn { width: 100%; justify-content: center; }
    .hero-stat { flex: 0 0 50%; }
    .hero-stat .num { font-size: 1.625rem; }
    .section { padding: 48px 0; }
    .company-card { padding: 28px 20px 24px; }
    .vacancy-body { padding: 16px; }
    .vacancy-body h2 { font-size: 1rem; }
    .vs-apply-card { padding: 24px 16px; }
    .flip-card { aspect-ratio: 3 / 4; }
}

@media (max-width: 360px) {
    .hero h1 { font-size: 1.625rem; }
    .hero-stat { flex: 0 0 100%; }
    .hero-stat + .hero-stat { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 12px; margin-top: 4px; }
    .container { padding: 0 12px; }
    .header-inner { padding: 0 16px; }
    .search-card { padding: 16px; }
    .vacancy-card { padding: 16px; }
    .vacancy-body { padding: 14px; }
}

/* ============================================
   Company Profile Video
   ============================================ */
.video-section {
    background: var(--ink);
    position: relative;
    overflow: hidden;
    padding: 96px 0;
}
.video-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 40%, #000 35%, transparent 100%);
            mask-image: radial-gradient(ellipse 75% 75% at 50% 40%, #000 35%, transparent 100%);
    pointer-events: none;
}
/* warm gold accent glow — contrasts the cold blue orbs (contained by overflow:hidden) */
.video-section::after {
    content: '';
    position: absolute;
    width: 420px; height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,171,0,0.10) 0%, transparent 70%);
    filter: blur(70px);
    bottom: -130px; right: 16%;
    pointer-events: none;
}
.video-orb-1 {
    position: absolute;
    width: 500px; height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,101,255,0.18) 0%, transparent 70%);
    filter: blur(60px);
    top: -150px; right: -80px;
    pointer-events: none;
}
.video-orb-2 {
    position: absolute;
    width: 350px; height: 350px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,82,204,0.15) 0%, transparent 70%);
    filter: blur(60px);
    bottom: -100px; left: 5%;
    pointer-events: none;
}

.video-inner {
    position: relative;
    z-index: 1;
}
.video-inner .section-head {
    margin-bottom: 48px;
}
.video-inner .section-head h2 { color: var(--white); }
.video-inner .section-head p  { color: rgba(255,255,255,0.55); }
.video-inner .section-label   { color: var(--gold); }
.video-inner .section-label::before { background: var(--grad-gold); }

.video-wrapper {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    border-radius: var(--r-2xl);
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.07);
    /* Branded gradient backdrop — shows in the paused state (no poster image, keeps LCP light) */
    background: var(--grad-hero);
    aspect-ratio: 16 / 9;
}
.video-wrapper iframe,
.video-wrapper video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}
/* Native video — transparent so the wrapper's gradient shows before play; object-fit for clean framing.
   The native <video controls> center play button (shown when paused, auto-hidden while playing) is
   the "click to play" cue — no poster image needed, so LCP stays light. */
.video-wrapper video.video-direct {
    object-fit: contain;
    background: transparent;
}

/* YouTube lazy facade — thumbnail shown until user clicks to load iframe */
.yt-facade {
    position: absolute;
    inset: 0;
    background: #000 center / cover no-repeat;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.yt-facade::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    transition: background var(--fast);
}
.yt-facade:hover::after,
.yt-facade:focus-visible::after {
    background: rgba(0, 0, 0, 0.04);
}
.yt-facade:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 4px;
}
.yt-facade-play {
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.55));
    transition: transform var(--fast) var(--ease), filter var(--fast);
    pointer-events: none;
}
.yt-facade:hover .yt-facade-play,
.yt-facade:focus-visible .yt-facade-play {
    transform: scale(1.12);
    filter: drop-shadow(0 8px 32px rgba(0, 0, 0, 0.7));
}

/* Video placeholder (before URL is set) */
.video-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: var(--navy-mid);
    color: rgba(255,255,255,0.4);
    font-size: 0.9375rem;
}
.video-placeholder-icon {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.75rem;
}

/* ============================================
   Culture Gallery
   ============================================ */
.gallery-section {
    background:
        radial-gradient(48% 40% at 94% 4%, rgba(255,171,0,0.045) 0%, transparent 58%),
        var(--surface);
}

.gallery-tabs {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 40px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 4px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
.gallery-tab {
    padding: 10px 18px;
    min-height: 44px;
    border-radius: var(--r-btn);       /* 6px — DS $radius-md */
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink-light);
    font-family: var(--font);
    transition: all var(--fast);
    display: flex;
    align-items: center;
    gap: 6px;
}
.gallery-tab:hover  { color: var(--ink); background: var(--gray-100); }
.gallery-tab.active {
    background: var(--white);
    color: var(--blue-600);  /* #0052CC — 5.91:1 on white, WCAG AA pass */
    border-color: var(--blue-500);
    box-shadow: var(--shadow-sm);
}
.gallery-tab .tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--surface-2);
    border-radius: var(--r-full);
    font-size: 0.75rem;
    font-weight: 700;
    color: #475569;  /* #475569 — 7.5:1 on gray-50, replaces ink-light for AA contrast */
}
.gallery-tab.active .tab-count {
    background: var(--blue-50);
    color: var(--blue-700);  /* #0747A6 — 6.5:1 on blue-50, AA for small text */
}

.gallery-grid {
    columns: 4;
    column-gap: 14px;
}
.gallery-item {
    break-inside: avoid;
    margin-bottom: 14px;
    border-radius: var(--r-md);
    overflow: hidden;
    position: relative;
    cursor: pointer;
    display: block;
}
.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform var(--slow) var(--ease);
}
.gallery-item:hover img { transform: scale(1.04); }

.gallery-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,24,51,0.85) 0%, transparent 60%);
    opacity: 0;
    transition: opacity var(--mid);
    display: flex;
    align-items: flex-end;
    padding: 16px;
}
.gallery-item:hover .gallery-overlay { opacity: 1; }
.gallery-caption {
    color: var(--white);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
}
.gallery-cat-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--r-full);
    font-size: 0.75rem;
    font-weight: 700;
    background: rgba(255,255,255,0.15);
    color: var(--white);
    border: 1px solid rgba(255,255,255,0.2);
    margin-bottom: 6px;
    backdrop-filter: blur(4px);
}

/* Empty gallery state */
.gallery-empty {
    text-align: center;
    padding: 80px 24px;
    color: var(--ink-light);
    grid-column: 1 / -1;
}
.gallery-empty-icon { font-size: 3rem; margin-bottom: 16px; opacity: 0.4; }

/* Gallery overflow — JS manages display, this is a safety fallback */
.gallery-item--overflow { display: none; }

/* Show-more button row */
.gallery-more-wrap {
    text-align: center;
    margin-top: 32px;
}

/* Lightbox */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--mid);
    backdrop-filter: blur(8px);
    touch-action: manipulation;
}
.lightbox-overlay.open {
    opacity: 1;
    pointer-events: all;
}
.lightbox-content {
    max-width: 1000px;
    width: 100%;
    position: relative;
}
.lightbox-content img {
    width: 100%;
    border-radius: var(--r-lg);
    box-shadow: 0 24px 80px rgba(0,0,0,0.6);
    display: block;
}
.lightbox-caption {
    text-align: center;
    color: rgba(255,255,255,0.75);
    font-size: 0.9375rem;
    margin-top: 16px;
}
.lightbox-close {
    position: absolute;
    top: -48px;
    right: 0;
    width: 40px; height: 40px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--r-full);
    color: white;
    font-size: 1.25rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--fast);
    line-height: 1;
}
.lightbox-close:hover { background: rgba(255,255,255,0.2); }
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px; height: 44px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--r-full);
    color: white;
    font-size: 1.25rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--fast);
    line-height: 1;
}
.lightbox-nav:hover { background: rgba(255,255,255,0.2); }
.lightbox-prev { left: -60px; }
.lightbox-next { right: -60px; }

/* Loading state — shown over image while next/prev photo loads */
.lightbox-spinner {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.45);
    border-radius: var(--r-lg);
    backdrop-filter: blur(4px);
    z-index: 2;
    pointer-events: none;
}
.lightbox-spinner::after {
    content: '';
    width: 44px;
    height: 44px;
    border: 3px solid rgba(255,255,255,0.2);
    border-top-color: rgba(255,255,255,0.92);
    border-radius: 50%;
    animation: pca-lb-spin 0.8s linear infinite;
}
.lightbox-overlay.is-loading .lightbox-spinner { display: flex; }
.lightbox-overlay.is-loading .lightbox-content img { opacity: 0.55; transition: opacity var(--fast); }
@keyframes pca-lb-spin {
    to { transform: rotate(360deg); }
}

/* ============================================
   Testimonials
   ============================================ */
.testimonials-section {
    background:
        radial-gradient(46% 40% at 3% 6%, rgba(0,101,255,0.045) 0%, transparent 58%),
        var(--white);
}

/* Slider wrapper */
.testimonials-slider-wrap { position: relative; }

/* Clip container — hides the overflowing cards */
.testimonials-track-clip {
    overflow: hidden;
    width: 100%;
}

/* Flex track — JS sets transform to slide */
.testimonials-track {
    display: flex;
    gap: 24px;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    /* Cards sized by JS via --card-w custom property */
}

/* Each card fills the slot JS calculated */
.testimonials-track .flip-card {
    flex: 0 0 var(--card-w, calc(33.333% - 16px));
    min-width: 0;
}

/* Legacy alias for grid (keeps any old code working) */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Navigation — overlay buttons on first / last card */
.testi-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.92);
    color: var(--blue-900);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s, opacity 0.2s, transform 0.2s;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
#testi-prev { left: 12px; }
#testi-next { right: 12px; }
.testi-nav-btn:hover {
    background: var(--blue-500);
    color: var(--white);
    transform: translateY(-50%) scale(1.08);
}
.testi-nav-btn:disabled {
    opacity: 0;
    pointer-events: none;
}

/* Drag cursor on track */
.testimonials-track          { cursor: grab; }
.testimonials-track.dragging { cursor: grabbing; user-select: none; }

/* ── Flip card ── */
.flip-card {
    perspective: 1000px;
    aspect-ratio: 3 / 4;
    position: relative;       /* explicit containing block for absolute inner */
    align-self: start;        /* prevent grid stretch from overriding aspect-ratio */
}

.flip-card-inner {
    position: absolute;       /* fill parent regardless of CSS Grid height resolution */
    inset: 0;
    transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    will-change: transform;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: var(--r-xl);
    overflow: hidden;
}

/* Front */
.flip-card-front {
    background: var(--surface-2);
}

.flip-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.flip-photo-placeholder {
    width: 100%;
    height: 100%;
    background: var(--grad-brand);
    display: flex;
    align-items: center;
    justify-content: center;
}
.flip-photo-placeholder span {
    font-size: 5rem;
    font-weight: 700;
    color: rgba(255,255,255,0.5);
    line-height: 1;
}

.flip-front-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 20px 16px;
    background: linear-gradient(transparent, rgba(0,0,0,0.72));
}
.flip-front-name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2px;
}
.flip-front-role {
    font-size: 0.8125rem;
    color: rgba(255,255,255,0.75);
}

/* Back */
.flip-card-back {
    background: var(--blue-900);
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 28px 28px 24px;
}

.flip-quote-icon {
    font-size: 3rem;
    line-height: 0.8;
    color: var(--blue-400);
    font-family: var(--font);
    display: block;
    margin-bottom: 10px;
}

.flip-quote-text {
    font-size: 0.9375rem;
    color: rgba(255,255,255,0.88);
    line-height: 1.75;
    font-style: italic;
    flex: 1;
}

.flip-author {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.12);
    margin-top: 16px;
}
.flip-back-name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2px;
}
.flip-back-role {
    font-size: 0.8125rem;
    color: rgba(255,255,255,0.6);
}

/* Empty state */
.testimonials-empty {
    text-align: center;
    padding: 80px 24px;
    color: var(--ink-light);
    grid-column: 1 / -1;
}

/* ============================================
   Apply Modal
   ============================================ */
.apm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 10, 40, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 16px 40px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, visibility 0.25s;
}
.apm-overlay.is-open {
    opacity: 1;
    visibility: visible;
}
.apm-dialog {
    background: var(--white);
    border-radius: var(--r-2xl);
    width: 100%;
    max-width: 760px;
    box-shadow: 0 24px 64px rgba(0, 10, 40, 0.22);
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin: auto;
}
.apm-overlay.is-open .apm-dialog {
    transform: translateY(0);
}

/* Header */
.apm-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 28px 32px 20px;
    border-bottom: 1px solid var(--border);
}
.apm-header .apm-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--blue-500);
    margin-bottom: 4px;
}
.apm-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
}
.apm-close {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: none;
    background: var(--surface-2);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-light);
    transition: background 0.2s, color 0.2s;
    margin-top: 2px;
}
.apm-close:hover { background: var(--blue-500); color: #fff; }

/* "Close" button inside success state — override the circular icon styles */
.apm-success .apm-close {
    width: auto;
    height: auto;
    border-radius: var(--r-btn);
    border: 1.5px solid var(--blue-400);
    background: transparent;
    color: var(--blue-400);
    padding: 8px 28px;
    font-family: var(--font);
    font-size: 0.875rem;
    font-weight: 600;
    margin: 16px auto 0;
    display: inline-flex;
}
.apm-success .apm-close:hover {
    background: var(--blue-50);
    color: var(--blue-600);
    border-color: var(--blue-600);
}

/* Success */
.apm-success {
    text-align: center;
    padding: 60px 40px;
}
.apm-success-icon { font-size: 3rem; margin-bottom: 16px; color: var(--gold, #C9A84C); }
.apm-success h3 { font-size: 1.4rem; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.apm-success p  { color: var(--ink-light); font-size: 0.9375rem; }

/* Form body */
.apm-body { padding: 28px 32px; display: flex; flex-direction: column; gap: 20px; }
.apm-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.apm-standard-grid { align-items: start; }
.apm-grid-2 > .apm-full { grid-column: 1 / -1; }
.apm-group { display: flex; flex-direction: column; gap: 6px; }
/* Section divider between Standard / Custom Fields / Screening Questions */
.apm-section-divider {
    margin-top: 12px;
    padding-top: 24px;
    border-top: 1px solid var(--border, #e5e7eb);
}
.apm-section-title {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink, #1d2327);
    letter-spacing: -0.01em;
}
.apm-section-sub {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--ink-light, #646970);
}
/* Screening questions container — match .apm-body padding so its section divider lines up */
.apm-cq-wrap {
    padding: 0 32px 28px;
}
.apm-cq-wrap #apply-cq-fields {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
@media (max-width: 600px) {
    .apm-cq-wrap { padding: 0 20px 20px; }
    .apm-cq-wrap #apply-cq-fields { gap: 16px; }
}
.apm-label-field { font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.apm-req     { color: #e53e3e; }
.apm-optional{ font-weight: 400; color: var(--ink-light); font-size: 0.8125rem; }
.apm-hint    { font-size: 0.75rem; color: var(--ink-light); }
.apm-error   { font-size: 0.75rem; color: #e53e3e; min-height: 16px; }
.apm-error-general { font-size: 0.875rem; color: #e53e3e; background: #fff5f5; border: 1px solid #fed7d7; border-radius: 8px; padding: 10px 14px; }

.apm-input {
    width: 100%;
    padding: 10px 14px;
    font-size: 0.9375rem;
    font-family: inherit;
    border: 1.5px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--white);
    color: var(--ink);
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}
.apm-input:focus {
    outline: none;
    border-color: var(--blue-500);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.apm-input.is-error { border-color: #e53e3e; }
.apm-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23667eea' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; cursor: pointer; }

/* Phone input */
.apm-phone-wrap { display: flex; align-items: stretch; }
.apm-phone-prefix { display: flex; align-items: center; padding: 0 12px; background: var(--surface-2); border: 1.5px solid var(--border); border-right: none; border-radius: var(--r-lg) 0 0 var(--r-lg); font-size: 0.875rem; font-weight: 600; color: var(--ink); white-space: nowrap; gap: 4px; }
.apm-phone-input { border-radius: 0 var(--r-lg) var(--r-lg) 0 !important; }

/* Prefix wrap (LinkedIn, salary) */
.apm-prefix-wrap { display: flex; align-items: stretch; }
.apm-prefix { display: flex; align-items: center; padding: 0 12px; background: var(--surface-2); border: 1.5px solid var(--border); border-right: none; border-radius: var(--r-lg) 0 0 var(--r-lg); font-size: 0.8125rem; font-weight: 600; color: var(--ink-light); white-space: nowrap; }
.apm-prefix-input { border-radius: 0 var(--r-lg) var(--r-lg) 0 !important; }

/* File upload */
.apm-file-wrap { position: relative; }
.apm-file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.apm-file-label { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 1.5px dashed var(--border-dark); border-radius: var(--r-lg); background: var(--blue-50); color: var(--ink-mid); font-size: 0.875rem; cursor: pointer; transition: border-color 0.2s, background 0.2s, color 0.2s; }
.apm-file-wrap:hover .apm-file-label,
.apm-file-wrap.has-file .apm-file-label { border-color: var(--blue-500); background: #eff6ff; color: var(--blue-700); }

/* Benefits checkboxes */
.apm-benefits-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.apm-checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--ink); cursor: pointer; padding: 10px 14px; border: 1.5px solid var(--border); border-radius: var(--r-lg); transition: border-color 0.15s, background 0.15s; user-select: none; }
.apm-checkbox-label:hover { border-color: var(--blue-400); background: #eff6ff; }
.apm-checkbox-label input[type="checkbox"] { accent-color: var(--blue-500); width: 16px; height: 16px; flex-shrink: 0; }
.apm-checkbox-label:has(input:checked) { border-color: var(--blue-500); background: #eff6ff; }

/* Footer */
.apm-footer { padding: 20px 32px 28px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px; }
.apm-footer-note { font-size: 0.8125rem; color: var(--ink-light); text-align: center; margin: 0; }

/* Submit spinner */
@keyframes apm-spin { to { transform: rotate(360deg); } }
.apm-spinner { animation: apm-spin 0.8s linear infinite; }

/* Mobile */
@media (max-width: 640px) {
    .apm-overlay { padding: 0; align-items: flex-end; }
    .apm-dialog { border-radius: var(--r-2xl) var(--r-2xl) 0 0; max-height: 92vh; overflow-y: auto; }
    .apm-header { padding: 20px 20px 16px; }
    .apm-body { padding: 20px 20px; gap: 16px; }
    .apm-grid-2 { grid-template-columns: 1fr; }
    .apm-footer { padding: 16px 20px 24px; }
    .apm-benefits-grid { grid-template-columns: 1fr; }
}

/* ============================================
   Responsive — new sections
   ============================================ */
@media (max-width: 1024px) {
    .gallery-grid { columns: 3; }
    .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
    .lightbox-prev { left: -44px; }
    .lightbox-next { right: -44px; }
}

@media (max-width: 768px) {
    .gallery-grid { columns: 2; }
    .testimonials-grid { grid-template-columns: 1fr; }
    .gallery-tabs { width: 100%; overflow-x: auto; }
    .video-wrapper { border-radius: var(--r-lg); }

    /* Lightbox nav — overlay buttons on top of image edges (was hidden) */
    .lightbox-prev, .lightbox-next {
        display: flex;
        background: rgba(0,0,0,0.55);
        border: 1px solid rgba(255,255,255,0.25);
        width: 40px;
        height: 40px;
    }
    .lightbox-prev { left: 12px; }
    .lightbox-next { right: 12px; }
}

@media (max-width: 480px) {
    /* Keep 2 columns even on smallest viewports — 1 column makes the scroll
       absurdly long when 6+ photos stack vertically */
    .gallery-grid { columns: 2; column-gap: 10px; }
    .gallery-item { margin-bottom: 10px; }
    /* Initial visible-item cap on mobile is enforced by JS (applyGalleryVisibility)
       so it respects the active category filter — see main.js. */
}

/* ============================================
   Scroll-triggered Animations
   ============================================ */
[data-animate] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.6s ease, transform 0.6s var(--ease);
    /* will-change omitted: set via JS only while transition is active */
}
[data-animate="fade"] { transform: none; }
[data-animate].in-view { opacity: 1; transform: none; }

[data-delay="1"] { transition-delay: 0.1s; }
[data-delay="2"] { transition-delay: 0.2s; }
[data-delay="3"] { transition-delay: 0.3s; }
[data-delay="4"] { transition-delay: 0.4s; }
[data-delay="5"] { transition-delay: 0.5s; }
[data-delay="6"] { transition-delay: 0.6s; }
[data-delay="7"] { transition-delay: 0.7s; }
[data-delay="8"] { transition-delay: 0.8s; }

/* ============================================
   Hiring Process — Animated Line + Steps
   ============================================ */
.process-steps::before {
    transform: scaleX(0);
    transform-origin: left center;
    opacity: 1;
    transition: transform 1.5s var(--ease);
}
.process-steps.animated::before { transform: scaleX(1); }

.step-num {
    opacity: 0;
    transform: scale(0.5) translateY(6px);
    transition: opacity 0.4s ease, transform 0.5s var(--ease), box-shadow var(--fast);
}
.process-steps.animated .process-step:nth-child(1) .step-num { opacity: 1; transform: none; transition-delay: 0.05s; }
.process-steps.animated .process-step:nth-child(2) .step-num { opacity: 1; transform: none; transition-delay: 0.4s; }
.process-steps.animated .process-step:nth-child(3) .step-num { opacity: 1; transform: none; transition-delay: 0.75s; }
.process-steps.animated .process-step:nth-child(4) .step-num { opacity: 1; transform: none; transition-delay: 1.1s; }

.process-step h3, .process-step p {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.process-steps.animated .process-step:nth-child(1) h3,
.process-steps.animated .process-step:nth-child(1) p { opacity: 1; transform: none; transition-delay: 0.2s; }
.process-steps.animated .process-step:nth-child(2) h3,
.process-steps.animated .process-step:nth-child(2) p { opacity: 1; transform: none; transition-delay: 0.55s; }
.process-steps.animated .process-step:nth-child(3) h3,
.process-steps.animated .process-step:nth-child(3) p { opacity: 1; transform: none; transition-delay: 0.9s; }
.process-steps.animated .process-step:nth-child(4) h3,
.process-steps.animated .process-step:nth-child(4) p { opacity: 1; transform: none; transition-delay: 1.25s; }

/* ============================================
   Skeleton Loading — Vacancy Cards
   ============================================ */
@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skel {
    background: linear-gradient(90deg,
        var(--gray-100) 25%,
        var(--gray-200) 50%,
        var(--gray-100) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite linear;
    border-radius: 4px;
    flex-shrink: 0;
}
.skeleton-card {
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: var(--r-lg);
    padding: 24px 28px;
    display: flex;
    align-items: center;
    gap: 20px;
}
.skel-circle  { width: 48px; height: 48px; border-radius: 50%; }
.skel-body    { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.skel-title   { height: 16px; width: 55%; }
.skel-meta    { height: 12px; width: 75%; }
.skel-tags    { display: flex; gap: 8px; }
.skel-badge   { height: 20px; width: 62px; border-radius: 99px; }
.skel-btn     { height: 34px; width: 90px; border-radius: var(--r-btn); }

/* ============================================
   Culture Visual — Photo Reference Grid
   ============================================ */
.culture-ref-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.culture-ref-photo {
    border-radius: var(--r-lg);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 18px 20px;
    min-height: 170px;
}
.culture-ref-photo:first-child {
    grid-column: span 2;
    min-height: 210px;
}
.culture-ref-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.culture-ref-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,24,51,0.75) 0%, rgba(0,24,51,0.1) 60%);
}
/* Stronger overlay when displaying a real photo (bright images need more contrast) */
.culture-ref-photo--real::after {
    background: linear-gradient(to top, rgba(0,10,30,0.85) 0%, rgba(0,10,30,0.25) 55%, transparent 100%);
}
.culture-ref-info {
    position: relative;
    z-index: 1;
}
.culture-ref-tag {
    display: inline-block;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    backdrop-filter: blur(4px);
    color: var(--white);
    padding: 3px 10px;
    border-radius: var(--r-pill);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
    display: block;
    width: fit-content;
}
.culture-ref-caption {
    color: rgba(255,255,255,0.9);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35;
}
.culture-ref-hint {
    color: rgba(255,255,255,0.55);
    font-size: 0.75rem;
    margin-top: 2px;
}

/* ============================================
   Scroll-to-Top Button
   ============================================ */
.scroll-top-btn {
    position: fixed;
    bottom: 48px;
    right: 28px;
    width: 44px;
    height: 44px;
    background: var(--blue-400);
    color: var(--white);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transform: translateY(16px) scale(0.85);
    transition: opacity 0.25s ease, transform 0.25s var(--ease), background var(--fast);
    z-index: 998;
    box-shadow: 0 4px 14px rgba(0,101,255,0.35);
    pointer-events: none;
}
.scroll-top-btn.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.scroll-top-btn:hover {
    background: #014098;
    box-shadow: 0 6px 18px rgba(0,101,255,0.45);
    transform: translateY(-2px) scale(1);
}

@media (max-width: 768px) {
    .scroll-top-btn { bottom: 20px; right: 20px; width: 40px; height: 40px; }
}

/* ============================================
   Footer brand link + logo
   ============================================ */
.footer-brand-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    margin-bottom: 16px;
}
.footer-logo-img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    opacity: 0.9;
}
.footer-app-desc {
    font-size: 0.8125rem;
    color: rgba(255,255,255,0.7);  /* WCAG AA */
    margin-bottom: 16px;
    line-height: 1.5;
}
.footer-app-badges {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.app-badge-img-link {
    display: block;
    transition: opacity 0.2s, transform 0.2s var(--ease);
}
.app-badge-img-link:hover {
    opacity: 0.8;
    transform: translateY(-2px);
}
.app-badge-img {
    display: block;
    height: 50px;
    width: auto;
    max-width: 100%;
}

/* ============================================
   Responsive fixes
   ============================================ */

@media (max-width: 768px) {
    .footer-legal { grid-template-columns: 1fr; }
    .footer-app-badges { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 480px) {
    .app-badge-img { height: 44px; width: auto; }
}

/* Reduced motion — skip animations for users who prefer it */
/* ════════════════════════════════════════════════════════════════
   Micro-interactions (v3.36) — all GPU-composited (transform/opacity),
   interaction-triggered or one-shot → zero idle cost, no paint.
   ════════════════════════════════════════════════════════════════ */

/* Tactile press feedback on every button */
.btn:active { transform: translateY(1px) scale(0.98); }

/* Arrow nudge on CTAs with a trailing arrow (scoped so leading icons elsewhere
   — Copy / Save Poster — are not shifted) */
.vc-actions .btn svg,
.hero-actions .btn svg,
.single-hero-actions .btn svg { transition: transform var(--fast) var(--ease); }
.vc-actions .btn:hover svg,
.hero-actions .btn:hover svg,
.single-hero-actions .btn:hover svg { transform: translateX(3px); }

/* Footer social icons lift on hover */
.social-btn:hover { transform: translateY(-3px) scale(1.05); }

/* Keyboard focus rings (a11y) — only on keyboard focus, no animation */
.btn:focus-visible,
.main-nav a:focus-visible,
.vc-title:focus-visible,
.vacancy-card a:focus-visible,
.footer-col a:focus-visible,
.footer-brand-link:focus-visible,
.social-btn:focus-visible,
.app-badge-img-link:focus-visible,
.pagination a:focus-visible,
.testi-nav-btn:focus-visible,
.gallery-tab:focus-visible,
.filter-tab:focus-visible {
    outline: 2px solid var(--blue-500);
    outline-offset: 2px;
    border-radius: 6px;
}

/* One-shot confetti on successful application submit (built in main.js) */
.pintarnya-confetti {
    position: fixed;
    inset: 0;
    z-index: 100001;
    pointer-events: none;
    overflow: hidden;
}
.pintarnya-confetti i {
    position: absolute;
    top: -16px;
    display: block;
    border-radius: 2px;
    opacity: 0;
    will-change: transform, opacity;
    animation-name: pintarnya-confetti-fall;
    animation-timing-function: cubic-bezier(0.4, 0.1, 0.5, 1);
    animation-fill-mode: forwards;
}
@keyframes pintarnya-confetti-fall {
    0%   { transform: translate3d(0, -10px, 0) rotate(0deg);                          opacity: 1; }
    100% { transform: translate3d(var(--drift, 0px), 92vh, 0) rotate(720deg);         opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    [data-animate] { opacity: 1; transform: none; transition: none; }
    .hero-rotate-word { animation: none; }
    .wordSlideIn { animation: none; }
    /* Micro-interactions: suppress motion (keep focus rings for accessibility) */
    .pintarnya-confetti { display: none !important; }
    .btn:active { transform: none; }
    .social-btn:hover { transform: none; }
    .vc-actions .btn:hover svg,
    .hero-actions .btn:hover svg,
    .single-hero-actions .btn:hover svg { transform: none; }
}

/* v3.3.0 — Recruiter features */
.pca-app-unread td { font-weight:600 !important; }
.pca-unread-dot { display:inline-block;width:7px;height:7px;border-radius:50%;background:#2271b1;margin-right:5px;vertical-align:middle;flex-shrink:0; }

/* Application detail page */
.pca-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:20px; }
@media (max-width:960px) { .pca-detail-grid { grid-template-columns:1fr; } }
.pca-detail-card { background:#fff; border:1px solid #dcdcde; border-radius:6px; padding:20px; }
.pca-detail-card h3 { margin:0 0 16px; font-size:14px; font-weight:600; color:#1d2327; border-bottom:1px solid #f0f0f1; padding-bottom:10px; }
.pca-detail-row { display:flex; gap:12px; padding:7px 0; border-bottom:1px solid #f9f9f9; font-size:13px; align-items:baseline; }
.pca-detail-row:last-child { border-bottom:none; }
.pca-detail-label { color:#646970; font-weight:500; min-width:140px; flex-shrink:0; }
.pca-detail-value { color:#1d2327; word-break:break-word; }
.pca-notes-area { width:100%; min-height:120px; border:1px solid #dcdcde; border-radius:4px; padding:10px; font-size:13px; resize:vertical; box-sizing:border-box; }
.pca-notes-area:focus { border-color:#2271b1; outline:none; box-shadow:0 0 0 2px #2271b140; }
.pca-save-notes-btn { margin-top:10px; }
.pca-notes-feedback { display:inline-block; margin-left:10px; font-size:12px; color:#15803d; opacity:0; transition:opacity .3s; }
.pca-notes-feedback.show { opacity:1; }

/* Closed vacancy badge */
.pca-badge-closed { display:inline-block;padding:2px 7px;border-radius:3px;font-size:11px;font-weight:600;background:#fee2e2;color:#b91c1c;margin-left:6px; }

/* Bulk action bar */
.pca-bulk-bar { margin-bottom:10px;background:#f0f6fc;border:1px solid #c5dbf0;border-radius:4px;padding:8px 12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap; }