/* =============================================================================
   OTR public site (job board): design system
   -----------------------------------------------------------------------------
   Same palette and type as the admin (otr-ui.css): charcoal, orange accent,
   soft grey canvas, white rounded cards, Plus Jakarta Sans; Russo One stays the
   brand display face for big headlines. Built on Bootstrap 5 (public pages),
   loaded after the legacy inline styles in pages/index.html.twig, which it
   overrides. New markup uses otrp-* classes; body carries .otrp.
   ============================================================================= */

/* 1. Tokens ------------------------------------------------------------------ */
:root {
    --otrp-orange: #f47a1f;
    --otrp-orange-hover: #e06b12;
    --otrp-orange-soft: #fdeedd;
    --otrp-orange-ink: #b45408;
    --otrp-ink: #14161c;
    --otrp-text: #1f2430;
    --otrp-muted: #6b7280;
    --otrp-line: #e5e7ec;
    --otrp-line-strong: #cdd2dc;
    --otrp-bg: #f4f5f8;
    --otrp-surface: #ffffff;
    --otrp-surface-muted: #f8f9fb;
    --otrp-dark: #1b1e25;
    --otrp-dark-2: #121419;
    --otrp-dark-line: rgba(255, 255, 255, 0.09);
    --otrp-dark-text: rgba(240, 242, 247, 0.86);
    --otrp-dark-muted: rgba(240, 242, 247, 0.58);
    --otrp-green: #16a34a;
    --otrp-red: #dc2626;
    --otrp-radius: 16px;
    --otrp-radius-sm: 10px;
    --otrp-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 28px rgba(16, 24, 40, 0.07);
    --otrp-shadow-pop: 0 18px 40px rgba(16, 24, 40, 0.16);
    --otrp-focus: 0 0 0 3px rgba(244, 122, 31, 0.25);
    --otrp-font: "Plus Jakarta Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
    --otrp-display: "Russo One", "Plus Jakarta Sans", sans-serif;
    --otrp-header-h: 72px;
    --otrp-container: 1200px;
}

/* 2. Base -------------------------------------------------------------------- */
/* Same specificity as the legacy `* { font-family: 'Open Sans' }`, loaded later:
   wins over it, still loses to icon classes (.fas, .fab). */
