/* Main — copied from the approved MyNurseDesk design canvas. Regenerate with sync-design.py; do not edit by hand. */

@keyframes hp-cf{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes hp-in{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes hp-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@keyframes hp-sin{from{opacity:0}to{opacity:1}}
@keyframes hppulse{70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
@keyframes hpfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* ===== Home hero v10 ===== */



.hero2{position:relative;isolation:isolate;padding:40px 0 118px;text-align:center;background:linear-gradient(180deg,color-mix(in srgb,var(--blue-soft) 65%,var(--bg)) 0%,var(--bg) 78%)}
.hero2::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(color-mix(in srgb,var(--blue) 14%,transparent) 1px,transparent 1.2px);background-size:22px 22px;-webkit-mask-image:radial-gradient(70% 60% at 50% 0%,#000 30%,transparent 75%);mask-image:radial-gradient(70% 60% at 50% 0%,#000 30%,transparent 75%)}
@keyframes h2pulse{70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.h2-h1{margin:22px 0 0;font:var(--w-head) clamp(34px,5.4vw,60px)/1.08 var(--font-h);letter-spacing:-.008em;color:var(--text);text-wrap:balance}
@media(min-width:1024px){.hero2{padding:64px 0 128px}}
@media(max-width:619px){.hero2{padding:28px 0 110px}.h2-h1{font-size:34px}}

/* ===== Home hero: four target countries ===== */

/* the arrow pinned to the bottom of the first screen */


/* ---- hero, calm version ---- */



.hero2{background:linear-gradient(180deg,#E6F4F1 0%,#F3FAF8 55%,var(--bg) 100%)!important;padding:56px 0 132px!important;overflow:hidden}
:root[data-theme="dark"] .hero2{background:linear-gradient(180deg,#0C2229 0%,#0A1C25 60%,var(--bg) 100%)!important}
.hero2::before{display:none!important}
.hero2::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line)}
.h2-h1{letter-spacing:-.02em}
@keyframes mc-float{0%,100%{translate:0 0}50%{translate:0 -8px}}
@media(max-width:619px){.hero2{padding:32px 0 120px!important}}

/* ---- hero: split layout ---- */

/* the picture on the right */


/* ---- hero: centered, clean (v3) ---- */


/* ---- hero fills the first screen, arrow at the bottom ---- */

/* ---- guide topic chips (home, on the mint band) ---- */


.ttab{background:#E1EEEB}
.ttab:hover{background:#D5E8E4}
:root[data-theme="dark"] .ttab{background:#173240}

/* ---- hero v3: search on top, logo + line in the middle (Indeed style) ---- */

@keyframes nh3-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
/* ---- hero: content sits a bit higher ---- */

/* ---- employers strip ---- */

/* ---- how it works ---- */


.how{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){.how{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}}
/* ---- pay by country ---- */

/* ---- alert box ticks ---- */


/* ---- hero: MrJobDesk layout, MyNurseDesk colours ---- */

/* ---- home: career guides tabs, same as the Career Guides page ---- */


.hb-tabs{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 0 28px;padding:4px 2px 8px}
.hb-tabs::-webkit-scrollbar{display:none}
.hb-tab{flex:none;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 8px 0 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--text);font:500 14px/1 var(--font-b);cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.hb-tab .ico{width:16px;height:16px;color:var(--link);flex:none}
.hb-tab:hover{border-color:color-mix(in srgb,var(--blue) 40%,var(--line))}
.hb-n{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--surface-3);color:var(--muted);font:600 12px/1 var(--font-b)}
.hb-tab:is([aria-selected="true"],[aria-current="page"]){background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600;box-shadow:0 6px 16px -6px color-mix(in srgb,var(--blue) 70%,transparent)}
.hb-tab:is([aria-selected="true"],[aria-current="page"]) .ico{color:#fff}
.hb-tab:is([aria-selected="true"],[aria-current="page"]) .hb-n{background:rgba(255,255,255,.22);color:#fff}
:root[data-theme="dark"] .hb-tab{background:#122833}
:root[data-theme="dark"] .hb-tab:is([aria-selected="true"],[aria-current="page"]){background:var(--blue)}
@media(max-width:899px){.hb-tabs{margin-inline:calc(var(--gutter) * -1);padding:4px var(--gutter) 8px}}
/* ---- room around the See all jobs button ---- */


#jobs .more{margin-top:clamp(28px,3vw,40px)}
/* ---- popular chips: round tags with icons ---- */

/* ---- "Latest jobs" cue: one round pill, stays in the hero (no floating copy) ---- */

/* ---- MyNurseDesk premium homepage hero: adapted from the supplied no-shapes design ---- */

.mnd-home__button--secondary{ color: var(--link) !important; background: var(--surface); border-color: var(--line-strong); }
.mnd-home__button--secondary:hover{ background: var(--blue-soft); border-color: var(--blue); }
@keyframes mnd-home-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mnd-home-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
/* MyNurseDesk refined visual pass: calmer background, cleaner spacing, stronger surfaces */

#jobs.sec{ padding-top: 58px; }
@media (max-width: 900px) {
  #jobs.sec{ padding-top: 48px; }
}
@media (max-width: 560px) {
  #jobs.sec{ padding-top: 42px; }
}


/* Career advice only: play a page-turn when the button is clicked */




.mnd-home__button--secondary .mnd-home__book-icon{
  overflow: visible;
  transform-origin: center;
  transform-style: preserve-3d;
}
.mnd-home__button--secondary.mnd-book-turning .mnd-home__book-icon{
  animation: mnd-book-lift .74s cubic-bezier(.22,.8,.3,1) both;
}
@keyframes mnd-book-lift {
  0%, 100% { transform: translateY(0) rotate(0) scale(1); }
  28% { transform: translateY(-3px) rotate(-4deg) scale(1.08); }
  58% { transform: translateY(-1px) rotate(2deg) scale(1.04); }
}
@keyframes mnd-book-left-turn {
  0%, 100% { transform: perspective(90px) rotateY(0deg) scaleX(1); }
  38% { transform: perspective(90px) rotateY(-8deg) scaleX(.98); }
  62% { transform: perspective(90px) rotateY(4deg) scaleX(1); }
}
@keyframes mnd-book-page-turn {
  0%, 100% { transform: perspective(90px) rotateY(0deg) scaleX(1); }
  22% { transform: perspective(90px) rotateY(-18deg) scaleX(.96); }
  52% { transform: perspective(90px) rotateY(-155deg) scaleX(.66); }
  76% { transform: perspective(90px) rotateY(-22deg) scaleX(.94); }
}


/* ---- hero from the owner's HTML block ---- */




.mnd-hero{box-sizing:border-box;width:100%;min-height:calc(100vh - var(--hdr-h));min-height:calc(100svh - var(--hdr-h));display:flex;flex-direction:column;align-items:center;padding:56px max(20px,env(safe-area-inset-left)) 28px;background:var(--bg);color:var(--text);text-align:center}
@media(min-width:1024px){.mnd-hero{min-height:calc(100vh / var(--z, .9) - var(--hdr-h))}}
.mnd-hero .ico{flex:none}
.mnd-search{width:100%;max-width:1124px;display:flex;align-items:stretch;border:1px solid color-mix(in srgb,var(--blue) 28%,var(--line));border-radius:12px;padding:0;background:var(--surface);box-shadow:none;transition:border-color .2s,box-shadow .2s;text-align:left;overflow:hidden}
.mnd-search:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 14%,transparent)}
.mnd-field{flex:1;position:relative;display:flex;align-items:center;gap:16px;padding:0 28px;min-height:72px;min-width:0}
.mnd-field+.mnd-field{border-left:0}
.mnd-field+.mnd-field::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;background:color-mix(in srgb,var(--blue) 25%,var(--line))}
.mnd-field .ico{width:24px;height:24px;color:var(--blue)}
.mnd-field input{flex:1;min-width:0;border:0;outline:0;background:transparent;box-shadow:none;padding:0;margin:0;font:400 17px/1.2 var(--font-b);color:var(--text)}
.mnd-field input::placeholder{color:var(--muted);opacity:1}
.mnd-field input::-webkit-calendar-picker-indicator{display:none!important}
.mnd-find{flex:none;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--blue);color:#fff;font:700 18px/1 var(--font-b);padding:0 34px;min-height:72px;border-radius:0;white-space:nowrap;text-decoration:none;transition:background .2s}
.mnd-find:hover{background:var(--blue-hover);text-decoration:none}
.mnd-hero h1.mnd-title{margin:48px 0 0;font:800 clamp(34px,5.2vw,64px)/1.1 var(--font-h);letter-spacing:-.02em;color:var(--text);text-wrap:balance}
.mnd-title span{color:var(--link)}
.mnd-sub{margin:20px auto 0;max-width:780px;font-size:clamp(16px,1.6vw,20px);line-height:1.6;color:var(--muted)}
.mnd-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:34px}
.mnd-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:60px;padding:0 34px;border-radius:12px;font:700 18px/1 var(--font-b);text-decoration:none;border:1px solid var(--blue);transition:background .2s,color .2s}
.mnd-btn:hover{text-decoration:none}
.mnd-btn .ico{width:20px;height:20px}
.mnd-btn-solid{background:var(--blue);color:#fff}
.mnd-btn-solid:hover{background:var(--blue-hover);color:#fff}
.mnd-btn-line{background:var(--surface);color:var(--link)}
.mnd-btn-line:hover{background:var(--blue-soft)}
.mnd-trending{margin-top:34px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 22px;font-size:17px;color:var(--muted)}
.mnd-trending a{color:var(--link);text-decoration:none;font-weight:500}
.mnd-trending a:hover{text-decoration:none}
.mnd-latest{margin-top:auto;padding-top:36px;display:flex;flex-direction:column;align-items:center;gap:10px;font-size:15px;color:var(--text);text-decoration:none}
.mnd-latest:hover{text-decoration:none;color:var(--link)}
.mnd-arrow{width:52px;height:52px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px color-mix(in srgb,var(--blue) 30%,transparent);animation:mndBob 2s ease-in-out infinite}
.mnd-arrow .ico{width:22px;height:22px}
@keyframes mndBob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media(prefers-reduced-motion:reduce){.mnd-arrow{animation:none}}
@media(max-width:760px){
  .mnd-hero{padding:32px 16px 24px}
  .mnd-search{flex-direction:column;align-items:stretch;padding:0}
  .mnd-field{min-height:54px;padding:0 14px}
  .mnd-field+.mnd-field::before{left:14px;right:14px;top:0;bottom:auto;width:auto;height:1px}
  .mnd-find{width:100%;margin-top:0;min-height:54px}
  .mnd-hero h1.mnd-title{margin-top:36px}
  .mnd-actions{width:100%;flex-direction:column}
  .mnd-btn{width:100%}
}
/* ---- Career Guides topic buttons: same look as the Career Guides page (29 Oct) ---- */


.hb-tabs{gap:8px!important}
.hb-tab{height:40px!important;display:inline-flex!important;align-items:center;gap:8px!important;padding:0 13px!important;border:1px solid #D8E7E4!important;border-radius:9px!important;background:var(--surface)!important;color:var(--text)!important;font:550 14px/1 var(--font-b)!important;box-shadow:none!important;white-space:nowrap}
.hb-tab .ico{width:16px!important;height:16px!important;color:var(--link)!important}
.hb-tab .hb-n{font-size:11.5px!important;color:var(--muted)!important;background:#F1F7F6!important;border-radius:5px!important;min-width:20px;text-align:center;padding:2px 5px!important;height:auto!important}
.hb-tab:hover{border-color:color-mix(in srgb,var(--blue) 45%,var(--line))!important;color:var(--link)!important}
.hb-tab:is([aria-selected="true"],[aria-current="page"]){background:var(--blue)!important;border-color:var(--blue)!important;color:#fff!important;box-shadow:0 3px 8px rgba(14,124,123,.16)!important}
.hb-tab:is([aria-selected="true"],[aria-current="page"]) .ico{color:#fff!important}
.hb-tab:is([aria-selected="true"],[aria-current="page"]) .hb-n{background:rgba(255,255,255,.18)!important;color:#fff!important}
:root[data-theme="dark"] .hb-tab{border-color:var(--line)!important}:root[data-theme="dark"] .hb-tab .hb-n{background:var(--surface-3)!important}

/* ---- hero: trust row with icon tiles + Career advice button (29 Oct) ---- */



.mnd-trust2{list-style:none;margin:24px auto 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 0;text-align:left}
.mnd-trust2 li{display:flex;align-items:center;gap:12px;margin:0;padding:0 22px}
.mnd-trust2 li+li{border-left:1px solid var(--line)}
.mt2-ic{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:11px;background:var(--blue-soft);border:1px solid color-mix(in srgb,var(--blue) 14%,var(--line));color:var(--link)}
.mt2-ic svg{width:22px;height:22px}
.mnd-trust2 b{display:block;font:600 14.5px/1.3 var(--font-b);color:var(--text)}
.mnd-trust2 small{display:block;margin-top:3px;font-size:13px;line-height:1.4;color:var(--muted)}
.mnd-actions{gap:12px!important;margin-top:28px!important}
.mnd-btn{height:50px!important;padding:0 26px!important;font-size:16px!important;border-radius:10px!important;gap:9px!important}
.mnd-btn .ico{width:18px!important;height:18px!important}
@media(max-width:900px){.mnd-trust2{flex-direction:column;align-items:stretch;max-width:420px}.mnd-trust2 li{padding:10px 0}.mnd-trust2 li+li{border-left:0;border-top:1px solid var(--line)}}
@media(max-width:760px){.mnd-btn{width:100%}}

/* ===== 29 Oct · trending searches as soft mint tags (his picture) ===== */



.mnd-trending{gap:10px 12px!important;margin-top:24px!important;font-size:16px!important}
.mnd-trending>span{margin-right:6px}
.mnd-trending a{display:inline-flex;align-items:center;height:36px;padding:0 15px;border-radius:9px;background:color-mix(in srgb,var(--blue) 9%,var(--surface));color:var(--link)!important;font-weight:500;font-size:15px;text-decoration:none!important;transition:background .2s,color .2s}
.mnd-trending a:hover{background:var(--blue);color:#fff!important}
@media(max-width:760px){.mnd-trending{font-size:14px!important}.mnd-trending>span{width:100%;text-align:center;margin:0}.mnd-trending a{height:34px;font-size:14px;padding:0 12px}}

/* hero background and spacing like his picture */



.mnd-hero{min-height:0!important;background-color:var(--band-1)!important;background-image:radial-gradient(circle,var(--dot) 1.1px,transparent 1.6px),radial-gradient(ellipse at 50% 30%,var(--surface) 0%,var(--band-1) 75%)!important;background-size:24px 24px,100% 100%!important;border-bottom:1px solid var(--line);padding-bottom:36px!important}
.mnd-search{box-shadow:none!important;background:var(--surface)!important}
.mnd-latest{margin-top:40px!important;padding-top:0!important}
.mt2-ic{width:54px!important;height:54px!important;border-radius:12px!important}
.mt2-ic svg{width:26px!important;height:26px!important}
.mnd-trust2 b{font-size:16px!important}
.mnd-trust2 small{font-size:14px!important}
.mnd-trust2 li{padding:0 28px!important;gap:16px!important}
@media(max-width:900px){.mnd-trust2 li{padding:10px 0!important}}
/* ---- 30 Oct: trending searches, solid clean pills ---- */
:root .mnd-trending{gap:8px 10px!important;margin-top:22px!important;font-size:14px!important}
:root .mnd-trending>span{margin-right:4px;font-size:14px;color:var(--muted)}
:root .mnd-trending a{height:32px!important;padding:0 14px!important;border-radius:999px!important;font-size:14px!important;font-weight:500!important;opacity:1!important;animation:none!important;backdrop-filter:none!important;background:var(--surface)!important;border:1px solid color-mix(in srgb,var(--blue) 28%,var(--line))!important;color:var(--text)!important;box-shadow:none!important}
:root .mnd-trending a:hover,:root .mnd-trending a:focus-visible{background:var(--blue)!important;border-color:var(--blue)!important;color:#fff!important}
@media(max-width:760px){:root .mnd-trending>span{width:100%;text-align:center;margin:0 0 2px}:root .mnd-trending a{height:32px!important;font-size:14px!important;padding:0 13px!important}}
/* ---- 30 Oct: trust row like his picture ---- */
:root .mnd-trust2{justify-content:space-between;width:100%;box-sizing:border-box;padding:0 12px;max-width:1080px;margin-left:auto;margin-right:auto;gap:18px 0}
:root .mnd-trust2 li{flex:0 1 auto;justify-content:flex-start;padding:0 24px!important;gap:10px!important}:root .mnd-trust2 li:first-child{padding-left:0!important}:root .mnd-trust2 li:last-child{padding-right:0!important}
:root .mnd-trust2 b,:root .mnd-trust2 small{white-space:nowrap}
:root .mnd-trust2 li+li{border-left:1.5px solid color-mix(in srgb,var(--blue) 22%,var(--surface))!important}
:root .mnd-trust2 .mt2-ic{width:30px!important;height:30px!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important}
:root .mnd-trust2 .mt2-ic svg{width:30px!important;height:30px!important;stroke-width:1.6}
:root .mnd-trust2 b{font-size:13.5px!important;font-weight:500!important;line-height:1.3!important;color:var(--text)}
:root .mnd-trust2 small{font-size:12px!important;font-weight:400!important;margin-top:2px!important}
@media(max-width:1180px){:root .mnd-trust2 b,:root .mnd-trust2 small{white-space:normal}:root .mnd-trust2 li{flex:1 1 0;padding:0 16px!important;gap:12px!important}:root .mnd-trust2 li:first-child{padding-left:0!important}:root .mnd-trust2 li:last-child{padding-right:0!important}:root .mnd-trust2 b{font-size:13.5px!important}:root .mnd-trust2 small{font-size:12px!important}:root .mnd-trust2 .mt2-ic{width:28px!important;height:28px!important}:root .mnd-trust2 .mt2-ic svg{width:28px!important;height:28px!important}}
@media(max-width:900px){:root .mnd-trust2{flex-direction:column;align-items:stretch;max-width:420px}:root .mnd-trust2 li{flex:none;padding-left:0!important;padding-right:0!important;justify-content:flex-start;padding:12px 0!important}:root .mnd-trust2 li+li{border-left:0!important;border-top:1.5px solid color-mix(in srgb,var(--blue) 22%,var(--surface))!important}}

/* ===== 30 Oct · hero background like the site's page headers (mint + soft dots) ===== */
:root .mnd-hero{position:relative;isolation:isolate;overflow:hidden;border-bottom:1px solid var(--line);background:radial-gradient(70% 100% at 50% -25%,color-mix(in srgb,var(--blue) 8%,transparent),transparent 72%),linear-gradient(180deg,var(--band-1),var(--band-2))}
:root .mnd-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(circle,var(--dot) 1.1px,transparent 1.7px);background-size:24px 24px;background-position:center top;-webkit-mask-image:radial-gradient(ellipse 85% 120% at 50% 0%,#000 12%,transparent 76%);mask-image:radial-gradient(ellipse 85% 120% at 50% 0%,#000 12%,transparent 76%)}
