/* Jobbyen city: the approved editorial homepage, using real HTML and search. */
.j5.j5-home, .j5.j5-header-surface, .j5.j5-footer-surface {
    --green: #34745a;
    --green-dark: #34745a;
    --green-deeper: #285b46;
    --green-pale: #e5eee8;
    --jp-green: #34745a;
    --jp-forest: #34745a;
    --jp-deep: #285b46;
    --jp-soft: #e5eee8;
    --jp-paper: #f6f5ef;
    --paper: #f6f5ef;
}
.j5.j5-home { background: #f6f5ef; }
.j5.j5-header-surface { --header-height: 88px; --jp-header: 88px; }
.j5.j5-header-surface .site-header { background: #f6f5ef; border-bottom: 1px solid #d8ded6; }
.j5.j5-header-surface .header-inner { min-height: 88px; }
.j5.j5-header-surface .brand img { width: 176px; }
.j5.j5-header-surface .desktop-nav { gap: clamp(1rem,2.5vw,2.5rem); }
.j5.j5-header-surface .desktop-nav a { min-height: 44px; display: inline-flex; align-items: center; }
.j5.j5-header-surface .desktop-nav a:hover { color: #34745a; }
.j5.j5-header-surface .button { background: #34745a; border-color: #34745a; border-radius: 8px; }
.j5.j5-header-surface .button:hover { background: #285b46; border-color: #285b46; }
.j5.j5-home .city-hero { display: block; position: relative; padding: 48px 0 0; background: #f6f5ef; }
.j5.j5-home .city-hero-copy { position: relative; z-index: 1; width: min(100% - 48px,1160px); margin: 0 auto; text-align: center; }
.j5.j5-home .city-eyebrow { margin: 0 0 22px; color: #34745a; font-size: 11px; line-height: 1.6; letter-spacing: .22em; font-weight: 700; text-transform: uppercase; }
.j5.j5-home .city-title { margin: 0; padding: 0; color: #101513; font-family: Georgia, "Times New Roman", serif; font-size: clamp(68px,8.9vw,132px); line-height: .98; letter-spacing: -.055em; font-weight: 700; text-align: center; text-transform: none; overflow-wrap: normal; }
.j5.j5-home .city-title span { display: block; }
.j5.j5-home .city-title-accent { color: #34745a; }
.j5.j5-home .city-intro { margin: 26px auto 0; max-width: 42ch; color: #4b5260; font-size: clamp(18px,1.75vw,24px); line-height: 1.5; font-weight: 400; }
.j5.j5-home .city-search { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 76px; margin: 32px 0 0; padding: 6px 6px 6px 24px; border: 1px solid #c5d2c9; border-radius: 10px; background: #fff; box-shadow: none; }
.j5.j5-home .city-search:focus-within { border-color: #34745a; box-shadow: 0 0 0 3px #34745a1a; }
.j5.j5-home .city-search-icon { display: block; flex: 0 0 25px; width: 25px; height: 25px; fill: none; stroke: #171d1a; stroke-width: 1.7; stroke-linecap: round; }
.j5.j5-home .city-query { flex: 1 1 0%; min-width: 0; width: 100%; min-height: 60px; margin: 0; padding: 10px 0; border: 0; border-radius: 0; box-shadow: none; outline: none; color: #171d1a; background: transparent; font: inherit; font-size: 18px; line-height: 1.5; }
.j5.j5-home .city-query::placeholder { opacity: 1; color: #666f69; }
.j5.j5-home .city-query:focus { border: 0; box-shadow: none; outline: none; }
.j5.j5-home .city-search-submit { display: inline-flex; flex: 0 0 198px; align-items: center; justify-content: center; gap: 22px; min-height: 62px; margin: 0; padding: 14px 24px; border: 1px solid #34745a; border-radius: 7px; color: #fff; background: #34745a; font-size: 17px; line-height: 1.4; font-weight: 500; cursor: pointer; }
.j5.j5-home .city-search-submit:hover { background: #285b46; border-color: #285b46; }
.j5.j5-home .city-search-submit:focus-visible { outline: 3px solid #285b46; outline-offset: 3px; }
.j5.j5-home .city-search-submit:disabled { opacity: .75; cursor: progress; }
.j5.j5-home .city-search-submit [aria-hidden] { font-size: 25px; line-height: 1; }
.j5.j5-home .city-search-help { margin: 11px 0 0; color: #647068; font-size: 13px; line-height: 1.7; }
.j5.j5-home .city-search-error { margin: 12px 0 0; padding: 12px 16px; border: 1px solid #d8b4a9; border-radius: 6px; color: #853a29; background: #fff8f5; font-size: 15px; line-height: 1.6; text-align: left; }
.j5.j5-home .city-search-status { margin: 8px 0 0; color: #34745a; font-size: 13px; }
.j5.j5-home .city-panorama { position: relative; z-index: 0; width: 100%; margin: clamp(-145px,-9vw,-55px) 0 0; pointer-events: none; overflow: hidden; }
.j5.j5-home .city-panorama picture { display: block; width: 100%; }
.j5.j5-home .city-panorama img { display: block; width: 100%; height: auto; margin: 0; mix-blend-mode: multiply; mask-image: linear-gradient(to bottom,transparent 0%,#000 25%,#000 91%,transparent 100%); }
.j5.j5-home .city-categories { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 12px 28px; min-height: 86px; margin-top: 0; padding-top: 16px; padding-bottom: 16px; border-top: 1px solid #d3ddd4; }
.j5.j5-home .city-categories-label { color: #34745a; font-size: 11px; line-height: 1.6; letter-spacing: .1em; font-weight: 700; text-transform: uppercase; }
.j5.j5-home .city-categories button { min-height: 44px; max-width: 100%; padding: 8px 0; border: 0; background: transparent; color: #4b5260; font-size: 14px; line-height: 1.4; text-align: left; cursor: pointer; }
.j5.j5-home .city-categories button:hover { color: #34745a; text-decoration: underline; text-underline-offset: 5px; }
.j5.j5-home .city-categories .arrow-link { display: inline-flex; align-items: center; gap: 14px; color: #34745a; font-size: 14px; white-space: nowrap; }
@media (prefers-reduced-motion:no-preference) {
    .j5.j5-home .city-search, .j5.j5-home .city-search-submit { transition: background-color .18s ease,border-color .18s ease,box-shadow .18s ease; }
    .j5.j5-home .city-search-submit [aria-hidden] { transition: transform .18s ease; }
    .j5.j5-home .city-search-submit:hover [aria-hidden] { transform: translateX(4px); }
}
@media (min-width:1700px) { .j5.j5-home .city-panorama { max-width: 1920px; margin-left: auto; margin-right: auto; } }
@media (max-width:1100px) {
    .j5.j5-header-surface { --header-height: 76px; --jp-header: 76px; }
    .j5.j5-header-surface .header-inner { min-height: 76px; }
    .j5.j5-header-surface .brand img { width: 155px; }
    .j5.j5-home .city-hero { padding-top: 40px; }
    .j5.j5-home .city-title { font-size: clamp(64px,9.5vw,100px); }
    .j5.j5-home .city-categories { gap: 8px 22px; }
}
@media (max-width:600px) {
    .j5.j5-header-surface { --header-height: 70px; --jp-header: 70px; }
    .j5.j5-header-surface .header-inner { min-height: 70px; }
    .j5.j5-header-surface .brand img { width: 142px; }
    .j5.j5-home .city-hero { padding-top: 35px; }
    .j5.j5-home .city-hero-copy { width: calc(100% - 32px); }
    .j5.j5-home .city-eyebrow { max-width: 29ch; margin: 0 auto 22px; font-size: 9px; letter-spacing: .16em; }
    .j5.j5-home .city-title { font-size: clamp(42px,11.2vw,67px); line-height: 1.05; letter-spacing: -.055em; }
    .j5.j5-home .city-intro { max-width: 28ch; margin-top: 20px; font-size: 16px; line-height: 1.6; }
    .j5.j5-home .city-search { gap: 9px; min-height: 62px; margin-top: 25px; padding: 5px 5px 5px 13px; border-radius: 8px; }
    .j5.j5-home .city-search-icon { flex-basis: 20px; width: 20px; height: 20px; }
    .j5.j5-home .city-query { min-height: 50px; font-size: 16px; }
    .j5.j5-home .city-search-submit { flex: 0 0 66px; min-height: 50px; padding: 10px 12px; gap: 0; font-size: 15px; border-radius: 5px; }
    .j5.j5-home .city-search-submit .city-submit-extra, .j5.j5-home .city-search-submit [aria-hidden] { display: none; }
    .j5.j5-home .city-search-help { max-width: 32ch; margin: 10px auto 0; font-size: 12px; line-height: 1.6; }
    .j5.j5-home .city-panorama { width: 100%; margin-top: -28px; }
    .j5.j5-home .city-panorama img { width: 760px; min-width: 760px; max-width: none; height: auto; position: relative; left: 50%; transform: translateX(-50%); }
    .j5.j5-home .city-categories { justify-content: flex-start; gap: 5px 20px; padding-top: 19px; padding-bottom: 19px; }
    .j5.j5-home .city-categories-label { flex-basis: 100%; font-size: 10px; margin-bottom: 4px; }
    .j5.j5-home .city-categories button, .j5.j5-home .city-categories .arrow-link { font-size: 13px; }
}
@media (prefers-reduced-motion:reduce) {
    .j5.j5-home .city-hero *, .j5.j5-home .city-hero *::before, .j5.j5-home .city-hero *::after { animation: none !important; transition: none !important; }
}

/* City heading: reset the previous split hero's narrow h1 and span colours. */
.j5.j5-home .city-title {
    width: 100%;
    max-width: none;
    margin-inline: auto;
}
.j5.j5-home .city-title > span { color: inherit; }
.j5.j5-home .city-title > .city-title-accent { color: #34745a; }
/* The shared typography rule targets both h1 and spans through #v5-main. */
.v5-document #v5-main .city-title,
.v5-document #v5-main .city-title > span {
    -webkit-hyphens: none;
    hyphens: none;
}