* { font-family: var(--otrp-font); }
body.otrp {
    background: var(--otrp-bg);
    color: var(--otrp-text);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
    min-height: 100vh !important; /* legacy layout JS sets min-height: 100% inline */
}
body.otrp > .otrp-main { flex: 1 0 auto; }
body.otrp h1, body.otrp h2, body.otrp h3, body.otrp h4, body.otrp h5 { color: var(--otrp-ink); font-weight: 800; letter-spacing: -0.015em; }
body.otrp a { color: var(--otrp-orange-ink); text-decoration: none; }
body.otrp a:hover { color: var(--otrp-orange-hover); }
body.otrp ::selection { background: var(--otrp-orange-soft); }
.otrp-container { width: 100%; max-width: var(--otrp-container); margin: 0 auto; padding: 0 24px; }
.russo, .otrp-display { font-family: var(--otrp-display); letter-spacing: 0.01em; font-weight: 400; }
.otrp-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 3. Buttons ----------------------------------------------------------------- */
.otrp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    min-height: 46px; padding: 0.65rem 1.35rem; border-radius: 12px; border: 1px solid transparent;
    font-weight: 700; font-size: 0.95rem; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s;
}
.otrp-btn:focus-visible { outline: none; box-shadow: var(--otrp-focus); }
body.otrp .otrp-btn-primary, body.otrp .btn-yellow, body.otrp .btn-primary { background: var(--otrp-orange); border-color: var(--otrp-orange); color: #fff !important; background-image: none; }
body.otrp .otrp-btn-primary:hover, body.otrp .btn-yellow:hover, body.otrp .btn-primary:hover { background: var(--otrp-orange-hover); border-color: var(--otrp-orange-hover); color: #fff !important; }
body.otrp .otrp-btn-dark { background: var(--otrp-ink); border-color: var(--otrp-ink); color: #fff !important; }
body.otrp .otrp-btn-dark:hover { background: #000; color: #fff !important; }
body.otrp .otrp-btn-outline { background: #fff; border-color: var(--otrp-line-strong); color: var(--otrp-ink) !important; }
body.otrp .otrp-btn-outline:hover { border-color: var(--otrp-ink); background: var(--otrp-surface-muted); }
body.otrp .otrp-btn-ghost { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.22); color: #fff !important; }
body.otrp .otrp-btn-ghost:hover { background: rgba(255, 255, 255, 0.16); }
.otrp-btn-block { width: 100%; }
.otrp-btn-sm { min-height: 38px; padding: 0.45rem 0.95rem; font-size: 0.875rem; border-radius: 10px; }
.otrp-btn-lg { min-height: 54px; padding: 0.8rem 1.75rem; font-size: 1.02rem; }
.otrp-link-arrow { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; color: var(--otrp-orange-ink) !important; }
.otrp-link-arrow:hover { gap: 0.6rem; }
body.otrp .btn-secondary, body.otrp .btn-gray { background: #fff; border: 1px solid var(--otrp-line-strong); color: var(--otrp-ink) !important; border-radius: 12px; font-weight: 700; }
body.otrp .btn-secondary:hover, body.otrp .btn-gray:hover { background: var(--otrp-surface-muted); border-color: var(--otrp-ink); }
body.otrp .btn { border-radius: 12px; font-weight: 700; }
body.otrp .btn:focus, body.otrp .btn-check:focus + .btn { box-shadow: var(--otrp-focus); }

/* 4. Header ------------------------------------------------------------------ */
.otrp-header { position: sticky; top: 0; z-index: 1030; background: var(--otrp-dark-2); border-bottom: 1px solid var(--otrp-dark-line); }
.otrp-header .navbar { min-height: var(--otrp-header-h); padding: 0; }
.otrp-header .navbar-brand { padding: 0; margin-right: 1.5rem; display: inline-flex; align-items: center; }
.otrp-header .navbar-brand img { height: 42px; width: auto; display: block; }
body.otrp .otrp-header .navbar-nav { align-items: center; gap: 0.25rem; }
body.otrp .otrp-header .nav-link {
    position: relative; color: var(--otrp-dark-text) !important; font-weight: 600; font-size: 0.95rem;
    padding: 0.55rem 0.85rem !important; border-radius: 10px; font-family: var(--otrp-font);
}
body.otrp .otrp-header .nav-link:hover { color: #fff !important; background: rgba(255, 255, 255, 0.06); }
body.otrp .otrp-header .nav-link.is-active { color: #fff !important; }
body.otrp .otrp-header .nav-link.is-active::after {
    content: ""; position: absolute; left: 0.85rem; right: 0.85rem; bottom: 0.15rem; height: 2px; border-radius: 2px; background: var(--otrp-orange);
}
body.otrp .otrp-header .otrp-nav-cta { margin-left: 0.5rem; }
body.otrp .otrp-header .otrp-nav-cta .otrp-btn { min-height: 40px; padding: 0.5rem 1.15rem; }
/* The login buttons keep their legacy classes (the login modal JS binds them); undo the legacy !important styling. */
body.otrp .otrp-header .header-login-button, body.otrp .otrp-header .nav-mobile-login-button {
    background: var(--otrp-orange) !important; background-image: none !important; color: #fff !important; border: 1px solid var(--otrp-orange) !important;
    padding: 0.5rem 1.15rem !important; border-radius: 12px; font-size: 0.95rem; font-weight: 700; margin: 0; width: auto; display: inline-flex;
}
body.otrp .otrp-header .header-login-button:hover, body.otrp .otrp-header .nav-mobile-login-button:hover { background: var(--otrp-orange-hover) !important; }
body.otrp .otrp-header .nav-mobile-login-button { padding: 0.4rem 0.9rem !important; font-size: 0.875rem; min-height: 38px; align-items: center; }
.otrp-header .dropdown-menu[data-bs-popper] { left: auto; right: 0; }
.otrp-header .navbar-toggler { border: 1px solid var(--otrp-dark-line); border-radius: 10px; padding: 0.45rem 0.6rem; box-shadow: none; }
.otrp-header .navbar-toggler:focus { box-shadow: var(--otrp-focus); }
.otrp-header .otrp-mobile-login { display: none !important; }
.otrp-header .dropdown-menu {
    background: var(--otrp-dark) !important; border: 1px solid var(--otrp-dark-line); border-radius: 14px; padding: 0.4rem;
    box-shadow: var(--otrp-shadow-pop); min-width: 15rem; margin-top: 0.5rem !important;
}
.otrp-header .dropdown-menu .dropdown-item { color: var(--otrp-dark-text) !important; background: transparent !important; border-radius: 9px; padding: 0.55rem 0.8rem; font-weight: 600; text-align: left; }
.otrp-header .dropdown-menu .dropdown-item:hover { background: rgba(255, 255, 255, 0.07) !important; color: #fff !important; }
.otrp-header .otrp-user-head { padding: 0.6rem 0.8rem 0.75rem; border-bottom: 1px solid var(--otrp-dark-line); margin-bottom: 0.35rem; }
.otrp-header .otrp-user-name { display: block; color: #fff; font-weight: 700; }
.otrp-header .otrp-user-email { display: block; color: var(--otrp-dark-muted); font-size: 0.82rem; }

/* 5. Home hero --------------------------------------------------------------- */
.otrp-hero {
    position: relative; color: #fff; overflow: hidden;
    background:
        linear-gradient(90deg, rgba(10, 11, 14, 0.94) 0%, rgba(10, 11, 14, 0.82) 38%, rgba(10, 11, 14, 0.25) 72%, rgba(10, 11, 14, 0.55) 100%),
        radial-gradient(55% 75% at 82% 38%, rgba(244, 122, 31, 0.55) 0%, rgba(244, 122, 31, 0) 70%),
        var(--otrp-dark-2);
}
.otrp-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 80px; background: linear-gradient(180deg, rgba(18, 20, 25, 0), rgba(18, 20, 25, 0.55)); pointer-events: none; }
.otrp-hero-inner { position: relative; z-index: 1; padding-top: 5.5rem; padding-bottom: 4rem; }
.otrp-hero-title { font-family: var(--otrp-display); font-weight: 400; font-size: clamp(2.3rem, 5.2vw, 4rem); line-height: 1.04; letter-spacing: 0.005em; color: #fff !important; margin: 0 0 1.1rem; max-width: 15ch; }
.otrp-hero-title span { color: var(--otrp-orange); display: block; }
.otrp-hero-sub { font-size: clamp(1.02rem, 1.4vw, 1.2rem); color: var(--otrp-dark-text); max-width: 34rem; margin: 0 0 2.2rem; }
.otrp-search {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 1rem; align-items: end;
    max-width: 62rem; padding: 1.15rem 1.25rem; border-radius: 18px;
    background: rgba(18, 20, 25, 0.62); border: 1px solid rgba(255, 255, 255, 0.16);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.otrp-search-field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
body.otrp .otrp-search-field label { font-size: 0.8rem; font-weight: 700; color: var(--otrp-dark-text); margin: 0; }
.otrp-search-control { position: relative; }
.otrp-search-control > i { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); color: var(--otrp-muted); pointer-events: none; font-size: 0.95rem; }
body.otrp .otrp-search .form-select { height: 50px; padding-left: 2.6rem; border-radius: 12px; border: 1px solid transparent; font-weight: 600; color: var(--otrp-ink); }
.otrp-search .otrp-btn { min-height: 50px; padding: 0.7rem 1.6rem; }

/* 6. Sections ---------------------------------------------------------------- */
.otrp-section { padding: 4rem 0 0; }
.otrp-section:last-child { padding-bottom: 4rem; }
.otrp-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.6rem; flex-wrap: wrap; }
.otrp-section-title { position: relative; margin: 0; font-size: clamp(1.5rem, 2.4vw, 2rem); padding-bottom: 0.55rem; }
.otrp-section-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 4px; border-radius: 4px; background: var(--otrp-orange); }
.otrp-section-sub { margin: 0.6rem 0 0; color: var(--otrp-muted); }

/* 7. Job cards (featured, similar) ----------------------------------------------- */
.otrp-carousel { position: relative; }
.otrp-carousel-track {
    display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 20px) / 4); gap: 20px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 6px 4px 16px; margin: 0 -4px;
    scrollbar-width: none;
}
.otrp-carousel-track::-webkit-scrollbar { display: none; }
.otrp-carousel-track > * { scroll-snap-align: start; }
.otrp-carousel-btn {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border-radius: 999px;
    border: 1px solid var(--otrp-line); background: #fff; color: var(--otrp-ink); box-shadow: var(--otrp-shadow);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity .15s, background .15s;
}
.otrp-carousel-btn:hover { background: var(--otrp-surface-muted); }
.otrp-carousel-btn[disabled] { opacity: 0; pointer-events: none; }
.otrp-carousel-btn.is-prev { left: -22px; }
.otrp-carousel-btn.is-next { right: -22px; }

.otrp-job {
    display: flex; flex-direction: column; gap: 0.8rem; min-width: 0; height: 100%;
    background: var(--otrp-surface); border: 1px solid var(--otrp-line); border-radius: var(--otrp-radius);
    box-shadow: var(--otrp-shadow); padding: 1.2rem 1.25rem 1.25rem; transition: transform .15s, box-shadow .15s;
}
.otrp-job:hover { transform: translateY(-2px); box-shadow: var(--otrp-shadow-pop); }
.otrp-job-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
body.otrp a.otrp-job-title { color: var(--otrp-ink); font-weight: 800; font-size: 1.12rem; line-height: 1.25; }
body.otrp a.otrp-job-title:hover { color: var(--otrp-orange-hover); }
.otrp-job-kind { display: block; color: var(--otrp-muted); font-size: 0.85rem; font-weight: 600; margin-top: 0.15rem; }
.otrp-job-pay { color: var(--otrp-orange-hover); font-weight: 800; font-size: 1.2rem; line-height: 1.25; overflow-wrap: anywhere; }
.otrp-job-pay span { color: var(--otrp-muted); font-weight: 600; font-size: 0.85rem; }
.otrp-job-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; font-size: 0.9rem; color: var(--otrp-text); }
.otrp-job-facts li { display: flex; gap: 0.6rem; align-items: flex-start; min-width: 0; }
.otrp-job-facts li > i { width: 1rem; text-align: center; color: var(--otrp-muted); margin-top: 0.22rem; flex: 0 0 auto; font-size: 0.85rem; }
.otrp-job-facts li > span { min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.otrp-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.otrp-tag { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.65rem; border-radius: 999px; border: 1px solid var(--otrp-line); background: var(--otrp-surface-muted); color: var(--otrp-text); font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.otrp-tag.is-accent { background: var(--otrp-orange-soft); border-color: transparent; color: var(--otrp-orange-ink); }
.otrp-job-foot { margin-top: auto; display: flex; gap: 0.5rem; }
.otrp-job-foot .otrp-btn { flex: 1 1 0; }
.otrp-job-more {
    display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 0.35rem; height: 100%;
    border: 2px dashed var(--otrp-line-strong); border-radius: var(--otrp-radius); padding: 1.5rem; color: var(--otrp-ink) !important; background: rgba(255, 255, 255, 0.6);
}
.otrp-job-more strong { font-size: 2rem; color: var(--otrp-orange-hover); line-height: 1; }
.otrp-job-more:hover { border-color: var(--otrp-orange); }

/* 8. Stats band -------------------------------------------------------------- */
.otrp-stats {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 20px; overflow: hidden;
    background: radial-gradient(60% 140% at 100% 0%, rgba(244, 122, 31, 0.16), rgba(244, 122, 31, 0) 60%), var(--otrp-dark);
    color: #fff; box-shadow: var(--otrp-shadow);
}
.otrp-stat { display: flex; align-items: center; gap: 1.1rem; padding: 1.6rem 1.75rem; min-width: 0; }
.otrp-stat + .otrp-stat { border-left: 1px solid var(--otrp-dark-line); }
.otrp-stat-icon { flex: 0 0 auto; width: 58px; height: 58px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(244, 122, 31, 0.45); color: var(--otrp-orange); font-size: 1.35rem; background: rgba(244, 122, 31, 0.08); }
.otrp-stat-value { display: block; font-family: var(--otrp-display); font-size: 2.3rem; line-height: 1; color: var(--otrp-orange); }
.otrp-stat-label { display: block; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.85rem; margin-top: 0.35rem; }
.otrp-stat-sub { display: block; color: var(--otrp-dark-muted); font-size: 0.85rem; }

/* 9. Carriers call to action ---------------------------------------------------- */
.otrp-cta {
    position: relative; display: grid; grid-template-columns: 1fr; align-items: center; gap: 1.5rem;
    border-radius: 20px; overflow: hidden; color: #fff; padding: 2.4rem 2.75rem;
    background: radial-gradient(70% 120% at 0% 100%, rgba(244, 122, 31, 0.2), rgba(244, 122, 31, 0) 60%), linear-gradient(120deg, #1b1e25 0%, #101216 100%);
    box-shadow: var(--otrp-shadow);
}
.otrp-cta h2 { color: #fff !important; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.15; margin: 0 0 0.8rem; }
.otrp-cta h2 span { color: var(--otrp-orange); }
.otrp-cta p { color: var(--otrp-dark-text); margin: 0 0 1.5rem; max-width: 40rem; }
.otrp-cta-actions { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.otrp-cta-actions .otrp-link-arrow { color: #fff !important; }

/* 10. How it works ----------------------------------------------------------- */
.otrp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; list-style: none; margin: 0; padding: 0; counter-reset: otrp-step; }
.otrp-step { position: relative; display: flex; gap: 1rem; align-items: flex-start; padding: 1.4rem; background: var(--otrp-surface); border: 1px solid var(--otrp-line); border-radius: var(--otrp-radius); }
.otrp-step-icon { position: relative; flex: 0 0 auto; width: 64px; height: 64px; border-radius: 999px; background: var(--otrp-orange-soft); color: var(--otrp-orange-hover); display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; }
.otrp-step-icon::after {
    counter-increment: otrp-step; content: counter(otrp-step); position: absolute; top: -4px; right: -6px; width: 24px; height: 24px; border-radius: 999px;
    background: var(--otrp-ink); color: #fff; font-size: 0.78rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #fff;
}
.otrp-step h3 { font-size: 1.05rem; margin: 0.2rem 0 0.35rem; }
.otrp-step p { margin: 0; color: var(--otrp-muted); font-size: 0.92rem; }

/* 11. Inner page header -------------------------------------------------------- */
.otrp-pagehead {
    position: relative; color: #fff; padding: 2.6rem 0 2.4rem;
    background: radial-gradient(45% 140% at 90% 0%, rgba(244, 122, 31, 0.35), rgba(244, 122, 31, 0) 70%), linear-gradient(90deg, rgba(10, 11, 14, 0.96), rgba(10, 11, 14, 0.78)), var(--otrp-dark-2);
}
.otrp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.55rem; margin: 0 0 0.6rem; padding: 0; list-style: none; font-size: 0.85rem; color: var(--otrp-dark-muted); }
body.otrp .otrp-crumbs a { color: var(--otrp-dark-text); font-weight: 600; }
body.otrp .otrp-crumbs a:hover { color: #fff; }
.otrp-crumbs i { font-size: 0.6rem; opacity: 0.6; }
.otrp-pagehead h1 { color: #fff !important; margin: 0; font-size: clamp(1.7rem, 3.2vw, 2.5rem); font-family: var(--otrp-display); font-weight: 400; letter-spacing: 0.01em; }
.otrp-pagehead p { margin: 0.55rem 0 0; color: var(--otrp-dark-text); max-width: 46rem; }
.otrp-page { padding: 2.5rem 0 4rem; }

/* 12. Jobs list ---------------------------------------------------------------- */
.otrp-list-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 2rem; align-items: start; }
.otrp-filters { position: sticky; top: calc(var(--otrp-header-h) + 1rem); background: var(--otrp-surface); border: 1px solid var(--otrp-line); border-radius: var(--otrp-radius); padding: 1.25rem; box-shadow: var(--otrp-shadow); }
.otrp-filters-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.otrp-filters-head h2 { font-size: 1.05rem; margin: 0; }
.otrp-filter-group { border: 0; margin: 0; padding: 0.85rem 0; border-top: 1px solid var(--otrp-line); }
.otrp-filter-group legend { float: none; width: auto; margin: 0 0 0.45rem; padding: 0; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--otrp-muted); }
.otrp-check { display: flex; align-items: center; gap: 0.6rem; padding: 0.38rem 0.4rem; margin: 0 -0.4rem; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 0.95rem; color: var(--otrp-text); }
.otrp-check:hover { background: var(--otrp-surface-muted); }
body.otrp .otrp-check .form-check-input { margin: 0; width: 1.15rem; height: 1.15rem; flex: 0 0 auto; cursor: pointer; float: none; }
.otrp-results-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.otrp-results-count { color: var(--otrp-muted); font-weight: 600; }
.otrp-results-count strong { color: var(--otrp-ink); }
.otrp-filter-toggle { display: none; }
.otrp-active-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.otrp-jobrow {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.25rem; align-items: center;
    background: var(--otrp-surface); border: 1px solid var(--otrp-line); border-radius: var(--otrp-radius); box-shadow: var(--otrp-shadow);
    padding: 1.3rem 1.4rem; margin-bottom: 1rem; transition: box-shadow .15s, border-color .15s;
}
.otrp-jobrow:hover { box-shadow: var(--otrp-shadow-pop); border-color: var(--otrp-line-strong); }
.otrp-jobrow-main { min-width: 0; }
.otrp-jobrow-top { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.otrp-jobrow .otrp-job-pay { margin: 0.35rem 0 0.75rem; }
.otrp-jobrow-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.55rem 1.5rem; margin: 0.85rem 0 0; }
.otrp-jobrow-facts div { min-width: 0; }
.otrp-jobrow-facts dt { font-size: 0.76rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--otrp-muted); }
.otrp-jobrow-facts dd { margin: 0.1rem 0 0; font-weight: 600; font-size: 0.93rem; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.otrp-jobrow-actions { display: flex; flex-direction: column; gap: 0.55rem; min-width: 170px; }
.otrp-empty { text-align: center; padding: 3rem 1.5rem; background: var(--otrp-surface); border: 1px dashed var(--otrp-line-strong); border-radius: var(--otrp-radius); }
.otrp-empty i { font-size: 2rem; color: var(--otrp-line-strong); }
.otrp-empty h2 { font-size: 1.15rem; margin: 0.75rem 0 0.35rem; }
.otrp-empty p { color: var(--otrp-muted); margin: 0 0 1.2rem; }

body.otrp .pagination { gap: 0.3rem; margin-top: 1.75rem; flex-wrap: wrap; }
body.otrp .pagination .page-link { min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px !important; border: 1px solid transparent !important; background: transparent !important; color: var(--otrp-text) !important; font-weight: 700; font-size: 0.95rem !important; padding: 0 0.7rem; }
body.otrp .pagination .page-link:hover { background: #fff !important; border-color: var(--otrp-line) !important; }
body.otrp .pagination .page-link.text-dark, body.otrp .pagination .page-link.is-current { background: var(--otrp-orange) !important; color: #fff !important; }
body.otrp .pagination .page-link.bg-dark { background: var(--otrp-ink) !important; color: #fff !important; }

/* 13. Job details --------------------------------------------------------------- */
.otrp-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 2rem; align-items: start; }
.otrp-card { background: var(--otrp-surface); border: 1px solid var(--otrp-line); border-radius: var(--otrp-radius); box-shadow: var(--otrp-shadow); padding: 1.5rem 1.6rem; min-width: 0; }
.otrp-card + .otrp-card { margin-top: 1.5rem; }
.otrp-card-title { font-size: 1.15rem; margin: 0 0 1rem; }
.otrp-detail-desc { font-size: 1rem; line-height: 1.7; white-space: pre-line; margin: 0; overflow-wrap: anywhere; }
.otrp-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.75rem; margin: 0; }
.otrp-dl > div { padding: 0.75rem 0; border-bottom: 1px solid var(--otrp-surface-muted); min-width: 0; }
.otrp-dl dt { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--otrp-muted); margin-bottom: 0.2rem; }
.otrp-dl dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; white-space: pre-line; }
.otrp-summary { position: sticky; top: calc(var(--otrp-header-h) + 1rem); }
.otrp-summary .otrp-job-pay { font-size: 1.5rem; margin-bottom: 0.25rem; }
.otrp-summary-facts { list-style: none; padding: 0; margin: 1.1rem 0 1.25rem; display: flex; flex-direction: column; gap: 0.7rem; }
.otrp-summary-facts li { display: flex; gap: 0.75rem; align-items: flex-start; }
.otrp-summary-facts i { width: 1.1rem; text-align: center; color: var(--otrp-orange-hover); margin-top: 0.2rem; }
.otrp-summary-facts span { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.otrp-summary-facts small { display: block; color: var(--otrp-muted); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; }
.otrp-summary-id { margin-top: 0.9rem; color: var(--otrp-muted); font-size: 0.82rem; text-align: center; }
.otrp-apply-bar { display: none; }

/* 14. Forms ------------------------------------------------------------------ */
body.otrp .form-control, body.otrp .form-select {
    min-height: 48px; border: 1px solid var(--otrp-line-strong); border-radius: 12px; background-color: #fff;
    color: var(--otrp-ink); font-size: 1rem; padding: 0.6rem 0.9rem; box-shadow: none;
}
body.otrp textarea.form-control { min-height: 140px; }
body.otrp .form-select { padding-right: 2.4rem; }
body.otrp .form-control:focus, body.otrp .form-select:focus { border-color: var(--otrp-orange); box-shadow: var(--otrp-focus); }
body.otrp .form-control::placeholder { color: #a3a9b6; }
body.otrp .form-control:disabled { background: var(--otrp-surface-muted); color: var(--otrp-muted); cursor: not-allowed; }
body.otrp .form-control.is-invalid, body.otrp .form-select.is-invalid { border-color: var(--otrp-red); }
body.otrp .form-check-input { border-color: var(--otrp-line-strong); }
body.otrp .form-check-input:checked { background-color: var(--otrp-orange); border-color: var(--otrp-orange); }
body.otrp .form-check-input:focus { box-shadow: var(--otrp-focus); border-color: var(--otrp-orange); }
body.otrp label, body.otrp .form-label { font-weight: 700; font-size: 0.9rem; color: var(--otrp-ink); margin-bottom: 0.4rem; }
.otrp-form-card { max-width: 760px; margin: 0 auto; }
.otrp-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.25rem; }
.otrp-form-grid .is-wide { grid-column: 1 / -1; }
.otrp-form-section { margin: 0 0 1.5rem; }
.otrp-form-section-title { display: flex; align-items: center; gap: 0.55rem; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--otrp-ink); margin: 0 0 1rem; }
.otrp-form-section-title i { color: var(--otrp-orange); }
.otrp-consent { display: flex; gap: 0.7rem; align-items: flex-start; font-weight: 500 !important; font-size: 0.92rem !important; color: var(--otrp-text) !important; }
.otrp-consent .form-check-input { margin: 0.15rem 0 0; flex: 0 0 auto; width: 1.15rem; height: 1.15rem; float: none; }
.otrp-form-note { color: var(--otrp-muted); font-size: 0.88rem; margin: 0.75rem 0 0; text-align: center; }
.otrp-apply-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 2rem; align-items: start; max-width: 1100px; margin: 0 auto; }
.otrp-apply-aside { position: sticky; top: calc(var(--otrp-header-h) + 1rem); }
.otrp-apply-steps { list-style: none; counter-reset: otrp-apply; margin: 0 0 1.25rem; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.otrp-apply-steps li { position: relative; padding-left: 2.6rem; display: flex; flex-direction: column; gap: 0.2rem; }
.otrp-apply-steps li::before { counter-increment: otrp-apply; content: counter(otrp-apply); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 999px; background: var(--otrp-orange-soft); color: var(--otrp-orange-hover); font-weight: 800; font-size: 0.85rem; display: inline-flex; align-items: center; justify-content: center; }
.otrp-apply-steps strong { color: var(--otrp-ink); }
.otrp-apply-steps span { color: var(--otrp-muted); font-size: 0.92rem; line-height: 1.55; }
.otrp-result { max-width: 560px; margin: 1.5rem auto 0; text-align: center; }
.otrp-result h2 { font-size: 1.6rem; margin: 1rem 0 0.5rem; }
.otrp-result p { color: var(--otrp-muted); font-size: 1.05rem; margin: 0 0 1.5rem; }
.otrp-result-icon { width: 72px; height: 72px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.8rem; }
.otrp-result-icon.is-success { background: #e7f6ec; color: #15803d; }
.otrp-result-icon.is-error { background: #fdecec; color: #b42318; }
.otrp-confirm { position: fixed; inset: 0; z-index: 1060; align-items: center; justify-content: center; padding: 16px; background: rgba(10, 11, 14, 0.6); }
.otrp-confirm-box { width: 100%; max-width: 420px; background: #fff; border-radius: 20px; padding: 1.75rem; text-align: center; box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.35); }
.otrp-confirm-box h2 { font-size: 1.25rem; margin: 0 0 0.5rem; }
.otrp-confirm-box p { color: var(--otrp-muted); margin: 0; }
.otrp-confirm-box p strong { display: block; color: var(--otrp-ink); font-size: 1.3rem; margin-top: 0.4rem; }
.otrp-confirm-actions { display: flex; gap: 0.65rem; justify-content: center; margin-top: 1.5rem; flex-wrap: wrap; }
.otrp-confirm-actions .otrp-btn { flex: 1 1 140px; }
.otrp-narrow { max-width: 900px; }
.otrp-form-hint { color: var(--otrp-muted); font-size: 0.86rem; margin: 0.6rem 0 0; }
.otrp-form-footer { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--otrp-line); }
.otrp-check-grid { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.15rem 1.25rem; }
.otrp-check-grid legend { float: none; grid-column: 1 / -1; }
.otrp-tabs { display: flex; gap: 0.35rem; padding: 0.3rem; margin: 0 0 1.5rem; background: var(--otrp-surface); border: 1px solid var(--otrp-line); border-radius: 14px; width: fit-content; max-width: 100%; overflow-x: auto; }
body.otrp .otrp-tab { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1rem; border-radius: 10px; font-weight: 700; font-size: 0.93rem; color: var(--otrp-muted); text-decoration: none; white-space: nowrap; }
body.otrp .otrp-tab:hover { color: var(--otrp-ink); background: var(--otrp-surface-muted); }
body.otrp .otrp-tab.is-active { background: var(--otrp-ink); color: #fff; }
.otrp-status { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.22rem 0.7rem; border-radius: 999px; font-size: 0.8rem; font-weight: 800; }
.otrp-status::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.otrp-status.is-progress { background: var(--otrp-orange-soft); color: var(--otrp-orange-ink); }
.otrp-status.is-success { background: #e7f6ec; color: #15803d; }
.otrp-status.is-closed { background: var(--otrp-surface-muted); color: var(--otrp-muted); }
.otrp-application .otrp-tags { margin-top: 0.6rem; }
.otrp-application-meta { margin: 0.6rem 0 0; color: var(--otrp-muted); font-size: 0.85rem; }
.otrp-recruiter { display: flex; gap: 0.85rem; align-items: center; margin-top: 1rem; padding: 0.85rem 1rem; border-radius: 12px; background: var(--otrp-surface-muted); }
.otrp-recruiter-avatar { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 999px; background: var(--otrp-ink); color: #fff; font-weight: 800; font-size: 0.9rem; display: inline-flex; align-items: center; justify-content: center; }
.otrp-recruiter-body { min-width: 0; display: flex; flex-direction: column; }
.otrp-recruiter-body small { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--otrp-muted); }
.otrp-recruiter-body strong { color: var(--otrp-ink); }
.otrp-recruiter-links { display: flex; flex-wrap: wrap; gap: 0.2rem 1.1rem; margin-top: 0.2rem; font-size: 0.92rem; }
body.otrp .otrp-recruiter-links a { color: var(--otrp-orange-hover); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.otrp-list-end { text-align: center; color: var(--otrp-muted); margin: 1.5rem 0 0; }

/* 15. Content pages ----------------------------------------------------------- */
.otrp-prose { max-width: 780px; margin: 0 auto; font-size: 1.04rem; line-height: 1.75; color: var(--otrp-text); }
.otrp-prose h2 { font-size: 1.35rem; margin: 2rem 0 0.75rem; }
.otrp-prose h3 { font-size: 1.1rem; margin: 1.6rem 0 0.5rem; }
.otrp-prose p { margin: 0 0 1.1rem; }
.otrp-prose ul, .otrp-prose ol { padding-left: 1.35rem; margin: 0 0 1.1rem; }
.otrp-prose li + li { margin-top: 0.35rem; }
.otrp-prose .otrp-lead { font-size: 1.2rem; color: var(--otrp-ink); font-weight: 600; line-height: 1.6; }
.otrp-faq { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.75rem; }
.otrp-faq details { background: var(--otrp-surface); border: 1px solid var(--otrp-line); border-radius: 14px; box-shadow: var(--otrp-shadow); }
.otrp-faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.3rem; font-weight: 800; color: var(--otrp-ink); cursor: pointer; font-size: 1.02rem; }
.otrp-faq summary::-webkit-details-marker { display: none; }
.otrp-faq summary::after { content: "+"; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 999px; background: var(--otrp-orange-soft); color: var(--otrp-orange-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 700; transition: transform .2s; }
.otrp-faq details[open] summary::after { content: "\2212"; }
.otrp-faq details > div { padding: 0 1.3rem 1.2rem; color: var(--otrp-text); line-height: 1.7; }
.otrp-help-steps { counter-reset: otrp-help; list-style: none; padding: 0; margin: 0 auto; max-width: 860px; display: flex; flex-direction: column; gap: 1rem; }
.otrp-help-steps > li { position: relative; padding: 1.25rem 1.4rem 1.25rem 4.4rem; background: var(--otrp-surface); border: 1px solid var(--otrp-line); border-radius: 14px; box-shadow: var(--otrp-shadow); line-height: 1.7; }
.otrp-help-steps > li::before { counter-increment: otrp-help; content: counter(otrp-help); position: absolute; left: 1.3rem; top: 1.2rem; width: 36px; height: 36px; border-radius: 999px; background: var(--otrp-orange); color: #fff; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.otrp-help-steps h2 { font-size: 1.1rem; margin: 0.15rem 0 0.4rem; }
.otrp-help-steps p { margin: 0 0 0.5rem; }
.otrp-help-steps ul { margin: 0.25rem 0 0.5rem; padding-left: 1.2rem; }
.otrp-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 2rem; align-items: start; max-width: 1000px; margin: 0 auto; }
.otrp-contact-aside h2 { font-size: 1.5rem; margin: 0 0 0.6rem; }
.otrp-contact-aside p { color: var(--otrp-muted); }
.otrp-contact-list { list-style: none; padding: 0; margin: 1.25rem 0 0; display: flex; flex-direction: column; gap: 0.8rem; }
.otrp-contact-list li { display: flex; gap: 0.75rem; align-items: center; font-weight: 600; }
.otrp-contact-list i { width: 40px; height: 40px; border-radius: 12px; background: var(--otrp-orange-soft); color: var(--otrp-orange-hover); display: inline-flex; align-items: center; justify-content: center; }
body.otrp .otrp-contact-list a, .otrp-contact-list .otrp-inline-link { color: var(--otrp-ink); font-weight: 700; text-decoration: none; }
body.otrp .otrp-contact-list a:hover, .otrp-contact-list .otrp-inline-link:hover { color: var(--otrp-orange-hover); }
.otrp-form-error { margin: 1rem 0 0; padding: 0.7rem 0.9rem; border-radius: 10px; background: #fdecec; color: #a32020; font-weight: 600; font-size: 0.92rem; }
.otrp-form-actions { display: flex; justify-content: flex-end; margin-top: 1.25rem; }
.otrp-inline-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--otrp-orange-hover); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.otrp-note { display: flex; gap: 0.5rem; align-items: baseline; padding: 0.6rem 0.85rem; border-radius: 10px; background: var(--otrp-orange-soft); color: var(--otrp-ink); font-weight: 600; font-size: 0.93rem; }
.otrp-note i { color: var(--otrp-orange-hover); }
.otrp-values { list-style: none; padding: 0; margin: 2rem auto; max-width: 1000px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.otrp-values li { background: var(--otrp-surface); border: 1px solid var(--otrp-line); border-radius: var(--otrp-radius); box-shadow: var(--otrp-shadow); padding: 1.4rem; }
.otrp-values-icon { width: 48px; height: 48px; border-radius: 14px; background: var(--otrp-orange-soft); color: var(--otrp-orange-hover); display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.otrp-values h2 { font-size: 1.05rem; margin: 0.9rem 0 0.4rem; }
.otrp-values p { margin: 0; color: var(--otrp-muted); font-size: 0.94rem; line-height: 1.65; }
.otrp-page-cta {
    max-width: 1000px; margin: 2.75rem auto 0; padding: 1.6rem 1.75rem; border-radius: var(--otrp-radius); color: #fff;
    display: flex; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; flex-wrap: wrap;
    background: radial-gradient(60% 140% at 100% 0%, rgba(244, 122, 31, 0.28), rgba(244, 122, 31, 0) 70%), linear-gradient(120deg, #1b1e25 0%, #101216 100%);
}
.otrp-page-cta > div:first-child { flex: 1 1 320px; }
.otrp-page-cta h2 { color: #fff !important; font-size: 1.3rem; margin: 0 0 0.3rem; }
.otrp-page-cta p { margin: 0; color: var(--otrp-dark-text); }
.otrp-page-cta-actions { display: flex; gap: 0.65rem; flex-wrap: wrap; }
body.otrp .otrp-page-cta .otrp-btn-outline { background: transparent; color: #fff !important; border-color: rgba(255, 255, 255, 0.35); }
body.otrp .otrp-page-cta .otrp-btn-outline:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }
.otrp-legal h2 { font-size: 1.2rem; padding-top: 1.25rem; border-top: 1px solid var(--otrp-line); }
.otrp-legal h2:first-of-type { border-top: 0; padding-top: 0; }

/* 16. Footer ------------------------------------------------------------------ */
body.otrp footer.otrp-footer { background: var(--otrp-dark-2) !important; background-image: none !important; color: var(--otrp-dark-text); margin-top: 0; padding: 3.5rem 0 0; flex-shrink: 0; }
.otrp-footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 0.8fr)) minmax(0, 1.4fr); gap: 2rem; }
.otrp-footer-brand > img { height: 44px; width: auto; display: block; }
.otrp-socials img { width: 14px; height: 15px; display: block; }
.otrp-footer-brand p { margin: 1rem 0 1.1rem; color: var(--otrp-dark-muted); font-size: 0.92rem; max-width: 18rem; }
.otrp-socials { display: flex; gap: 0.5rem; }
body.otrp .otrp-socials a { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--otrp-dark-line); display: inline-flex; align-items: center; justify-content: center; color: var(--otrp-dark-text); }
body.otrp .otrp-socials a:hover { color: #fff; border-color: var(--otrp-orange); background: rgba(244, 122, 31, 0.12); }
.otrp-footer h2 { color: #fff !important; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; margin: 0.3rem 0 1rem; }
.otrp-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
body.otrp .otrp-footer ul a, body.otrp .otrp-footer ul button { color: var(--otrp-dark-text); font-size: 0.93rem; font-weight: 500; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
body.otrp .otrp-footer ul a:hover, body.otrp .otrp-footer ul button:hover { color: var(--otrp-orange); }
.otrp-footer-cta p { color: var(--otrp-dark-muted); font-size: 0.92rem; margin: 0 0 1rem; }
.otrp-footer-bottom { margin-top: 2.75rem; padding: 1.25rem 0 1.5rem; border-top: 1px solid var(--otrp-dark-line); color: var(--otrp-dark-muted); font-size: 0.85rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* 17. Modals ----------------------------------------------------------------- */
body.otrp .modal-content { border: 0; border-radius: 20px; box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.35); overflow: hidden; }
body.otrp .modal-header { border-bottom: 1px solid var(--otrp-line); padding: 1.2rem 1.5rem; }
body.otrp .modal-title { font-weight: 800; color: var(--otrp-ink); }
body.otrp .modal-body { padding: 1.4rem 1.5rem; }
body.otrp .modal-footer { border-top: 1px solid var(--otrp-line); padding: 1rem 1.5rem; gap: 0.5rem; }
body.otrp .modal-footer > * { margin: 0; }
body.otrp .modal-backdrop.show { opacity: 0.6; }
body.otrp #loginModal .nav-pills .nav-link.active, body.otrp #loginModal .nav-pills .show > .nav-link { background: var(--otrp-orange) !important; color: #fff !important; }
body.otrp .alert { border-radius: 12px; }

/* 18. Responsive ------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .otrp-carousel-track { grid-auto-columns: calc((100% - 2 * 20px) / 3); }
    .otrp-footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .otrp-footer-brand, .otrp-footer-cta { grid-column: span 2; }
}
@media (max-width: 991.98px) {
    .otrp-search { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .otrp-search .otrp-btn { grid-column: 1 / -1; }
    .otrp-carousel-track { grid-auto-columns: calc((100% - 20px) / 2); }
    .otrp-carousel-btn.is-prev { left: -10px; }
    .otrp-carousel-btn.is-next { right: -10px; }
    .otrp-stats { grid-template-columns: 1fr; }
    .otrp-stat + .otrp-stat { border-left: 0; border-top: 1px solid var(--otrp-dark-line); }
    .otrp-cta { padding: 2rem 1.6rem; }
    .otrp-steps { grid-template-columns: 1fr; }
    .otrp-list-layout { grid-template-columns: 1fr; }
    .otrp-filters { display: none; position: static; }
    .otrp-filter-toggle { display: inline-flex; }
    .otrp-detail-layout { grid-template-columns: 1fr; }
    .otrp-summary { position: static; order: -1; }
    .otrp-contact { grid-template-columns: 1fr; }
    .otrp-values { grid-template-columns: 1fr; }
    .otrp-apply-layout { grid-template-columns: 1fr; }
    .otrp-apply-aside { position: static; }
    body.otrp .otrp-header .navbar-collapse { padding: 0.5rem 0 1rem; }
    body.otrp .otrp-header .navbar-nav { align-items: stretch; }
    body.otrp .otrp-header .nav-link.is-active::after { left: 0; right: auto; top: 0.55rem; bottom: 0.55rem; width: 3px; height: auto; }
    body.otrp .otrp-header .otrp-nav-cta { margin: 0.5rem 0 0; }
    body.otrp .otrp-header .otrp-nav-cta .otrp-btn { width: 100%; }
    .otrp-header .otrp-mobile-login { display: inline-flex !important; margin-left: auto; margin-right: 0.5rem; }
    .otrp-filters.is-open { display: block; margin-bottom: 1.25rem; }
}
@media (max-width: 767.98px) {
    :root { --otrp-header-h: 64px; }
    .otrp-container { padding: 0 16px; }
    .otrp-header .navbar-brand img { height: 36px; }
    .otrp-hero-inner { padding-top: 2.5rem; padding-bottom: 2.25rem; }
    .otrp-hero-sub { margin-bottom: 1.5rem; }
    .otrp-search { grid-template-columns: 1fr; padding: 1rem; gap: 0.75rem; }
    .otrp-section { padding-top: 2.75rem; }
    .otrp-section:last-child { padding-bottom: 2.75rem; }
    .otrp-carousel-track { grid-auto-columns: 84%; gap: 14px; }
    .otrp-carousel-btn { display: none; }
    .otrp-stat { padding: 1.2rem 1.25rem; }
    .otrp-stat-value { font-size: 2rem; }
    .otrp-pagehead { padding: 1.6rem 0 1.5rem; }
    .otrp-page { padding: 1.5rem 0 3rem; }
    .otrp-jobrow { grid-template-columns: 1fr; padding: 1.1rem; }
    .otrp-jobrow-actions { flex-direction: row; min-width: 0; }
    .otrp-jobrow-actions .otrp-btn { flex: 1 1 0; }
    .otrp-dl { grid-template-columns: 1fr; }
    .otrp-card { padding: 1.2rem 1.1rem; }
    .otrp-form-grid { grid-template-columns: 1fr; }
    body.otrp .form-control, body.otrp .form-select { font-size: 16px; }
    .otrp-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.25rem; }
    .otrp-footer-brand, .otrp-footer-cta { grid-column: 1 / -1; }
    .otrp-help-steps > li { padding: 1.1rem 1.1rem 1.1rem 3.8rem; }
    .otrp-help-steps > li::before { left: 1rem; }
    .otrp-page-cta { padding: 1.3rem 1.2rem; }
    .otrp-page-cta-actions, .otrp-page-cta-actions .otrp-btn { width: 100%; }
    .otrp-form-actions .otrp-btn { width: 100%; }
    .otrp-check-grid { grid-template-columns: 1fr; }
    .otrp-form-footer .otrp-btn { flex: 1 1 100%; }
    .otrp-form-footer > span:empty { display: none; }
    /* Sticky apply bar on job details */
    .otrp-apply-bar {
        display: flex; gap: 0.75rem; align-items: center; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1020;
        padding: 0.75rem 16px calc(0.75rem + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--otrp-line); box-shadow: 0 -10px 30px rgba(16, 24, 40, 0.1);
    }
    .otrp-apply-bar .otrp-job-pay { font-size: 1rem; flex: 1 1 auto; min-width: 0; }
    .otrp-apply-bar .otrp-btn { flex: 0 0 auto; }
    body.otrp.has-apply-bar { padding-bottom: 84px; }
}
@media (prefers-reduced-motion: reduce) {
    .otrp-carousel-track { scroll-behavior: auto; }
    .otrp-job, .otrp-btn { transition: none; }
}